How to Iterate response value in combobox using inline jquery ? -Django

Question

I have an object named data2 contains multiple data that I'm rendering from views.py to my HTML template.

{% for item in data2 %}
<tr>
    <td><input type="text" name="from" class="form-control input_data" value="{{item.from_age}}"></td>
    <td><input type="text" name="to" class="form-control input_data" value="{{item.to_age}}"></td>
    <td id ="gender_select">
        <script>$(function() {$('#gender_select :input').each(function() {
    $("#gender option[data-value='" + '{{item.gender}}' +"']").attr("selected","selected");
    });});</script>
        <select name="gender" id="gender" class="form-control input_data" >
            <option data-value="select" >Select</option>
            <option data-value="male" >Male</option>
            <option data-value="female" >Female</option>
        </select>
    </td>
    <td><a href='' class='remove'><span class=''></span></a></td>
</tr>
{% endfor %}

In {{item.gender}}, on the first iteration, I have value 'Male' and on the second iteration, I have value "Female" so it should be automatically select the value but after executing the above code, I'm facing an error $ is not defined also can't see the values. Please let me know where i'm wrong ?

denniz crypto · Answer 1 · 2020-07-28T16:32:37.910

it seems that yours is a javascript error, make sure you import jquery in the header before any other js script

I would also recommend you move the script tag outside the for loop because you end up with the multiple scripts doing the same thing.

There is also an easier method to set value of a select tag Checkout this answer

[Edit]

This is how i would approach it

{% for item in data2 %}
   <tr>
      <td><input type="text" name="from" class="form-control input_data" value="{{ item.from_age }}"></td>
      <td><input type="text" name="to" class="form-control input_data" value="{{ item.to_age }}"></td>
      <td id="gender_select">
         // Create custom attribute for reference and add a classattribute for reference
         <select name="gender" id="gender" class="form-control input_data m_select" m_value={{ item.gender }}>
           // change data-value => value
           <option value="select">Select</option>
           <option value="male">Male</option>
           <option value="female">Female</option>
        </select>
     </td>
     <td><a href='' class='remove'><span class=''></span></a></td>
  </tr>

 {% endfor %}

 <script>
    $(".m_select").each((i, el) => {
         $(el).val(el.getAttribute('m_value'));
     });
 </script>

Things will be easy If I can move my script tag outside the for loop but then how can I Iterate the `data2` object ? — sodmzs, Jul 28 '20 at 09:56

score 0 · Answer 2 · answered Jul 28 '20 at 09:24

You should put your jquery code inside the following code block:

$(document).ready(function () {
  //rest of your code here
});

This will ensure that your code is only loaded after the initialization of jquery.

Also double check your jquery script is being called correctly.

How to Iterate response value in combobox using inline jquery ? -Django

2 Answers2