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)

Have you checked the error console in Firefox, Safari or Chrome ? — Reporter
– Reporter, Commented Dec 28, 2011 at 9:03
I am using internet explorer , how to see the error console in IE? — Parikshit
– Parikshit, Commented Dec 28, 2011 at 10:04
In IE 8 and older exist only a very simple error console. You can call it only if an javascript error occurs and you had acivated the option "show javascript errors" before. I don't know how comfortable the console is in IE 9. You can download the mobile edition of Firefox, if you cannot install any software. Trust me/us, the console of these browsers are very effective. — Reporter
– Reporter, Commented Dec 28, 2011 at 10:17

Flater · Accepted Answer · 2011-12-28 09:04:02Z

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

answered Dec 28, 2011 at 9:04

Flater

14.1k4 gold badges45 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Parikshit Over a year ago

I have tried refreshing the page and the code does work after the refresh. you put it correctly the events are not bound after the contents of the grid are changed.Even the code with live function does not work. Can you please give an example of the delegate function?

Flater Over a year ago

After refresh it works, because then the code is being called. Basically, what you are doing on page load is adding a handler to element A, then deleting element A (thus deleting the handler), then adding a new element A via ajax. The handler will not be recreated unless you bind it again. I would suggest making a function like BindMyHandlers() in which you do all things you mentioned that are not working, then call the BindMyHandlers() function in the success call of you ajax-call. /// $(document).delegate("td", "click", function() { //code }); More infor here: api.jquery.com/delegate

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related