My asp.net MVC partial view is unresponsive after initial ajax call?

Question

I am working on an asp.net mvc 4 application and I am using a PartialView for a table in the Index view. After I make the initial ajax call the request is successful and the UI is updated accordingly. But when I try to update again, the JavaScript is unresponsive for the click event.

Is this typical?

AJAX call:

        $("#button").click(function(){
           $.ajax({
                url: 'url',
                type: "POST",
                data: $("#form0").serialize()
            }).done(function (allData) {

                $("#mypartialId").html(allData);
                ResizeContent();

            }).fail(function (jqXHR, textStatus) {
                alert("Request failed: " + textStatus);
            });
            });

Something like this is in my controller Index action:

        if(Request.IsAjaxRequest())
        {
            return PartialView("_PartialView", model);
        }

       return View(model);

Razor Ajax.BeginForm, has id of form0 by default:

           @using (Ajax.BeginForm("Index", "MyController",
                       new AjaxOptions
                           {
                               HttpMethod = "POST",
                               UpdateTargetId = "mypartialId"
                           }))

My partial rendering in Index:

    <div id="mypartialId">
        @{Html.RenderPartial("_PartialView", Model);}
    </div>

This works once but when I click the button switch is in the partialView the JavaScript becomes unresponsive. I am guess its something with the Index view not reloading with the partialView...would there be any way around that?

`.on()` allows you to register a delegate, not an event. This is what you need to circumvent this issue because your events are lost as soon as you change DOM in your AJAX callback. The actual delegate should look like this: `$("closest_parent_node_of_your_button").on("click", "your_button", function() {});` Instead of adding the event directly to the button element, jquery adds a delegate to fire the click event when it bubbles up to the parent of the button. This way your click event persists even if DOM changes. So make sure you're attaching your click event correctly. — Sergey Akopov, Mar 06 '13 at 20:38
You can also use `.live("click", function() {});` which i believe may be deprecated at this point. It does the same thing as `.on()` but it attaches the delegate to the body of your DOM which makes it horribly inefficient. — Sergey Akopov, Mar 06 '13 at 20:41

score 1 · Accepted Answer · edited May 23 '17 at 12:23

I used .on() function instead of just the .click() as @Sergey Akopov suggested. After that I had another problem after that because the data coming back was a table, so IE9 was giving me UI problems.

The fix was to remove the white space from the table tags like so, before injecting it into the DOM

                var expr = new RegExp('>[ \t\r\n\v\f]*<', 'g');
                table = table.replace(expr, '><');

                $("#mypartialId").html(table);

Here is a link to the 'td' issue displaying weird in IE9.

My asp.net MVC partial view is unresponsive after initial ajax call?

1 Answers1