Bootstrap Modal with button type="submit" - button

<button type='submit'
value='".$complainListArray['CompID']."'
class='btn btn-default'
style='width:95px;float:right'
data-toggle='modal'
data-target='#myModal'
name='button_update_sentiment'
id='button_update_sentiment'
>Update</button>
I got this problem, when type='submit', then the Bootstrap Modal is not showing.
It works when I use type='button', but then I can't carry the value of the button.
Need help. Thanks

Related

Angular: "btn" class disappear after toggled the button

I have an issue with the class changing button. I use the [ngClass] directive to change the button style ( Bootstrap classes). But when I click the button, the "btn" class disappears from the code, so instead get 'btn-success btn', I get only 'btn-success'. The button also takes a part in showing and hiding a paragraph with random text.
This is TS code:
<button type="button"
(click)="onClick($event)"
[ngClass]="{'btn-success btn': showPass, 'btn-danger btn': !showPass }">{{status}}
</button>
<p [hidden]="showPass" >Secret password</p>```
and this is HTML:
onClick(event: Event) {
this.showPass=!this.showPass;
this.status = this.showPass ? "Show me!" : "Hide me!"
console.log(this.showPass)
If the btn class is always going to be there, you can just do this instead:
<button type="button"
(click)="onClick($event)"
class="btn"
[ngClass]="{'btn-success': showPass, 'btn-danger': !showPass }">{{status}}
</button>

why is this button to the right of this other button, why not to the left?

In this JSBin: http://jsbin.com/fitiha/10/edit?js,output
Why is the "Tweet button" to the right of the "Add Photo" button. Per the code below, I believe it should be to the left?
<button className="btn btn-primary pull-right"
disabled={this.state.text.length === 0 && !this.state.photoAdded}>Tweet
</button>
<button className="btn btn-default pull-right"
onClick={this.togglePhoto}>
{this.state.photoAdded ? "✓ Photo Added" : "Add Photo" }
</button>
You are using the pull-right class which is essentially float:right and that's how it works.
It stacks the elements in inverted order of their occurence.
Since, Tweet occured before Add Photo, it got floated to the right, and then add photo followed.
You could read up the CSS Spec here:
http://www.w3.org/TR/CSS2/visuren.html#floats
Or this SO answer for more info on how float works.

How to add glyphicon to xPage bootstrap dropdownbutton?

Here is my dropdownbutton:
<xp_1:dropDownButton id="dropDownButton1">
<xp_1:this.treeNodes>
<xp_1:basicContainerNode styleClass="btn-primary" label="Tools">
<xp_1:this.children>
<xp_1:basicLeafNode label="Edit">
</xp_1:basicLeafNode>
<xp_1:basicLeafNode label="New">
</xp_1:basicLeafNode>
<xp_1:basicLeafNode label="Home">
</xp_1:basicLeafNode>
</xp_1:this.children>
</xp_1:basicContainerNode>
</xp_1:this.treeNodes>
</xp_1:dropDownButton>
How to add glyphicon to the main dropdown button?
Adding a span somewhere inside just doesn't work like for core button:
<xp:button id="button2" styleClass="btn btn-success" value="Save" title="Save">
<span class="glyphicon glyphicon-floppy-disk"></span>
</xp:button>
Once you add code in your button, i.e. an eventHandler, you can add the icon there. Here is a button I have that includes a Font Awesome icon, but Glyphicons work the same way. Once you create the button and actions, go into the source code and add the icon as below:
<xp:button
value="Submit"
id="btnSave"
styleClass="btn btn-primary"
>
<i
class="fa fa-check"
aria-hidden="true"
></i>
 <xp:eventHandler
event="onclick"
submit="true"
refreshMode="complete"
>
<xp:this.action>
<xp:actionGroup>
<xp:saveDocument
var="currentDocument"
></xp:saveDocument>
<xp:openPage
name="#{sessionScope.lastPageName}"
></xp:openPage>
</xp:actionGroup>
</xp:this.action>
</xp:eventHandler>
</xp:button>
UPDATE
I did some tests, and while you can't add the icon the way we both want to, you can use CSS. I used a page with one dropdown button, and added CSS :before to add the icon within the button:
button::before {
font-family: "Glyphicons Halflings";
content: "\e172";
}
You may have to play with the CSS a little but hopefully, this can help.

How to add an icon to the WooCommerce “Proceed to Checkout” & "Update Cart" buttons located on the cart page?

I'm trying to add a "fa-chevron-circle-right" icon to the "Proceed to Checkout" button and add another icon to the "Update Cart" button.
I've tried changing this
<input type="submit" class="checkout-button button alt" name="proceed" value="<?php _e( 'Proceed to Checkout →', 'woocommerce' ); ?>" />
to this
<button type="submit" class="checkout-button button btn-primary alt" name="proceed"><?php _e( 'Proceed to Checkout', 'woocommerce' ); ?> <i class="fa fa-chevron-circle-right"></i></button>
but for some reason the button no longer works. When you click the "Proceed to Checkout" using the button <button> tag it does not proceed to the checkout page like it does when using the default <input> button.
Using CSS3 :after or :before doesn't work on <input> tags either.
I've also tried adding a jQuery form submit trigger to my custom buttons which is not work. At this point the only hacked solution that I can think of is to visually hide the <input> buttons and trigger their submission via jQuery.
I had this same type of issue a while ago and here it's what I did to solve the problem.
Add a class submit to your button
<button type="submit" class="checkout-button button btn-primary alt submit" name="proceed"><?php _e( 'Proceed to Checkout', 'woocommerce' ); ?> <i class="fa fa-chevron-circle-right"></i></button>
And on the JavaScript file this part to submit (better to be include on the footer of the page before the </body>)
<script type="text/javascript">
$(".submit").click(function(){ $(this).closest("form").submit(); });
</script>
Why not to add background image instead of editing its core file like you can see below
.woocommerce button.checkout-button {
background-image: images/pathtoimages.png;
}

ASP.NET MVC3 Postback brings up new TAB

net MVC View. At the end of the view I have the following Buttons
<div style="clear: both; padding-top: 40px; width: 720px;">
<button name="buttonHelp" value="Help" onclick="window.open('Help.htm',target='_blank');return false;">
Help</button>
<span style="float: right;">
<button name="button" value="Reset">
Reset</button>
<button name="button" value="Save">
Save</button>
</span>
</div>
The Save and Reset causes a postback and the screen gets refreshed properly.
If I click the help button it opens the Help screen in s new TAB which is what I require.
Now after using the help screen I press Save/Reset it always open a new window which I dont want and I find puzzling.
Any idea how to solve this ?
The following change solved the problem. the help still opens in a new tab as I wanted
> <button name="buttonHelp" value="Help"
> onclick="window.open('Help.htm');return false;">
> Help</button>
Check to ensure that the target isn't staying "_blank" after you click Help and that the target of the form is _self.

Resources