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);
Related
I'm running into a problem with an old web forms app that I am adding some functionality to.
I have a table that is dynamically populated from a database and lives in a DataGrid. I'm attempting to add a drop down carrot that will show a certain section of the table when clicked. The problem is, the ID is set dynamically by the ASCX file/or it is going to not be unique so I am trying to figure out a creative way to grab it and display it.
Is it possible to grab the sibling p with a class name of problemDescription after clicking on P above?
I've tried using combinations of this function but that just returns either nothing, or the .problemdescription from the next row.
function expandDescription(buttonClick) {
//returns the problem description from the next row
$(buttonClick).closest('tr').next().find('.problemDescription')
//does not find anything
$(buttonClick).closest('td').next().find('.problemDescription')
//does not find anything
$(buttonClick).closest('p')
//does not find anything
$(buttonClick).next('p')
//does not find anything
$(buttonClick).closest('.problemDescription')
}
Thanks for any help!
$(buttonClick).closest('tr').find('.problemDescription')
I am writing some function test on a form and I am running into issues selecting values from a bootstrap-select2 drop-down.
If you are unfamiliar with Select2, here are some examples;
https://fk.github.io/select2-bootstrap-css/3.5.1.html
All the drop-downs are un-order list that appear when you click on the drop-down.
I click on the drop-down with;
.findById('select2-chosen-1').click().end()
The above lines makes the un-ordered list appear, but I am unsure how to select a specific selection.
if I do the following I can print out all the selections;
.findById('select2-results-1')
.getVisibleText()
.then(function(text) {
console.info(text);
})
I tried to get all the li tag names under that , .findAllByTagName('li'), but I am not sure what to do with that array.
Any help to point me in the right direction would be very helpful. Let me know if you need any more info.
Thanks!
Once you open the dropdown, you just need to find the particular item you want to select and click it. I generally use findByXpath, or a combination of findByCssSelector and findByXpath, when I'm trying to find something that contains text, like:
.findById('select2-chosen-1')
.click()
.end()
.findByCssSelector('.select2-drop-active .select2-results')
.findByXpath('.//li[div[text()="Alaska"]]')
.click()
.end(2)
The code above finds the Select2 and clicks it, then finds the dropdown result node. With the result node as the current reference, it uses an XPath expression to find the li that contains a div with text "Alaska", then clicks the li. The end(2) after the click handles both the findByXpath and findByCssSelector calls.
I have a Magento Website. I have two js files, one written in Prototype an one in jQuery.
I have two select elements, with about 10 options. From jQuery I'm changing the first select's attribute "selected" (an some more). In Prototype I have a class that creates dependencies between two select elements.
If I click on the first select element and choose an option with the mouse, on the second select element will appear only the options that are linked to the option I choosed in the first select element. This is allready done in prototype.
The idea is that I want to do the click/trigger automatically from jQuery. The first select change it's selected option. But the second select element display all the options (and should display only the options linked to the first select element).
On the Prototype file I have some Event Observers, and I guess that these observers are not triggered from jQuery:
var select_el = $('select_' + id);
...
Event.observe(select_el, 'change', this.update.bindAsEventListener(this));
Event.observe(select_el, 'swatches:change', this.update.bindAsEventListener(this));
...
update: function(event) { ...
So I need somehow to trigger these events from jQuery, or to set an autocheck in Prototype.
Please tell me what should I do.
I've read on stackoverflow that events from Prototype can't be triggered from jQuery. There should be a way to do that. I just haven't found it.
I've tried jQuery functions like:
jQuery("option[value='" + checkedId +"']").attr("selected","selected").parent().focus();
jQuery("option[value='" + checkedId +"']").parent().trigger("onchange");
jQuery("option[value='" + checkedId +"']").parent().trigger('change');
Where the "parent()" is the first select element. The first select element changes as I want, but the second select element should automatically change after the first select is changed. And this never happens. It works only if I click with the mouse on the select and choose manually an option. I want to do this from jQuery, without being necessary to manually click on the desired option.
Thanks for reading this, and now just give me a fix for this problem.
Regards.
so I have a div in HTML that contains a Select with working options that triggers an event when changed. When I equal the innerHTML of a temporary row to the div that has the Select, it shows the select with the options, but when you click it, nothing happens. When I inspect element it, it shows it has the same values and IDs, but it doesn't seem to work. Weird question, I know. Thanks for the help.
document.getElementById(updatedStatus + '-noterow-temp').innerHTML = document.getElementById(channelToBeUpdated + '-noterow').innerHTML;
updatedStatus+'-noterow-temp' is the duplicate of the div and channelToBeUpdated+'-noterow' is the original div with the Select. In the view, it works and displays the Select tag, but the duplicate doesn't trigger the events when the options in the select are changed. Here's my question; How will I equal these two divs, display the Select, and get it working? Thanks!
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/