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 ...)
}
}
});
Related
I apologize that I have a very surface level understanding on Jquery and I just cant seem to find the right keywords to google the answer, or perhaps there just isnt.
Basically my developers are working on this website which uses Jquery sortable. I have products which I draw from a database on the left and placeholders on the right. the workflow can be seen in the picture workflow. I have products which I can drag and drop to the basket. For the products, I can scroll through the pages and drag and drop anytime. However, I now need to create another "basket". Which requires me to switch between the basket anytime, possibly with a "next" and "prev" button. My developers was explaining to me that they are unable to do it because,
the position of the items in my basket is important, i.e. first box will always be item 1, second box will always be item 2, and so on. (items will be displayed later according to the numbered boxes )
they need to refresh the page in order to switch basket due to point (1).
refreshing the page might cause the values for the products to reset, i.e. if I scrolled through the pages and I switch basket, I will end up back at product page 1, which means i have to scroll through the pages again.
May I know if that is the limitations of jquery sortable? or is there something that they will be able to do in order to create another "basket" and able to scroll the "basket" without refreshing the page? Is there anything else which I can use for this issue?
EDIT: here is the script!
<script>
$(function () {
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable",
update: function (event, ui) {
var licont = $("#sortable2 .ProItem").length;
},
stop: function (event, ui) {
if (event.target.id == 'sortable1' && ui.item[0].title != "") {
$(".proli:last").remove();
}
//console.log(ui.item.index());
$("#sortable2 li").each(function(i,o){
$(this).find('h4').html(i+1);
})
}
}).disableSelection();
});
</script>
your help is greatly appreciated!! thanks!
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.
}
});
I have an annoying issue, I want to reload the page I am on programmatically, whilst maintaining a page transition, but I don't want to double it up in the DOM!
Can you post your relevant code? What function do you use?
You are aware of the properties of changePage?
$.mobile.changePage("#pageId", { allowSamePageTransition : true, reloadPage: true } );
Otherwise you can always remove the previous page yourself
$('#pageId').live('pageshow',function(event, ui){
$(ui.prevPage).remove();
});
I'm having 2 sets (set1,set2) of tabs (all created using the add method). I also have both sets to sortable and using the connected-list option of sortable, I've made it possible to move tabs from set1 to set2 and vice versa.
But this doesn't move the div containing the content of the tab. So, I wrote the following function to move the div also (called when the over event of sortable is triggered
migrateTabDiv:function(e,ui){
console.log( ui.item.find("a").attr("href") );
console.log( $(this).parent() );
var relatedContentDiv=$( ui.item.find("a").attr("href") );
console.log(relatedContentDiv);
$(this).parent().append( relatedContentDiv[0] );
}
This code moves the Div to the correct set but now when I try to make a tab active,I get the following error
Uncaught jQuery UI Tabs: Mismatching fragment identifier.
What I understand from this is that the UI tabs use some kind of internal representation too which relates a tab content to a set.
The basic functionality that I'm trying to achieve is to be able to drag a tab from one set of tabs into another set of tabs.
How can I make this possible?
I've hacked together a work around. It is not the most efficient method but it works
migrateTabDiv:function(e,ui){
var oldIndex=ui.item.data('originIndex');
var label=ui.item.find("a").text();
var id=ui.item.find("a").attr("href");
var currentIndex = ui.item.index()+1;
var jRelatedTabContentDiv=$( id ).find(".tabContent").detach(); //detach and keep the old content
ui.sender.parent().find( id ).remove(); // remove the old div
ui.item.remove(); // remove the tab li that is appended by the sortable in the new set
$(this).parent().sortable( "refresh" ).tabs("add", id , label, currentIndex); //add a similar tab
$(this).parent().find( id ).append( jRelatedTabContentDiv ); //add teh old content
}
And the tabs initialisation goes as
$("#fileTabsMain").tabs().find( ".ui-tabs-nav" ).sortable({
connectWith: "#fileTabsVSplit .ui-tabs-nav",
placeholder: "ui-state-highlight",
forcePlaceholderSize:true,
receive:interfaceView.migrateTabDiv,
start: function(event, ui) {
ui.item.data('originIndex', ui.item.index());
},
});
And a similar initialization for #fileTabsVSplit also.
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.)