Jquery Mobile - Pre populating Select List with Data

Question

I am currently trying to create a basic heat timer function.I have six switches per day with hour, minutes and temperature. My knowledge is very limited and I am hacking and fudging things a lot from this site to help me move along.

The most basic way for me to create something with my limited programming knowledge is to use Jquery Mobile Select Widget.

I created it all via html successfully but my code was huge, with 24 hours in a day, Minutes are at 5 min intervals giving 12 minute options, and 35 temperature range options.

Once I had it working, I looked around for ways to then reduce the code size and repeat via JavaScript.

I found this http://jsfiddle.net/qsafmw5g/1/ which was excellent and helped me to realise how to load the data multiple times.

var data = [{"chapterId":1,"chapterName":"First"},{"chapterId":2,"chapterName":"Second"}];

$(data).each(function() {
  var option = $('<option />');
     option.attr('value', this.chapterId ).text(this.chapterName );
     $('#comboChapters').append(option);
});

$('#comboChapters').selectmenu('refresh', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select name="comboChapters" id="comboChapters" data-native-menu="false">
</select>

I have since created my own code from this (still crude) but now my software is only loading the values in to the last switch (number 6) and leaving the other five switches blank.

I have tried to reduce my code to just show Mondays bank of six switches and remove my other things.

JSFiddle Here https://jsfiddle.net/adonegan/3yx2p7rf/

// Data Setup for Heater Controls

var hour_data = [{
  "optionId": 0,
  "optionValue": "00"
}, {
  "optionId": 1,
  "optionValue": "01"
}, {
  "optionId": 2,
  "optionValue": "02"
}, {
  "optionId": 3,
  "optionValue": "03"
}, {
  "optionId": 4,
  "optionValue": "04"
}, {
  "optionId": 5,
  "optionValue": "05"
}, {
  "optionId": 6,
  "optionValue": "06"
}, {
  "optionId": 7,
  "optionValue": "07"
}, {
  "optionId": 8,
  "optionValue": "08"
}, {
  "optionId": 9,
  "optionValue": "09"
}, {
  "optionId": 10,
  "optionValue": "10"
}, {
  "optionId": 11,
  "optionValue": "11"
}, {
  "optionId": 12,
  "optionValue": "12"
}, {
  "optionId": 13,
  "optionValue": "13"
}, {
  "optionId": 14,
  "optionValue": "14"
}, {
  "optionId": 15,
  "optionValue": "15"
}, {
  "optionId": 16,
  "optionValue": "16"
}, {
  "optionId": 17,
  "optionValue": "17"
}, {
  "optionId": 18,
  "optionValue": "18"
}, {
  "optionId": 19,
  "optionValue": "19"
}, {
  "optionId": 20,
  "optionValue": "21"
}, {
  "optionId": 22,
  "optionValue": "22"
}, {
  "optionId": 23,
  "optionValue": "23"
}];

var min_data = [{
  "optionId": 0,
  "optionValue": "00"
}, {
  "optionId": 1,
  "optionValue": "05"
}, {
  "optionId": 2,
  "optionValue": "10"
}, {
  "optionId": 3,
  "optionValue": "15"
}, {
  "optionId": 4,
  "optionValue": "20"
}, {
  "optionId": 5,
  "optionValue": "25"
}, {
  "optionId": 6,
  "optionValue": "30"
}, {
  "optionId": 7,
  "optionValue": "35"
}, {
  "optionId": 8,
  "optionValue": "40"
}, {
  "optionId": 9,
  "optionValue": "45"
}, {
  "optionId": 10,
  "optionValue": "50"
}, {
  "optionId": 11,
  "optionValue": "55"
}];

var temp_data = [{
  "optionId": 0,
  "optionValue": "0°c"
}, {
  "optionId": 1,
  "optionValue": "1°c"
}, {
  "optionId": 2,
  "optionValue": "2°c"
}, {
  "optionId": 3,
  "optionValue": "3°c"
}, {
  "optionId": 4,
  "optionValue": "4°c"
}, {
  "optionId": 5,
  "optionValue": "5°c"
}, {
  "optionId": 6,
  "optionValue": "6°c"
}, {
  "optionId": 7,
  "optionValue": "7°c"
}, {
  "optionId": 8,
  "optionValue": "8°c"
}, {
  "optionId": 9,
  "optionValue": "9°c"
}, {
  "optionId": 10,
  "optionValue": "10°c"
}, {
  "optionId": 11,
  "optionValue": "11°c"
}, {
  "optionId": 12,
  "optionValue": "12°c"
}, {
  "optionId": 13,
  "optionValue": "13°c"
}, {
  "optionId": 14,
  "optionValue": "14°c"
}, {
  "optionId": 15,
  "optionValue": "15°c"
}, {
  "optionId": 16,
  "optionValue": "16°c"
}, {
  "optionId": 17,
  "optionValue": "17°c"
}, {
  "optionId": 18,
  "optionValue": "18°c"
}, {
  "optionId": 19,
  "optionValue": "19°c"
}, {
  "optionId": 20,
  "optionValue": "21°c"
}, {
  "optionId": 22,
  "optionValue": "22°c"
}, {
  "optionId": 23,
  "optionValue": "23°c"
}];


$(hour_data).each(function() {
  var option = $('<option />');
  option.attr('value', this.optionId).text(this.optionValue),
    $('#mon_hour_timer_one').append(option);
  $('#mon_hour_timer_two').append(option);
  $('#mon_hour_timer_three').append(option);
  $('#mon_hour_timer_four').append(option);
  $('#mon_hour_timer_five').append(option);
  $('#mon_hour_timer_six').append(option);
});

$(min_data).each(function() {
  var option = $('<option />');
  option.attr('value', this.optionId).text(this.optionValue);
  $('#mon_min_timer_one').append(option);
  $('#mon_min_timer_two').append(option);
  $('#mon_min_timer_three').append(option);
  $('#mon_min_timer_four').append(option);
  $('#mon_min_timer_five').append(option);
  $('#mon_min_timer_six').append(option);
});

$(temp_data).each(function() {
  var option = $('<option />');
  option.attr('value', this.optionId).text(this.optionValue);
  $('#mon_temp_range_one').append(option);
  $('#mon_temp_range_two').append(option);
  $('#mon_temp_range_three').append(option);
  $('#mon_temp_range_four').append(option);
  $('#mon_temp_range_five').append(option);
  $('#mon_temp_range_six').append(option);
});

$('#mon_hour_timer_one').selectmenu('refresh', true);
$('#mon_hour_timer_two').selectmenu('refresh', true);
$('#mon_hour_timer_three').selectmenu('refresh', true);
$('#mon_hour_timer_four').selectmenu('refresh', true);
$('#mon_hour_timer_five').selectmenu('refresh', true);
$('#mon_hour_timer_six').selectmenu('refresh', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<!-- Heating Controls & Settings Page -->
<div id="heating" data-role="page">
  <div data-role="content">
    <div class="ui-field-contain">
      <fieldset data-role="controlgroup" data-type="horizontal">
        <legend>Switch1:</legend>
        <select name="mon_hour_timer_one" id="mon_hour_timer_one" data-mini="true"></select>
        <select name="mon_min_timer_one" id="mon_min_timer_one" data-mini="true"></select>
        <select name="mon_temp_range_one" id="mon_temp_range_one" data-mini="true"></select>
      </fieldset>
      <fieldset data-role="controlgroup" data-type="horizontal">
        <legend>Switch2:</legend>
        <select name="mon_hour_timer_two" id="mon_hour_timer_two" data-mini="true"></select>
        <select name="mon_min_timer_two" id="mon_min_timer_two" data-mini="true"></select>
        <select name="mon_temp_range_two" id="mon_temp_range_two" data-mini="true"></select>
      </fieldset>
      <fieldset data-role="controlgroup" data-type="horizontal">
        <legend>Switch3:</legend>
        <select name="mon_hour_timer_three" id="mon_hour_timer_three" data-mini="true"></select>
        <select name="mon_min_timer_three" id="mon_min_timer_three" data-mini="true"></select>
        <select name="mon_temp_range_three" id="mon_temp_range_three" data-mini="true"></select>
      </fieldset>
      <fieldset data-role="controlgroup" data-type="horizontal">
        <legend>Switch4:</legend>
        <select name="mon_hour_timer_four" id="mon_hour_timer_four" data-mini="true"></select>
        <select name="mon_min_timer_four" id="mon_min_timer_four" data-mini="true"></select>
        <select name="mon_temp_range_four" id="mon_temp_range_four" data-mini="true"></select>
      </fieldset>
      <fieldset data-role="controlgroup" data-type="horizontal">
        <legend>Switch5:</legend>
        <select name="mon_hour_timer_five" id="mon_hour_timer_five" data-mini="true"></select>
        <select name="mon_min_timer_five" id="mon_min_timer_five" data-mini="true"></select>
        <select name="mon_temp_range_five" id="mon_temp_range_five" data-mini="true"></select>
      </fieldset>
      <fieldset data-role="controlgroup" data-type="horizontal">
        <legend>Switch6:</legend>
        <select name="mon_hour_timer_six" id="mon_hour_timer_six" data-mini="true"></select>
        <select name="mon_min_timer_six" id="mon_min_timer_six" data-mini="true"></select>
        <select name="mon_temp_range_six" id="mon_temp_range_six" data-mini="true"></select>
      </fieldset>
    </div>
  </div>
</div>

I have played with the first jsfiddle and realised that will also not allow me to load multiple selects from that one function.

Would somebody be kind enough to help show me how my function can be made to work to populate all of my lists.

I should point out that I am using Jquery Mobile 1.4.5 and Jquery 2.1.3. but the JsFiddles replicate the fault in the versions I had to pick. — Andy Donegan, Apr 10 '15 at 12:13

Sga · Accepted Answer · 2015-04-12T20:18:21.457

0

Welcome to dynamic page creation! As you can see, when you have to repeat something in your code you know it can be done in another way. Here's mine:

HTML

<div id="heating" data-role="page">
  <div data-role="content">
    <div class="ui-field-contain" id="content">
    </div>
  </div>
</div>

JavaScript

$(document).on("pageinit", "#heating", function(event)
{
    var switch_number = 6;

    var html = "";
    for (var s = 0; s != switch_number; s++)
    {
        html += '<fieldset data-role="controlgroup" data-type="horizontal">';
        html += '<legend>Switch ' + s + ':</legend>';
        html += '<select id="mon_hour_timer_' + s + '" data-mini="true">';

        for (var h = 0; h != 24; h++)
            html += '<option value="' + h + '">' + h + '</option>';

        html += '</select>';
        html += '<select id="mon_min_timer_' + s + '" data-mini="true">';

        for (var m = 0; m != 60; m += 5)
            html += '<option value="' + m + '">' + m + '</option>';

        html += '</select>';
        html += '<select id="mon_temp_range_' + s + '" data-mini="true">';

        for (var t = 0; t != 24; t++)
            html += '<option value="' + t + '">' + t + ' &deg; C</option>';

        html += '</select>';
        html += '</fieldset>';
    }

    $("#content").html(html);
    $("#content").trigger("create");
});

edited Apr 12 '15 at 20:18

answered Apr 10 '15 at 13:18

Sga

3,608
2
36
47

1

Sga thank you very much, this was way more than what I was expecting. Your code is so clear for me to understand and that is greatly appreciated as I can move on to trying to output the Values to an Alert. I wanted eventually to move on to something like your code, but baby steps as I have found some answers have been above my head to the point I have managed to implement but not be able to amend, so I have not really learnt anything. Thank you very much again for your time. – Andy Donegan Apr 10 '15 at 14:16
@AndyDonegan you're appending the same element, instead you should `.clone()` it https://jsfiddle.net/3yx2p7rf/2/ – Ciccolina Apr 10 '15 at 16:51
@Ciccolina, thank you very much that is useful to know also. I just quickly finished your fiddle as it was cloning all of the values on to the Hour value. https://jsfiddle.net/adonegan/a0amsjeu/ – Andy Donegan Apr 12 '15 at 11:52
Based on Sga's Code I have now managed to amend the data output which has dramatically reduced my code size. Here :- https://jsfiddle.net/adonegan/vu7zLrz9/ I know it is not text book, but I have learnt a lot just in this exercise. – Andy Donegan Apr 12 '15 at 12:24

Jquery Mobile - Pre populating Select List with Data

1 Answers1