I'm upgrading my jquery libraries from a very old 1.2.7 to 1.9.1. I'm able to get most of the functionality working except for the UI tabs. I created a jsfiddle with my code that is not working as it used to with the old jquery lib.
Here is the fiddle: http://jsfiddle.net/LXbAa/
The problem is when I try to call a function using following syntax:
return '#tabs > ul';
this is where it doesn't work as expection
The code is as follows:
var Tabs = {
init: function(){
this.tabs = this.getTabs();
// this.bind();
},
getTabs: function() {
return $(this.tabNode()).tabs({
ajaxOptions: { global: false}
});
},
tabNode: function() {
return '#tabs > ul';
}
}
TIA.
Related
I am creating a jquery-ui autocomplete list within a bootstrap layout and I'm with layout issues. My problem is that the list appears transparent, does not change color when the mouse is over the item, and are not respecting height. Can someone explain to me what is wrong? you need to use CSS in this case? I wanted to avoid having to modify the bootstrap to be able to reuse the code in other projects.
important: The autocomplete is inside of a bootstrap modal.
Here is the code I have done:
$(document).on("focus","#FormAlteracaoLocalizacao",function(e) {
if ( !$(this).data("autocomplete") ) { // If the autocomplete wasn't called yet:
$(this).autocomplete({ // call it
open: function(event) {
$('.ui-autocomplete').css('height', 'auto');
var $input = $(event.target),
inputTop = $input.offset().top,
inputHeight = $input.height(),
autocompleteHeight = $('.ui-autocomplete').height(),
windowHeight = $(window).height();
if ((inputHeight + inputTop+ autocompleteHeight) > windowHeight) {
$('.ui-autocomplete').css('height', (windowHeight - inputHeight - inputTop - 20) + 'px');
}
},
source: '../asp/source.asp',
minLength: 2,
select: function( event, ui ) {
$("#FormAlteracaoLocalizacao").val(ui.item.label);
$("#FormAlteracaotxtCdLocalizacao").val(ui.item.value);
return false;
},
focus: function( event, ui ) {
$("#FormAlteracaoLocalizacao").val(ui.item.label);
$("#FormAlteracaotxtCdLocalizacao").val(ui.item.value);
return false;
},
select: function( event, ui ) {
$("#situacaoimpressora").focus();
return false;
},
change: function(event, ui) {
console.log(this.value);
if (ui.item == null) {
$("#FormAlteracaoLocalizacao").val(FormAlteracaoLocalizacao);
$("#FormAlteracaotxtCdLocalizacao").val(FormAlteracaotxtCdLocalizacao);
}
}
});
$(this).autocomplete( "option", "appendTo", ".form-horizontal" );
}
});
If you are using the jQuery-UI Autocomplete, then you'll need to use the associated jQuery-UI CSS for it in order for it to render correctly.
Just add a link to one of the built-in themes that comes with JQuery UI. Then your problems will be solved. e.g. link rel="stylesheet" href="~/lib/jqueryui/themes/cupertino/theme.min.css"
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 ui tabs with the tablesorter 2.0 plugin to obtain sort abilities on a dynamically populated html table but the sort only happens on the first tab upon page load. The other tabs do not sort or obtain the zebra striping form the tablesorter.
html:
<div id="tabs">
<ul>
<li>Ftp Only</li>
<li>Billing Only</li>
<li>Variance</li>
<li>Adj Only</li>
</ul>
</div>
I've tried:
$('#tabs').tabs({
ajaxOptions: {cache: false},
load: function()
{
$("#ReportTable").tablesorter();
}
});
Any suggestions are much appreciated.
The zebra widget only applies to visible rows, so you'll need to trigger the applyWIdgets method. And I'm going to assume you are using jQuery UI 1.10.2 and jQuery 2.0, where you can use the activate callback (demo):
$("#tabs").tabs({
activate: function (event, ui) {
var $t = ui.newPanel.find('table');
// make sure there is a table in the tab
if ($t.length) {
if ($t[0].config) {
// update zebra widget
$t.trigger('applyWidgets');
} else {
// initialize tablesorter
$t.tablesorter({
theme: 'blue',
widgets: ["zebra"]
});
}
}
}
});
Update: Oops, if the table is in the first tab, use this code (demo):
var tablesorterOptions = {
theme: 'blue',
widgets: ["zebra"]
};
$("#tabs").tabs({
create: function (event, ui) {
var $t = ui.panel.find('table');
if ($t.length) {
$t.tablesorter(tablesorterOptions);
}
},
activate: function (event, ui) {
var $t = ui.newPanel.find('table');
if ($t.length) {
if ($t[0].config) {
$t.trigger('applyWidgets');
} else {
$t.tablesorter(tablesorterOptions);
}
}
}
});
Is there equivalent code for jQuery UI 1.10?
This works fine in previous versions but ajaxOptions are deprecated now.
$('#mytabs').tabs({
ajaxOptions: {
dataFilter: function(result){
var data = $.parseJSON(result);
return data.myhtml;
}
},
});
Try this:
$('#TheTab').tabs({
beforeLoad: function( event, ui ) {
ui.ajaxSettings.dataType = 'html';
ui.ajaxSettings.dataFilter = function(data) {
return $(data).find('#MYCONTENT').html();
};
ui.jqXHR.fail(function(data) {
ui.panel.html('<b>Something went wrong with the TABS-documentation ;)</b>');
});
}
});
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();
});