• 0

Jquery Ajax (.load) not applying styles correctly


Question

Hello....

I have been working on some simple JQuery based ajax loading of content (well i thought it would be simple), and have hit an issue where as once it is re-loaded the page content i do not the new contents style does not match the original.

I have the following:

  • the modx Content Management Framework
  • Jquery 1.3.2
  • A Text Resizer Module for Jquery
  • Some custom code to load my pages based upon Link Clicked and Context of the link
  • A Set of pages to be loaded which are identical to the pages being loaded with the exception of content (Navigation, Style, Footer are all identical) to save for JS Loading Errors

I am using:

$("#contentLeft").load( contentPath + " #contentLeft *");

To load the content from the new page into the current Div, where "contentPath" is the path to the new page.

When the page loads it checks to see if a cookie has been set and if so will also load content based upon the page.

Now when you view the page before content has been loaded you see a perfectly styled page (well perfect in relevance to the site). When you view the page i am trying to load content from the you get a perfectly styled page. But when Jquery does the content load the styling is lost, especially when it comes to tables and line breaks.

Now the only styling that is applied to the pages dynamically is for alternative table rows (which is done in $(document).ready) and seems to apply.

Any Ideas?

Al

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

as far as i know, when doing ajax (through Jquery or not) inline styling is not applied because only html is parsed (this in one of the reason <script></script> tags are not parsed as well) You need to have the styles on the loading page, or have some javascript intercept any external loading style and append them to the <head> tag. (Well actually styling is kind of hit or miss some browsers will parse the css, some other not).

What may be your problem here though is that the parsing takes place but some css rules are overridden by the ajax loaded page (things like table { padding:0; margin:0; etc } td { background: #fff; } etc...).

Link to comment
Share on other sites

  • 0

All of my Style sheets are loaded in the head (Link Rel's) everything in the content is all classes / css selectors. Sorry i did not mention that =[.

Could there be something that isnt being applied during the load?

Link to comment
Share on other sites

  • 0

All of my Style sheets are loaded in the head (Link Rel's) everything in the content is all classes / css selectors. Sorry i did not mention that =[.

Could there be something that isnt being applied during the load?

A link to your site would make it easier to debug.

Link to comment
Share on other sites

  • 0

A link to your site would make it easier to debug.

@++iHazCool: Check your PM's, I am not publicly allowed to post the link as i have been called in to fix some bugs on the site in question and this one has stumped me.....

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.