Partial View doesn't apply JQuery style. RSS

• • Reply
  

  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?

   

   

• • Reply
  

  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?

• • Reply
  

  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

  bruce (sqlwork.com)
• • Reply
  

  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!

• • Reply
  

  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?

• • Reply
  

  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).

   

  bruce (sqlwork.com)
• • Reply
  

  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!

• • Reply
  

  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

• • Reply
  

  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">

  @Ajax.ActionLink("Create New", "Create", "Employee", new AjaxOptions()
  {
  UpdateTargetId = "divAction",
  InsertionMode = InsertionMode.Replace,
  HttpMethod = "GET",
  OnSuccess = "createNew_Success"
  }, new { id = "btnAdd", @class = "newButton", OnClick = "$('#divAction').slideDown();" })

  Then in your Javascript:

  <script type="text/javascript">
  function createNew_Success() {
  $('.button').button();
  }
  </script>
  

  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>
• • Reply
  

  AxiomaticRub...

  Member

  2 Points

  1 Post

  Re: Partial View doesn't apply JQuery style.

  May 10, 2012 05:16 PM|LINK

  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.