title: How to create a popup with a form inside a table element in Django
body: <p>I want to have a "sendemail" button for each element in the table, once the user clicks on this there should be a pop up with a form inside and a button. I tried using jquery for the popup but it is not working, can someone please tell me what I am doing wrong or suggest me any other way of creating this pop up. Currently I am using twitter bootstrap modal but want to replace that with a popup/popover</p>
  
  <pre><code>homepage.html
  
          &lt;table id="search-results" class="table table-hover"&gt;
          &lt;/table&gt;
  
      ajax.js
  
          $(function(){
  
              $('#searchtest').click(function() {
  
                  $.ajax({
                      type: "POST",
                      url: "/searchtrips/",
                      data: {
                          'city' : $('#city').val(),
                          'location' : $('#location').val(),
                          'duration' : $('#duration').val(),
                          'search_text' : $('#searchtest').val(),
                          'csrfmiddlewaretoken' : $("input[name=csrfmiddlewaretoken]").val()
                      },
                      success: searchSuccess,
                      dataType: 'html'
                  });
  
              });
  
          });
  
          function searchSuccess(data, textStatus, jqXHR)
          {
              $('#search-results').html(data);
          }
  search-results.html
  
  {% for data in datas %}
  &lt;tr&gt;
      &lt;td&gt;{{ data.score}}&lt;/td&gt;
      &lt;td&gt;{{ data.distance}}&lt;/td&gt;
      &lt;td&gt;{{ data.time}}&lt;/td&gt;
      {%for element in data.place.elements%}
      &lt;td&gt;       
          {{element.placeName}}
      &lt;/td&gt;
      {% endfor %}
      &lt;td&gt;
          &lt;div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;×&lt;/button&gt;
                  &lt;h3 id="myModalLabel"&gt;Share with your friends&lt;/h3&gt;
              &lt;/div&gt;
              &lt;form action="{% url "send_mail"%}" class="form-horizontal" method="post"&gt;
              &lt;div class="control-group"&gt;
                  &lt;label class="control-label" for="subject"&gt;Subject&lt;/label&gt;
                  &lt;div class="controls"&gt;
                      &lt;input type="text" name="subject" value="Your friend has shared a traverse trip" id="subject" placeholder="subject"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="control-group"&gt;
                  &lt;label class="control-label" for="email"&gt;Email&lt;/label&gt;
                  &lt;div class="controls"&gt;
                      &lt;input type="text" name="email" id="email" placeholder="Email"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="control-group"&gt;
                  &lt;label class="control-label" for="message"&gt;Message&lt;/label&gt;
                  &lt;div class="controls"&gt;
                      &lt;input type="text" name="message" id ="message" placeholder="message" value ="Here we will have the link  "&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  {% csrf_token %}
                  &lt;input type="submit" value="email" class="btn btn-primary"&gt;
              &lt;/div&gt;
              &lt;/form&gt;&lt;/div&gt;
          &lt;a href="#myModal" role="button" class="btn btn-mini" data-toggle="modal"&gt;&lt;i class="icon-envelope"&gt;&lt;/i&gt;SendEmail&lt;/a&gt;
          &lt;a href="{% url "add_trip" city=data.score score=data.score distance=data.distance|floatformat:"0" time=data.time %}"
          class ="btn btn-mini btn btn-warning"&gt;Add/delete&lt;/a&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  {% endfor %}*
  </code></pre>