1

I have implemented AAPL on a new website which loads in Wordpress pages using AJAX.

Problem: For some unknown reason, css styles which are supposed to be loaded via enqueue are not being loaded.

If I click a page, some effects and transitions don't load - when checking the element, the css isn't visible. I then click "reload" which loads the page normally, and everything works perfectly.

Site: http://murrayfredericks.oleymedia.com/projects/

Click "Greenlands" -> "Information" - you can see it loads the font in Times New Roman instead of the styles from bootstrap.css. Reload the page and voila - problem resolved - bootstrap.css is loaded?

E.g. When I click the "Information" page and view the source for the first column element:

<div class="wpb_column vc_column_container vc_col-sm-3 catlistli visible">

This is what I see:

enter image description here

Then, when I reload, I view the exact same element and this is what I see:

enter image description here

NOTE: See now that the js_composer.min.css is now being applied to the same element and is formatting it properly so that it looks how it should look.

It seems to never be the /child-theme/style.css that isn't applied - it's only ever js_composer.css or bootstrap.css

1

2 Answers 2

0

In general AJAX requests return data, how the data is formatted and what do you do with it is up to you.

Things that are very hard to do in to add and remove JS and CSS. Adding full files is easier as all you need to to insert a script or link element to the dom if the correct, but fragments like are usually pushed on wp_head are harder. Removing JS is practically not possible, CSS maybe.

So what does it mean in practice? It means that when you write an AJAX based code, you better always enqueue all the relevant JS and CSS in all pages, and all the AJAX response will have to do is have proper CSS class and (if not covered in other way) inline calls to JS functions.

You can hardly expect that you can just use a full HTML page "as is" in an AJAX response and have it working, except for trivial pages.

6
  • Thanks. I enqueue all js and css. It loads on initial page load. When clicking menu, it loads content into main div. my assumption was that the content would still have access to all previously loaded page assets? They are still there in head when inspecting element but not applying to elements Commented Jan 16, 2017 at 8:56
  • apply what? you are probably inserting an HTML into HTML, something which on the best of days will probably have an undefined behaviour Commented Jan 16, 2017 at 9:17
  • apply css styles. It only loads the main content (the body) from each page/post - I assumed that the styles residing in <head> would still be applicable? Commented Jan 16, 2017 at 22:38
  • apply css styles. It only loads the main content (the body) from each page/post and inserts it into the div#main - I assumed that the styles residing in <head> would still be applicable? Commented Jan 16, 2017 at 22:44
  • @php-b-grader, consider upvoting and accepting Mark's answer because it is an excellent match for your solution.
    – prosti
    Commented Jan 16, 2017 at 23:53
0

I enqueue all js and css. It loads on initial page load. When clicking menu, it loads content into main div. My assumption was that the content would still have access to all previously loaded page assets?

This is your problem. The state of your project is like this: enter image description here

As you can note, you loaded the home page CSS and JS, not the another page CSS and JS.

The Ajax loads content to the main div it is not loading the JS and CSS part it should.

Every page typically can have different CSS and JS assets.

You may thinker to load all CSS and JS assets on the very first load, but this is another question.


Let me formalize this even further

Home page | Another page
-------------------------
  CSSA    |  CSSA
  CSSB    |  CSSC
  JSD     |  JSD
  JSE     |  JSF   

As you see on the Home page and on the Another Page some files may be same and some may be different.

Tha Ajax request will not update the CSS and JS files, it will only update that DIV, so the state of the CSS, and JS resources will be as on Home page (read: incorrect)


If you have the correct CSS, and styles still haven't been applied, then search Google for:

ajax loading content but styles not applied

to fix the missing style problems. The part of the page needs a refresh.

6
  • Thanks. So you have confirmed my theory as correct - even though the css and js are loaded into the head on initial load, subsequent ajax page loads ignore all the css and js in the head? Commented Jan 16, 2017 at 22:40
  • Problem is - that it is now all css - it appears to load child-theme style.css just not the styles that are being enqueue'd? Commented Jan 16, 2017 at 22:41
  • Yes, and no. The CSS and JS files set on the Home page is typically different than the CSS and JS files on the another page. Let me formalize this for you in the answer.
    – prosti
    Commented Jan 16, 2017 at 23:09
  • Hi - just to re-iterate - there is no "different" css on the other pages that is causing a problem. The css that is not loading is css that is already loaded and working on the previous page. Commented Jan 16, 2017 at 23:23
  • @php-b-grader, how beautiful the programming world is, it forces you to think further and further.
    – prosti
    Commented Jan 16, 2017 at 23:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.