CODEWITHSUNDEEP
asp.net-mvcjquerypartial-views
Rayshawn
Rayshawn

Reputation: 2617

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

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?

Upvotes: 1

Views: 1045

Answers (1)

Rayshawn
Rayshawn

Reputation: 2617

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.

Upvotes: 1

Related Questions