We Keep Coding

How to get the ID of the select-option element with "change" event listener?

I am new into javascript, and I've been working on this "project", but I need some help because I'm stuck. I might've not expressed my self correctly in the title so here it is:
I would like to get the ID of an option element (<select> <option id="#"> </select>) by using the "change" event listener on the <select>. So when I choose for example "Action" from the select dropdown, I'd like that change to trigger a function that will get that element's ID and use it in a function down below. Here's the code that I have so far, which basically does the following:
1.) Gets the genre list;
2.) Then for every item in the response.data.genres, sets a number which corresponds to the length of the array (total 19 items).
3.) If the selected "option" element matches the name of the genre in the array, then it defines the genre ID(the integer) and makes another request to the API in order to list the movies matching that genres ID. Thanks in advance.
//Genres
function genres(){
//API request.
axios.get("https://api.themoviedb.org/3/genre/movie/list?api_key=<API_KEY>&language=en-US")
.then((response)=>{
//console.log(response);
let genres = response.data.genres;
genres.length;
console.log(genres)
for(var i = 0; i < genres.length; i++){
var genresId = response.data.genres[i];
var tag = document.getElementById("Thriller");
console.log(genresId);
if(tag.id === genresId.name){
let genre = genresId.id;
axios.get("https://api.themoviedb.org/3/discover/movie?api_key=<API_KEY>&language=en-US&sort_by=popularity.desc&include_adult=false&include_video=false&page=1&with_genres="+genre)
.then((response)=>{
console.log(response);
})
}
}
})
}

So there are two steps if I understand correctly.
1. get the list of genres and fill a selectbox with it.
2. get a list of movies if an option in the selectbox is selected.
The first step, you can do with an innerHTML method. For every genre that is returned, you build a string like <option value='genre'>genre</option>. With innerHTML you add these options to the select box. The value property is what you use to see which option is selected.
Next we add an eventlistener to the dropbox so our script will react to the changes the user makes. The event we're listening for is 'change' and it will trigger the function 'getMovies'. See Mozilla docs for more info. event.target.value will give you the value of the selected option, which you can use as genre id.
Inside this function you will do your second api call to get your movie list.
A simple example without the api calls is this:
let genreDropdown = document.getElementById('genre');
genreDropdown.innerHTML = getGenres();
genreDropdown.addEventListener("change", getMovies);
function getGenres(){
let genres = ['action', 'romcom', 'thriller']; //this would be replaced with the api call to get the genres
let innerHtml = '';
for(var i = 0; i < genres.length; i++){
var option = '<option value='+genres[i]+'>'+genres[i]+'</option>';
innerHtml += option;
}
return innerHtml;
}
function getMovies(event) {
let genre = event.target.value;
alert(genre) //you can replace this with the api call to get the movies.
}
<select id='genre'>
<option>loading...</option>
</select>

The following Code will look for a <select> (its id to be exact) Element and on change it will output the ID of the Direct Child (<option> in this case).
$(document).ready(function(){
$("#myDropdown").on("change", function(){
the_id = $(this).children(":selected").attr("id")
$("#output").html(the_id);
});
});
I have made an Example for you > JS Fiddle
Hope you can use the jQuery Code.

How can I get the value of selected optgroup with jquery and select2?

I use select2 for selectbox and made <optgroup> selectable, but I can't get the value when I select it.
It's very important to get all options of the <optgroup> when you type optgroup name, as a result I can't replace <optgroup> with ususal <option>.
See jsfiddle example http://jsfiddle.net/iptspl/41r158dm/1/

You can try using the choice value on the event (if it exists) then check that for children and then combine their values.
on("select2-selecting", function(e) {
var value, choice = e.choice;
if(choice.children && choice.children.length > 0) {
value = [];
$(choice.children).each(function(index, child) {
value.push($(child.element).val());
});
value = value.join(",");
} else {
value = e.val;
}
alert(value);
});
At any rate, whatever you do you will most likely need to do something similar which is detect if it is an optgroup and then traverse the children and create the value.

easyui datagrid insertrow get input value

I mean I want to insert a new row in datagrid to use insertrow method.
but the rows parameter is fixed ,i want to get the new values when i click save button
code belows.
$("#insertRow").click(function(){
var row = $('#dg').datagrid('getSelected');
if (row){
var index = $('#dg').datagrid('getRowIndex', row);
} else {
index = 0;
}
$('#dg').datagrid('insertRow', {
index: index,
row:{long:row.long} //I mean this place must be the value i typed ,like row.long
});
$('#dg').datagrid('selectRow',index);
$('#dg').datagrid('beginEdit',index); });

you can try like this if you want to set the blank value
$('#dg').datagrid('insertRow', {
index: index,
row:{long:''}
});
and row:{long:'long1'} to set the value to the field
** if this is not helping, please provide your datagrid code and please more explicit of your code row:{long:row.long}

