We have moved at community.getvera.com

Author Topic: Javascript: <select> tag not displaying options  (Read 881 times)

Offline samyoue

  • Jr. Member
  • **
  • Posts: 67
  • Karma: +6/-6
Javascript: <select> tag not displaying options
« on: March 24, 2018, 09:08:09 pm »
Hi I'm developing a plugin and am using JS to create a setup page.
Im generating the setup page as a standard HTML page, copying the source code into a var in my J_plugin.js file and getting it to set the html content to the var....

so far working wonderfully, got beautiful CSS tabs and tables and buttons and everything BUT when i try adding a simple dropdown box it displays the box but none of the options...to clarify, when i view the html page separately (same html code) it displays fine but when uploaded to my Vera it displays an empty dropdown box?????

eg.
Code: [Select]
<select id='DDbox'>
<option>Sunday</option>
<option value="Mon">Monday</option>
<option value="Tue">Tuesday</option>
<option value="Wed">Wednesday</option>
<option value="Thu">Thursday</option>
<option value="Fri">Friday</option>
<option value="Sat">Satday</option>
</select>


any ideas?

Sam

PS I've attached an example of what happens(although the HTML is identical to the first dropdown box, it behaves like the second one when uploaded)

Offline tinman

  • Full Member
  • ***
  • Posts: 215
  • Karma: +16/-0
Re: Javascript: <select> tag not displaying options
« Reply #1 on: March 25, 2018, 09:21:51 am »
I have very little experience with HTML but from the w3schools.com web page I see this:

The <option> elements defines an option that can be selected.
By default, the first item in the drop-down list is selected.
To define a pre-selected option, add the selected attribute to the option:
Example
<option value="fiat" selected>Fiat</option>

I'd try this.

Offline rigpapa

  • Beta Testers
  • Hero Member
  • *****
  • Posts: 1121
  • Karma: +187/-3
Re: Javascript: <select> tag not displaying options
« Reply #2 on: March 25, 2018, 11:14:55 am »
You took great care to put the ID of your select field in single quotes. You also mentioned you are pasting your code into a var and then using that to send to the control panel content.

Your option statements use double-quotes. I'm guessing that your HTML var is using double quotes, and you're getting the mixed results of using the delimiter within the string. Try changing all of your option tag quotes to single and see if it improves.
Author of Reactor, DelayLight, SiteSensor, Rachio, Deus Ex Machina II, Intesis WMP Gateway, Auto Virtual Thermostat and VirtualSensor plugins. Vera Plus w/100+ Z-wave devices. Vera3, Lite. Hassio, Slapdash.

Offline samyoue

  • Jr. Member
  • **
  • Posts: 67
  • Karma: +6/-6
Re: Javascript: <select> tag not displaying options
« Reply #3 on: March 25, 2018, 08:11:54 pm »
im using backticks to define the var as that allows both single and double quotes as well as multiline (JS equivalent of "[[" and "]]") so

Code: [Select]
x=`
<b>this is "double"</b>
and...
<i>this is 'single'</i>
`
document.write(x)
would write this correctly:
this is "double"
and...
this is 'single'

so unfortunately not a quote error....

as for the selected option, you are correct - I'm using this to default to Monday but in Vera it shows zero options to choose from (almost like its ignoring the <option> tags altogether...)

appreciate the suggestions so far...

Sam

Offline samyoue

  • Jr. Member
  • **
  • Posts: 67
  • Karma: +6/-6
Re: Javascript: <select> tag not displaying options
« Reply #4 on: March 25, 2018, 08:55:58 pm »
incidentally I tried dynamically creating the dropdown box using JS and innerHTML after the page has loaded only to befaced with same result... for anyone searching/interested with the same problem I found two workarounds which do display correctly but sadly not as easy to work with as the html dropdown box...

solution 1 easier to work with and update on the fly/show current values, solution 2 is (or can be) visually closer to html dropdown. Both work when uploaded to vera via J_pluginname.js
solution 1:
https://www.w3schools.com/howto/howto_js_rangeslider.asp
modified to display text:
Code: [Select]
d=['Mon','tues','wed','thu','frid','sat','sund']


var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = d[slider.value];

slider.oninput = function() {
  output.innerHTML = d[this.value];
}
(changed the range to 0-6 as JS array index starts at 0 not 1)

solution 2:
https://www.w3schools.com/howto/howto_js_dropdown.asp

Regards,

Sam

Offline reneboer

  • Beta Testers
  • Hero Member
  • *****
  • Posts: 1574
  • Karma: +110/-31
Re: Javascript: <select> tag not displaying options
« Reply #5 on: March 26, 2018, 05:19:54 am »
Hi Sam,

Have you tried this for you first selection
Code: [Select]
<option value="Sun">Sunday</option>
The value that should show as default you can add selected="selected" in the option. Most browsers are pretty relaxed to little omissions in the html code. Vera is not as it needs to parse your javascript and this way avoids possible adverse impacts to the overall GUI experience caused by errors in a plugin.

Cheers Rene
2xVeraLite, VeraEdge, openLuup, ALTUI, 20 switches, 10 dimmers, 20 sensors, 10 scene controllers, 1 Harmony Hub, many plug-ins. Not enough time.

Offline samyoue

  • Jr. Member
  • **
  • Posts: 67
  • Karma: +6/-6
Re: Javascript: <select> tag not displaying options
« Reply #6 on: March 27, 2018, 06:05:28 am »
well spotted, option 3, write html correctly lol

just tried it and yes this works
Code: [Select]
<select id='DDbox'>
<option value="Sun">Sunday</option>
<option value="Mon">Monday</option>
<option value="Tue">Tuesday</option>
<option value="Wed">Wednesday</option>
<option value="Thu">Thursday</option>
<option value="Fri">Friday</option>
<option value="Sat">Satday</option>
</select>

cheers reneboer!

Sam

Offline reneboer

  • Beta Testers
  • Hero Member
  • *****
  • Posts: 1574
  • Karma: +110/-31
Re: Javascript: <select> tag not displaying options
« Reply #7 on: March 28, 2018, 04:38:10 am »
That's why posting a snippet of code helps. The time I spend reading over my own little typo's like that could have been a nice long vacation (don't tell the misses)  ;D

Cheers Rene
2xVeraLite, VeraEdge, openLuup, ALTUI, 20 switches, 10 dimmers, 20 sensors, 10 scene controllers, 1 Harmony Hub, many plug-ins. Not enough time.

Offline samyoue

  • Jr. Member
  • **
  • Posts: 67
  • Karma: +6/-6
Re: Javascript: <select> tag not displaying options
« Reply #8 on: March 28, 2018, 09:14:56 am »
lol secret safe with me ;)

so I tried it again in my gui and the same thing happened!

I've since discovered that whilst testing offline in firefox, the doropdownbox isnt affected by changing its innerHTML via JS, however in vera it wipes the options. Changed the handling of it in my functions and all is well :D

Sam