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:
MVC Partial View:
Controller Actions:
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
>
<
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
>
<
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
>
<
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
>
</
div
>
</
div
>
</
fieldset
>
</
div
>
</
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);
}