Setting value of dynamically generated drop down selector - javascript

I have a drop down select menu that is generated dynamically. Its generated using the html select syntax which is then simply inserted using the .after method. And then I use ajax call to get elements of the selector and fill it like this.
$($.parseJSON(msg)).map(function () {
return $('<option>').val(this.id).text(this.name);
}).appendTo('#item');
Now After this code populates the 'item' drop down menu I have to set it to the some element, say the fifth. So I tried to do it like this.
$('#item').val('5');
I have even tried to specifically identify the item. Since its in html table, like this.
$("#itemTable > tfoot > tr.items").find("td:eq(0) [name='item']").val('5');
The above code works fine in other situations when I have a drop down manually created. So I figured both the above attempts are not actually identifying the 'item' drop down component. So is there any other way I can try this?

jquery documentations for map() says: "If you wish to process a plain array or object, use the jQuery.map() instead."
Your dropdown will not get populated (check console for errors) and so setting any value to #item will not work.
Try this:
var options = $.map($.parseJSON(msg), function (n, i) {
return $('<option>').val(n.id).text(n.name);
});
$("#item").append(options);
With this code, drowdown will get populated and then $("#item").val("5") will work.
JSFiddle: http://jsfiddle.net/6Us9N/

Related

Visually move from one html element to another - Javascript

For context sake this a school work where I type text into input field and I get options from database that suggest items which have same letters as user has written. It has simple name database attached.
I receive AJAX response and make that into array of names.
I have ul element underneath search field and names which come from response I populate as li items in this ul list. This all works.
What I need is functionality when pressing up / down arrow keys to move from input field into those list items.
on my first try I chose to make datalist instead of ul and I populated datalist with option elements, this worked well as I could move from input to datalist options. However, further down the road I needed to attach event listeners to options which is not possible. Hence I then went to ul / li version.
I cant seem to be able to work out how can I switch from input element into li items.
what i have tryed:
I have eventlistener keydown on input field to check if DownArrow is pressed. This works. Then i tryed following (names is the id of ul).
let list = document.getElementById('names');
list.firstChild.focus();
list.firstChild.select();
Here I get error that "list.firstChild.select is not a function" and im stuck.
link to current version
Judging your code, the reason you get the error list.firstChild.select is not a function is because you try to use the focus() method on an element which does not have it. Basically, you can use it on an <input /> element, but it won't work on a <li> item.
According to DOM level 2, only the following Elements have a focus method:
HTMLInputElement
HTMLSelectElement
HTMLTextAreaElement
HTMLAnchorElement
HTMLAreaElement
In order for element.focus() to work on list item (which it does not by default) you have to add tabindex property to list item.
for example:
listitem.setAttribute('tabindex',1);

How do I set the selected value of a dropdown in Orbeon Forms using Javascript?

I need to set the selected value of a dropdown control in an Orbeon Form using Javascript, passing in the VALUE (not position) of the required option.
For simple controls (text fields), from the documentation, I can do:
ORBEON.xforms.Document.setValue((ORBEON.jQuery('*[id $= "CONTROLID-control"]')).attr('id'), "NEWVALUE")
And also from the documentation, I can get the selected value of a dropdown using this:
ORBEON.xforms.Document.getValue(ORBEON.jQuery(ORBEON.jQuery('*[id $= "DROPDOWNID-control"]')[0]).find('.xforms-select1')[0])
Actually, that code retrieves the position in the dropdown of the selected value, e.g. "5". But anyway, I couldn't find a way to set the selected value of the dropdown using a VALUE and not a POSITION.
I built my Form using Form Builder and my dropdown is pre-populated using an Action and an HTTP Service. This is my populate action:
https://ibb.co/JsH635s
So I'd like to pass a NAME (value, NOT Position in dropdown) to the selector control to set it as a selected value.
Something like this:
ORBEON.xforms.Document.setValue((ORBEON.jQuery('*[id $= "local-branch-control"]')[0]), "MYVALUE")
I tried different combinations but none of them worked. Is this even possible in Orbeon?
Thanks
Figured it out, this is what I did:
myInitialValue = ORBEON.jQuery("select[id*='my-select-control'] option:contains(" + myInitialDisplayName + ")")[0].value;
ORBEON.xforms.Document.setValue(ORBEON.jQuery(ORBEON.jQuery('*[id $= "my-select-control"]')[0]).find('.xforms-select1')[0], myInitialValue);

How to edit selectize input after calling selectize()

