I am using jQuery tabs, each tab has variable heights.
When I select a tab I need to refresh the content in a div to accomodate the window scroll appearing/disappearing.
Looking at the API documentation for the tabs plugin there is load event and a select event. I cannot seem to find any other events I can plug into.
The load event works fine but when selecting a tab that is already loaded the select event fires before the content is displayed.
$("#tabs").tabs({
cache: false,
select: function (e, ui) {
// running the event here will not work as it runs before the content is diplayed
},
load: function (event, ui){
// running it here works ok as it fires the event after the content is displayed
}
});
I need the event to fire after the content is displayed.
Is there an event I can plug into for this particular behaviour?
The JqueryUI 1.8 API documentation describes the show and select events.
If show doesn't work, then perhaps configuring a timer in the select handler to refresh the div a few milliseconds later will do the trick.
Related
http://klaussongs.com/
I have this table on my site that when you hover over the tabs, it changes it. But I want to make it so it works on click I tried defining that on my code by saying:
$("#tabs").tabs();
But it is not overriding the jquery UI CDNed file main event which is mouseover. I can see on console under eventlistener that it has a mouseover listener attached to it, how do I override that to work on click. I also tried this, but it didn't work:
$("#tabs").tabs({
event: "click"
});
$('#ac').autocomplete({
source: '/url',
appendTo: $('#ac').closest('.popupWindow'),
select: function (event, ui) {
// do stuff
}
});
in IE9 first time everything works fine, but when i type text is second time, elements don`t reacts on clicks
error appears only when using appendTo option
solve it: on one of parent elements was click event handler with e.stopPropagation()
I have a page with an accordion that contains search criteria. Once a person clicks the search button, the criteria closes (I simulate a click on the accordion heading). This works great.
The problem is when there the user provides invalid input, my AJAX call returns and I attempt to show the search criteria again before the accordion finished closing (again with a simulated click on the accordion heading). This of course fails to open the search criteria.
A simple example of this would be double clicking on the accordion heading. Nothing happens if the accordion is in transition during this double click.
How to avoid this in my situation? NOTE: It seems to be more of a problem in Chrome/FF than in IE as IE does not animate the accordion open/collapse.
Basic idea from the code where #section1 represents the accordion heading:
$("#section1").click();
//some very fast AJAX.
$("#section1").click();
JS Fiddle: http://jsfiddle.net/mikeyfreake/gGaJn/2/
Thanks,
Mike
Call stop on the children of the accordion:
$("#accordion").children().stop(true, true);
http://jsfiddle.net/gGaJn/9/
Use async: false parameter in your Ajax call. This will let the Ajax call finish executing before the second click.
http://api.jquery.com/jQuery.ajax/
Or you can perform the second click in the success function:
$.ajax({
success: function (data) {
$("#section1").click();
},
...
});
I currently user jquery ui to create a dialog window that is hidden on page load. The user opens the dialog by clicking a button. Once open, the dialog has several tabs (created with jquery ui tabs), each one displaying a form that a user might need access to. The actual forms are loaded using ajaxOptions.
Is there a way to stop jquery from preloading my first ui tab on page load? Instead, I want the content of the first tab loaded only when the user clicks the button to open the dialog.
$( "#pref_tabs" ).tabs({
ajaxOptions: {
success: function(xhr, status, index, anchor) {
//function to handle successful loading
},
error: function( xhr, status, index, anchor ) {
$( anchor.hash ).html(
"Couldn't load this form. We'll try to fix this as soon as possible. ");
},
}
});
Add an additional option to your tabs options to make no tabs selected by default.
$(sel).tabs({
selected: -1,
ajaxOptions: {...
});
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