CODEWITHSUNDEEP
jqueryajaxasp.net-mvc-4razorwebforms
Sumit Chourasia
Sumit Chourasia

Reputation: 2434

In My Razor View jquery does is not work after making ajax call?

I am making a post back to get a partial view using ajax. I'm using following code.

<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>

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. code for events

<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');
 });
 });

these functions works perfectly well before the ajax call but all stop working after the making ajax call. I'm stuck on this. please help me.

Upvotes: 0

Views: 327

Answers (1)

WannaCSharp
WannaCSharp

Reputation: 1898

The problem is that when the HTML gets replaced, the elements lose their bindings. Bind the events to the body or your #DivSearchGrid'

$('#DivSearchGrid').on("click", "#DivSearchRating_bOk", "function () {
    $("#InputAuthorityGridSearch_Rating").val($("#hidRating").val());
    $("#DivSearch").dialog('close');
 });

or 

$('body').on("click", "#DivSearchRating_bOk", "function () {
    $("#InputAuthorityGridSearch_Rating").val($("#hidRating").val());
    $("#DivSearch").dialog('close');
 });

Upvotes: 3

Related Questions