Advanced AJAX Page Loader
[resolved] Complex/varying layouts (4 posts)

  1. Julian_Kingman
    Posted 3 years ago #

    It seems like this plugin is great for a web-page with a fixed layout. However, I'm using one with varying layouts (full width, right sidebar, gallery view, featured content area widget).

    Out of the box, on the homepage, it reloads the content into the content area, and doesn't get rid of the "Featured" area, which is above it (a slider), nor the sidebar, which shouldn't appear on some pages.

    What are your suggestions for using it with this complex site structure? I was thinking of just reloading the whole body (wrapper), but wanted to get your opinion, if there's a more elegant way (that may preserve, for example, the menu).


  2. Dean Williams
    Plugin Author

    Posted 3 years ago #

    Well the plugin works by replacing everything in the div with the id you specify (or the default 'id="content"'.

    So if you have other blocks that may/may not be present you could just add more conditions to the loader alongside the content one, for instance for the "featured" area, you could wrap a div around it with id="featured", then when the ajax request is complete check if there is content for id="featured" and if so change that div for the new content, and if not (a page without it appearing), just set the content to "" so there is nothing there.

    It's all pretty easy work if you know what you are doing, I could give you a quote on the work if you can provide me with what areas will be needed for this functionality.

    Although, if these areas contain dynamic javascript functionality, please bare in mind they may break once ajax has played with them and you will need to re-call there bindings back into the page. (this could be hard depending).

  3. Julian_Kingman
    Posted 3 years ago #

    Thanks Dean,

    why does the inline javascript break? Is it technically impossible to preserve it, or...?


  4. Dean Williams
    Plugin Author

    Posted 3 years ago #

    Well for example, lets say you have a javascript which loads a lightbox when you click an image on the page.

    The code you call to say that a particular image is to be loaded with the lightbox is called a "binding", basically it calls a script that will look over the DOM (all the elements on the page), if it finds an element that matches the criteria it will bind itself (much like a glue) so that it will run on interaction (such as click).

    However, the DOM is changed when AJAX loads something new into the page, all the old DOM elements keep their bindings, but new elements are now free from bindings and in order to get those lightbox's to work again (in this example) you would have to re-call the code to look over the DOM again and glue itself.

    Does this make sense?

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Advanced AJAX Page Loader
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic