This is a migrated thread and some comments may be shown as answers.

RemoteView AJAX PartialView jQuery Not Defined

5 Answers 230 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

Bill asked on 01 May 2013, 02:36 PM

I am using remote views to show partial views from an ASP.NET MVC web site. I am performing ajax requests which in turn, use MVC partial views to replace part of the remoteView's DOM. This works fine... the first ajax post. On the second (or higher) - 2+ ajax posts, I get "Uncaught ReferenceError: $ is not defined".

Anyone have any thoughts?

Mobile index.html - RemoteView Navigate:

<body>

<div id="rootView" data-role="view" data-init="verifyLogin">

</div>

<script>

var isLoggedIn = false;

var app = new kendo.mobile.Application($(document.body), {

initial: "rootView"

});

function verifyLogin() {

app.navigate("http://127.0.0.2:81/Mobile/Account/Login");

}

</script>

</body

MVC Partial View:

<div data-role="view" data-title="Login" data-reload="true" id="viewLogin">

<form action="@OurApp.Core.Web.UrlHelper.GetUrlRoot()/Mobile/Account/Login" data-ajax="true" data-ajax-mode="replace" data-ajax-success="onSuccess" data-ajax-update="#loginForm" id="loginForm" method="post">

@Html.AntiForgeryToken()

<div>

<fieldset>

<header>

<legend>Login</legend>

</header>

<div class="widget-inner clearfix">

@Html.ValidationSummary(true, "Login was unsuccessful. Please correct the errors and try again.")

<div class="control-group">

<label class="control-label">@Html.LabelFor(model => model.UserName, new { @class = "bold" })</label>

<div class="controls">

@Html.TextBoxFor(model => model.UserName, new { autofocus = "autofocus", @class = "input-block-level", tabindex = "1" })

@Html.ValidationMessageFor(model => model.UserName)

</div>

<div class="control-group">

<label class="control-label clearfix">

@Html.LabelFor(model => model.Password, new { @class = "bold pull-left" })

</label>

<div class="controls">

@Html.PasswordFor(model => model.Password, new { @class = "input-block-level", tabindex = "2" })

@Html.ValidationMessageFor(model => model.Password)

</div>

<div class="clearfix">

<div class="pull-right" style="margin-left: 16px;">

<button type="submit" class="btn btn-primary disable-onclick" tabindex="4" style="margin-top: 0;">Login</button>

</div>

<div class="pull-right" style="margin-top: 6px;">

@Html.LabelFor(model => model.RememberMe, new { @class = "pull-left", style = "font-size: 12px;" })

@Html.CheckBoxFor(model => model.RememberMe, new { @class = "pull-left", style = "margin-left: 6px;", tabindex = "3" })

@Html.ValidationMessageFor(model => model.RememberMe)

</div>

</fieldset>

</div>

</form>

<script type="text/javascript">

$(function () {

var form = $("#loginForm");

form.removeData('validator');

form.removeData('unobtrusiveValidation');

$.validator.unobtrusive.parse(form);

});

function onSuccess() {

alert('success');

}

</script>

</div>

Controller Actions:

public ActionResult Login()

{

return PartialView(new LoginViewModel());

}

[HttpPost]

public ActionResult Login(LoginViewModel model)

{

return PartialView(model);

}

5 Answers, 1 is accepted

answered on 03 May 2013, 02:50 PM

kendo_mobile_ajax_issue.png

I think I've found the problem, but I don't know how to fix it yet. I'm using jquery unobtrusive ajax to replace by id the content of the form in my remoteView after doing an ajax submit. While this works fine on my MVC website, it is not working with kendo mobile. Rather than replacing the contents of the target with the valid contents of the ajax response... the entire view + form + valid content is being inserted in my target. See the screenshot.

So the view + form + content is being nested over and over inside itself on each post which is causing issues. I'll keep digging and see if I can come up with a solution.

answered on 03 May 2013, 07:02 PM

before_after.png

I've progressed with fixing the partial view rendering so the content within the mobile remoteView successfully updates as it should now. Sorry about that one.

However, kendo styling is still messing up after the DOM is refreshed. It appears kendo mobile CSS classes are lost when the DOM is refreshed. Are there kendo styles dynamically applied with javascript when a view is intitially loaded? See before & after screenshot.

For instance, the kendo mobile buttons (data-role="button") lose all of their styles like ".km-button". Are those dynamically set on view init by kendo? If so, how to I initialize my view again after the DOM is updated with new HTML?

Accepted

answered on 03 May 2013, 07:38 PM

Finally, a working remoteView using MVC partial views and jquery unobtrusive ajax O.o

After you submit an ajax request and replace a portion of the DOM, you have to reinitialize kendo data-roles. I tried to do the basic data-attribute initialization found here like so: kendo.init($("#viewLoginContainer"));

Unfortunately that does not work. I managed to find a mobile flavor of kendo.init and that fixed my issue. I have to call kendo.mobile.init($("#viewLoginContainer")); after the DOM is refreshed.

It would help if the mobile-version of this function is put in the Data Attribute Initialization documentation.

Thanks :)