CODEWITHSUNDEEP
jqueryasp.net-mvc-3
Nate Pet
Nate Pet

Reputation: 46222

MVC C#, Partial View, Jquery load() not working properly after .load() is called

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.

Upvotes: 1

Views: 4789

Answers (4)

ABHISHEK Bandil
ABHISHEK Bandil

Reputation: 81

$("#submit").live('click', function () {}

This should work

Upvotes: 0

Shyju
Shyju

Reputation: 218702

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.

Upvotes: 1

solidau
solidau

Reputation: 4081

You're using .load() correctly, but you need to change the event handler to bind the event on newly created elements using .on() or .delegate(). like this:

$("#submit").on("click", function(){
  //do your stuff
});

Upvotes: 0

Garrett Vlieger
Garrett Vlieger

Reputation: 9494

Do you have any of the JavaScript code in the partial View? If you have any events wired up in the partial View, they won't work when you reload the control.

If you need to rebind the events, do it in the success function after your AJAX call is made.

Upvotes: 0

Related Questions