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.
Related
This is driving me a little crazy as I just can't get it to work :(!
I have jQuery tabs set-up as follows (all working) :
$(".tabs_area" ).tabs({
fx: { duration: 'slow', opacity: 'toggle' }
});
I then have a scroll to anchor focus mechanism (again works fine in terms of the function itself) :
$('.tabs_area li a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 500,'easeInOutExpo');
event.preventDefault();
});
My problem is that sadly they won't work simultaneously. When I click the tab, it correctly displays the corresponding tab content BUT it doesn't scroll you to the start of this content. You have to click the tab again for it to then do the scroll to the content, which isn't good.
Sadly the reason I need is that I am using this on a mobile website, and when you click the tab, although it does actually change the content, it is bellow the tabs menu, and therefore below the visible area of the screen, hence why I want it to swap the content then scroll you down to this so you can see it, and of course with one click only.
So I think I need to combine the scroll functionality within the tabs set-up code... somehow... as a callback or something... but I just keep breaking it :(!!
Any help would be so much appreciated.
Thanks in advance,
TJ
Why don't you use the show option for jQuery Tabs?
Seems to do what you wish to do.
Check the solution
$(".tabs_area" ).tabs({
show: function(e,ui){
$('html, body').stop().animate({
scrollTop: $(ui.tab.getAttribute('href')).offset().top
}, 500,'easeInOutExpo');
}
});
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 am working on a tool based on jQuery UI draggable functionality.
I have a number of boxes in the left column of the table. When they are dragged in yellow area, I would expect the remaining divs to move upwards to fill the space left by the box that was moved.
But it's not happening. Why?
It is pretty difficult to test but from my knowledge on the question here is a possible cause/solution to this.
The droppable plugin does not remove the dragged element from its original markup position, it is visually moved to the droppable element (with some option allowing to accept to drop certain elements or not, events, etc).
The elements have a position: relative css rule, which represents the "normal flow" for elements (in the order they appear in the markup). So even if the element is visually placed elsewhere on the page with css, its place in the markup is still the same and it is still taking the space it normally should.
This fiddle illustrate what i'm trying to explain :-)
By looking at the source code form the "working website", they actually remove the dragged element from the original draggable list and re-create it in the droppable list !
When they define the .droppable() they do this:
h.droppable({
tolerance: "intersect",
accept: ".card",
greedy: true,
drop: function (a, b) {
card = b.draggable;
putCardIntoStack(card, c)
}
});
On the drop event, they call putCardIntoStack(card, c) passing the currently dragged element as the card parameter. Within this method, they remove the original "card" (a.remove()) and re-create it in the dropzone (newcard = createCard();):
function putCardIntoStack(a, b) {
progressVal = $('#progBarRd').width();
card_idDOM = a.attr('id');
card_idDB = card_idDOM.substr(IDPREFIX_CARD.length, card_idDOM.length - IDPREFIX_CARD.length);
stack_idDB = b.substr(IDPREFIX_STACK.length, b.length - IDPREFIX_STACK.length);
$.ajax({
url: URL_DRAGDROPAJAX,
type: 'POST',
data: 'action=movecard&cardid=' + card_idDB + '&tostack=' + stack_idDB + '&prog=' + progressVal
});
// 'a' is the card
// they extract the id/content from the dragged card
cardId = a.attr('id');
cardLabel = a.text();
// they remove the card from the DOM
a.remove();
// they create a new card with the extracted info
newcard = createCard(cardId, cardLabel);
newcard.addClass('stackcard');
// and append it to the dropzone
$('#' + b).removeClass("empty").find('.stackDrop').append(newcard);
globalcheck()
}
jQuery UI does a similar thing on the droppable demo page. On the drop event, they call a function deleteImage() which removes the dragged image from the original markup and appends it to the drop zone.
I hope I'm clear enough :-)
I also hope I'm right, it is pretty difficult to test quickly but it makes sense :-)
I have a draggable connected to a sortable:
$("#panelTarget").sortable({
distance: '15'
});
var element = $('<li>Hello</li>');
element.appendTo('#panelSource');
element.draggable();
element.draggable("option", "connectToSortable", '#panelTarget');
at some point, I want to make it impossible for the user to drop items onto the sortable panel (panelTarget). I'm trying this:
$('#panelTarget').sortable( "disable" );
but I can still drop elements onto it, am I not interpreting the docs correctly?:
http://jqueryui.com/demos/sortable/#method-disable
how can I block the user from dropping stuff on the panel?
Thanks
This event/action comes from the .draggable() side, so you need to disable it there, like this:
element.draggable("option", "connectToSortable", false);
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 ...)
}
}
});