Develop Reference

Create a 'select' drop-down menu in JavaScript

I'm having a problem in a simply js function. I have a web page where I show records in a table, and when I click on an icon (which stands for 'change this record'), that cell of table should be replaced with a dropdown menu in which the user can select the new value for that record based on the available ones.
I tried in a lot of ways:
function clickOnModifyProfessor(id, professors) {
let select = document.createElement("select");
select.setAttribute("id", id);
for (let i = 0; i < professors.length; i++) {
let el = document.createElement("option");
el.textContent = professors[i]['name'] + " " + professors[i]['surname'];
el.value = professors[i]['professorID'];
select.appendChild(el);
}
//I set id=2 simply to test with one specific record, if it works I'll just set another parameter to generalize the change.
const node = document.getElementById("2");
node.textContent = '';
node.appendChild(select);
}
With this code I just get the empty table cell after clicking on the modify button, but the strange thing is that if I try to create another element (textarea, password etc) it works perfectly, so I can't understand why it does this only with the select element. I also tried by creating the whole select with option elements and taking it to the table cell by the innerHTML, but it doesn't works (as before, it works with others elements that aren't 'select').
If it can help, here is the code fragment where I call this function:
echo "<tr><td>" . $row['subjectName'] . "</td>
<td id='" . $rowsCount . "'>
<p>" . $row['profName'] . " " . $row['profSurname'] . "
<i class='material-icons' onclick='clickOnModifyProfessor(" . json_encode($row['subjectName'], JSON_HEX_APOS) . "," . json_encode($professors, JSON_HEX_APOS) . ")'>create</i>
</p>
</td>
</tr>";
PS: I also tried to print in console document.getElementById(id).innerText after I append the new 'select' element to the document and it prints correctly the options I added.
Am I making an error? I hope it's sufficiently clear.

I answer my own question with the solution I found, maybe it can be helpful for someone.
The problem is that the materialize css' select can't render on browser without starting js before, so it's necessary to add class='browser-default' when we create the select element or, if we want materialize css select style, we need to use $('select').formSelect(); after the select element has been created with its options.

How can I make one cell in a table "content editable" after hitting and edit button in the table

I am working on a permissions page on my site and currently have it sets up with three columns Username Permissions and Action. When I press the Edit button in the Action column I want to be able to edit the Permissions column only in that specific row. Right now I have it setting both the Username and Permissions cell to be contenteditable.
Here is is my definition of my table (data being pulled from DB):
echo "<td class='username'>" . $row['username'] . "</td>";
echo "<td class='permissions'>" . $row['isAdmin'] . "</td>";
echo "<td><input type='button' class='btn btn-primary edit' value='Edit'></td>"
And Here is the script I am currently using to change each column in the row:
var $this = $(this);
var tds = $this.closest('tr').find('td').filter(function () {
return $(this).find('.edit').length === 0;
});
//console.log(tds);
if ($this.val() === 'Edit') {
$this.val('Save');
if($this.id !== '.edit') {
tds.prop('contenteditable', true);
}
}
I need it to only select the <td class='permissions'> in the current row that the button was clicked on.
What is the proper way to select only that cell in the corresponding row?
I've tried multiple ways to try and only select it from tds based on the class but have had no success.

Instead of using the rather complicated construction
var tds = $this.closest('tr').find('td').filter(function () {
return $(this).find('.edit').length === 0;
});
you could simply do
var tds = $(this).closest('tr').find('td.permissions');
to identify the target element to make editable. I assume that this code is part of the 'click'-event function for the "edit" button..

I have made a fully editable HTML Table using DataTables and some custom code. I can't share the whole code though, as it is a closed-source project for work, but I think it will be helpfull.
Take a look at my repo
Some useful notes:
1) I used Mutation Observer Api to track changes in cell values. I stored every changed cell in an array and on clicking 'Save' the array gets sent with AJAX to the back-end.
2) There is a HTML attribute called contenteditable. It lets you edit, well, the content of an element. Use that to edit the cells' values before appending them to the array. Attach an event listener to the 'Edit' button and when it is clicked, add this attribute to all the 'td' elements of your table.
3) You just send the array with values to the back-end and run some simple queries to your database.
Hope it helps you.

How to make a conditional show and hide modal to my on click function

I have problem to my show and hide modal,So when i click the input number inside of table data the why the modal still showing, I have a function which when i change the value of input number , the modal will hide.
So here below, I will show you the codes I have,
First I have append function to append all data inside of table
$('#edit_chainingBuild').append("<tr class='clickable-row'><td>" + Qty + "</td><td class='clickable-row-condiments'>" + Condiments + "</td><td>" + Price + "</td><td style='display:none;' data-attribute-chain-id="+menu_builder_details_id +" class='data-attribute-chain-id'>"+menu_builder_details_id+"</td></tr>");
Now Second when i click each table row, modal will show,
$('#edit_chainingBuild').on('click','tr.clickable-row',function(e){
$('table#edit_chainingBuild tr').removeClass('selected');
$(this).addClass('selected');
var find_each_id_will_update = $(this).find('.data-attribute-chain-id').attr('data-attribute-chain-id');
$('.id_to_update_chain').val(find_each_id_will_update);
$('#EditcondimentsBuilderModal').modal('show');
});
The output of that two is this,
Now here in my second scenario,
When i change the value of Input number quantity, I want to stop the modal to open which the id is this.
$('#EditcondimentsBuilderModal').modal();
My Codes for changing the quantity is this.
$(document).on('change', '.changeQuantity', function() {
// Does some stuff and logs the event to the console
alert($(this).val());
$("#EditcondimentsBuilderModal").modal('hide');
});
The output of changing quantity is working, The question is I want to have condition if i change the value of quantity modal will not show,

