Load editable page via Ajax
Permalink
Hello c5 community,
I have run into a problem a couple of weeks ago and I just cannot seem to find the right path of information required in order to solve this issue.
What I am trying to do is this: [ c5.tricon-design.com ]
I am currently building a page, nothing special really. Some central main area, a side menu on the left, a fancy header/logo on top. That's about it.
Loading the page (index.php) and editing the "Main" area via the c5 editing tool(bar) in the "Home" menu-point works perfectly fine. As soon as I hit "Edit this page" I can start adding new blocks to the main area until my fingers drop off.
What I want to do with the other menu points though, is not adding sub-pages (I could do this, and link to them via <a href>) but instead loading them into the central area (with the dotted border) via ajax calls, in order to increase user experience and loading times etc.
The problem is, I just cannot seem to find out what to do, to load a page into this div and make it editable by c5. Loading a static page is no trouble at all, evidently. But I want to give my future client the option of editing (almost) any menu point he'd like - and I'd like to call the sub-pages via ajax, as mentioned.
Could anybody who knows how to do this point me into the right direction, please?
I've already looked into the construction of single pages with appropriate header.php and footer.php. I've dug into countless lines of code to see what c5 does when loading an editable page to see which lines might be missing from mine. And eventually I've gone over to adding the page as a simple sub-page created via c5's dashboard - but loading the entire page for every menu point does not make panda happy :(
Any hints are extremely welcome, thank you.
P.s.: Please forgive the messy code - I've gone a bit wild and disordered trying to get this to work.
I have run into a problem a couple of weeks ago and I just cannot seem to find the right path of information required in order to solve this issue.
What I am trying to do is this: [ c5.tricon-design.com ]
I am currently building a page, nothing special really. Some central main area, a side menu on the left, a fancy header/logo on top. That's about it.
Loading the page (index.php) and editing the "Main" area via the c5 editing tool(bar) in the "Home" menu-point works perfectly fine. As soon as I hit "Edit this page" I can start adding new blocks to the main area until my fingers drop off.
What I want to do with the other menu points though, is not adding sub-pages (I could do this, and link to them via <a href>) but instead loading them into the central area (with the dotted border) via ajax calls, in order to increase user experience and loading times etc.
The problem is, I just cannot seem to find out what to do, to load a page into this div and make it editable by c5. Loading a static page is no trouble at all, evidently. But I want to give my future client the option of editing (almost) any menu point he'd like - and I'd like to call the sub-pages via ajax, as mentioned.
Could anybody who knows how to do this point me into the right direction, please?
I've already looked into the construction of single pages with appropriate header.php and footer.php. I've dug into countless lines of code to see what c5 does when loading an editable page to see which lines might be missing from mine. And eventually I've gone over to adding the page as a simple sub-page created via c5's dashboard - but loading the entire page for every menu point does not make panda happy :(
Any hints are extremely welcome, thank you.
P.s.: Please forgive the messy code - I've gone a bit wild and disordered trying to get this to work.
Seehttp://www.concrete5.org/marketplace/addons/rapid-ajax-paging/...
Hello John,
thank you for your quick reply.
I did have a look at 'rapid ajax paging' already. It seems to be exactly what I need. I just hoped to get away without spending any $$ ;)
thank you for your quick reply.
I did have a look at 'rapid ajax paging' already. It seems to be exactly what I need. I just hoped to get away without spending any $$ ;)
There are a couple ways you can pull this off. Depending on your skill level. One way is cuter than the other.
1. The first way is to just do an AJAX/jQuery load for the page they want, pull out the middle div and do a replaceWidth() on the current page's div. There's probably a jQuery plugin somewhere that does this where you pick the div to swap out and it grabs the new page and works it's magic.
2. The second is to create a tool that gets the Areas for the page in question and just renders/returns those which is kind of complicated and on my list of things to do, so I can't give you much more than that. But should be very doable and many more 1337 points.
Happy Hacking,
Mike
1. The first way is to just do an AJAX/jQuery load for the page they want, pull out the middle div and do a replaceWidth() on the current page's div. There's probably a jQuery plugin somewhere that does this where you pick the div to swap out and it grabs the new page and works it's magic.
2. The second is to create a tool that gets the Areas for the page in question and just renders/returns those which is kind of complicated and on my list of things to do, so I can't give you much more than that. But should be very doable and many more 1337 points.
Happy Hacking,
Mike
Hey Mike,
Thanks for your reply.
The first method you described, is pretty much the way I tried to achieve it. My c5 "Main" area is wrapped in a div ("main_content"), which itself is wrapped in another div ("main_content_container"). The double-wrapping is just necessary for the jScrollPane plugin to work.
Upon the click event on my button/div, i call $.load(page.php #main_content, function .... ).
In the "main_content" div of my page.php I have c5's main area markup (<? $a = new Area('Main2'); $a->display($c); ?>.
Loading this area works nicely, but editing it...not so much.
The second way you described is a little beyond me currently as I am not that far with php just yet ;)
Thanks
tricon
Thanks for your reply.
The first method you described, is pretty much the way I tried to achieve it. My c5 "Main" area is wrapped in a div ("main_content"), which itself is wrapped in another div ("main_content_container"). The double-wrapping is just necessary for the jScrollPane plugin to work.
Upon the click event on my button/div, i call $.load(page.php #main_content, function .... ).
In the "main_content" div of my page.php I have c5's main area markup (<? $a = new Area('Main2'); $a->display($c); ?>.
Loading this area works nicely, but editing it...not so much.
The second way you described is a little beyond me currently as I am not that far with php just yet ;)
Thanks
tricon
Hi I am looking at exactly the same preoblem.
Unless I do not understand anything (which is very well possible) I thing that neither of the proposed solutions could achieve what you are asking for. Imagine the following user interaction:
1. User goes to index.
2. User clicks "edit page".
3. User navigates to sobpage by clicking on menu.
4. User wants to edit the content of this subpage
BUT it is not editable, because subpage has not been swithced to editing mode yet. So unless you switch it to edit mode with AJAX (and probably reload the concrete5 strip at the top) you are out of luck. And this would be very cumbersome and possibly confusing for user as well.
Did you find a solution?
PS: I have even worse case - I want to use transition betwean pages and because I want to have it fast I nead to preload all subpages before user clicks the navigation links. Any idea for this? Until now it seems to me that I will have to fabricate editting form of pages without these ajax effects and in the read only mode somehow preload the content of subpages.
PS: I doubt that the plugin is a solution - it does loading in read only mode, but it might not provide the same effect while editting the pages.
Unless I do not understand anything (which is very well possible) I thing that neither of the proposed solutions could achieve what you are asking for. Imagine the following user interaction:
1. User goes to index.
2. User clicks "edit page".
3. User navigates to sobpage by clicking on menu.
4. User wants to edit the content of this subpage
BUT it is not editable, because subpage has not been swithced to editing mode yet. So unless you switch it to edit mode with AJAX (and probably reload the concrete5 strip at the top) you are out of luck. And this would be very cumbersome and possibly confusing for user as well.
Did you find a solution?
PS: I have even worse case - I want to use transition betwean pages and because I want to have it fast I nead to preload all subpages before user clicks the navigation links. Any idea for this? Until now it seems to me that I will have to fabricate editting form of pages without these ajax effects and in the read only mode somehow preload the content of subpages.
PS: I doubt that the plugin is a solution - it does loading in read only mode, but it might not provide the same effect while editting the pages.
Hello Jakubt,
I spend countless hours trying to achieve this, but I believe that concrete5, the way it loads pages and content, will not completely allow to load a page via ajax, and make this content editable.
I suppose it has to do with both absolute and relative paths, which are on one hand part of the sitemap, on the other hand injected with php. But I could just as well be talking complete jibberish there...
What I have found though, is the following method, which works with STATIC content.
http://www.mesuva.com.au/blog/technical-notes/adding-ajax-source-pa...
Utilizing this method, you can then create a new page_type for every subpage you want to create (a bit of a workaround, but it does function). Those subpages (each using their own page_type) are then editable if you navigate to them directly (I excluded them from the NAV). And calling $('somediv').load('your_sub_page #some_content_container') does indeed bring this page to your index.php site.
The tough nut that I am chewing on right now is that I am applyinghttp://www.concrete5.org/marketplace/addons/amiant-image-gallery/... to those subpages. That does not entirely work due to double-loading scripts or something. The content is being loaded, but the greybox/fancybox effects do not work. Digging into the code now to find out why.
Hope this helped you somehow - if you find something new, please let me know ;)
Cheers
I spend countless hours trying to achieve this, but I believe that concrete5, the way it loads pages and content, will not completely allow to load a page via ajax, and make this content editable.
I suppose it has to do with both absolute and relative paths, which are on one hand part of the sitemap, on the other hand injected with php. But I could just as well be talking complete jibberish there...
What I have found though, is the following method, which works with STATIC content.
http://www.mesuva.com.au/blog/technical-notes/adding-ajax-source-pa...
Utilizing this method, you can then create a new page_type for every subpage you want to create (a bit of a workaround, but it does function). Those subpages (each using their own page_type) are then editable if you navigate to them directly (I excluded them from the NAV). And calling $('somediv').load('your_sub_page #some_content_container') does indeed bring this page to your index.php site.
The tough nut that I am chewing on right now is that I am applyinghttp://www.concrete5.org/marketplace/addons/amiant-image-gallery/... to those subpages. That does not entirely work due to double-loading scripts or something. The content is being loaded, but the greybox/fancybox effects do not work. Digging into the code now to find out why.
Hope this helped you somehow - if you find something new, please let me know ;)
Cheers
I didn't see that part about Edit Mode. Yes this would be anywhere from fairly difficult to almost impossible as is.
If you want to start down that path there are javascript variables that set the page id etc at the top of the source, but I think this would be really hard.
If you want to start down that path there are javascript variables that set the page id etc at the top of the source, but I think this would be really hard.
Indeed, that is what I fear as well.
But I could personally live with that limit - there's other means of making a good design great.
What I would love to find out though, is why a subpage with an addon such as Amiant Image Gallery does not load properly if called by ajax.
I know that the addon's view.php includes a file named view.js.php, which is somehow tied to the whole Fancybox-Popup script. This view.js.php is normally executed when you navigate to the subpage itself, as the view.php includes it. But when the subpage is called via ajax, the view.php is ignored it seems, thus not integrating the necessary dynamic script generated by view.js.php.
Hard coding the content into the div does not work, as it's always deleted when calling a new page with $.load
So I am currently running against a wall here, since my php skills are also kinda low still...
But I could personally live with that limit - there's other means of making a good design great.
What I would love to find out though, is why a subpage with an addon such as Amiant Image Gallery does not load properly if called by ajax.
I know that the addon's view.php includes a file named view.js.php, which is somehow tied to the whole Fancybox-Popup script. This view.js.php is normally executed when you navigate to the subpage itself, as the view.php includes it. But when the subpage is called via ajax, the view.php is ignored it seems, thus not integrating the necessary dynamic script generated by view.js.php.
Hard coding the content into the div does not work, as it's always deleted when calling a new page with $.load
So I am currently running against a wall here, since my php skills are also kinda low still...
You are correct about the view.js not loading. It is also true that anything that block adds to the header and footer won't work either.
I actually didn't think that through enough I think.
I've been done this road a few times playing around and trying to get concrete5 to work with a single page javascript type site. I still haven't really gone all out on it, but there are a lot of potholes like the ones you've found.
I actually didn't think that through enough I think.
I've been done this road a few times playing around and trying to get concrete5 to work with a single page javascript type site. I still haven't really gone all out on it, but there are a lot of potholes like the ones you've found.
It is a relief to know that I am not completely stuck on my own with this design idea, but there's other people out there which try to find ways of making this work.
Thanks for all your replies in any case, mkly.
I won't give up just yet, still have some ideas to fiddle with.
Should I find some method to make this work, I am going to post it here asap.
Thanks for all your replies in any case, mkly.
I won't give up just yet, still have some ideas to fiddle with.
Should I find some method to make this work, I am going to post it here asap.
I suspect it is the $().ready() handler not firing after a script is loaded by ajax. There is an example of this (deliberately not) happening in my ajax lessons block.
That looks like a great source of info and learning how to use ajax in C5 - soon as I'm done experimenting with my current idea, I'm going to get your addon immediately. Thanks a lot for providing this goodie!
I have an update on this topic...
Currently the design seems to be working, but with a few minor issues, which I am sure an experienced php developer can iron out.
The setup as it is now:
I created 3 sub pages with the method linked above - assigning a different page type to every sub page and each of the sub pages including one and the same header_min.php and footer_min.php which contain nothing more than this:
header_min.php:
footer_min.php:
subpage (gallery-1.php):
Setting the pages up this way and calling it with
$('#somediv').load('gallery-1');
is working. The little details here are as follows:
I) The user is unable to view the sub page if navigating directly to it, since the various header elements are not loaded unless logged in -> this is not necessarily a tragedy.
II) If the user is not logged in, loading the pages with ajax and viewing them - including the fancybox popup script - is working. But as soon as the user logs in, the popup function is broken - bringing the error "t is not defined" coming from concrete's jquery.js file as it seems. -> this could most likely be, due to double loaded fancybox scripts when the user logs in. -> again, not a tragedy imo.
A currently working example of all this is set up on this page:
asimore.tricon-design.com
I hope this is some help and sheds some light onto all of this.
Currently the design seems to be working, but with a few minor issues, which I am sure an experienced php developer can iron out.
The setup as it is now:
I created 3 sub pages with the method linked above - assigning a different page type to every sub page and each of the sub pages including one and the same header_min.php and footer_min.php which contain nothing more than this:
header_min.php:
<?php defined('C5_EXECUTE') or die("Access Denied."); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <?php global $u; if ($u->isLoggedIn ()) { Loader::element('header_required'); } ?> </head> <body> <div id="content-container">
footer_min.php:
subpage (gallery-1.php):
Setting the pages up this way and calling it with
$('#somediv').load('gallery-1');
is working. The little details here are as follows:
I) The user is unable to view the sub page if navigating directly to it, since the various header elements are not loaded unless logged in -> this is not necessarily a tragedy.
II) If the user is not logged in, loading the pages with ajax and viewing them - including the fancybox popup script - is working. But as soon as the user logs in, the popup function is broken - bringing the error "t is not defined" coming from concrete's jquery.js file as it seems. -> this could most likely be, due to double loaded fancybox scripts when the user logs in. -> again, not a tragedy imo.
A currently working example of all this is set up on this page:
asimore.tricon-design.com
I hope this is some help and sheds some light onto all of this.
