Click on first item autocomplete jQuery ui - javascript

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.

Related

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>");

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

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.

Categories

Resources