My goal is to reset selected values in selectize input. I called selectize function in seperate js file (working with Ruby on Rails), so there is no option to create some global selectize input variable (at least I want to avoid it).
In select2 I would solve similar issue like that:
$(".select2").select2("val", "")
but when I call selectize() second time on the input all previous options and collection loaded via ajax just dissappear.
Thanks for help
Selectize uses .selectized as its identifying class.
Unfortunately, selectize is not accessible via $('.selectized').selectize - you need to go directly to the <select>/<input> element - $('.selectized')[0].selectize as shown in the docs.
I don't believe you can access all selectize items at once, you need to iterate through them. I recommend using the map function, such as something like:
$.map($('.selectized'), function(item, index) {
item.selectize.setValue('');
});

Rerender Dynamic Elements when using jQuery Plugin Selectize and Bootstrap-Switch

I am new to jQuery so please go easy, I have a form that will represent an Advanced Search. Users will be able to add rows to refine their specific search.
Each row has 3 elements: A Checkbox & 2 x Select boxes.
As can be seen in the fiddle I am using jquery to clone the row and place the cloned row after the last row.
Everything is working fine except visually I would like the checkbox to use Bootstrap-Switch http://www.bootstrap-switch.org/
And the select boxes to use Selectize https://github.com/brianreavis/selectize.js
Now, when I clone the row with these plugins not active, everything works.
I have NO idea how to re-render or re activate them once a new row is inserted.
Is this something that is plugin specific? Or kind of universal to jquery?
I have read HEAPS of answers on here about similar things but I cannot seem to get it right.
Here is the jquery snippet:
$adSearchForm = $('#adSearchForm');
$adSearchForm.on('click', 'button, input, select, option', function (event) {
console.log("Button Clicked", event)
});
$('#addSearchRow').click(function(event){
$('[data-content=adSearch-3]:first').clone().insertAfter('[data-content=adSearch-3]:last');
// $('.searchByField,.searchOperator').selectize({refreshItems: true});
// $('[data-toggle=switch]').bootstrapSwitch({refreshItems: true});
});
Here is the fiddle, hope its ok. http://jsfiddle.net/CkVQr/6/
Thankyou very much for your help.
Cheers
Plugins change your HTML
There are two major problems you may not be fully aware of with your code:
Whenever you do a .clone() it merely deep clones your DOM element subtree, but not any event handlers bound to cloned elements.
Your .selectize() plugin changes HTML of your form quite considerably, converting input elements to other things. So whenever you clone your already converted select filter row, and subsequently want to run .selectize() on it again, this particular plugin won't find any suitable input elements to convert. Hence it won't work. Everything will just look as it should but won't work.
What can be done?
The main idea is that whenever you clone your search filter row, you have to clone your original HTML and not after it was converted using your plugins.
HTML Templates to the rescue
One of the possibilities is to change you page (and functionality) a bit and put your search filter row in a template and always use that. When you create your first row, you should read the template (and cache it) and add+convert it on your page. When you'd add an additional row, just use the same cached template and add+convert it again.
HTML template
<script id="filterRow" type="text/x-template">
<!-- Your filter rown HTML goes in here -->
</script>
Some Javascript
var cachedTemplate = cachedTemplate || $("#filterRow").html();
...
$('#addSearchRow').click(function(evt) {
var newRow = cachedTemplate.clone(); // clone for reusability
newRow.insertAfter('[data-content=adSearch-3]:last');
newRow.selectize();
...
});

getting a list of id's for elements in a html document

So i have this html:
<select id="CompanyMultiSelect" name="CompanyMultiSelect" multiple="multiple">
</select>
and i have JavaScript that dynamically fills it up with data. The data is filled with, among other things, inputs that have id's. They are generated dynamically, so i don't know them until the page is loaded.
i need to select the id of all the inputs within the select so that i can parse their values to another location, and i want to do it with either JS or jQuery.
how would i go about selecting all ids as an array to use later on?
EDIT1:
The select segment is a placeholder for a plugin that creates a dropdown menu filled with checkboxes, so the fact that inputs are within a select shouldn't bother you :)
Suppose you already have a jquery, so you can do something like this:
var ids = [];
$("parent_element_selector").find("input[type=checkbox]").each(function(){
ids.push(this.id);
});
//here ids will be filled with ids of checkboxes.
Please note that parent_element_selector can't be #CompanyMultiSelect as select element can't contain inputs, so your plugin will create a new wrapper element. You need to figure out how you can get it with firebug or dev tools
getElementsByTagName returns an array of elements.

Categories