I'm having a DDL inside a popup but whenever I close the popup and reopen it, it keeps its last selected option. What I'm trying to do is to call the popupafterclose event and set the DDL to its initial option, but it does not seem to work..
$("#popup").on("popupafterclose", function (event) {
$('#ddl1').find('option:first').attr('selected', 'selected');
});
The initial option of the DDL is a disabled hidden selected option.
What's the problem here?
You just need to refresh the selectmenu widget as well:
$("#popup").on( "popupafterclose", function( event, ui ) {
$('#ddl1').find('option:first').prop('selected', 'selected');
$('#ddl1').selectmenu("refresh", true);
});
DEMO
Related
I have form with many textbox and select tags. When i click the select tag its not opening the dropdown menu instead it move focus to next control that i have not selected.
This issue occurs only in iPhone.
Please anyone help me to solve this.one.
To Stop automatically closing dropdown issue or stop switching to other element issue use
preventDefault() method in touch event of the select element.
Example
$("#dropDownID").on('touchstart', function (e) {
e.preventDefault();
});
$(document).on("pagebeforeshow", function(event) {
$("#mybtn").on("click", function(e) {
$.mobile.showPageLoadingMsg();
$.mobile.changePage("twitter.html", {
reloadPage: false, changeHash: true,
});
$('#mybtn').unbind('');
});
});
Can u tell me why Unbind is important in Jquery mobile and Please tell me best way To unbind events.I used Following way to bind and unbind events.Is that ok
Have a look at this example: NO UNBIND USED
CODE
$("#page2").on("pagebeforeshow", function(){
$("#testBtn").on("click", function(){
alert("Hi!");
});
});
If you go from page 1 to page 2, and then click the button named Click me you will see that the alert "Hi!" is shown properly. The event was binded on pagebeforeshow, till now everything is ok.
Now go back to page1, and then load again page2, click again the Click me button.. you will see that the alert is shown 2 times! and this is WRONG. That's why you need to unbind the event BEFORE you bind it again.
Basically, every time you load page2, you bind a new event to the button.. so, if you load 10 times that page, you will have 10 events binded to the button, that will fire once the button is clicked.
Here's a working fiddle with the unbind (to unbind the event, I used off()): UNBIND USED
CODE
$("#page2").on("pagebeforeshow", function(){
$("#testBtn").off("click").on("click", function(){
alert("Hi!");
});
});
have a look here to understand why I used off() instead of unbind(), and also here if you wat to see how off() works
I hope this helps to clarify your doubts..
After user hits last tab of a form in jQuery UI's accordion how do you get the next div to open and current one to close with the focus on the next input in-line?
Also I am looking for the reverse. If use types shift tab to go in the opposite direction then I am searching for a way to implement the reverse behavior as well. I.e. close the existing accordion div and open up the next accordion div in line and go to the last input in the div and set focus to it.
You need to bind the Tab key press, on the last input field of a form, to the accordion function to activate the next section:
$('#firstform input:text').last().on('keydown', function(e) {
if (e.which == 9) {
if (!e.shiftKey) {
var active = $( "#accordion" ).accordion( "option", "active" );
$("#accordion").accordion( "option", "active", active + 1 );
}
}
});
You also need to activate the first input box of the next form, using the activate event of the accordion:
$( "#accordion" ).accordion({
activate: function( event, ui ) {
$("#secondform input:text").first().focus();
}
});
The procedure is similar for the reverse case, as you can see in the fiddle.
I try to show context menu jstree on hover event with using api context menu plugin, but it doesn't work. Have you any idea how to do this?
I had to implement the same thing. Here's what I ended up doing:
var $treeView = "myTreeList";
$treeView.jstree({
/* options */
})
.on('loaded.jstree', function() {
$(".myTreeList a").hover(
function(){
$treeView.jstree("show_contextmenu", $(this));
}
);
})
I just hooked up a hover event to every anchor in the tree when the loaded event fired (don't try to use the li elements or the event on a child will fire along with all it's ancestors). You could also use "on" instead of just hover and you wouldn't need to do this in the loaded event handler but that's what worked for me.
So, I am using jQuery Mobile and I'd like to animate individual elements on a page change both before and after the change. I set transitions to "none" in jQuery moblie then try to add class to css3 animate individual elements. It works on pagechange, so when you go to a new page the transition on the elements appears, but pagebeforechange happens to quickly and the animation is lost. Is there a way to make the pagebeforechange function wait until the animation is done then go on to the next page? preventDefault(); stops the page from changing at all. I need like a call back or deferred obj or something? If I call changepage in pagebeforechange after the animation is done...the function runs recursively :(
transitions: function(){
$(document).bind( "pagebeforechange", function( e, data ) {
$('.search_words li').addClass('animated flipInX');
});
$(document).bind( "pagechange", function( e, data ) {
$('.search_words li').addClass('animated flipInX');
});
},
Thanks in advance!
you could try pageshow instead of pagebeforechange. Beaucse pageshow is fired before the pagechange event