Run-time loading C5 pages via jQuery.load()
Permalink 1 user found helpful
Many clients these days want streamlined, no-reload navigations. Basically this is easy enough with jQuery's load() method, where you just send the contents of some external page in to a <div>.
I'm trying to figure out the best way to do this in C5. The thing is that these external pages must now be editable in C5, which means it must contain C5 headers in their template. Given that, when loading a local C5 page via jQuery.load() from within another C5, there are inherent conflicts because of these headers (for example if you then try to put the page in edit mode, you'll find yourself editing the loaded page, not the containing one).
My question to the C5 gurus then is how would you do this? These pages to load are the client's projects, so they have to be fairly easy to edit, having them as a page type is ideal, but how can I avoid the above problem?
There are also some other minor ones, namely that I can't seem to affect the loaded content with fading or animation, likely because it's loading all kinds of JS and junk that each C5 page loads and is clearly messing with the whole DOM.
Thanks!
Dan
I'm trying to figure out the best way to do this in C5. The thing is that these external pages must now be editable in C5, which means it must contain C5 headers in their template. Given that, when loading a local C5 page via jQuery.load() from within another C5, there are inherent conflicts because of these headers (for example if you then try to put the page in edit mode, you'll find yourself editing the loaded page, not the containing one).
My question to the C5 gurus then is how would you do this? These pages to load are the client's projects, so they have to be fairly easy to edit, having them as a page type is ideal, but how can I avoid the above problem?
There are also some other minor ones, namely that I can't seem to affect the loaded content with fading or animation, likely because it's loading all kinds of JS and junk that each C5 page loads and is clearly messing with the whole DOM.
Thanks!
Dan
The one site I've done this on, I add a condition around the header/footer calls in my theme that checks for the presence of a '_ajax' variable in the request.
I then use the jQuery click event on a selected set of elements (generally nav). The click event adds the _ajax=1 to the url, makes the request and adds the content.
I also set the global JS variable 'CCM_CID' to be the page ID of the new content, which means clicking the edit button works nicely.