Search code examples
jqueryajaxdjangosearch-form

Search form with ajax and GET

I've a form for searching users in my site (django).

<form method="post" action="" id="search_form">
    <table class="table_form">
        <tr>
            <td><input id="id_name" type="text" maxlength="50"></td>
            <td><input type="submit" value="Search"></td>
        </tr>
    </table>
</form>

this the javascript:

$("#search_form input[type='submit']").click(function() {
    input = $("#id_name").val();
    data = "text=" + input;

    $.ajax({
        type: "POST",
        url: "/user/search/",
        data: data,
        success: function(result) {
            $("#results_box").html(result).show();
        }
    });

    return false;
});

It works well but if I click on a user in the result list I go to the user page and if I click the browser's Back Button for see again the results I can't see anything, of course because I use POST.

I want always the ajax search form but I want, if possible, to see again the result if I click on the back button.

Ideas?

Solution

  • Use HTML5 History API, to manipulate browser history via script (that would be inside a success function).

    In your case, ajax request does not need to be POST since, searching does not change anything.

    For more info about History Api check:

    There is a jquery plugin for ajax with permalinks, demo included: