jquery does not work after ajax call.asp .net mvc3(Razor)

Question

I am doing a post back to get a partial view using ajax following is the code I am using to render the partial view in a div called 'DivSearchGrid'.

 <script type ="text/javascript" >
       $('#Retrieve').click(function () {
           $('form').get(0).setAttribute('action', 'Search');
           //                      $('form').submit();
           var formSubmit = $('form');
           var datTab;
           $.ajax({
               url: "/AuthorityGrid/Search",
               type: "POST",
               data: formSubmit.serialize(),
               success: function (data) {
                   datTab = data;
               },
               complete: function () {
                   $('#DivSearchGrid').html(datTab);

               }

           })
           return false;
       });
   </script>

The action method in the controller returns a grid with new values. my problem is that after the ajx call is complete the other jquery events in my page stop working. The code for some events is as follows.

<script type="text/javascript">

        $(function () {
            //$('th[scope|="col"]').resizable();
            $("#resultGrid > tbody").selectable({
                selected: function (event, ui) {
                    if (ui.selected.cells != null) {
                        var strAmount = ui.selected.cells(6).innerText;
                        var Amount = strAmount.replace(/,/gi, "");
                        var keyValue = "AuthorityLevel1=" + ui.selected.cells(11).innerText + ",AuthorityLevel2=" + ui.selected.cells(12).innerText + ",TcmAccount=" + ui.selected.cells(2).innerText + ",TcmType=" + ui.selected.cells(10).innerText + ",Rating=" + ui.selected.cells(5).innerText + ",Amount=" + Amount + ",AuthorityGridKey=" + ui.selected.cells(9).innerText + ",CagName=" + ui.selected.cells(3).innerText
                        var keyValModify = ui.selected.cells(11).innerText + "," + ui.selected.cells(10).innerText + "," + ui.selected.cells(12).innerText + "," + ui.selected.cells(5).innerText + "," + ui.selected.cells(2).innerText + "," + Amount + "," + ui.selected.cells(3).innerText + "," + ui.selected.cells(9).innerText
                        $('#CancelViewParam').val(keyValue);
                        $('#ModifyViewParam').val(keyValModify);

                    }
                }
            });
        });
    </script>

this function selects a row from the grid and puts the selected values in a hidden field.

Also a function to open popups is not working after the ajax call.code for this function.

$(function () {
    $("#DivSearch").dialog({ autoOpen: false, height: "600", width: "600", dialogClass: "myRatingHelp", modal: true });
    $('#bRatingHelperDivSearch').live('click',function () { $('#DivSearch').dialog('open'); });
    $('#DivSearchRating_bOk').click(function () {
    $("#InputAuthorityGridSearch_Rating").val($("#hidRating").val());
    $("#DivSearch").dialog('close');
    });
    $('#DivSearchRating_bCancel').click(function () {
    $("#DivSearch").dialog('close');
    });
    });

All these functions work perfectly well before the ajx call but all stop working after the call,can someone help? I am not using webforms , I am using asp.net mvc3(razor)

Answer 1

I assume the code that doesn't work any more does not get called after the ajax call? It seems likely that your code still works, but isn't triggered anymore. As the content of the data grid changes, your added handlers/events/... will not be boud to any item anymore.

Have you tried re-executing the code after the ajax-call has been completed, so that the handlers/events/... are bound to the new content?

Also: the .live() code is the only part that should always work, in theory. However, live is a deprecated function. Suggestions are to use .delegate() before jQuery 1.7 or .on() after jQuery 1.7