jQuery UI tabs options have ajaxOptions.
I have next code:
$('#tabs').tabs({
cookie:{expires:1},
cache:true,
ajaxOptions:{
beforeSend: function(xhr,settings){
$(".ajax-gif").css("top",$(window).scrollTop()).show();
},
error: function(xhr,status,index,anchor){
$(anchor.hash).html("Couldn't load this tab.");
},
complete: function(xhr,textStatus){
$(".ajax-gif").hide();
}
}
});
But ajax-gif doesn't show up.
The same code in jQuery ajaxSetup (without jQuery UI) works perfect for usual ajax requests (not in ui tabs). Where did I mistake?
Thanks!
clarification
Usual ajax requests use POST form and tabs use GET form.
What version of jQuery UI tabs are you using? ajaxOptions option is only available up to version 1.8, you can see at http://api.jqueryui.com/1.8/tabs.
For current version (1.11) you would use beforeLoad property. Like this:
$('#tabs').tabs({
beforeLoad: function (event, ui) {
$(".ajax-gif").css("top",$(window).scrollTop()).show();
ui.jqXHR.complete(function(data) {
$(".ajax-gif").hide();
});
ui.jqXHR.error(function(data) {
$(anchor.hash).html("Couldn't load this tab.");
});
}
});
I found solution:
$(document).ajaxSend(function(){
$(".ajax-gif").css("top",$(window).scrollTop()).show();
});
$(document).ajaxComplete(function(){
$(".ajax-gif").hide();
});
Related
I'm loading in a report and displaying it with jquery-ui in tab format. The report is returned by an ajax call in json, and a function is formatting it into HTML. Example code below:
<div id="reportdiv">
</div>
<script>
function displayreport(objectid)
{
$( "#reportdiv" ).hide();
$( "#reportdiv" ).html("");
$.ajax({
type: "GET",
headers: { 'authtoken': getToken() },
url:'/reportservice/v1/report/'+objectid.id,
success: function(data){
if(data == null)
{
alert("That report does not exist.");
}
else
{
var retHTML = dataToTabHTML(data.config);
$("#reportdiv").html(retHTML).fadeIn(500);
$(function() {
tabs = $( "#reportdiv" ).tabs();
tabs.find( ".ui-tabs-nav" ).sortable({
axis: "x",
stop: function() {
tabs.tabs( "refresh" );
}
});
});
}
}
});
}
</script>
This works fine the first time displayreport is called. However, if the user enters another value and runs displayreport again, the "tabs" format is completely lost (the tabs are displayed as links above my sections, and clicking on a link takes you to that section further down the page).
I figured completely re-setting the reportdiv html at the beginning of the function would bring me back to original state and allow it to work normally every time. Any suggestions?
After more testing, found that destroy was the way to go. If I've set up tabs already, run the destroy, otherwise, skip the destroy (http://jsfiddle.net/scmxyras/1/) :
if(tabs!=undefined)$( "#reportdiv" ).tabs("destroy");
So I have a jQuery UI dialog with some buttons inside (full example here => http://jsfiddle.net/VLr5G/3/):
<div id="test">
<button>Btn 1</button>
<button>Btn 2</button>
<button>Btn 3</button>
</div>
What I want to do is force the focus on the "Close" button - I have tried applying the following code when the dialog opens:
open: function() {
$(this).parents('.ui-dialog-buttonpane button:eq(0)').focus();
}
Unfortunately the focus always keeps getting on the first button inside the dialog. Is this a bug, or am I missing something ?
Thanks a lot in advance for your help !
UPDATE
Okay so the answer from Stanley works fine with my first example... But try to change the version of jQuery UI => http://jsfiddle.net/VLr5G/10/
From what I could find so far, it worked until jQuery UI 1.10.0.
You are not getting the close button correctly.
You should do this instead:
$(document).ready(function() {
$('#test').dialog({
buttons: {
'Close': function() {$(this).dialog('close');}
},
open: function() {
$(this).parent().find('.ui-dialog-buttonpane button:eq(0)').focus();
}
});
});
Working jsfiddle: http://jsfiddle.net/GG7EP/2/
UPDATE
To make it work with jQuery 1.10.0 or above, call the button's focus function in focus event
$(document).ready(function() {
$('#test').dialog({
buttons: {
'Close': function() {$(this).dialog('close');}
},
focus: function() {
$(this).parent().find('.ui-dialog-buttonpane button:eq(0)').focus();
}
});
});
JsFiddle: http://jsfiddle.net/V3P4t/
I m using jquery tabs .Like to know how to refresh content on tab click .
I m using document ready function with
$(#TABS).TABS()
$(document).ready(function(){
$("#tabs").tabs();
$("#tabs").bind("tabshow",function(event,ui){window.location.href=ui.tab;});});
See the "select event" here
It says:
This event is triggered when clicking a tab.
Code examples
Supply a callback function to handle the select event as an init option.
$( ".selector" ).tabs({
select: function(event, ui) { ... }
});
Bind to the select event by type: tabsselect.
$( ".selector" ).bind( "tabsselect", function(event, ui) {
...
});
in jQuery-UI 1.10, the following should help:
$("#TABS").tabs("load", $("#TABS").tabs("option", "active"));
Edit: More code details:
$(function() {
$("#TABS").tabs();
$("#TABS").on('click','li',function(event,ui) {
$("#TABS").tabs("load", $("#TABS").tabs("option", "active"));
});
});
Here is a link to jsfiddle
I'm using JQuery Autocomplete feature.
The source come from url.
I wanted to know if I can know that the source is empty,
I mean i want to print alert message when the source the come back from the url is empty.
my code is
$(function() {
$( "#tags" ).autocomplete({
source: remoteurl
select: function (event, ui) {
alert(ui.item.value);
return true;
}
});
});
Thanks,
John.
is there way to do jquery mobile page transitions when ajax is disabled?
As part of template I have
<script>
$(document).bind("mobileinit", function(){
$.extend( $.mobile , {
ajaxEnabled: false
});
});
</script>
ajaxEnabled is a global setting, which means page transitions are disabled even when specifically applying them to links with the data-transition attribute, so the short answer would be "no", alas.
However, if you really want the transitions, consider enabling ajax once more, and then overriding it for whatever scenario is a deal-breaker for you (e.g. if it's form submission, use the data-ajax="false" attribute on your form element). For links, you can override the ajax navigation model by either giving them a target attribute or setting the rel attribute to external. Not ideal I know, but may help?
well this works..
// JQUERY MOBILE PAGE INIT
$(document).on("pageinit", function () {
$("#test").click(function (e) {
$.mobile.changePage("/Home/Test", { transition: "flip" });
});
});
// JQUERY MOBILE INIT
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
$.mobile.useFastClick = true;
});
<a id="test"/>