Dynamically loaded items not shown in second time on dropdown (Harvesthq Chosen) - javascript

I'm using this following tool to make the dropdown searchable and look nice.
Harvesthq Chosen
First I'm loading the data dynamically in dropdown and applying this code to apply the effect.
$(".chosen-select").chosen();
It works just fine. Everything ok. Then depending on some option I want to empty all data and insert new options. Now problems occur. The newly added options are not shown. Old options are still visible.
So I checked with the firebug. Select tag contains my desired data, but it's showing wrong data(Old ones).Some kind of div is visible. I tried to apply the chosen methd once again. But not working. Then I tried
$("#form_field").trigger("chosen:updated");
And not working either. Can anybody tell me what is missing?
I want to clear and load data dynamically multiple times in dropdown and apply the chosen effect.

This worked for me
$("#form_field").trigger("liszt:updated");

Related

JQuery Mobile selectmenu() multiple option true/false -> not refreshing the displaying of choices

Regarding JQuery and JQueryMobile,
Code is in this JSFiddle link: https://jsfiddle.net/nyluje/jg5cgw76/7/
I use a flipswitch to change, if a select object has the attribute multiple or not.
At first the flipswitch is off and the attribute multiple does not apply on the select.
If I use the select, I can choose only one single option (this works fine).
Then I turn the flipswitch to on. Now with the code I implemented in the function setSelectAccordingToFs() the attribute multiple is added to the select and it is then possible to pickup multiple options. But one notices that the pop-up, which is not a native menu one, does not display the multiple select correctly, like on this picture:
It keeps on displaying the single select panel. Which does allow to add up options, but does not provide the possibility to take off some:
Hence I wonder: How to refresh the select panel menu used by a select, depending on the attribute multiple value:'off' or 'on', on that select tag?
Any idea?
Ok I found the solution. I implemented it in this version of my JSFiddle: https://jsfiddle.net/nyluje/jg5cgw76/8/
The trick:
Using the option 'refresh' wasn't enough. To (really) refresh the selectmenu and include the panel in this refresh, the 'destroy' and 'enable' functionnalities have to be used. So at the bottom of my function setSelectAccordingToFs() I added something like that:
targetSelect.selectmenu('destroy');
targetSelect.selectmenu();
targetSelect.selectmenu('enable');
targetSelect.selectmenu('refresh',true);

Transfer selected item from select to div and back

I'm trying to achieve something, but I don't know if it is even possible.
On a page I have a selectbox with a number of options. There's also a div section on the same page.
I would like to be able to select one or more options, press a button and make the selected items disappear from the selectbox, and appear inside the div. And all this sorted as well.
Now, I have got this part of the code working (have to admit that I "borrowed" the code from several places...)
code:
JSFiddle
The second part I'd like to achieve is to be able to select the elements in the div, click another button, and have the elements removed from the div and re-appear in the selectbox. Sorted again.
I think I have to change the type of the element when transferring from selectbox to div (maybe into an li ?), in order for them to be selectable, and on the way back, convert the type to <option> again, but I don't know how....
What happens now when I select an option and bring it to the div, the text in the div also has the form '<option>'...'</option>' , because it has been exactly copied.
I'm hoping I'm making sense here, and I hope there is someone who can point me in the right direction. If I'm going about this in the completely wrong way, please tell me.
By the way, it's easy if I was using two selectboxes, but I can't. It has to be one selectbox and one div......
Thanks, Hans
As we said in main post comments, here are some issues you have :
How to select elements in jQuery
I know that you know, but in your example you want to move elements from a div to another, you'll need for that to put each value in a div (then you'll be able to select each one).
How to make div selected
Your second issue is that you want to be able to select divs in the right box to copy them back in the select :
$("body").on("click", ".rightElements", function(key, element){
$(element).addClass("selected");
})
Then you can do :
$(".rightToLeftButton").click(function(){
// Your $(".selected") divs value go to the select
});
This piece of code provides new issues :
How can I unselect selected on clicking other divs ?
How can I select multiple divs ?
Etc. etc.
(I'm sure with practice, tests, and logic you'll do it!)
If you achieves these points, you can achieve all others of your problems, when you have a problem you can't explain with an unique phrase (who can be long :)), ask you if there are not several issues, separate them and look for answers !
It seems rude but you should take a look at :
http://eloquentjavascript.net/
https://jquery.com/
https://developer.mozilla.org/en/docs/Web/JavaScript
https://stackoverflow.com/tags/javascript/info
Regards,

Modify the output of the Select2 dropdown selection when used with jQuery X-Editable library

