Javascript innerHTML messing with html attributes - javascript

I'm trying to have a select inside a materialize modal.
So far everything works fine but when I refresh the content of the modal select with an ajax request, the select disappears.
After investigating, I find that the innerHTML is not proper HTML.
Here is what I have :
let modal = htmlResponse.find('#modal')
let modal_old = document.getElementById('modal')
console.log(modal)
console.log(modal.innerHTML)
modal_old.innerHTML = modal.innerHTML
The console log is the following :
<div class="modal-content">
<h4>Title</h4>
<p>Some Text</p>
<select id="mySelect" name="mySelect">
<option value="" disabled selected>Select one user</option>
<option value="2" id="2 ">Name 1</option>
<option value="4" id="4 ">Name 2</option>
</select>
</div>
<div class="modal-footer">
Cancel
Ok
</div>
Followed by
<div class="modal-content">
<h4>Title</h4>
<p>Some text</p>
<select id="mySelect" name="mySelect">
<option value="" disabled="" selected="">Select one user</option>
<option value="2" id="2 ">Name 1</option>
<option value="4" id="4 ">Name 2</option>
</select>
</div>
<div class="modal-footer">
Cancel
Ok
</div>
As we can see, the disabled and selected are replaced with
disabled="" and selected="".
The modal is still opening after the innerHTMl replacement but the select is not visible.
When I inspect the modal (after the ajax replacement) using Chrome dev tools, I see the first output (with the correct select) but it's not displayed.
Is this caused by innerHTML or a bad usage from me?
By the way, I'm testing on macOS High Sierra (10.13.2) with Chrome (63.0.3239.108) which are both in the latest available update.
The website is hosted in a docker container but I don't believe the problem could come from here.

After investigating, I find that the innerHTML is not proper HTML.
It is proper HTML.
See boolean attributes:
A boolean attribute without a value assigned to it (e.g. checked) is implicitly equivalent to one that has the empty string assigned to it (i.e. checked=""). As a consequence, it represents the true value.
So the two sets of HTML express the same information and both do it correctly.
Converting HTML to a DOM and then asking the browser to convert a DOM to HTML will give you normalised HTML, not the original HTML. So the change is normal.
When I inspect the modal (after the ajax replacement) using Chrome dev tools, I see the first output (with the correct select) but it's not displayed.
None of the code in the question would explain it not being displayed. That must be caused by some other part of your code.

The problem was due to the implementation of select in Materialize.
I haven't had any problems with it yet so I didn't read the documentation properly. It's written that a select must be initialized with jQuery.
So I added
$('select').material_select()
and reinitialized the modal
$('.modal').material_select()
and now everything is working.

Related

Form select value does not work with Chrome 101

Here a snippet from my HTML page:
<div class="col-md-6">
<label for="network_mode" class="form-label">Default network mode</label>
<select name="network_mode" id="network_mode" class="form-select" aria-label="Network mode">
<option value="1">Offline</option>
<option value="2">Hotspot</option>
<option value="3">Station</option>
</select>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
document.querySelector("#network_mode").value = "~FORM_NETWORK~"
});
</script>
Where the ~...~ placeholder is replaced with a string by a pre-processor of the webserver. The actual content will be, for example:
document.querySelector("#network_mode").value = "2"
In that way, after loading the page the select field will show the currently selected option. This works fine in Firefox, but in Chrome (at least in v101) does not. The select field always shows the first item, no matter the value set.
I've read the querySelector and the select doc pages and I didn't find anything useful about this browser odd behavior.
Where should I gather the required information in order to make Chrome working as well?

Cannot read property of null on page load

