In my asp MVC website, I have a layout file where I load my JavaScript files :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My title</title>
@Styles.Render("~/Content/css")
</head>
<body>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jquerymobile")
@RenderSection("scripts", required: false)
<div data-role="page" data-theme="a" id="home">
<div id="divPartialView">
@RenderBody()
</div>
</div>
</body>
Then, I have a main page that use the layout:
@{
Layout = "~/Views/Shared/_LayoutBase.cshtml";
}
In this page, I replace the content of my div by a partial view :
$.ajax({
url: '@Url.Action("MyPage", "Home")',
data: { myVariable: "variable"},
cache: false,
type: "POST",
dataType: "html",
success: function (data) {
$("#divPartialView").html(data);
},
error: function () {
alert("error");
}
});
My partial View :
<div data-role="header">
</div>
<div data-role="content" id="MainContent">
</div>
<div data-role="footer" data-position="fixed">
</div>
The problem is that in this partial view, I have to load the Jquery mobile scripts again, otherwise it doesn't work... (the header and footer doesn't display correctly)
Do you have an idea why ?
In my asp MVC website, I have a layout file where I load my JavaScript files :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My title</title>
@Styles.Render("~/Content/css")
</head>
<body>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jquerymobile")
@RenderSection("scripts", required: false)
<div data-role="page" data-theme="a" id="home">
<div id="divPartialView">
@RenderBody()
</div>
</div>
</body>
Then, I have a main page that use the layout:
@{
Layout = "~/Views/Shared/_LayoutBase.cshtml";
}
In this page, I replace the content of my div by a partial view :
$.ajax({
url: '@Url.Action("MyPage", "Home")',
data: { myVariable: "variable"},
cache: false,
type: "POST",
dataType: "html",
success: function (data) {
$("#divPartialView").html(data);
},
error: function () {
alert("error");
}
});
My partial View :
<div data-role="header">
</div>
<div data-role="content" id="MainContent">
</div>
<div data-role="footer" data-position="fixed">
</div>
The problem is that in this partial view, I have to load the Jquery mobile scripts again, otherwise it doesn't work... (the header and footer doesn't display correctly)
Do you have an idea why ?
Share Improve this question asked May 19, 2014 at 8:02 GabGab 1,9305 gold badges27 silver badges40 bronze badges 1- Read this article: gajotres/… so you can learn how jQuery Mobile handles JavaScript initialization. – Gajotres Commented May 19, 2014 at 8:43
4 Answers
Reset to default 2You have a file name BundleConfig, this file show you what scripts you load.
This file should contain:
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include("~/Scripts/jquery.validate*"));
After that check your layout, your file must contain:
@Scripts.Render("~/bundles/jqueryval")
Have a good day.
You should use @section Scripts{}
<body>
...
//should bottom of body tag.
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jquerymobile")
@RenderSection("scripts", required: false)
</body>
In partial view write all code under Scripts section
@section Scripts {
$.ajax({
....
});
}
I would put javascript references after loading entire page like:
<div data-role="page" data-theme="a" id="home">
<div id="divPartialView">
@RenderBody()
</div>
</div>
...
<!-- finally here -->
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jquerymobile")
@RenderSection("scripts", required: false)
</body>
</html>
You have to append relative scripts after you append new html (this case your partial) to the page. I'm guessing something like below:
...
success: function (data) {
$("#divPartialView").html(data);
$("#divPartialView").append('<script src="jquery.mobile.js" type="text/javascript"></script>');
},
...
also make sure this script gets all the pre-requisite scripts.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745107582a4611651.html
评论列表（0条）