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?
Related
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.
In a django form, I have set the default option for a select. It is not showing those changes in UI, but after inspecting I'm seeing that the DOM is actually being changed. When I check in the console for the HTML, I can see that the selected option is set to 1, but when I ask jquery for the selected option it gives me another.
$("select[name=spread_format] option")
[<option value="0">in.</option>, <option value="1" selected="selected">ft.</option>]
$("select[name=spread_format] option:selected")
[<option value="0">in.</option>]
$("select[name=spread_format]").val()
"0"
What I want to accomplish is to show 1 as default. This select is being rendered in a bootstrap modal.
Strange to notice that the selected option in UI is '0', not '1' as indicated my DOM.
In order to get the value of the selected option you should use val(), and not searching for the <option> element.
$('#btn1').click(function() {
console.log($('#s1').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="s1">
<option value="1">A</option>
<option value="2" selected="selected">B</option>
<option value="3">C</option>
</select>
<br />
<button id="btn1">click</button>
I'm building a select with several options from my php script using pattemplate.
But no matter what I do, the selected option shows in the dom tree like this:
<select id="academicYear">
<option value="1516">2015-2016</option>
<option value="1415">2014-2015</option>
<option selected="" value="1314">2013-2014</option>
<option value="1213">2012-2013</option>
</select>
Is there any way using dom - javascript - jquery to turn:
<option selected="" value="1314">2013-2014</option>
Into:
<option selected value="1314">2013-2014</option>
?
The reason why I need the change: with selected="" I don't get any selection when my select shows in the dialog window where I present it. When I turn it into just select with Firebug and Chrome debug bar the selection works.
Thans a ton!
You can use the id for faster and safer selector:
$('#academicYear option[value="1314"]').prop('selected', true);
The right html sintaxis is:
<option selected="selected" value="1314">2013-2014</option>
I believe setting the value of select will alter that property correctly for you. Otherwise if you still need to change the selected property...
$('option[value="1314"]').prop('selected', true);
I have written my first jquery mobile site using their multipage template.
In my application, Changes in the main page can affect the selected value in a drop down in a sub page. The first time I go to the sub page, the correct option is selected and displayed. After that, when I go to the sub page, the correct option is selected (ticked), but the wrong option is displayed.
I created a jsfiddle to demonstrate this... http://jsfiddle.net/afePj/2/
page one lets you select an option...
<select name="selectname1" id="selectid1" onChange="changePageTwo()">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
...and sets the selected value on page two to match...
function changePageTwo() {
select1 = document.getElementById('selectid1');
select2 = document.getElementById('selectid2');
select2.selectedIndex = select1.selectedIndex;
}
...when you arrive on page two I would like the selected value to be displayed. But after the page has been displayed once, the option it shows never changes...
<select name="selectname2" id="selectid2">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
Any ideas about how I can make the sub page display the selected value?
Thanks
When you update a select menu in jQuery Mobile you need to call the select menu widget's refresh menu so that the display is updated to match the native elements
For example
$('selectid2').selectmenu('refresh');
http://jsfiddle.net/afePj/4/
I have the following select form element, and I want to apply the rateit jquery plugin to it.
<select class="test" id="Rating" name="Rating">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
and I am trying to apply the plugin using $("select.test").rateit();, but despite fireQuery showing data attached the the select element that, no effect is made and I am still left with a select box, and not a line of stars.
EDIT
CSS File is included
Here is the page in question
You're using the plugin wrong. See very simple example: http://jsfiddle.net/rudiedirkx/ZuJ2k/
The select has to be there, but you still have to reference the div when you call the plugin: $('div#rating2').rateit();
The div then has a reference to the select with a data attribute: data-rateit-backingfld="select#Rating"
edit
Actually it looks like you're not using the plugin at all? Where do you call the plugin?
edit
This is your code:
rateItDiv = $('<div class="rateit" data-rateit-backingfld="#Rating"></div>');
$("div#ReviewInputZone select.test").after(rateItDiv);
$('div#rateit').rateit();
On the last line, you reference div#rateit, but that div doesn't exist. You just created a div.rateit, not a div#rateit. Change either of those to the other, and it should work. I'd keep the # because that's slightly faster (but you'd have to be sure there's only one of these rateit dropdowns on a page).
So the new first line:
rateItDiv = $('<div id="rateit" class="rateit" data-rateit-backingfld="#Rating"></div>');
edit
Also, you can test it before you change any code. Just open your Javascript console (Firebug in FF or Developer tools in Chrome) and type: jQuery('div.rateit').rateit();