select2 multiple select drag and drop saving - javascript

I am using select2 to select related tours / posts on our WordPress powered website, which works fine, however, I would like to have an option to manually drag and drop the selected values to change their order.
I've found a snippet online
$(".select2").select2();
var formData=[];
$("ul.select2-selection__rendered").sortable({
containment: 'parent',
stop: function(event, ui) {
formData=[];
var _li= $('li.select2-selection__choice');
_li.each(function(idx) {
var currentObj=$(this);
var data=currentObj.text();
data=data.substr(1,data.length);
formData.push({name:data,value:currentObj.val()})
})
console.log(formData)
},
update: function() {
var _li= $('li');
_li.each(function(idx) {
var currentObj=$(this);
console.log(currentObj.text());
$(this).attr("value", idx + 1);
})
}
});
which I've added to WordPress admin that seems to work, at least from a drag and drop perspective, however, once I update/save my post the values revert to their initial sort order.
Screenshot
Some expert help would be greatly appreciated, thank you

That's because you are changing the order on the current instance only.
If you want to hold the change, then try saving the value of your order (in sessionStorage/ localStorage/ cookie/ database) and on page load, always read the default order as the stored order.

Related

Click on first item autocomplete jQuery ui

I'm trying to click on the first item of the list that displays autocomplete after searching:
$(function(){
$('#autocompleteplace').each(function(i, el) {
var $this = $(el);
$this.autocomplete({
source: $this.data('urlp'),
autoFocus: true,
minLength: 1,
select: function( event, ui ) {
$('#' + $this.data('id')).val(ui.item.id);
}
});
var region = '{{ form.vars.data.place.region|default('') }}';
$this.autocomplete("search", region, true);
var menu = $this.autocomplete("widget");
$(menu[0].children[0]).click();
});
});
This code is the same from here, which I tried in the same environment and it works. But in my example I get the data from the server, and it shows and selects the first item with autoFocus, but it doesn't click on it.
I just want to edit a post that uses a field with autocomplete (place), so when the form is shown I want it to have the place already selected.
I asked for a quick fix of that problem: retrieve the value of the item that its already stored, but it's easier and cleaner doing it in the form. My fix was modify the Transformer in my Symfony form. Since this is not a PHP topic, I'm not going into details.
In conclusion: there should be a better way to achieve that than forcing a click() event.

jQuery draggable / sortable on dynamically-created elements

After some blood, sweat and luckily no tears I've managed to create a drag and drop system which fits my needs.
There are only 2 things that are almost triggering my tears...
Here's the jsfiddle
The problem is in these lines of code, but can't find it:
if (dropped === original) {
$("#dropzone").append('<li class="placeholder" data-id="" data-order="" data-content=""></li>');
init();
}
$(".remove").click(function() {
var removable = $(this).parent();
if (dropped > original) {
removable.remove();
removable.removeClass("dropped");
removable.removeClass("ui-droppable-disabled");
} else {
removable.empty();
removable.removeClass("dropped");
removable.removeClass("ui-droppable-disabled");
}
init();
});
So now the explanation and my goal:
There are 5 days and on default the placeholders will dynamicly increase with the number of days. If the max limit of placeholders is filled, another one will be appended. Now, after the not-default placeholder is appended and I delete a previous filled placeholder, I can't allow it to be droppable again.
Difficult to explain, but see the demo above ^
Extra: I would like to be able to drag items between those placeholders. But can't find a way either.
Thanks for the help!
You don't seem to reactivate the droppable on delete. And also, destroy them on drop might make you need to recreate them. You could use disable on drop and enable when deleting. Like this:
drop: function (event, ui) {
var dragging = ui.draggable.clone().find("img").remove();
$(this).append(dragging).addClass("dropped");
$(this).droppable('disable');
And later:
if (dropped > original) {
$(this).parent().droppable('enable')
removable.remove();
removable.removeClass("dropped");
removable.removeClass("ui-droppable-disabled");
} else {
$(this).parent().droppable('enable');
removable.empty();
removable.removeClass("dropped");
removable.removeClass("ui-droppable-disabled");
}
http://jsfiddle.net/opmd46t2/3/

Tab index get increased in Jquery UI tab

I am using Jquery UI tab plugin.
Here is my DEMO
In my code I use
var tabControl = $("#tabs");
tabControl.tabs();
tabControl.tabs({ heightStyle: "auto",
beforeLoad: function (event, ui) {
},
load: function (event, ui) {
alert(ui.panel.selector);
if (ui.panel.selector == "#ui-tabs-1") {
m1();
} else if (ui.panel.selector == "#ui-tabs-2") {
m2();
}
}
});
When I moved to page 1st time it displays ui-tabs-1 correctly on pop up. But when I moved to some other page and come back and select the tab it shows an increased index (ui-tabs-4) and my desired method is not called. I don't know why my tab index gets increased. Your help is really appreciated.
Edit 1:
Thanks Rahul for creating the Demo. This code is part of a web application. This is related to one single page. In other pages also there are tabs. When I first load the page alert(ui.panel.selector) shows as "#ui-tabs-1" and when I go to other pages and come back it shows increased id such as #ui-tabs-4". I found that in the source code (jquery.ui.tabs.js) I found following implementation.
var tabId = 0,
rhash = /#.*$/;
function getNextTabId() {
return ++tabId;
}
Seems like tabId is increased and not being reset # . I want to reset that # every page load. Thank you very much for concerns.
Edit 2:
I have created a demo. when tabs clicked u get #ui-id-3 and #ui-id-5. In my scenario when I go back and come to the same page it displays as some increased number like #ui-id-7 for which it displayed #ui-id-3 previously.
Thank You!

Sorting and Saving Tabs + Fields using jQuery Sortable

I want to sort my tabs and I also want to sort the fields inside the tabs. I want to be able to drag the fields from one tab to the other as well.
When the user clicks on the Save button I want to get a json string. Something similar to the following:
I did some research and it seems that it is possible using jQuery Sortable (Connect lists with Tabs). Can someone post a decent piece of html+javascript please? Thank you.
The following code I wrote is a disaster.
$(function () {
$("#tabs").tabs().find(".ui-tabs-nav").sortable({
axis: "x",
update: function(event, ui) {
debugger;
}
});
$(".fieldSortableList").sortable().disableSelection();
var $tabs = $("#tabs").tabs();
var $tab_items = $("ul:first li", $tabs).droppable({
accept: ".connectedSortable li", hoverClass: "ui-state-hover", drop: function (event, ui) {
var $item = $(this);
var $list = $($item.find("a").attr("href")).find(".connectedSortable");
ui.draggable.hide("slow", function () {
$(this).appendTo($list).show("slow");
});
}
});
});
Use the "ConnectWith" property when defining the sortable bind. This will allow you to sort/drop items form list a to list b.
In order to save their states, you can take the items of the list, save them as array in localStorage, and then compare them to the saved localstorage fields during page load. When you load the page, you compare the current list order, to the saved order, and if different, append them to the new list. When you are done, the new list has all of the items, but in the saved order.
I have not seen API for sortable in a while, but this will also help you out. http://johnny.github.io/jquery-sortable/

Javascript variable seems to be static

I'm trying to develop a website written in PHP which includes a page that users use it to register on website.
In selecting country section of this page, I'm trying to use LOOPJ (http://loopj.com/jquery-tokeninput/demo.html) jQuery Autocomplete script.
When I try to search and make a suggestion list, I want to send another field's data which is located in a textbox in the form. So I tried to use the following code:
$(document).ready(function() {
var countryfrom = $("input#country2").val();
$("#city-input-custom-limits").tokenInput("autocomplete/city_search.php?country=" + countryfrom, {
searchDelay: 1000,
minChars: 3,
tokenLimit: 1
});
});
Everything is working fine. But when I change "country2" text box value, the value of the countryfrom does not change and initial value of the country2 returns to city_search.php page.
Could anyone make suggestions why countryfrom value does not change while country2 is changed?
You should listen to keyup event:
// Cache the element
var $elem = $("#city-input-custom-limits");
$("#country2").on('keyup', function() {
var country = $.trim(this.value);
$elem.tokenInput("autocomplete/city_search.php?country=" + country, {
searchDelay: 1000,
minChars: 3,
tokenLimit: 1
});
}).triggerHandler('keyup'); // execute the handler on DOM ready

Categories

Resources