Populate select list with Ajax result using dataTables

Question

I have a script that populates a table dynamically using the dataTable plugin. The script has a select list which I need to populate with the results of an Ajax call.

If I were using PHP I know how to do this but now I am venturing into Ajax, Jquery and dataTable I am stuck. At the moment the select option for each row of data displays the Ajax result but when y=I try and select another option from the drop down list it just displays a list of 1's or 2's and so on for each row.

In the world of PHP I would run the MySQL query to get the data and then populate the select list as below:

<select name="ViewOrder id="ViewOrder">
<option value="01" <?php if (!(strcmp("01", $DisplayOrder))) {echo "selected=\"selected\"";} ?>>01</option>
<option value="02" <?php if (!(strcmp("02", $DisplayOrder)e))) {echo "selected=\"selected\"";} ?>>02</option>
<option value="03" <?php if (!(strcmp("03", $DisplayOrder)))) {echo "selected=\"selected\"";} ?>>03</option>
<option value="04" <?php if (!(strcmp("04", $DisplayOrder)))) {echo "selected=\"selected\"";} ?>>04</option>
<option value="05" <?php if (!(strcmp("05", $DisplayOrder)))) {echo "selected=\"selected\"";} ?>>05</option>
<option value="06" <?php if (!(strcmp("06", $DisplayOrder)))) {echo "selected=\"selected\"";} ?>>06</option>
<option value="07" <?php if (!(strcmp("07", $DisplayOrder)))) {echo "selected=\"selected\"";} ?>>07</option>
<option value="08" <?php if (!(strcmp("08", $DisplayOrder)))) {echo "selected=\"selected\"";} ?>>08</option>
<option value="09" <?php if (!(strcmp("09", $DisplayOrder)))) {echo "selected=\"selected\"";} ?>>09</option>
<option value="10" <?php if (!(strcmp("10", $DisplayOrder)))) {echo "selected=\"selected\"";} ?>>10</option>
</select>

In the world of dynamically created tables using DataTable I have this, "displayorder" contains the ajax result for each record returned.:

<select name='ViewOrder' id='ViewOrder' class='selectgroup' style='color:#333;font-size:0.9em;'required > \
<option value='0'>" + displayorder + "</option> \
<option value='1'>" + displayorder + "</option> \
<option value='2'>" + displayorder + "</option> \
<option value='3'>" + displayorder + "</option> \
<option value='4'>" + displayorder + "</option> \
<option value='5'>" + displayorder + "</option> \
<option value='6'>" + displayorder + "</option> \
<option value='7'>" + displayorder + "</option> \
<option value='8'>" + displayorder + "</option> \
<option value='9'>" + displayorder + "</option> \
<option value='10'>" + displayorder + "</option> \
</select> \

How do I populate the select list with the data from my Ajax result to display as the default and display selctable options at the same time.

My complete JavaScript code is:

