Develop Reference

select2 multiple select drag and drop saving

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.

select2 'change' event doesn't trigger for the first time

I have Select2 Javascript widget on my page.
$('#order_address_select').select2({
placeholder: "Select adress",
ajax: {
url: '<?=Yii::app()->getBaseUrl(true)?>/order/getplacemarklist',
dataType: 'json',
},
tags: true,
});
When I'm typing some text, and if it is not found in database and not loaded through ajax, I can anyway choose it, cause attribute tags is setted to true. Then I have following code
$('#order_address_select').change(function () {
alert($("#order_address_select option[data-select2-tag='true']").val());
});
The problem is when I'm typing text, and selecting it as a tag, event doesnt trigger for the first time. But when I'm typing text again, and selecting it, code alerts value of previously selected option. For example: I'm typing "aaa", selecting it, nothing happens, then I'm typing "bbb", selecting it, and got alert with "aaa"

So, if anyone is interested, I found solution on select2 github repository, you just need to add an empty <option></option> to your <select>. And then it will work fine

Inside my change handler I get the selected option as
var data = $(this).select2("data")[0];
Like this:
$selectXXXXX.on('change', function (e) {
var data = $(this).select2("data")[0];
var cfg = configuraciones[data.id];
app.usersFocusChange(data.id, cfg);
});
Ref: select2 dox

You can resolve it by manipulating html :
$('#yourselect2').append("<option selected value='your_val'>your_text</option>");

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.

Show and hide dynamic jQuery UI Dialogs

I know this should be simple, but it doesn't appear to be working the way I hoped it would.
I'm trying to dynamically generate jQuery UI dialogs for element "help."
I want to toggle the visibility of the dialog on close (x button in dialog), and clicking of the help icon. This way, a user should be able to bring up the dialog and get rid of it, as needed, multiple times during a page view.
// On creation of page, run the following to create dialogs for help
// (inside a function called from document.ready())
$("div.tooltip").each(function (index, Element) {
$(Element).dialog({
autoOpen: false,
title: $(Element).attr("title"),
dialogClass: 'tooltip-dialog'
});
});
$("a.help").live("click", function (event) {
var helpDiv = "div#" + $(this).closest("span.help").attr("id");
var dialogState = $(helpDiv).dialog("isOpen");
// If open, close. If closed, open.
dialogState ? $(helpDiv).dialog('close') : $(helpDiv).dialog('open');
});
Edit: Updated code to current version. Still having an issue with value of dialogState and dialog('open')/dialog('close').
I can get a true/false value from $(Element).dialog("isOpen") within the each. When I try to find the element later (using a slightly different selector), I appear to be unable to successfully call $(helpDiv).dialog("isOpen"). This returns [] instead of true/false. Any thoughts as to what I'm doing wrong? I've been at this for about a day and a half at this point...

Maybe replace the line declaring dialogState with var dialogState = ! $(helpDiv).dialog( "isOpen" );.
Explanation: $(helpDiv).dialog( "option", "hide" ) does not test if the dialog is open. It gets the type of effect that will be used when the dialog is closed. To test if the dialog is open, you should use $(helpDiv).dialog( "isOpen" ). For more details, see http://jqueryui.com/demos/dialog/#options and http://jqueryui.com/demos/dialog/#methods.

I was able to get it working using the following code:
$("div.tooltip").each(function (index, Element) {
var helpDivId = '#d' + $(Element).attr('id').substr(1);
var helpDiv = $(helpDivId).first();
$(Element).dialog({
autoOpen: true,
title: $(Element).attr("title"),
dialogClass: 'tooltip-dialog'
});
});
// Show or hide the help tooltip when the user clicks on the balloon
$("a.help").live("click", function (event) {
var helpDivId = '#d' + $(this).closest('span.help').attr('id').substr(1);
var helpDiv = $(helpDivId).first();
var dialogState = helpDiv.dialog('isOpen');
dialogState ? helpDiv.dialog('close') : helpDiv.dialog('open');
});
I changed the selectors so that they're identical, instead of just selecting the same element. I also broke out the Id, div and state into separate variables.

How to put buttons in a html page in a jQuery dialog

eHello everyone,the following is my code to display a jquery dialog window with a closing button "OK":
<script type="text/javascript">
$(function(){
$("#dialog").dialog({
autoOpen:false,
bgiframe:true,
buttons: { "OK": function() { $(this).dialog("close"); } },
width:500,
height: 350,
modal: true,
show: 'slide',
hide:'slide',
title:"Similar Trends Detected in 2nd DataSet"
});
$("#userid").focus();
});
function showForm(matches){
$("#dialog").html(matches).dialog("open");
}
Currently it runs by supplying a string variable "matches",then the content of the variable gets displayed on the dialog frame.
Now me and my teammate want to extend this dialog a little,we want to attach a button to every line inside the html content("matches" variable),please note that we don't want buttons in the dialog(like another "OK" button),but we want buttons "inside" the frame (the actual html content).
So I would like some help here,how could I modify my "matches" variable,to have buttons also shown inside the dialog.
Thanks.

EDIT: Updated based on comments from OP
function showForm(matches){
// Of course, you'll need to modify with your own button.
// I also added a valid <br>, assuming you want it there.
matches = matches.replace( /<\/br>/g, '<button>my button</button><br>' );
$("#dialog").html( matches ).dialog("open"); // Insert new HTML content
}
Does the matches variable contain HTML?
You could just make a jQuery object out of it, and traverse it like any other HTML:
function showForm(matches){
// Of course, you'll need to modify with your own button.
// I also added a valid <br>, assuming you want it there.
matches = matches.replace( /<\/br>/g, '<button>my button</button><br>' );
$("#dialog").html( matches ).dialog("open"); // Insert new HTML content
}
Relevant jQuery docs:
.after() - http://api.jquery.com/after/
.find() - http://api.jquery.com/find/
Traversing: http://api.jquery.com/category/traversing/

what do you mean by every line? can you post a sample value for the matches variable? why not just include the buttons in the matches string value?
anyway, you can also provide a callback function to the dialog widget's 'open' event.
$("#dialog").dialog({
autoOpen:false,
bgiframe:true,
buttons: {
"OK": function() {
$(this).dialog("close");
}
},
width:500,
height: 350,
modal: true,
show: 'slide',
hide:'slide',
title:"Similar Trends Detected in 2nd DataSet",
open: function() {
var targetElements = 'br';
$(this).find(targetElements).after('<button>click me</button>');
}
});
after every br tag in the content, a button will be appended after it... every time the dialog is shown, the open callback will be triggered.

So the matches content is some static set of HTML. Once it has been added to the DOM you can use the same selectors and controls you use for everything else. So let us assume for the moment that the matches field contains a list of elements.
function showForm(matches){
$("#dialog").html(matches).dialog("open");
var b = $("<input type='button' value='clickme'/>");
$("#dialog ul li").append(b);
}
Of course this is only really going to work if you have some conception of what match contains. If you know for example that it is a set of divs with a certain class that will help in making the selector.