Question

I’m working on an Asp.Net MVC3 application, using jQuery. On a specific page, the user is invited to enter the telephone number to search for a company. So, there is a result (_Result partial view) whitch I get by using json when clicking on the Search button.

On an other part, if the result is on multiple pages, when the user click the “Next button”, nothing happen. Knowing that if I click on the Next button before clicking on the Search button, I have my click event fired.

The Next button is in the _Result partial view.

Here’s my code HTML / Razor :

<div>
<div>
    <span>Téléphone ?</span>
    <input id="idTxTel" type="text" name="txTelephone"/>

    <input id="idBnSearch" type="submit" value="Chercher" name="bnSearch"/>
</div>

@Html.Partial("_Result", Model)
</div>

In the _Result partial view

<div>
    <span>Page N sur M</span>
     <input id="bnPreviousPage" type="submit" value="Précédant" name="bnPrevious"/>
     <input id="bnNextPage" type="submit" value="Suivant" name="bnNext"/>
</div>

Here’s my JS code :

<script type="text/javascript">
$(document).ready(function () 
{
    $("#idBnSearch").click(function () 
    {
        var telValue = $("#idTxTel").val();
        var methodUrl = '@Url.Content("~/Search/GetReverseResult/")';

        doReverseSearch(telValue, 0, methodUrl);
    });

    $("#bnNextPage").click(function (e) 
    {
        alert("Next cmd");
    });
});
    </script>

My “doReverseSearch” method in an other JS file

function doReverseSearch(telValue, pageIdx, methodUrl) 
{

    $.ajax(
        {
            url: methodUrl,
            type: 'post',
            data: JSON.stringify({ Telephone: telValue, pageIndex: pageIdx }),
            datatype: 'json',
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                $('#result').replaceWith(data);
            },
            error: function (request, status, err) {
                alert(status);
                alert(err);
            }
        });
}

Thanks in advance

Answer 1

The problem is that you subscribe on the #bnNextPage click event when the document is ready but in your ajax success you replace the part of the DOM where #bnNextPage was originally.
So your click subscription is now loger active, that’s way it only works if you haven’t searched yet.

To make it work you need to resubscribe on the click event in the ajax success:

success: function (data) {
                $('#result').replaceWith(data);
                $("#bnNextPage").click(function (e) 
                {
                     alert("Next cmd");
                });
         },

Or as far more better solution: JQuery offers “durable” subscription with the live method. If you modify your original click code:

$("#bnNextPage").click(function (e) { alert("Next cmd"); });

to

$("#bnNextPage").live("click", function (e) { alert("Next cmd"); });

It will work without modifying your success callback.

Please note that as JQuery 1.7 the live method is deprecated and you should use the on method instead. In your case the subscription looks like the following with on:

$(document).on("click", "#bnNextPage", function (e) { alert("Next cmd"); });