How do I check if Dropdown List is readonly?

I want to check if a dropdown list is readonly. I have this dropdown on my xpage inside repeat control and based on certain condition one of my dropdown will be in readonly. I want to check which one is in readonly using CSJS (javascript, jquery, dojo)

you can using jquery with few ways:
1st Way:
if($('select').attr('disabled'))
{
alert("read only");
}
Fiddle Example
2nd way:
if($('select').is(':disabled'))
{
alert("read only");
}
3rd way:
if($('select').attr('readonly'))
{
alert("read only");
}

Assuming that your dropdown is an XPages control of type xp:combobox, you can do the following to check if the control is readonly using server-side logic:
getComponent("<id of combobox>").isReadonly()
As you mention yourself, a readonly combobox in XPages is not rendered as a dropdown but as a table with an id of your combobox.

Try with this with jQuery methods:
alert($('select[readonly]').attr('id'));
// alerts the id of readonly select element
if there are multiple readonly select elements then you can store the ids in an array with .map() method:
var readOnly = $('select[readonly]').map(function(){
return this.id;
}).get();
Demo # fiddle with readonly attribute.
or if you meant for disabled then you can change to this script:
alert($('select[disabled]').attr('id'));
or
var readOnly = $('select[disabled]').map(function(){
return this.id;
}).get();

As we know a readonly combobox in XPages is not rendered as a dropdown but as a table with an id of combobox.
If we try to set some values to the readonly dropdown it wont be visible as the readonly dropdown gets rendered as table and that table has value property.
So, I created a span element on runtime for showing my readonly combobox value with the id of my combobox and used visible property of dropdown instead of readonly property so that even table doesn't gets created.
function setValues()
{
//START OF CODE: Set values on dialog
var RepID = "#{id:repeatControlID}"
var totalcont = "#{javascript:getComponent('repeatControlID').getRowCount()}";
var val = "#{javascript: DataSourceObj.getItemValue('docField')}"
for(i=0;i<val.length;i++)
{
var idChL = RepID+":"+i+":comboboxID";
var cbCell = RepID+":"+i+":cbCell"; //cbCell is my id of table cell in which my combobox is present
var element = document.getElementById(idChL);
if(element) //Check if dropdown is rendered, if not then create element on fly
{
element.value = val;
}
else{
createEle(idChL,cbCell,val);
}
}
//END OF CODE: Set values on dialog
}
function createEle(idText,cbCell,idVal)
{
var input = document.createElement("span");
input.innerText = idVal;
input.id = idText;
var parentEle = document.getElementById(cbCell);
parentEle.appendChild(input);
}

How to differentiate between DOM elements in jQuery

I have some code that loops over each row of the table and creates a json object. The elements in the rows can be either of the following:
<input type="text" id="myelem"/>
or
<p id="myelem">foo</p>
Notice that the id attribute for the both is same. This is because on the table there is a button Add a new Row when this button is clicked another row is added to the table with a checkbox. When user submits the form the checkbox goes away and the value they entered turns into <p id="myelem">value they entered</p>
Below is the code I'm using for this.
$('.input-row').each(function(index, row) {
var innerObject = {};
var key = $('#myelem', row).val().toUpperCase();
jsonObject[key] = "bar";
});
The above works fine for textboxes becuse I'm using the .val() function. However, how do I get the data from the row if it contains <p id="myelem">foo</p> ??
my pseudo code would be something like this:
$('.input-row').each(function(index, row) {
var innerObject = {};
/*
if #myelem is a text box then use .val()
if #myelem is a <p> tag then use .html()
*/
var key = $('#myelem', row).val().toUpperCase();
jsonObject[key] = "bar";
});

ids should always be globally unique on a page. If you need multiple elements to be referenced, you should use classes. If you set myelem as a class rather than an id you could then reference it like this
$('.input-row .myelem')

You can check which type the element is with
var value = null;
if($('#myid').is('input')) {
value = $('#myid').val();
}
else if($('#myid').is('p')) {
value = $('#myid').html();
}

IDs are unique. You cannot use more than one ID in the same page. If you do so how should you decide which element to use?

You could use jQuery is() eg if $('#myelem').is ('p'){...}

If still want to stick your development way then below might help you:
$('.input-row').each(function(index, row) {
var innerObject = {};
var c = $('#myelem', row);
var isInputField = c.get(0).tagName.toUpperCase()=="INPUT";
var key =isInputField ? c.val().toUpperCase():c.html().toUpperCase();
jsonObject[key] = "bar";
});

This is to just get you started. You are using .each on class input-row but you have not shown the class in your code that you provided. I have used class instead of id in this example. Use it to work ahead.
Fiddle