How to update database with jQuery without refreshing the page?

Question

How do I send this display_false() function to the server with jQuery so that the database is updated without refreshing the page?

    def display_false():
        if display == "false":
            main_id = self.request.get("main_id")
            k = Main.get_by_id(int(main_id))
            k.display = False
            k.put()

    display_false()    

First I hide a table row with this jQuery ( see my previous question ):

$(document).ready(function() {

    $("a.false").click(function(e) {
    $(this).closest("tr.hide").hide("slow");
    e.preventDefault();

});

and then I want to update the "display" property in the database to "false" with display_false() so that the item is not displayed.

And this is the html where the hide link is:

    for item in e:
        main_id = item.key().id()
        ...
        <tr class="hide">
        ...
        <a class="false" href="/useradminpage?main_id=%s&display=false"><span class="small">(hide)</span></a>
        ...
        </td>
        </tr>
        ...

Thanks!

Update

This is what I tried according to Paul's answer , but this is not working.

$(document).ready(function() {

    //hide the row
    $("a.false").click(function(e) {
    $(this).closest("tr.hide").hide("slow");
    e.preventDefault();


});

    $("a.false").click(function() {
    //ajax server call
    $.ajax({
    url: "/useradminpage?main_id=%s&display=false",
    success: function(data) {
    //do some stuff.
    display_false()
    alert('returned');
  }
});
});


});

Update

I put alerts to see what is running as suggested by Paul. Alerts 1, 2 and 3 are running but 4 is not running:

$(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() {
    //ajax server call
    alert("3 - ajax server call")
    $.ajax({
    url: "/useradminpage?main_id=%s&display=false",
    success: function(data) {
    //do some stuff.
    display_false()
    alert(4 - "returned");
  }
});
});


});

Update

This is the part of the code for that section of the table; I am trying to get the main_id and pass it to ajax call:

#-----------main table------------#

            main_id = self.request.get("main_id")

            self.response.out.write("""<table class="mytable">
            <tr class="head">
            <th  width="80%">links</th><th>edit tags</th>
            </tr>    
            """)        

            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("""
                <tr class="hide">
                <td><a href="%s" target="_blank">%s</a><span class=small> (%s) </span><br />
                <span class=small>%s</span>
                <a href="/edit?main_id=%s"><span class="small">(edit)</span></a>
                <a class="false" href="/useradminpage?main_id=%s&display=false"><span class="small">(hide)</span></a>
                <a href="/comment?main_id=%s"><span class="small">(comments)</span></a></td>
                <td><a href="/tc?url=%s&main_id=%s&user_tag_list=%s" title="edit tags">%s</a>
                </td>
                </tr>
                """ % tuple([item.url, item.title, urlparse(item.url).netloc,
                f1.truncate_at_space(item.pitch), main_id, main_id, main_id,
                item.url, main_id, (", ".join(item.tag_list)),
                (", ".join(item.tag_list)),]))

            self.response.out.write("""</tbody></table>""")    

            display = self.request.get("display")
            def display_false():
                if display == "false":
                    main_id = self.request.get("main_id")
                    k = Main.get_by_id(int(main_id))
                    k.display = False

                    k.put()

            display_false()    

Update after discussion with Paul to get the id number of the hidden row:

<script>

$(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(this.attr("title"));

    $.ajax({
    url: "/useradminpage?main_id=%s&display=false",

    success: function(data) {
    display_false()
    alert(4 - "returned");
  }
});
});
});


</script>

Answer 1

You cannot update a server database with JQuery. All you can do is send a request that is handled by the server.

Use JQuery.Ajax or any spin-offs of that function to send the request. To your server it will look as a regular request.

Answer 2

You'll need an AJAX call, something like this after including your jQuery libraries.

$(document).ready(function() {

//false click action
$("a.false").click(function () { 

//ajax server call
$.ajax({
  url: '/useradminpage?main_id=%s&display=false',
  success: function(data) {
    //do some stuff.
    alert('returned');
  }
});

});



});