I have been trying to use X-Editable http://vitalets.github.io/x-editable/ with Select2 https://select2.github.io/ for weeks now without much luck.
Originally I was trying to load in data from AJAX request and then use the library but all I could see if old code that supposedly worked with the older versions of both libraries.
To slightly simplify things I have now decided to load in my data separately so that X-Editable and Select2 only have to deal with an array of data that is already available.
My problem now is modifying the display of the data.
By default I am happy with the look of the edit field which looks like "tags" being selected.
When editing is completed and on initial page load, it shows my selected items as a comma separated string. I would like to modify that part to look different.
I saw some examples that worked as I want it to however they do not seem to work with the newer versions.
This JSFiddle here http://jsfiddle.net/jasondavis/j72k110m/ shows my desired output and functionality...almost but the catch is this demo is using older versions of the Select2 library. It has Select2 version v3.4.4 and X-Editable version v1.5.1
The latest version of Select2 is version v4.0.0
X-Editable is up to date at v1.5.1 as it has not been updated in a while.
On initial load and after selecting new value it should look like this below which means it wraps our selected value in a span:
When clicked to edit the selected values, it should look like this which looks like "tags" however it should not show the <span> part!
In this JSFiddle http://jsfiddle.net/jasondavis/N6bQE/320/
I have updated Select2 to the new version and I am trying to replicate the functionality from the other JSFiddle above by showing the selected values as "tags".
Another issue with this version is that when selecting values, it does not remove an option from the dropdown list. So even though 1 item is selected already, it still shows up as an option to click on again!
The other issue is that new selected items do not get added on the non-edit screen.
More images below to show what I mean...
Image below shows the intial screen load selected items and also items that are selected and not in edit-mode. The issue is that it is not updating with new items that are selected. Also it shows the selected ID's instead of a title/name
My end goal is to simply use Select2 on my X-editable field to allow the selection of an Assigned User. Selected assigned users will show a gravatar thumbnail image and the user name.
Both Select2 and X-Editable allow the use of a template style output to modify there output however when they are working together, there default functionality is different and those output modification functions do not work the same as they do when running either library on it;s own.
I know what I want can be done since the 2 libraries are meant to work together, it's just a matter of getting the newer versions of Select2 to work with the older version of X-Editable which has not been updated in a long time sadly!
The final jsfiddles that I was testing on are at https://jsfiddle.net/N6bQE/329/ (bootstrap-editable) and https://jsfiddle.net/N6bQE/331/ (poshytip-editable).
Here are some observations I made while trying to make Select2 4.0.0 work with X-Editable.
You were setting data-value to apples, oranges, pie (note the spaces), which is technically not correct. The ids are supposed to match up exactly, but due to an unfortunate mistake a feature in older versions of Select2, extra whitespace was completely ignored.
Removing the spaces solves the main issue, which was Select2 not matching options correctly (and as a result not displaying them).
Your source did not contain any of the values you were passing in through data-value, so Select2 had no way of displaying them. By lining some of the id attributes up, Select2 was one step closer to displaying the selected values when the popover was displayed.
You were using both tags and source, which X-Editable does not allow. The plugin appeared to prioritize tags over source, so nothing was actually being passed into Select2 and your source was totally ignored.
But that doesn't matter too much, because X-Editable isn't displaying the values correctly in the first place. You'll notice that the data-value is being displayed as a single tag, instead of being split up and displayed as multiple tags. In order to get X-Editable to cooperate with this, you need to set separator: ',' in your Select2 options. While this option is no longer supported for Select2, X-Editable completely ignores the viewseparator option in favor of this one.
In order to get the tags to update after they are edited, you need to check if value in the display method is an array or not. This is because X-Editable just passes back a string to the display method, instead of the array that one would expect.

Chosen multiselect does not show dropdown list on first click

When all the select options are removed from mutli-select, it displays data-placeholder value, which is fine, but clicking select box for first time, it does not pull the drop down. On second click the multi-select works fine.
This problem happens in all browsers. I also have found the same problem in demos showed in below link.
Is there any fix for this issue?
http://harvesthq.github.com/chosen/
It might just be the functionality of it. After clearing out the option, they may want you to double click on it to clear out the text.
However if you want to report the bug I would suggest doing it on their github page.
https://github.com/harvesthq/chosen/issues

How do I put a box with jquery inside a javascript function?

I am very new to javascript and trying to make a drop down box that selects the number of items you want to list. This works and when you choose the number of items you "want" it shows the right number of text boxes underneath. I want to be able to have a tag for every item, this would work fine however I want to be able to auto suggest tags. This is the code I used to do it. I can't get it to work inside the function that shows the number of text boxes based on the drop down menu.
Here is my source code and this is the link to my site.
I have tried using firebug and it says there are no errors with the javascript, the tag suggestion text box just doesn't do anything.
Thanks,
Cameron

Categories