Handle dropdown box with Django pagination and jquery

Question

In the following code i am trying to add an dropdown box to a tag. To do this i call a function onready and then add it.I have two issues here

1.The table has more than two thousand rows and there i use django pagination.But on ready the drop down box is populated for all the two thousand rows.How can i load the drop down box for the 100 rows i.e, is being paginated.So that it will be faster. 2.Also the drop down box are slower to show data to select.How can i rectify this.

Hope i am clear with the question

  {% extends "base/admin_base.html" %}
  {% load pagination_tags %}

  {% block content %}
  <script>

  $(document).ready(function() {
  $('font').css({'color':'red'})
     getcategory('1');
  });
  function getcategory(flag)
  {
     if($("#cgroup").val().trim() == "-1")
     {
        alertmsg+= "Select Category group\n"
     }  
     else
     {
        var html = "";
        var opt = "";
        var cgroup = $("#cgroup").val();
        html += '<select id="category" class="category">';
        html += '<option value="-1" class="cat">Select Category</option>';   
         {% for category in response_dict.category %}
           gp = '{{category.categorygroup.id}}' ;
           if(cgroup == gp)
           {
              html += '<option class="data" value="{{category.id}}">{{category.name}}</option>';  
           }
         {% endfor %}
           html += '</select>';
           if(flag == 1)
           {
              $(".tg").html('');
              $(".tg").append(html);
           }

     }
  }


  </script>
  <h1>Tag data</h1>
         {% autopaginate response_dict.taggeddata 100 %}
           <div align="right">{% paginate %}</div>
  <form action="/users/saveuser/" method="post">{% csrf_token %}
 <table>

   <tr><td><font>*</font>Select Category group for tagging</td><td> 
   <select id="cgroup" onchange="getcategory('1');">
   {% for group in response_dict.categorygroup %}
            <option value="{{group.id}}">{{group.name}}</option> 
   {% endfor %}
   </select>  
   </td></tr>

  </table>

  <b>
        <table>

         <tr><td><font>*</font>Select Category group for tagging</td><td> 
         <select id="cgroup" onchange="getcategory('1');">
         {% for group in response_dict.categorygroup %}
                  <option value="{{group.id}}">{{group.name}}</option> 
         {% endfor %}
         </select>  
         </td></tr>

        </table>
        </b>
        <table  id="box-table-a">
        <colgroup>
        <col class="vzebra-odd">
        </colgroup>
        <thead>
         <tr><th id="vzebra-comedy" scope="col">Field1</th><th id="vzebra-adventure" scope="col">Field2</th><th id="vzebra-comedy" scope="col">Field3</th><th id="vzebra-adventure" scope="col">Field4</th><th id="vzebra-comedy" scope="col">Field5</th><th id="vzebra-adventure" scope="col">Field6</th><th id="vzebra-comedy" scope="col">Tag</th><th id="vzebra-adventure" scope="col">Actions</th><thead></tr>
        <tbody>
         {% for td in response_dict.taggeddata %}
           <tr id="{{td.id}}">
           <td class="tg">Select category</td>
           </tr>
         {% endfor %}
        </tbody>
        </table>
         <input type="button" value="Add" id="addbtn" onclick="validate();"/>

  </form>
  {% endblock %}

Answer 1

That is some pretty odd JavaScript you have there. For starters you should never be doing this.

{% for category in response_dict.category %}
  gp = '{{category.categorygroup.id}}' ;
  if(cgroup == gp)
  {
    html += '<option class="data" value="{{category.id}}">{{category.name}}</option>';  
  }
{% endfor %}

It means that you are dumping out the same JavaScript over and over again. You should instead build a JavaScript array and loop over it with pure JavaScript. Just look at the rendered page you get from that code, it will be huge.

// Build your array with Django templates or load it with ajax
var data = [...],
    i; // Also initialise the counter for the loop

for(i = 0; i < data.length; i += 1) {
    // Loop over your built array and construct your HTML
    // This line now only occurs once
    html += '<option foo=' + data[i].foo + '>' + data[i].bar + '</option>';
}

I would never actually dynamically build JavaScript either. My personal preference is to have plain JavaScript with no Django tags inside it, I make an ajax request to my server which renders some JSON containing the data I need. It is so much cleaner. I have to do this because I keep my JavaScript in a separate file I can minify.

So if you do not want to do this in what I feel is the "right" way I would use your same pagination loop to build your JavaScript. Call {% autopaginate %} twice or what ever it is you use to render the HTML.