I am loading the data in jquery tabs using ajax based on the combobox selection it's working fine for first time ,the data are loading properly if i change the combobox selection at that time the first tabs becomes empty if i switch to second tab and came for first tab then the data is loading fine.I don't know why it's not loading while changing the combox selection in first tab.
In the below example i am checking the condition like "Value L" ,if it's "L" then i need to show the three tabs,If the value is not "L" then i need to show the two tabs.
While the two tabs are displaying at that time the first tab data is not loading.
$(function() {
$("#contractType").change(function(){
if($("#contractType").val()=="L") //Combo Selection Values
{
$("#hidetab").show();//Loading tabs
$("#tabs-0").show();
$("#dispEmp").removeClass('ui-tabs-selected ui-state-active');
}//if
else
{
$("#hidetab").hide();
$("#tabs-0").hide();//Hides the first tab
$("#tabs-1").show();/*Displays remaining two tabs below*/
$("#tabs-2").show();
$("#dispEmp").addClass('ui-tabs-selected ui-state-active');
$("#jqgrid").show();//Here i am trying to load the data in second tab using ajax call.
$("#dispEquip").removeClass('ui-tabs-selected ui-state-active');
}
});
});
I got the answer and it's working fine now.
While i am changing the combobox at that time based on the condition i am making the tab as selected.
$( "#yourtabId" ).tabs( "option", "selected", 0 );//this code will select the index of the tab as selected.
0->Index of the tab.
While selecting the tab if we need to return the tab index value then this function will get invoked.
$('#yourtabId').tabs({
select: function(event, ui) {
ui.index // Will return the selected index of the tabs.
}
});
Related
I'm using jQueryUI to display some tabs on a page. The tab that is displayed is not always the same, so sometimes I set a different tab as active.
<script>
$(function() {
$("#tabs").tabs({'active': 1});
});
</script>
I generate this code on the back-end, so it's there when the browser loads the page, but, no matter what, the first tab is displayed for a fraction of a second and only then the active tab is displayed.
How can I make the activate tab be displayed from the start?
Just change your code to:
<script>
$(function() {
$("#tabs").tabs({selected: index});
});
</script>
where index is tab number starting from 0
I have a page where I need to show/hide divs based on what button the user clicks. In the page, I have two divs (divBranchList and divGrowerList) and two buttons (btnBranch and btnGrower). I am using the following code to show/hide the divs.
$(document).bind('pageinit', function () {
alert("here");
$("#divBranchList").hide();
//show hide lists
$("#btnGrower").click(function () {
$("#divGrowerList").show();
$("#divBranchList").hide();
});
$("#btnBranch").click(function () {
$("#divBranchList").show();
$("#divGrowerList").hide();
});
});
While this works perfectly when the page loads or if I refresh the page, but fails to work when the user clicks on a listitem and the page comes back from the server after getting some data. The page has both lists visible although if I put a breakpoint at the following line in Firebug's script panel, it does get hit.
$("#divBranchList").hide();
Any ideas why the div is not hiding or how to make it work?
If you're showing and hiding content in a JQueryMobile page, you will probably need to trigger the UpdateLayout event
$("#divBranchList").trigger("updatelayout");
after you've done your showing / hiding...
I've implemented jquery tabs and want to call the page they are on in two ways. Firstly with the first tab open and the others hidden which works fine. But secondly I want tab 4 to be visible when landing on the page. So I have simply duplicated the page - Page A opens with the first tab in view. Page B has this code....
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs( 'select' , 3 )
});
</script>
and opens the forth tab. BUT it opens the first tab first then flashes to tab 4.
How can I get the page to open tab 4 initially without opening the first tab first.
Hope you can follow my ramble!!!
Nick
There does not appear to be an obvious solution. One suggestion I have seen is to use jQuery to keep the tabs hidden until they have loaded and then show them after the selection has taken place.
That would be how to open to the 4th tab using their API.
Perhaps you can try hiding the tab div, creating it, and then showing it in the show event when the 4th tab is shown (which will happen after everything is initialized).
If I have 4 tabs where the first 2 are loaded with ajax and the last 2 are static, how do I pre-load the 2 ajax tabs by default?
For the moment, only the first tab is automatically loaded, the second one is loaded when clicked. I want them both to be loaded so that when I click the second one, the content is already loaded. I tried to call the load event on the second tab like this:
$(document).ready(function () {
$("#main-tabs").tabs({
cache: true
});
$("#main-tabs").tabs("load", 1);
});
And this loads the second tab, but for some strange reason, the first one doesn't load at all; not even when I click a different tab and click back on the first one, it will not load.
Then I tried something like this:
$(document).ready(function () {
$("#main-tabs").tabs({
cache: true
});
$("#main-tabs").tabs("load", 0);
$("#main-tabs").tabs("load", 1);
});
Same result, second tab is loaded, first one is not.
How can all of them (ajax ones) be loaded automatically?
Source of the problem
Two facts:
When jQuery loads a tab with its load method, if another AJAX load request is in progress, this will be aborted (probably because if you select one tab and it loads by AJAX and then quickly select another to be loaded, jQuery assumes you don't want to load both - just the last one).
When you set the first tab to be loaded by AJAX, .tabs("load",0) will be called by default to populate the first tab.
Combining these two facts, you see what's going on. load is being called first to populate the first tab, and then called again to populate the second one. The second load cancels out the first.
Possible solution
Since you can't issue multiple loads on the same tab menu at the same time, we'll have to find another way. This solution uses the load option of tabs to load each tab in sequence. In other words, when one load is finished, it starts loading the next one. When that one is finished, it loads the next one and so on.
//the indexes to be loaded.
//In your case it's only index 1 (index 0 is loaded automatically)
var indexesToLoad = [1];
var loadNextTab = function() {
if (indexesToLoad.length == 0) return;
var index = indexesToLoad.shift();
$("#main-tabs").tabs("load",index);
};
$("#main-tabs").tabs({
cache: true,
load: loadNextTab
});
Possible improvements to this method:
instead of specifying indexes to load, make it figure out itself what tabs are AJAX tabs and load them
make it so loadNextTab can be used on multiple tabbed menus at the same time
make it integratable (if that's a word) with other load callback functions
How did I find out what was wrong?
By using firebug. It's an addon for firefox. Firebug shows all AJAX requests in its console, and as the screenshot shows, it wasn't that hard to figure out what was going on :) I really recommend it. (There are similar tools for most major browsers - press ctrl+shift+j in chrome or F12 i IE.)
I am using jQgrid with ASP.NET MVC.
I am having a couple of problems.
I would like to draw the grid when the DOM is created, but I would like to load the data after, when I select a TAB in a tab page.
I can’t find any example for that. Is there anyone who tried that?
I am using an custom navigation bar:
(”#AttachmentsGrid”).navGrid(’#AttachmentsPager’, { edit: false, add: true, del: true, search: false });
After a couple of selections on the TAB (jQuery UI) I can see the buttons of the nav bar are duplicated.
I have one big problem with selections.
I can’t select any other row but the first. Anyone else faced the same trouble?
Best regards
Alberto
To draw the grid on DOM ready but populate it later, you could initialize the grid using a local data store:
datatype: "local"
Then, when you select the proper Tab, initiate an AJAX request to get your data. When the data has been retrieved you can do this to load it into the grid:
// Populate grid data
jQuery("#myGrid").clearGridData();
if (data != null){
for(var i=0;i<data.length;i++){
jQuery("#myGrid").addRowData(data[i].id, data[i]);
}
}
}
Regarding duplicate buttons after selecting a tab multiple times. I have seen this before when initializing the jqGrid multiple times (IE, calling .jqGrid each time the tab is selected). You should not see this after following the steps above. Otherwise, one way to prevent this is to keep track of when the grid is initialized, and only have the grid initialized when the corresponding tab is first selected:
var initialized = false;
jQuery('#tabs').tabs({
show: function(event, ui) {
if (ui.index == 1 && !initialized){
initialized = true;
(... create your grid here ...)
}
}
});