Hello,

Just wanted to show everyone about how I implemented 'Load content via JQuery Ajax' module. Check it out:

www.filtermusic.net

Kudos to serjas for the uber useful and unique module!

Comments

harry_nc’s picture

harry_nc commented

Good work, here's an example I made using the module (click on news articles to see it in action)

http://www.readingfestival.co.uk/news

quickly’s picture

quickly commented

Good work @pipicom, @harry_nc

Almost all links of my website are using this module. It is a wonderful module and the best part is ease of use. The link below is one of the pages that computer scientists would like, it has some of the best quotes by Steve Jobs. Click on any link on the page to see this module in action.

serjas’s picture

serjas commented

@quickly nice website :)

quickly’s picture

quickly commented

Thanks mate :)

pipicom’s picture

pipicom commented

Hello quickly.. Indeed your ajax implementation is rather quickly :)

How did you manage to make the addtoany buttons load after each ajax call? Didn't you have to load again the relevant script into "html--ajax.tpl.php"?

quickly’s picture

quickly commented

Thanks @pipicom,
No I didn't have to load the script again. In fact AddtoAny was the only social sharing module (that I could find) that worked well with ajax calls. I am also using Views Infinite Scroll module, AddtoAny works well with that too.

quickly’s picture

quickly commented
Issue summary: View changes

update

Syntapse’s picture

Syntapse commented
Issue summary: View changes

has anyone tried this with drupal 8? im having a major problem trying to reload pages or use navigation.

if i follow an ajax link it loads correctly but if i reload the page from the browser i lose the drupal bootstrapped layout and the browser renders ONLY the last piece of AJAX content.

This renders a potentially very useful module useless as it basically breaks the browser address bar.

pipicom’s picture

pipicom commented

@laurencefass

I am currently migrating my website from Drupal 7 to 8 -- on my localhost environment the module works as expected. Maybe you should try with an incognito tab or another browser, I cannot replicate the bug you mentioned.

Syntapse’s picture

Syntapse commented

Incognito appears not to fix the issue related to the session. May I ask what happens when you browse back or reload AFTER loading content via an AJAX Link? Does it reload the full bootstrapped drupal page with regions etc.? mine reloads the entire page with only the last bit of AJAX content. This sounds broken. I am running on a remote host. I have tried on 4 different websites all with the same negative result. Sounds like it could be a problem with cacheing but needs reproducing first I think. The only way I can restore the site is to reload mydomain.com and not revisit any page via ajax. This fixes the cache for some reason.

Be great to hear if anyone else has a similar problem (or not).

Thanks

pipicom’s picture

pipicom commented

Hello @laurencefass and sorry for my late reply - I had to triple check that I indeed everything works correctly.

To answer your questions:

  • When I browse back, the previous 'ajaxified' page appears normally (without page being reloaded) and the browser URL displays the previous path. In other words, module is working fine.
  • All the above is tested on latest Chrome, Firefox and Brave browser.

Maybe the below tips will further help you:

  • Set an area where the ajaxified page will be loaded, in my case a div '.ajax_content'.
  • Overwrite both 'html--ajax.html.twig' and 'page--ajax.html.twig' files - copy them from module folder into your theme's folder. In my case, I deleted almost everything in those files (
    ). So, 'html--ajax.html.twig' now contains only '{{ page }}' and 'page--ajax.html.twig' only '{{ page.content }}'. The ONLY thing that I added on 'html--ajax.html.twig' to be reloaded again is the module's ajax script: in my case '

    Of course your path may vary.'

  • The above step is important. If you dont do it, the whole header section of 'html--ajax.html.twig' will be loaded again into the '.ajax_content' div along with all JS files (jquery, drupal stuff etc) which may break the whole page. It did break the page in my case. Cleaning up solved this.
  • Page also breaks when I am logged in! Several Drupal JS admin scripts are being reloaded as I navigate back and forth which break the page. Try all above while being logged out. I am still investigating how to solve this - I want the page to function as an admin as well. UPDATE: this fix solves the issue.
  • Open up your firebug and notice how your '.ajax_content' (or whatever div you may use) loads the new content. Make sure that ONLY pure HTML is being loaded into '.ajax_content' along with your 'ajax_links_api.js' file.

Hope the above helps.

Once again, many thanks to @serjas for the effort he put in this module.

Syntapse’s picture

Syntapse commented

many thanks for your reply,

i am still unclear whether my installations are broken or does the module need fixing? 4 separate clean installations of drupal all have the same problem...

So, if you DIDN'T make any of the changes above, do you experience the problems i have described? i.e. is the default behaviour of the module broken.

Can you also clarify your instruction: "Overwrite both 'html--ajax.html.twig' and 'page--ajax.html.twig' files - copy them from module folder into your theme's folder."

Do you mean copy from the ajax-links-api module folder to theme folder?

@serjas can you offer and feedback on this issue?

thanks

pipicom’s picture

pipicom commented

- About the 'html--ajax.html.twig' and 'page--ajax.html.twig' overwrite: Yes, copy them from module folder into your theme. My theme's folder structure is 'themename/templates/layout/html--ajax.html.twig' & 'themename/templates/layout/page--ajax.html.twig'

- I havent experienced the bugs you do have and I cannot replicate them. Sorry.

I suggest you follow the module's instructions carefully in a totally empty Drupal installation. Also check your Browser's code inspector to see how the HTML code is being loaded when you click on an ajax enabled link.
In my case I had to remove the '' part in 'html--ajax.html.twig' because reloading again and again the whole Drupal JS code (jquery, modules scripts etc) broke my page. I then manually inserted specific scripts I do want to be reloaded each time the ajax function is called.

Good luck!

Syntapse’s picture

Syntapse commented

i've tested this on five or six different clean installations and the problems related to html 5 reloading are consistent on each one. any attempt to reload any previously loaded url results in only a partial twig template for the site for the content only with no page.html.twig template.

works satisfactory without browser history.

not sure how this is working for others for drupal 8.6.4+?

Syntapse’s picture

Syntapse commented

instructions in #10 works for browser back button but not page reload.

Overwrite both 'html--ajax.html.twig' and 'page--ajax.html.twig' files - copy them from module folder into your theme's folder. In my case, I deleted almost everything in those files (
). So, 'html--ajax.html.twig' now contains only '{{ page }}' and 'page--ajax.html.twig' only '{{ page.content }}'. The ONLY thing that I added on 'html--ajax.html.twig' to be reloaded again is the module's ajax script: in my case '
Of course your path may vary.'

page reload continues to load only the content and other regions.

Syntapse’s picture

Syntapse commented

it seems to reload the page again correctly if i edit and save the node containing the link. ?

is this behavior reproduceable? is the maintainer available to offer feedback?

thanks

emb03’s picture

emb03 commented

Yes, I am having this issue in D8. I am using views pager with ajax links api. I can successfully load the first view but when I use the pager to go to another page 'ajax=1' appears in the url even though I have it checked off in the config. When I click the pager link, it loads only the views content no styles, theming or other content is loaded. I copied both html and page ajax template files and tried to output my site correctly with different {{ page }} and {{ page.content }} but nothing works.