title: How to pass a query string to Ajax call with jQuery?
body: <p>This is a follow up to <a href="https://stackoverflow.com/questions/7696540/how-to-update-database-with-jquery-without-refreshing-the-page">my previous question (unresolved)</a>. </p>
  
  <p>I fetch <code>items</code> from the database and display them in a for loop. I use jQuery to hide one of the rows. Now I need to get the <code>main_id</code> of that hidden row and pass it to <code>$.ajax</code>. In the original question Paul suggested to use <code>alert(this.attr("title"));</code> but this line stops the execution of the <code>$.ajax</code> call and the call is not executed. When I comment out the alert <code>alert(this.attr("title"));</code> then the ajax call goes through. In that case, I get an error because the <code>display_false()</code> function in the handler does not get the value of the <code>main_id</code>. </p>
  
  <p>This is the html of the "hide" link with <code>title=%s</code>.</p>
  
  <pre><code>&lt;a class="false" title=%s href="/useradminpage?main_id=%s&amp;display=false"&gt;&lt;span class="small"&gt;(hide)&lt;/span&gt;&lt;/a&gt;
  </code></pre>
  
  <p>So I need to pass the value of the <code>main_id</code> stored in <code>alert(this.attr("title"));</code> to the function <code>display_false()</code> when the ajax call is executed.</p>
  
  <p>How can I do this?</p>
  
  <p>The relevant code is below:</p>
  
  <p><strong>The Script</strong></p>
  
  <pre><code>        self.response.out.write("""
  &lt;html&gt;
  &lt;head&gt;
  &lt;link type="text/css" rel="stylesheet" href="/stylesheets/main.css" /&gt; 
  &lt;title&gt;User Admin Page&lt;/title&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  $(document).ready(function() {
  
      alert("1 - document ready is called")
      $("a.false").click(function(e) {
          $(this).closest("tr.hide").hide("slow");
          e.preventDefault();
          alert("2 - row is hidden")
      });
  
      $("a.false").click(function() {
          alert("3 - ajax")
          //the following alert stops the ajax call from executing
          alert(this.attr("title"));
  
          $.ajax({
              url: "/useradminpage?main_id=%s&amp;display=false",
              data: {main_id: "title"}
              success: function(data) {
              display_false()
              alert(4 - "returned");
              }
          });
      });
  });
  
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  """)
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>#-----------main table------------#
              main_id = self.request.get("main_id")
  
              self.response.out.write("""&lt;table class="mytable"&gt;
              &lt;tr class="head"&gt;
              &lt;th  width="80%"&gt;links&lt;/th&gt;&lt;th&gt;edit tags&lt;/th&gt;
              &lt;/tr&gt;    
              """)        
  
              query = Main.all()
              query.filter("owner", user)
              query.filter("display", True)
              query.order("-date")
              cursor = self.request.get("cursor")
              if cursor: query.with_cursor(cursor)
              e = query.fetch(100)
              cursor = query.cursor()
  
              for item in e:
                  main_id = item.key().id()
                  self.response.out.write("""
                  &lt;tr class="hide"&gt;
                  &lt;td&gt;&lt;a href="%s" target="_blank"&gt;%s&lt;/a&gt;&lt;span class=small&gt; (%s) &lt;/span&gt;&lt;br /&gt;
                  &lt;span class=small&gt;%s&lt;/span&gt;
                  &lt;a href="/edit?main_id=%s"&gt;&lt;span class="small"&gt;(edit)&lt;/span&gt;&lt;/a&gt;
                  &lt;a class="false" title=%s href="/useradminpage?main_id=%s&amp;display=false"&gt;&lt;span class="small"&gt;(hide)&lt;/span&gt;&lt;/a&gt;
                  &lt;a href="/comment?main_id=%s"&gt;&lt;span class="small"&gt;(comments)&lt;/span&gt;&lt;/a&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;a href="/tc?url=%s&amp;main_id=%s&amp;user_tag_list=%s" title="edit tags"&gt;%s&lt;/a&gt;
                  &lt;/td&gt;
                  &lt;/tr&gt;
                  """ % tuple([item.url, item.title, urlparse(item.url).netloc,
                  f1.truncate_at_space(item.pitch), main_id, 
  
                  main_id,
  
                  main_id, main_id,
                  item.url, main_id, (", ".join(item.tag_list)),
                  (", ".join(item.tag_list)),]))
  
              self.response.out.write("""&lt;/tbody&gt;&lt;/table&gt;""")    
  
              display = self.request.get("display")
  
              def display_false():
                  if display == "false":
                      main_id = self.request.get("main_id")
                      #I tried to get the "title" but this does not work
                      #main_id = self.request.get("title")
                      k = Main.get_by_id(int(main_id))
                      k.display = False                    
                      k.put()
  
              display_false()    
              ...
  </code></pre>
  
  <p><strong>Update</strong></p>
  
  <p>Updated the code according to <a href="https://stackoverflow.com/questions/7698706/how-to-pass-a-query-string-to-ajax-call-with-jquery/7698722#7698722">James Montagne's answer (with a few changes)</a>. Now, for some reason, document ready is not loading, and the call to hide the row is not working, but ajax call to update the database is working. What am I doing wrong?</p>
  
  <pre><code>&lt;script&gt;
  
  $(document).ready(function() {
  
      alert("1 - document ready is called")
      $("a.false").click(function(e) {
          $(this).closest("tr.hide").hide("slow");
          var main_id = this.attr("title");
          var display = "false";
          e.preventDefault();
          alert("2 - row is hidden")
      });
  
      $("a.false").click(function() {
          alert("3 - ajax");
  
          $.ajax({
              url: "/useradminpage?main_id=%s&amp;display=false",
              data: {main_id: "main_id", display: "display")},
              success: function(data) {
              display_false()
              alert(4 - "returned");
              }
          });
      });
  });
  
  
  &lt;/script&gt;
  </code></pre>