I have tried a lot of examples done and I cannot get my code to work to get the ID of a selected tab
http://pastebin.com/A5cqQS61
js code:
$(function() {
$('#tabs').tabs({
select: function(event, ui) {
console.log($(ui.tab)); // the tab selected
console.log(ui.index);
},
show: function(event, ui) {
console.log($(ui.tab)); // the tab shown
console.log(ui.index);
}
});
});
HTML:
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>text1</p>
</div>
<div id="tabs-2">
<p>text2</p>
</div>
<div id="tabs-3">
<p>text3</p>
</div>
</div>
I put in pastebin, because I don't understand ow the code block works in stack! I've pressed space four times, never seems to work well.
I have looked at these solutions so far:
jquery tab selected
jQuery tabs - Get the index of previously selected tab
jQuery tabs - Get the index of previously selected tab
Get tab selected Id in jQuery UI 1.9
You should use ui.panel , returning div tab element: {if it's what you are looking for?}
SEE DEMO
$(function () {
$('#tabs').tabs({
select: function (event, ui) {
console.log(ui.panel.id);
console.log(ui.index);
},
show: function (event, ui) {
console.log($(ui.panel));//jq object
console.log(ui.panel.id);
console.log(ui.index);
}
});
});
Please, try this one — note the different event name('activate') and usage of different property of ui object:
$(function() {
$('#tabs').tabs({
activate: function(event, ui) {
console.log(ui.newPanel[0].id);
}});
});
I usually do the bootleg way... $('#tabs li.active'). This will give you the active li under the element with id='tabs'. If you can get the element, also... jQuery allows you do something like this... $(element).
From there you can do var ID=$(element.attr('id');
Related
Good day all.
I have a simple interface, with 3 "zones". A list of elements that the user has, a place where the user can drag the elements he has and can sort them, and a place where the user can drag any element and if this element is from the second group, the element is deleted.
this is what I've done so far:
<div class="col-md-12">
<h1 id="trash" style="background:#f00;">drop here to delete (trash)</h1>
</div>
<div class="col-md-12">
<h1>take your elements from here (library)</h1>
<div class="group">
<ul class="playlists">
<li class="mymedia" data-id="1453">element 0</li>
<li class="mymedia" data-id="6565">element 1</li>
<li class="mymedia" data-id="1222">element 2</li>
<li class="mymedia" data-id="8888">element 3</li>
</ul>
</div>
</div>
<div class="col-md-12">
<h1>drop here your elements, and sort them (playlist)</h1>
<div class="group">
<ul class="playlists droppable" style="background:#777; min-height:30px;">
</ul>
</div>
</div>
and the javascript:
$('.droppable').sortable();
$(".mymedia").draggable({
connectToSortable: '.droppable',
helper: 'clone'
});
$('#trash').droppable({
drop: function (event, ui) {
ui.draggable.remove();
}
});
https://jsfiddle.net/peorthyr/dfvxt8g7/
what i'm missing is a little tricky. I want that only the elements dropped into the playlist are deletable (by now, dragging any element into the trash, will delete it), while the elements into the "library" aren't deletable, but only draggable into the playlist. I've tryed this, but with no luck:
$('.droppable').sortable({
drop: function (event, ui) {
ui.draggable.addClass("deletable");
}});
$(".mymedia").draggable({
connectToSortable: '.droppable',
helper: 'clone'
});
$('#trash').droppable({
drop: function (event, ui) {
ui.draggable.hasClass("deletable").remove();
}
});
what i'm mistaking? may I ask you help on this?
You could handle it adding a class and remove only element getting this class, e.g:
$('.droppable').sortable({
stop: function (event, ui) {
ui.item.addClass('dropped');
}
});
$(".mymedia").draggable({
connectToSortable: '.droppable',
helper: 'clone'
});
$('#trash').droppable({
drop: function (event, ui) {
if (!ui.draggable.hasClass('dropped')) return false;
ui.draggable.remove();
}
});
-jsFiddle-
I've got a little drag and drop app which i've built. It's working OK, but there is a slight issue where I drag on the item to the droppable location.
It should get the text from the HTML (which is does) and update another div to show the user what they've dragged in.
Unfortunately, it always returns the same name, no matter which list item you drag. This is the first in the list, so the first instance of that class.
Anyway we can get the correct label for the item dragged?
Here is my jQuery
$(function() {
$( ".drag_me" ).draggable({ revert: "invalid" });
$( ".choc2_bowl" ).droppable({
drop: function( event, ui ) {
$( this )
var htmlString = $('.choc_label').html();
$('.choc2_flavour').text( htmlString );
ui.draggable.fadeOut(500);
}
});
});
An here is the list in my HTML (this is shortened for this demo, but the list is dynamic from a DB.
<div class="choc2_select">
<ul>
<li class="drag_me"><div ><img src="RASPBERRY.png" /></div><div class="choc_label">Raspberries</div></li>
<li class="drag_me"><div ><img src="CHAMPAGNE.png" /></div><div class="choc_label">Strawberries</div></li>
<li class="drag_me"><div ><img src="DRIED-BLUEBERRIES.png" /></div><div class="choc_label">Blueberries</div></li>
<li class="drag_me"><div ><img src="CHAMPAGNE.png" /></div><div class="choc_label">Cranberries</div></li>
</ul>
</div>
Any help would be greatly appreciated!
Simon
You need to target the choc_label inside the dragged element so use
$(".choc2_bowl").droppable({
drop: function (event, ui) {
var htmlString = ui.draggable.find('.choc_label').html();
$('.choc2_flavour').text(htmlString);
ui.draggable.fadeOut(500);
}
});
I have a working jQuery UI tabs, the structure is similarly like this:
<script>
$( "#tabs" ).tabs();
</script>
<div id="tabs">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tabs-1">
<!-- content of tab 1 -->
</div>
<div id="tabs-2">
<!-- content of tab 2 -->
</div>
</div>
<div id="extra">
<!-- some contents here -->
</div>
Now, I wanted to hide the div extra when Tab 2 is selected, while showing it when Tab 1 is selected. I can't quite understand the event thing on jQuery UI tabs.
The the activate event
$("#tabs").tabs({
activate: function (e, ui) {
$('#extra').toggle(ui.newPanel.is('#tabs-1'))
}
});
Demo: Fiddle
Here you go: http://jsfiddle.net/cfnFk/
See fiddle for everything but below is the js code...
$( "#tabs" ).tabs({
activate: function( event, ui ) {
alert(ui.newTab.index()); //tabs are a zero-based index, so Tab 1 = 0, Tab 2 = 1
if(ui.newTab.index()===1) $( "#extra" ).hide();
else $( "#extra" ).show();
}
});
This is assuming you are using jQuery UI version 1.9 or later. If not, read this https://stackoverflow.com/a/300221/3112803
I got a small problem in JQuery .selectable function
what I wanna do is bind some events to each tabs.
I can handle a click event of each tabs
but the problem is when I select two or more tabs,
I can't figure out how I handle it.
for example, if I click(and also just select by dragging) one tab,
some sorting function must be works and
also each different defined function must be works in dragging multiple selections.
Ofcourse, I can use some flag cheat to solve this
but that is not what I really want.
does anyone have some effective solutions?
$("#selectable2").selectable(
{
selected: function()
{
$(".arcplan").on("selectableselected", function()
{
$(".big-tile").hide(200);
})
}
});
<div class="menu">
<div class="inner">
<ol id="selectable2">
<li class="alltype2">all</li>
<li class="arcplan">Arcplan</li>
<li class="msbi">MSBI</li></li>
<li class="excel">Excel</li>
<li class="etc">etc</li>
</ol>
</div>
</div>
Try
$("#selectable2").selectable({
selected : function(event, ui) {
if($(ui.selected).hasClass('arcplan')){
$(".big-tile").hide(200);
}
}
});
Demo: Fiddle - when you click on Arcplan the big-tile element is hidden and if you select anything else it is displayed back.
From the docs (http://api.jqueryui.com/selectable/#event-selected):
$('#selectable2').selectable();
$('#selectable2').on('selectableselected', function(event, ui){
doSomethingWithTheSelected(event.target);
});
I have a Jquery Drag Drop List which I want to update immediately in MYSQL using Jquery Ajax Post.
Because I can drag elements between lists (more than one list), I need to get the parent ID (parent being list category ID - where the draggable is dragged to)
When I drag from one category / list to another I am always given the former ID..
For example:
CAT 1 ------------ CAT 2
If I was to drag something from CAT1 to CAT2 - the ID would be CAT1 and not the new category ID...
I have added my codes below:
Jquery:
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.mouse.js"></script>
<script src="js/jquery.ui.sortable.js"></script>
<script>
$(function() {
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".mouseup").mouseleave(function(){
var sparent = $(this).parent().attr("id");
alert(sparent);
});
});
</script>
LIST HTML:
<div class="demo">
<div class="box">
<ul id="sortable1" class="connectedSortable">
<li class="ui-state-default mouseup">Item 1</li>
<li class="ui-state-default mouseup">Item 2</li>
</ul>
</div>
<div class="box">
<ul id="sortable2" class="connectedSortable">
<li class="ui-state-highlight mouseup">Item 1</li>
<li class="ui-state-highlight mouseup">Item 2</li>
</ul>
</div>
</div>
Any help would be appreciated.
Thank you in advance!
What you want is here:
http://jqueryui.com/demos/draggable/#events
$( "#sortable1, #sortable2" ).sortable({
connectWith: ".connectedSortable",
stop: function(event, ui) { alert($(ui.item).parent().attr("id") }
}).disableSelection();
Placing your code in the stop callback will allow you check the right ID.
Event that you need to handle is received.
$(".connectedSortable" ).on( "sortreceive", function(event, ui) {
alert(ui.item.parent()[0].id);
// also ui.sender will hold original list, from where element was taken
});
EDITED: depending on the fact if you need to handle case when items were just reordered, ie you drag and drop within same list, or not you are going to use received or stop event.
received will fire only in case you drag to another list.
stop will fire even if you leave item in the same list.