Your hiding code seems ok, so it should be hiding #EditcondimentsBuilderModal. But then there's your $('#edit_chainingBuild').on('click','tr.clickable-row', ... handler that attempts to show it again on click. So it can easily result in a weird and confusing behavior, if you for example focus an input field with the mouse, before changing it (effectively triggering both handlers that is - open and close).
Consider altering the logic for either of the handlers, at least temporarily - to confirm the case.

Trying to get values from self submit form using javascript

I have a database from which I generate options for the user to select from. Based on this selection, I submit these values to the same page and get the selections using javascript.
In the same form, I have a radio buttons and a multiple selection menu.
The html is generated as such:
Radio button and multiple option selection code:
htmlstr+="<select multiple>";
for (i=0; i<g.length;i++) {
htmlstr+="<option name='ges[]' value='" + g[i] + "'>" + g[i] + "</option>";
}
htmlstr+="</select><br>";
for (i=0; i<st.length;i++) {
htmlstr+="<input type='radio' name='sts' value='" + st[i] + "'>" + st[i] + "<br>";
}
These are both placed within a form, which then has a submit button.
Upon clicking the submit button, I want to know the values of the selections. I understand the multiple selection will be an array, but how do I get the array of values, and I cannot even get the value of the selected radio button. I have already tried getting the value using the .value attribute attached to the name, however this does not work.

There is not a real simple way of doing it. You'll have to check each option.
There is a HTMLSelectElement.selectedOptions interface that is documented. But it's not used much and I'm not sure of the browser support. Plus, it only applies to the select control and not the radio controls. You can check it out here though: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement
But for a more reliable method, try this...
For the select control, iterate through the selectControl.options array, and check each item for a selected attribute. If the selected attribute is true, then add that value to your own array.
Pseudocode:
for (var i in select.options) {
if (select.options[i] && select.options[i].selected) {
selectedOptions.push(select.options[i].value);
}
}
For the radio buttons, iterate through the array of objects in the dom (getElementsByName), and check the checked attribute. It it is true, add that value to your array.
Pseudocode:
for (var i in radios) {
if (radios[i] && radios[i].checked) {
selectedOptions.push(radios[i].value);
}
}
Here is a full working sample using your code:
jsFiddle: https://jsfiddle.net/mspinks/u890j86j/3/

Use LIKE operator to select all checkboxes that match pattern

I need a little guidance. I have an HTML form comprised of a very long list of items pulled from an array generated by a database query (it's a list of university courses). Users need to be able to select as many or as few courses as are relevant to their research: because the list can have hundreds or items I have a "select all" and a "select none" function and have added a jQuery shift-select batch selector to make this as easy as possible.
However, I also want them to be able to enter some text in an input box and click APPLY to select all checkboxes where the label text pattern matches using a LIKE operator (i.e., if they want all MATH courses, or all courses of level 2xx). The project is using PHP and JavaScript/jQuery/AJAX.
I know how to pull from the database based on LIKE queries, but I'm just a bit stumped as to how best loop through the generated form and target the items that are in my form. (My PHP is pretty strong, my jQuery is a bit shaky).
The list of checkboxes is generated via a loop through the array with each item set up as follows:
$o .= '<input id="'.$rw[2].'_'.$rw[0].'"
type=checkbox name="' . $rw[2].'_'. $rw[0]. '" />';
$o .= '<label for="'.$rw[2].'_'. $rw[0].'"> ' . $rw[1] . '</label>';
$o .= '</td>';
So we end up with a simple checkbox form with a LABEL FOR and the label text, and the items are all named as the array keys.
This is the HTML output for a typical item:
<tr><td><input id="110_105" type=checkbox name="110_105" />
<label for="110_105"> PHIL233</label></td></tr>
Sorry if this description is a bit long, but what I need is an idea of how to go about looping through the form's elements after it is generated to SELECT the checkbox for every item where the pattern matches.
Hope this makes sense!
Tamra

This situation is perfect for using AJAX to filter the checkbox list. I highly advocate for this instead.
But if you need to filter on the client it's fairly easy with JavaScript.
//give the labels a class so they are easy to find
var labels = document.getElementsByClassName('course-name');
//filtering text field
var query = document.getElementById('query');
//'apply' button
var queryBtn = document.getElementById('query-submit');
queryBtn.addEventListener('click', function() {
for (var i = 0; i < labels.length; i += 1) {
var label = labels[i];
var text = label.innerText;
if (text === query.value) {
label.previousElementSibling.checked = true;
}
}
}, false);

You can try it with jQuery find method.
http://api.jquery.com/find/
With it and the "Attribute Contains Selector", you can do the trick.
http://api.jquery.com/attribute-contains-selector/