I have the following javascript:
$(document).ready (function () {
var select = document.getElementById('party_size');
select.selectedIndex = select.options.length-1;
});
And here is the html, rendered from .erb. The amount of option fields is dynamic.
<div class="col-sm-9 col-sm-offset-1">
There will be
<select onchange="partySize.call(this, event)" name="reservation[party_size]" id="party_size">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
people in my party.
</div>
On page load, Google Chrome is returning Uncaught TypeError: Cannot read property 'options' of null and the select is not selecting the last option, which is what the javascript is designed to do.
On refresh, the error does not fire as well as the javascript works correctly (the select field properly selects the last option). In the above example, the option with the value of 3 is selected.
What do I need to change with the javascript to make it properly fire on page load?

How to add a DIV to select option using javascript

My question is about java script, i want to put or add a div or button or input inside select tag using java script.
I using jquery.sumoselect plugin that make you multiple checkbox, but when i want to add some DIVs inside select tag is showing outside the list.
i want the div inside select element like this picture : http://i.stack.imgur.com/Xd6FX.jpg
this is my html code
<div class="select-box-style right">
<div class="your-list-title">Your Lists</div>
<select multiple="multiple" class="md_what_get right SlectBox">
<option selected value="electronics">Electronics</option>
<option value="games">Video Games</option>
<option value="books">Books</option>
<option value="others">Others</option>
<option value="others"><input type="text" name="lname"></option>
</select>
<div class="add-list-box">
<input type="text" class="input-add-list"/>
<label class="label-spcbtn-blue spr" >Add</label>
</div>
</div>
and this how to call the plugin:
<script type="text/javascript">
$(document).ready(function () {
$('.SlectBox').SumoSelect();
});
</script>
thank you for helping!
....
Update!
see this link http://wenzhixin.net.cn/p/multiple-select/docs/
On The Filter1 you can see the input search inside select element, how can i do that?
Neither SumoSelect or MultipleSelect (as is) supports the feature you are looking at. But, first, some clarification needed:
<select> boxes are a standard HTML tag, that accepts no other tags than <optgroup> or <option>. see here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
SumoSelect and MultipleSelect are both Javascript plugins that “converts” real selects into custom built <div> tags, with javascript to handle the logic.
That said, you can either modify/extend those plugins to create the desired <div> or you can build your own “<select> into <div> converter”.
But, for the sake of simplicity, you could just create a <div> with all the desired functionality, using regular plain old checkboxes, and hiding/displaying the whole <div> according to your UX flow/needs.

JQuery mobile adds form element after calling a async function

I'm using jquery mobile. In my form I have two selectmenu filterable plugin. After I push the button (not submitting the page, only calling a javascript async function that sends parameters to server), the structure of the page is not the same as before. The filter textboxes are shown below each "select" method, and nothing works! I expanded the elements of the page, and I saw that it automatically wraps element with tag (after the function ends). So maybe that's why the structure is disassembled. Any idea how to fix this problem?
UPDATE:
This is the code for html (other codes are originally from jQuery):
<div class="ui-field-contain">
<select id="lstProjects" data-native-menu="false" class="filterable-select">
<option>Select Project</option>
</select>
</div>
<div class="ui-field-contain">
<select id="lstDuration" data-native-menu="false" class="filterable-select">
<option>Select Duration</option>
</select>
</div>

With use of change() and show(), drop down list selection is not shown on android chrome

On the selecting a value from a drop down list, I wan't another hidden element to show up.
I'm using the following code:
$('#ddd').change(function() {
$("#divoption237").show(300);
});
<div id="option236" class="option">
<select id="ddd" value="236" name="option[236]">
<option value=""> --- Selecteer --- </option>
<option data-id="49" value="40">Hond</option>
<option data-id="50" value="41">Kat</option>
</select>
</div>
This all works fine in firefox, chrome and IE on my desktop. However I've run into some weird problem on my android phone in chrome. Whenever I select a value, for example Hond, it won't show up as being picked. So the user will still see -- Selecteer -- on his/her screen. The value is selected however and will be send if the form is sent. If I change show(300) to show(), the value is shown to the user. I'd like to use the animation though. Does anyone have a solution to this problem?

Categories

Resources