Maybe jQuery just runs styling after the page has loaded completly for the first time. Postloading content with jquery (so async using AJAX) does not cause jQuery to apply styles. Maybe you can call jQuery to apply the styles by hand after the partial view
is loaded?
Yes, I'm talking Jquery and Jquery mobile, I made two testings:
1. If I add the above scripts on top of the PartialView, then the style looks right, but every call will build a duplicated jquery controls on the Index view!!
you should be using changePage, but if you load some content, then yoiu trigger the create event. if you change the content of an element, then you trigger refresh (say you changed a select, or adde/detele an item to a listview).
Here is what I came up with. You can use an @Ajax.ActionLink and in the AjaxOptions use the OnSuccess event to call a JavaScript function that executes the JQuery you are trying to execute. ie.
In my experience, any JQuery code intended to affect a partial view has be to loaded into the calling main view first. It's not the ideal workaround but it works.
ceo_uk
Member
39 Points
24 Posts
Partial View doesn't apply JQuery style.
Jan 23, 2012 09:53 PM|LINK
1. Index.cshtml calls ActionResultTesting() function in the controller.
$('#divResult').load('@Url.Action("ActionResultTesting", "Home")');
<div id='divResult'></div>
2. The controller then return a PartialView:
return PartialView("~/Views/Home/MyPartialView.cshtml");
3. it then returns HTML to the 'divResult' in the Index.cshtml.
However, I found JQuery doesn't apply js/css on the returned HTML, i.e. if you have a JQuery style like this:
<div data-role="collapsible-set" data-theme="c" data-content-theme="d"></div>
it works fine if you put it in the Index.cshtml, but doesn't work if you put it in the MyPartialView.cshtml.
Any idea?
asymetrixs
Member
34 Points
7 Posts
Re: Partial View doesn't apply JQuery style.
Jan 24, 2012 12:10 AM|LINK
Maybe jQuery just runs styling after the page has loaded completly for the first time. Postloading content with jquery (so async using AJAX) does not cause jQuery to apply styles. Maybe you can call jQuery to apply the styles by hand after the partial view is loaded?
bruce (sqlwo...
All-Star
36822 Points
5441 Posts
Re: Partial View doesn't apply JQuery style.
Jan 24, 2012 03:59 AM|LINK
thats correct you need to rebind all jquery objects to the new html. if you are using jquery-mobile, you should not use load but rather pageLoad
ceo_uk
Member
39 Points
24 Posts
Re: Partial View doesn't apply JQuery style.
Jan 24, 2012 09:14 AM|LINK
Thanks for your reply,
Yes, I'm talking Jquery and Jquery mobile, I made two testings:
1. If I add the above scripts on top of the PartialView, then the style looks right, but every call will build a duplicated jquery controls on the Index view!!
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.6.4.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.mobile-1.0.min.js")"></script>
i.e. if there is a Jquery mobile search bar in the Index.cshtml, <input type="search" name="search" id="searc-basic" value="" />
Every time when the PartialView returns, it will add another input control on the Index page.
2. If I change : $('#divResult').load('@Url.Action("ActionResultTesting", "Home")');
to: $('#divResult').pageLoad('@Url.Action("ActionResultTesting", "Home")');
then when running it, got an error: Microsoft JScript runtime error: Object doesn't support property or method 'pageLoad'.
So how to make the jquery mobile style works with MVC partical view?
Thanks!
ceo_uk
Member
39 Points
24 Posts
Re: Partial View doesn't apply JQuery style.
Jan 24, 2012 08:03 PM|LINK
Any update on this one?
bruce (sqlwo...
All-Star
36822 Points
5441 Posts
Re: Partial View doesn't apply JQuery style.
Jan 25, 2012 02:57 AM|LINK
please read the jquery moblie docs.
you should be using changePage, but if you load some content, then yoiu trigger the create event. if you change the content of an element, then you trigger refresh (say you changed a select, or adde/detele an item to a listview).
ceo_uk
Member
39 Points
24 Posts
Re: Partial View doesn't apply JQuery style.
Jan 25, 2012 05:55 AM|LINK
Thanks Bruce, the reason using .load is because its 'AJAX' feature, so the page don't need reload.
In my case ,it would be good to know how to use the $.mobile.loadPage?
Thanks!
ceo_uk
Member
39 Points
24 Posts
Re: Partial View doesn't apply JQuery style.
Jan 26, 2012 10:03 AM|LINK
Hello, any update on this one? Cheers, Jim
haddox19
Member
8 Points
4 Posts
Re: Partial View doesn't apply JQuery style.
May 10, 2012 01:25 PM|LINK
Here is what I came up with. You can use an @Ajax.ActionLink and in the AjaxOptions use the OnSuccess event to call a JavaScript function that executes the JQuery you are trying to execute. ie.
<div class="post-text">Then in your Javascript:
What this does is loads a PartialView into a div and after it loads successfully, it applies JQuery styling to objects with the class of button
</div>AxiomaticRub...
Member
2 Points
1 Post
Re: Partial View doesn't apply JQuery style.
May 10, 2012 05:16 PM|LINK