title: Django javascript for dynamic html table cells
body: <p>I'm attempting to access the contents of a cell, within my django template using javascript.</p>
  
  <p>The table can contain x rows. When any of the "click to show" links (in the TEST column) are clicked, I would like the row's {{ i.description }} to be passed through to my views (ajax_test function), the "click to show" link to disappear and be replaced with the returned html from the view. I've included my terrible javascript attempt, knowing full well that this doesn't do what I'm asking. If anyone could help, it would be very much welcomed.</p>
  
  <p>Template:</p>
  
  <pre><code>{% extends "myapp/base.html" %}
  
  {% block content %}
  &lt;p&gt;You searched for: &lt;strong&gt;{{ query }}&lt;/strong&gt;&lt;/p&gt;
  
  {% if elements %}
  &lt;p&gt;Found {{ elements|length }} Element{{ elements|pluralize }}.&lt;/p&gt;
  &lt;div class="datagrid"&gt;&lt;table&gt;
      &lt;thead&gt;&lt;tr&gt;
      &lt;th&gt;Name&lt;/th&gt;
      &lt;th&gt;Description&lt;/th&gt;
      &lt;th&gt;Type&lt;/th&gt;
      &lt;th&gt;Parameter Arguments&lt;/th&gt;
      &lt;th&gt;TEST&lt;/th&gt;
      &lt;tbody&gt;
      {% for i in elements %}
      &lt;tr class="{% if forloop.counter|divisibleby:2 %}alt{% else %}{% endif %}"&gt;
          &lt;td&gt;&lt;a href="/myapp/{{ i.id }}/editElement"&gt;{{ i.name }}&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div id="desc"&gt;{{ i.description }}&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;{{ i.type }}&lt;/td&gt;
          &lt;td&gt;{% for a in i.parameter.all %}{{ a.argument }}{% endfor %}&lt;/td&gt;
          &lt;td&gt;&lt;div class="clicks"&gt;&lt;a href="#"&gt;click to show&lt;/a&gt;&lt;/div&gt;&lt;/td&gt;
          &lt;/tr&gt;
      {% endfor %}
      &lt;/tbody&gt;
      &lt;/table&gt;&lt;/div&gt;
    {% endblock %}
  </code></pre>
  
  <p>Javascript (this is where I haven't got a clue really, the code below is a failed attempt). The code is included as a static file (ajax_test.js, which is loaded from base.html)</p>
  
  <pre><code>$(function(){   
     var myCell = document.getElementById("desc");
     var cellContents = (myCell.innerHTML);
      $('.clicks').click(function() {             
          $.ajax({     
              type: "POST",   
              url: "/myapp/test_ajax/", 
              data: {   
                  'ajax_data' : cellContents, 
                  'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val() 
              },
              success: ajaxSuccess, 
              dataType: 'html'
          });
  
      });
  
  });
  
  function ajaxSuccess(data, textStatus, jqXHR) 
  {
      $('.here').html(data); //I would like to put this in the "click to show" cell. I was placing it in a random div for testing.
  }
  </code></pre>
  
  <p>test_ajax view:</p>
  
  <pre><code>def ajax_test(request):
      if request.POST:
          ajax_data = request.POST['ajax_data']
          ajax_query = #some generic lookup using ajax_data
      return render_to_response('myapp/ajax_test.html', {'ajax_query': ajax_query})
  </code></pre>
  
  <p>ajax_test template (to be returned to the cell):</p>
  
  <pre><code>{{ ajax_query }}
  </code></pre>