$(document).on('click','#view-order', function(event){
    var group_id = document.getElementById("ViewCarouselID").value;
    $.ajax({
      url:"get_group_order.php",
      method:"GET",
      data:{group_id:group_id},
      dataType: "Json",
      success: function(response){
        var len = response.length;
        $("#orderTable tbody").html("");
        for(var i=0; i<len; i++){
          $('#OrderRecordID').val(recordid);
          var record_id = response[i].RecordID;
          var promotionimage = response[i].PromotionImage;
          var groupid = response[i].GroupID;
          $('#OrderGroupID').val(groupid);
          var displayorder= response[i].DisplayOrder;
          var orientation = response[i].Orientation;
          if(orientation == 'L'){
            orientation = 'Landscape';
          } else {
            orientation = 'Portrait';
          }
          $('#Orientation').val(orientation);
          var imagecount = response[i].Totalcount;
          $('#ImageCount').val(imagecount);
          var displayorder = response[i].DisplayOrder;
          var day1 = response[i].Day1;
          if(day1 == 'n'){
            var Day1 = ' - ';
          } else {
            var Day1 = 'M';
          }
          var day2 = response[i].Day2;
          if(day2 == 'n'){
            var Day2 = ' - ';
          } else {
            var Day2 = 'T';
          }
          var day3 = response[i].Day3;
          if(day3 == 'n'){
            var Day3 = ' - ';
         } else {
            var Day3 = 'W';
         }
         var day4 = response[i].Day4;
         if(day4 == 'n'){
           var Day4 = ' - ';
         } else {
           var Day4 = 'T';
         }
         var day5 = response[i].Day5;
         if(day5 == 'n'){
           var Day5 = ' - ';
         } else {
           var Day5 = 'F';
         }
         var day6 = response[i].Day6;
         if(day6 == 'n'){
           var Day6 = ' - ';
         } else {
           var Day6 = 'S';
         }
         var day7 = response[i].Day7;
         if( day7 == 'n' ) {
           var Day7 = ' - ';
         } else {
           var Day7 = 'S';
         }
        var tr_str = "<tr class='TableText'>" +
        "<td style='color:#333;font-size:0.8em;white-space: nowrap;'> \
        <input type='hidden' name='id[]' value='" + record_id  + "'></td>" +
        "<td style='color:#333;font-size:0.8em;white-space: nowrap;'>" + promotionimage + "</td>" +
        "<td style='color:#333;width:9px;height:9px'><input name='view' type='image' src='../img/view_image.png' id=" + record_id + " class='btn  btn-xs btn-block single-preview'></td>" +
        "<td align='center' style='color:#333;font-size:0.8em;'>" + Day1 + '' + Day2 + '' + Day3 + '' + Day4 + '' + Day5 + '' + Day6 + '' + Day7 + "</td>" +
        "<td align='center' style='color:#333;font-size:0.8em;'>" + displayorder + "</td>" +
        "<td align='center' style='color:#333;font-size:0.8em;'> \
        <select name='ViewOrder' id='ViewOrder' class='selectgroup' style='color:#333;font-size:0.9em;'required > \
        <option value='0'>" + displayorder + "></option> \
        <option value='1'>" + displayorder + "></option> \
        <option value='2'>" + displayorder + "></option> \
        <option value='3'>" + displayorder + "</option> \
        <option value='4'>" + displayorder + "</option> \
        <option value='5'>" + displayorder + "</option> \
        <option value='6'>" + displayorder + "</option> \
        <option value='7'>" + displayorder + "</option> \
        <option value='8'>" + displayorder + "</option> \
        <option value='9'>" + displayorder + "</option> \
        <option value='10'>" + displayorder + "</option> \
        </select> \
        </td>" +
        "</tr>";
        $("#orderTable tbody").append(tr_str);
    }
      }
    });
$('#view_order_Modal').modal("show");
});

@GrafiCode Studio I have inserted all of the JavaScript as requested. — DCJones
– DCJones, Commented Apr 2, 2019 at 9:33

GrafiCode · Accepted Answer · 2019-04-03 08:41:28Z

1

This solution uses a for to iterate all options. Notice the if condition, this is based on your PHP code:

    var tr_str = "<tr class='TableText'>" +
    "<td style='color:#333;font-size:0.8em;white-space: nowrap;'> \
    <input type='hidden' name='id[]' value='" + record_id  + "'></td>" +
    "<td style='color:#333;font-size:0.8em;white-space: nowrap;'>" + promotionimage + "</td>" +
    "<td style='color:#333;width:9px;height:9px'><input name='view' type='image' src='../img/view_image.png' id=" + record_id + " class='btn  btn-xs btn-block single-preview'></td>" +
    "<td align='center' style='color:#333;font-size:0.8em;'>" + Day1 + '' + Day2 + '' + Day3 + '' + Day4 + '' + Day5 + '' + Day6 + '' + Day7 + "</td>" +
    "<td align='center' style='color:#333;font-size:0.8em;'>" + displayorder + "</td>" +
    "<td align='center' style='color:#333;font-size:0.8em;'> \
    <select name='ViewOrder' id='ViewOrder' class='selectgroup' style='color:#333;font-size:0.9em;'required >";

    for (var i=0; i<11; i++) {

      if (displayorder != i) {
        tr_str += "<option value='" + i + "'>" + i + "</option>";
      } else {
        tr_str += "<option selected='selected' value='" + i + "'>" + i + "</option>";
      }

    }

    tr_str += "</select> \
    </td>" +
    "</tr>";

edited Apr 3, 2019 at 8:41

answered Apr 2, 2019 at 10:25

GrafiCode

3,3653 gold badges31 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

DCJones Over a year ago

Hi again and many thanks for helping. I used the code but there are issues. Firstly, it only displays one (1) record and not the number of records return by the Ajax call. Secondly, when the select list is accessed there is a list of options all the same with a closing bracket, i.e: 1>. Any ideas?

DCJones Over a year ago

Hi again, I changed the "for" loop by substituting the "i" for "s" just in case there was a clash with the "for(var i=0; i<len; i++){" further up the script. Sadly that made no difference. Still does not work. Sotty to be a pain but do you have any more ideas?

GrafiCode Over a year ago

I just edited my answer, fixed a couple typos: as a matter of facts, now it looks definitely similar to your PHP snippet, please check it out

DCJones Over a year ago

That improved the issue apart from the script now only display one row of data where in my test environment it should be displaying six rows.

DCJones Over a year ago

Hi success, I used the edited code but change the var i to var s. Works perfectly. Many thanks for all your time and help.

Collectives™ on Stack Overflow

Populate select list with Ajax result using dataTables

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related