title: {% url %} and jquery
body: <p>My views will give a dictionary of "build_id", and there is another view responbile generating the details of a given build_id. I.e., the second view "build_details" takes in a parameter "build_id".</p>
  
  <p>Because I have at least one ids from the dictionary, I am going to generate a table. </p>
  
  <pre><code>&lt;table&gt;
  &lt;tr&gt;
  &lt;td&gt; Number &lt;/td&gt;
  &lt;td&gt; Actions &lt;/td&gt;
  &lt;/tr&gt;
  {% for index, value in build_history.items %}
      &lt;tr&gt;
      &lt;td&gt; {{index}} &lt;/td&gt;
      &lt;td&gt;
          &lt;select id="action_menu"&gt;
          &lt;option value=''&gt;-----&lt;/option&gt;
          &lt;option value="build_{{value.build_id}}"&gt;Build Details&lt;/option&gt;
          &lt;/select&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>Each row should have a select box. When I select <code>Build Details</code> I should be redirected to a different page.</p>
  
  <p>My Jquery attempt:</p>
  
  <pre><code>function onSelectChange(){
      var select = $("#action_menu option:selected");
      if(!(select.val() == ""))
          var build_id = select.val().replace('build_','');
          window.location.href="{% url build_details build_id %}";
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>The problem error is:</p>
  
  <blockquote>
    <p>Caught NoReverseMatch while rendering: Reverse for 'build_details'
    with arguments '('',)' and keyword arguments '{}' not found.</p>
  </blockquote>
  
  <p>I believe this mean build_id was not rendered properly... because we are not dynamically building up the build_id on the JS side (browser side..).</p>
  
  <p>What can I do?  I know I can use hardcode <a href="http://mydomain" rel="nofollow">http://mydomain</a> and concaented build_id - this will work. But can I take advantage of template tags? How can I achieve this?</p>
  
  <p>Thanks.</p>
  
  <hr>
  
  <p><strong>Final Working Code</strong></p>
  
  <p>Assuming I have a variable contains the length of the dictionary, when we have mutliple <code>&lt;select&gt;</code> with the same name, server treats it as if it was one entity. Therefore, we can use name a class, and give each <code>&lt;select&gt;</code> (each row has one) an unique numeric ID.</p>
  
  <pre><code># Javascript
  &lt;script type="text/javascript"&gt;
      urlMap = {
      {% for index, value in build_history.items %}
          '{{ value.build_id }}' : '{% url build_details value.build_id %}'{% if not forloop.last %},{% endif %}
      {% endfor %}
      };
  
      $(function() {
          var item_len = parseInt({{dict_len}});
          for (var i = 0; i &lt; item_len; i++){
              $("#"+i.toString()+".action").change(function() {
                    if($(this).val() != '')
                       window.location.href = urlMap[$(this).val()];
              }
          )
      }});
  &lt;/script&gt;
  </code></pre>
  
  <blockquote>
    <p></p>
  </blockquote>
  
  <pre><code># HTML (this is a table, each row has one select)
  
          &lt;select class="action" id={{index}}&gt;
          &lt;option value=''&gt;-----&lt;/option&gt;
          &lt;option value="{{ value.build_id }}"&gt;Build Details&lt;/option&gt;
          &lt;/select&gt;
  </code></pre>