Question

I am using C#, MVC.

I am having a problem with PartialView and jquery load working properly.

When the user clicks on a hyperlink called Kit, I call the following:

    public ActionResult KitsEdit(string id)
    {
        int idnbr = Convert.ToInt32(id);

        var Progs = db2.usp_KitInfo(idnbr)
                    .OrderBy(x => x.TDate).ToList();


        return PartialView(Progs);
    }

which loads a PartialView on the page fine.

the View has rows and for each row has an edit hyperlink.
When the user clicks on the Edit hyperlink, I show a dialog box where the user can modify that some of the info on that appears on each row and hit submit. This works fine the first time.

On submit, I call I do some validation and then call:

    $("#stlist").load('@Url.Action("KitsEdit", "Spr")' + '?id=' + '@Model.id'); 

as I need to reload the partial view on the page so the user can see the updated information.

The load of the page works fine on the surface. What happens though is that when I click on Edit hyperlink a SECOND time after I did the .load and the dialogbox shows up some of the functionality that worked before simply doesn’t work. For example, the checkbox doesn’t work in that if I click it, the value doesn’t get passes properly back to the controller action. Also, for the submit, I had some code on click but those don’t even work. It goes diectly to the controller action and bypasses all of the code in

    $("#submit").click(function ().

Note that this happens only after the load() is called.

Question: Is there anything besides the .load() that will load a PartialView on the page. If not, how can I get it to work properly with the .load().

Below is what the submit click looks like:

    $("#submit").click(function () {
    //  following .on code won't execute code inside of function so have it commented       
    // $("#submit").on("click", function () {  

         var inactivedate = $("#InactiveDate").val();

         var inactivecheck = $('#Inactive').is(':checked');

         var inactivereason = $('#InactiveReason option:selected').text();

         if ((!inactivedate || !$.trim(inactivedate)) && $('#Inactive_cb').attr('checked') == true) {
             alert('Inactive Date must be entered.');
             return false;
         }

         if ($('#Inactive_cb').attr('checked') == true && inactivereason == '<Choose>') {
             alert('Inactive Reason must be selected.');
             return false;
         }

         var url = '@Url.Action("EditTrain", "Spr")';


         $.ajax({
             type: "POST",
             url: url,
             async: false,
             data: $('#theForm').serialize()               
           });


         $("#stlist").load('@Url.Action("kitsEdit", "Spr")' + '?id=' + '@Model.spkrid');
         parent.$.fn.colorbox.close();

         return false;

     });
 });

Thanks in advance.

Answer 1

load function is injecting some new contents to the DOM dynamically . So the old event bindings wont work for the new elements. You need to use jQuery on

Change

$("#submit").click(function (e) {
  //some code 
});

to

$(document).on("click","#submit",function (e) {
  e.preventDefault() // if you need
  //some code 
});

jquery on works for current and future elements.