I know I shouldn't be using "onclick" with jQuery. The reason I am using it anyway is that there is pre-existing code where a button has an onclick attribute that opens a pop-up window. I'm creating a new button inside of a jquery dialog that needs to open the same target. It's just easier (I think?) to copy the original button's onclick attribute rather than trying to get the URL out of it and using a better handler.
$insert = $(data).find('.button.compare:first'); // find the button in $(data). This already works.
$("#dialog").html('<button type="button" title="View List" class="button compare" onclick="' + $insert.clone().prop('onclick') + '")><span>View List</span></button>'); // get the onclick property - seems to work but button does nothing
$insert is a copy of the button. I actually insert that copy later in the page and it works fine there. But the new button I create inside the jQuery-ui dialog does not work. It doesn't open a new window.
EDIT:
I just noticed that there is a difference between the original onclick attribute and the copied one. The original looks something like:
`onclick="popwin(....)"
And the copy adds some stuff to look like:
onclick="function onclick(event) { popwin(...)"
Why is this?
I managed to solve this myself by changing
$insert.clone().prop('onclick')
to
$insert.clone().attr('onclick')
Though I'm not sure why there is a difference here.
Related
I have an Angular JS app with a bootstrap ui modal dialogue hosting a simple edit form.
The form can be for a new "thing" or a populated "thing".
I find that when I cancel out of the modal with the form populated, submit is being called.
Any help appreciated.
Plunkr here... http://plnkr.co/edit/XhQCqlGUfcmQOhqLDeXR?p=preview
I forked your plunk and got it working here: http://plnkr.co/edit/jgg5pDQOH46XgrbW3Mvh?p=preview I think the cancel button was participating in the form submit event since it was inside the form element. Moving it outside of the form seems to have fixed the problem. I also set up the submit event to fire the modalInstance close event and the cancel event to fire the modalInstance dismiss event. This gives you the opportunity to handle things appropriately in the parent controller (ModalDemoCtrl).
EDIT
You could also stop the click event from propagating in the cancel event and still use the save as an input element inside the form tag. See this plunk for example: http://plnkr.co/edit/A81KkUUQEL3IBbOSnHQb?p=preview
I was having a similar problem. My problem was that when I clicked in the button to open the modal, my form was submited. I was using a "button" html tag, without specifying the "type" attribute. So, I found your problem and I went to the W3C documentation. I found that:
Tip: Always specify the type attribute for a button element. Different browsers use different default types for the button element. (http://www.w3schools.com/tags/tag_button.asp)
I wasn't defining the type of my button, so the default type of my browser was submit. I defined the type to "button" and everything is ok now.
I have a jQuery mobile button hooked up to an ajax POST. If the POST fails, the jQuery mobile button stays pressed instead of ``popping up". Any ideas?
It can be done easily.
Here a jsFiddle example made for one of my previous answers: http://jsfiddle.net/3PhKZ/7/
If you take a look there's this line of code:
$.mobile.activePage.find('.ui-btn-active').removeClass('ui-btn-active ui-focus');
It will try to find pressed button on a current active page, if it succeed it will remove 2 classes responsible for a button pressed state. Unfortunately pure CSS solution is impossible here. You can test this example, just comment top line and see what will happen.
One last thing selector $.mobile.activePage can only be used during the pagebeforeshow, pageshow, pagebeforechange, pagechange, pagebeforehide and pagehide page event so takes this into account.
In case you cant use this selector just replace it with a page id, like this:
$('#pageID').find('.ui-btn-active').removeClass('ui-btn-active ui-focus');
So your final code would look like this:
$.ajax( "example.php" )
.success(function() { doStuff(); })
.error(function() {
$('#pageID').find('.ui-btn-active').removeClass('ui-btn-active ui-focus');
})
Add an error clause to your AJAX handling which pops the button back.
$.ajax( "example.php" )
.success(function() { doStuff(); })
.error(function() { /*code to unpress button here*/ })
For those folks out there using "input" and not "anchors" as buttons. When using for instance "submit" and "reset" buttons and pressing them they remain as active, which is sometimes undesired depending on the actions performed when the buttons is clicked.
I am not sure if it is the expected behaviour, I have read that is a jQuery mobile bug, but the behavior is still present at least in jQM 1.3.2
An yes the trick is to remove the active class as stated however those get tricky because the class is not added to the input tag, i*t is added to a parent DIV* that is created by all of the ugly stuff around the "input" to style the button, that is why removing the active class when selecting the input doesn´t work.
By analyzing the HTML produced by jquery mobile a workaround is to:
remove the active class on the input parent instead of the actual input element.
$('.mybutton_class_or_ID').parent().removeClass('ui-btn-active');
I prefer this approach instead of clearing all the active classes across the whole page in case you want to be more selective with the class removal.
I'm creating a jQuery mobile form that will display a calculated answer in a div below the form. Basically, a client-side submit button However, i'm not really having luck trying to fire the event. But it seems to be reloading the page or DOM, I don't really know and adds the values from the selected items before the submit button was hit. It seemed like the form is being posted, when this form wasn't supposed to post anything. This form is taking values from the JSON file and add them as options, radio buttons and checkboxes. The code below does not seem to fire at all when the submit button is clicked:
$("form").submit(function(event){
alert("submit button clicked");
event.preventDefault(); // stop default behaviour of submit
event.stopPropagation(); //event handler moved to something else
calculate(); //invokes the calculate method
}
I'm not really sure on what attributes my form would need since this would be a client-side submit button. I only had the id and wrapped all the jQuery mobile controls inside the form.
The full site that I'm trying to get the submit event to work properly is here: http://goo.gl/C9tW7
UPDATE: Looks like I was missing the pound sign on the declaration of the event handler. It looks like this particular issue is resolved though. The submit button event handler is properly firing, but the calculations that needed to be displayed isn't executing the way it should.
from your code, you are missing ending parenthesis
$("form").submit(function(event){
alert("submit button clicked");
event.preventDefault(); // stop default behaviour of submit
event.stopPropagation(); //event handler moved to something else
calculate(); //invokes the calculate method
}); //<-- here
make sure your button's markup looks as below
<button data-theme="b" id="submit" type="submit">Submit</button>
and hoep you set your form id correctly
Is there a reason why the click handler is removed from my button after calling the button() method on it. I am changing the content of my buttons, and as a result I need to refresh them. I noticed refresh does not work, so I tried the button method.
This will restyle my "button", but I lose my click event.
How can I accomplish both?
http://jsfiddle.net/RQZG8/2/
And here is the code:
$("[data-role=button]").html("hello world").button();
$("[data-role=button]").click(function(){
alert("i have been clicked");
});
My big issue is that I have a div which is acting as a button. I want to change the content of the div, but I want to be able to have it continue to look like a button while keeping it's behavior.
Try this: $("[data-role=button] .ui-btn-text").html("hello world"); otherwise the padding is lost.
First of all IMHO, given your example that goes with the question (when you change only caption of a button), there is no much point to use a div as a button when jQM gives you a lot of standard choices.
All of these:
<button>Button element</button>
<input type="button" value="Button" />
<input type="submit" value="Submit Button" />
will be automatically enhanced by jQM to buttons without even specifying data-role="button".
And you can of course use a link as a button
Link button
Now if you still want to use your div as a button you don't need to specify data-role="button" just call button() plugin. That will create all necessary markup for you and your original div will be preserved as hidden.
<div id="button1">By button<div>
$("div#button1").button();
To refresh a button after you changed its caption you need to call refresh method:
$("div#button1").html("Hello World").button("refresh");
Now to normally handle the click event of a particular button (if it's not the only one on the page) you probably need more specific selector than just the data-role=button attribute. id would be perfect for that. So instead of
$("[data-role=button]").click(function(){...});
do
$("div#button1").click(function(){...});
And lastly you most certainly know that, but I didn't see it in your jsfiddle, so I just mention that you better put your code in one of the jQM page handlers. pageinit is recommended way to go.
$(document).on("pageinit", "#page1", function(){
...
});
Here is jsFiddle.
I am trying to get a simple jQuery UI dialog to work in an ASP.Net project. I have some buttons inside the dialog's <div>, but they weren't posting back. Upon closer inspection, for whatever reason when making the <div> a panel it moves it in the DOM so that it is the last tag before </body>. This would all be fine and dandy except for it also moves it outside of the <form> tag which is needed so that the buttons can do a postback.
What is the purpose of this behavior and how can I override it?
An example is here: http://jsbin.com/olumu4/
Looking at Firebug though I get this:
alt text http://img80.imageshack.us/img80/9049/dialog.png
This is a common problem with jQuery/ASP.NET.
After you assign your modal like this
$(".modal-window").dialog({
modal: true
});
do this
$(".modal-window").parent().appendTo($("form:first"));
If you have more than one modal on a page, I've found it doesn't work as expected, so in that case when you call the open method on the modal, do this:
$('.modal-window').dialog('open').parent().appendTo($('form:first'));
If you want to have it auto-open. You can append it right after the model is assigned.
$(".modal-window").dialog({
modal: true
}).parent().appendTo($('form:first'));
Hope this helps,
Marko
I have had this problem before, an option is to setup an even on the $(form).submit that appends what is in the dialog to the form.