CODEWITHSUNDEEP
jqueryajaxasp.net-mvctwitter-bootstrapasp.net-mvc-4
E-Bat
E-Bat

Reputation: 4892

jQuery events stop working after partial view post in asp.net mvc(4) Part II

I have a View with the following layout enter image description here The parent View is composed of several PartialViews. One of which is a list where each item has a corresponding Edit button which loads the item into another PartialView, but this is loaded via ajax into a modal bootstrap-dialog.

By hitting the Edit buttons partials view are loaded without problem in the modal dialog but after Submit a dialog the Edit buttons stop to fire the event and the modal does not get loaded anymore, i mean, the click handler for Edit button stops working.

I believe this is due to the fact that after posting the modal im ajax-reloading the List Partial View that contains Edit buttons and so i need to rebind the events. But by doing so it would form a circular call beween the edit click event and modal form submit?

The scripts in the Parent View:

$(".btn.mylink").on("click", function () {            
            var id = $(this).data('id');
            var url = "/SalidaDetalle/Edit/" + id;            
            $.get(url, function (data) {
                $(".modal-body").html(data);
                $('#myModal').modal('show');

                $(".edit-detail").on('submit', function () {
                    $.post($(this).attr('action'),
                    $(this).serialize(), 
                    function (data, status) {                        
                        $('#myModal').modal('hide');
                        $("#details").html(data);

                    }).error(function (error, status, a, b) {
                        writeError('msgError', 'Error processing request. Please check errors and try again!');
                        $('.modal-body p.body').html(error.responseText);

                    });
                    return false;
                });

            });
        });

Note: This question is related to this one

Upvotes: 2

Views: 4941

Answers (1)

Slicksim
Slicksim

Reputation: 7172

Rather than bind the events to your buttons directly, anchor them to a containing block that doesn't get refreshed. your events will continue to fire even if you have reloaded the inner content in that partial view.

$("#container").on("click",".btn.mylink", function (evt) {            
        var id = $(evt.currentTarget).data('id');
        var url = "/SalidaDetalle/Edit/" + id;            
        $.get(url, function (data) {
            $(".modal-body").html(data);
            $('#myModal').modal('show');
        });
    });

$("#container").on('submit',".edit-detail", function (evt) {
         $.post($(evt.currentTarget).attr('action'),
         $(evt.currentTarget).serialize(), 
         function (data, status) {                        
             $('#myModal').modal('hide');
               $("#details").html(data);

         }).error(function (error, status, a, b) {
              writeError('msgError', 'Error processing request. Please check errors and try again!');
            $('.modal-body p.body').html(error.responseText);

   });
   return false;
   });

You'll need to tweak the script and add the div with id container to your parent view, but you get the idea

Upvotes: 10

Related Questions