Forums / Developer / Auto refresh a pagelayout.tpl using ajax and javascript

Auto refresh a pagelayout.tpl using ajax and javascript

Author Message

Romeo Antony

Friday 11 June 2010 10:36:18 pm

Hi , anyone who have idea about to refresh a pagelayout.tpl file using ajax and javascript.

Thanks in advance Romeo

Gaetano Giunta

Saturday 12 June 2010 3:03:17 am

To reload the current web page, no need for ajax stuff - google for "window.location reload" or similar keywords. You'll find a simple javascript method that reloads the current page.

If you want to reload the 'pagelayout' but not the content view (ie. the current node), I think you should instead use some ajax calls that load specific bits of information and fill it in the pagelayout, without refreshing it. The code on the server called via ajax could be developed using the ezjscore extension - take a look at how eg. the ezstarrating extension does add an ajax voting function - or maybe even via some custom xml/json templates and an 'xml' view mode of some specific nodes (see extension ggxmlview as an example)

Principal Consultant International Business
Member of the Community Project Board

André R.

Saturday 12 June 2010 5:32:05 am

As Gaetano I'm a bit unsure what you want, if you want to reload only parts of the page using ajax, that would be a bit big topic to describe in a form replay. Maybe something for an Article. But Gaetano mentions what you need to do, you'll need some server side code to send data or html fragments back to client to replace or append to pagelayout (in this example: lets say "web page" instead, since this ajax concept is industry wise and doesn't have anything to do specific with pagelayouts in eZ Publish other then that being the place you define the web page layout of an eZ Publish site). This can be done as said above using ezjscore template/php calls or simple ajax related custom layouts as defined in layout.ini and used by adding "layout/set/<layout_name>" to the root of your ajax urls.

Other alternative is that you want to refresh the whole page at some interval, javascript is possible, but meta redirect tag in <head> of your html is even easier:

<meta http-equiv='Refresh' content='120; url={$myCurrerntUrlVariableOrRedirectUrl}' />

eZ Online Editor 5: http://projects.ez.no/ezoe || eZJSCore (Ajax): http://projects.ez.no/ezjscore || eZ Publish EE http://ez.no/eZPublish/eZ-Publish-Enterprise-Subscription
@: http://twitter.com/andrerom

Romeo Antony

Saturday 12 June 2010 7:11:50 am

Andre, Gaetano ,

thank you for your reply.Iam thinking to go ahead withGaetano's 2nd statement .You you may give me some better advise if i explain the scenario.

I am developing website in ezflow extension and created dynamic blocks and applied overflow in dynamic blocks .When run the cronejob , overflow of contents in dynamic blocks working.But I cannot see the overflow of contentents without refreshing the webpage.That means contents in dynamic block is not changing till I click on F5(refresh).That is why I am looking for ajax javascript.

Also I choose to apply ajax since page refresh should be run in the background so that site vitors do not see the webpage refresh(refresh will be under background and hidden).Do I need to relay only this or go for extension ezjscore as you Andre, Gaetano suggested. kindly give me some suggestion or advise to go forward.i am looking for it.

Thanks in advance Romeo...

Gaetano Giunta

Saturday 12 June 2010 7:30:32 am

I think for the scenario you describe using a javascript full-page reload, or as Andre suggested meta-tag refresh is by far the simplest solution.

There are of course drawbacks, the main one being that when the full page refreshes, it will take some time, and the user will see it.

Otoh the way the eZ Publish caching system, templating system and ezflow work will not help you to easily transform an existing ezflow page with rotations and overflows applied into a page where you can request the contents single blocks via ajax calls.

You should be able to do that by:

- using the layout/set view to set up a different pagelayout for those pages requested via ajax that will produce only the html chunks corresponding to block

- use override rules and create specific templates used to render for those html chunks; attach eg. those templates to some dummy objects

- inside those templates, use the node_view_gui function to display the blocks that are actually in the homepage

The problem with this setup is that to make it work you will need to disable view caching for the templates generating the html chunks, and every time the ajax calls refresh in your users homepage you will be generating many many sql requests in the database...

Principal Consultant International Business
Member of the Community Project Board

Romeo Antony

Saturday 12 June 2010 7:56:25 am

Gaetano , I think the second way you suggested is too complicated and make an extra effort. So prefer to go with first thing that you explained although it slower the site.I wouldn't like to apply the ajax for indvidual dynamic blcoks .I will just apply ajax to the mainpagelayout template.

for that i have a code here .but I only need to get a single idea.

I will just show you the code. I will put below code in pagelayout.tpl for webpage refresh. Main idea that I needed is in bold letters

  1. // JavaScript Document
  2. var xmlHttp_moniter
  3. function moniter()
  4. {
  5. xmlHttp_moniter = GetXmlHttpObject_parcel()
  6. if(xmlHttp_moniter == null)
  7. {
  8. alert("browser does not support HTTP Request")
  9. return
  10. }
  11. var url="I need to put the pagelayout.tpl path here Isince I am applying this ajax into pagelayout.tpl"
  12. xmlHttp_moniter.onreadystatechange = stateChanged
  13. xmlHttp_moniter.open("GET",url,true)
  14. xmlHttp_moniter.send(null)
  15. }
  16. function stateChanged()
  17. {
  18. if(xmlHttp_moniter.readyState==4 || xmlHttp_moniter.readyState == "complete")
  19. {
  20. document.getElementById("moniter").innerHTML = xmlHttp_moniter.responseText
  21. setTimeout('moniter()',100);
  22. }
  23. }
  24. function GetXmlHttpObject_parcel()
  25. {
  26. var xmlHttp_moniter=null;
  27. try
  28. {
  29. xmlHttp_moniter=new XMLHttpRequest();
  30. }
  31. catch (e)
  32. {
  33. //Internet Explorer
  34. try
  35. {
  36. xmlHttp_moniter=new ActiveXObject("Msxml2.XMLHTTP");
  37. }
  38. catch (e)
  39. {
  40. xmlHttp_moniter=new ActiveXObject("Microsoft.XMLHTTP");
  41. }
  42. }
  43. return xmlHttp_moniter;
  44. }

So I can refresh pagelayout.tpl.I think you can help me. thanks in advance

Romeo Antony

Sunday 13 June 2010 7:04:17 am

Gaetano I hav got the point to put the tpl file extension in hotaccess_root file, to get the path of pagelayout.tpl to put in javascript then put the direct uri like : "http://domain/design/site/template/pagelayout.tpl" OR {concat('http://', ezsys('hostname'), 'pagelayout.tpl'|ezdesign)} in javascript for path of pagelayout So I can refresh the pagelayout.tpl using ajax. Can you help me where do I put the .tpl extension in hotaccess_root file.

H-Works Agency

Thursday 17 June 2010 5:26:44 am

Hello,

Very simple to allow .tpl requests in your .htaccess.

Identify in you .htaccess the lines listing filetypes and add "tpl" to it like here :

"

<FilesMatch "(index\.php|\.(tpl|mp3|ico|xml|swf|flv|gif|jpe?g?|png|css|js|html)|var(.+)storage.pdf(.+)\.pdf)$">

RewriteRule !(\.(tpl|mp3|ico|xml|swf|flv|gif|jpe?g?|png|css|js|html?)|var(.+)storage.pdf(.+)\.pdf)$ index.php

"

Cheers

EZP is Great

Romeo Antony

Thursday 17 June 2010 1:19:44 pm

Thank you Martin. EZP great

eZ debug

Timing: Jan 18 2025 15:13:02
Script start
Timing: Jan 18 2025 15:13:02
Module start 'content'
Timing: Jan 18 2025 15:13:02
Module end 'content'
Timing: Jan 18 2025 15:13:02
Script end

Main resources:

Total runtime0.1331 sec
Peak memory usage2,048.0000 KB
Database Queries141

Timing points:

CheckpointStart (sec)Duration (sec)Memory at start (KB)Memory used (KB)
Script start 0.00000.0057 587.9531180.8125
Module start 'content' 0.00570.0054 768.7656110.6797
Module end 'content' 0.01100.1220 879.4453537.8125
Script end 0.1330  1,417.2578 

Time accumulators:

 Accumulator Duration (sec) Duration (%) Count Average (sec)
Ini load
Load cache0.00322.4240200.0002
Check MTime0.00130.9479200.0001
Mysql Total
Database connection0.00060.419210.0006
Mysqli_queries0.088866.70701410.0006
Looping result0.00685.12801390.0000
Template Total0.121791.410.1217
Template load0.00070.512310.0007
Template processing0.121190.926010.1211
Override
Cache load0.00050.351510.0005
Sytem overhead
Fetch class attribute can translate value0.00080.621010.0008
XML
Image XML parsing0.00020.164610.0002
General
dbfile0.00272.0248200.0001
String conversion0.00000.002330.0000
Note: percentages do not add up to 100% because some accumulators overlap

CSS/JS files loaded with "ezjscPacker" during request:

CacheTypePacklevelSourceFiles
CSS0extension/community/design/community/stylesheets/ext/jquery.autocomplete.css
extension/community_design/design/suncana/stylesheets/scrollbars.css
extension/community_design/design/suncana/stylesheets/tabs.css
extension/community_design/design/suncana/stylesheets/roadmap.css
extension/community_design/design/suncana/stylesheets/content.css
extension/community_design/design/suncana/stylesheets/star-rating.css
extension/community_design/design/suncana/stylesheets/syntax_and_custom_tags.css
extension/community_design/design/suncana/stylesheets/buttons.css
extension/community_design/design/suncana/stylesheets/tweetbox.css
extension/community_design/design/suncana/stylesheets/jquery.fancybox-1.3.4.css
extension/bcsmoothgallery/design/standard/stylesheets/magnific-popup.css
extension/sevenx/design/simple/stylesheets/star_rating.css
extension/sevenx/design/simple/stylesheets/libs/fontawesome/css/all.min.css
extension/sevenx/design/simple/stylesheets/main.v02.css
extension/sevenx/design/simple/stylesheets/main.v02.res.css
JS0extension/ezjscore/design/standard/lib/yui/3.17.2/build/yui/yui-min.js
extension/ezjscore/design/standard/javascript/jquery-3.7.0.min.js
extension/community_design/design/suncana/javascript/jquery.ui.core.min.js
extension/community_design/design/suncana/javascript/jquery.ui.widget.min.js
extension/community_design/design/suncana/javascript/jquery.easing.1.3.js
extension/community_design/design/suncana/javascript/jquery.ui.tabs.js
extension/community_design/design/suncana/javascript/jquery.hoverIntent.min.js
extension/community_design/design/suncana/javascript/jquery.popmenu.js
extension/community_design/design/suncana/javascript/jScrollPane.js
extension/community_design/design/suncana/javascript/jquery.mousewheel.js
extension/community_design/design/suncana/javascript/jquery.cycle.all.js
extension/sevenx/design/simple/javascript/jquery.scrollTo.js
extension/community_design/design/suncana/javascript/jquery.cookie.js
extension/community_design/design/suncana/javascript/ezstarrating_jquery.js
extension/community_design/design/suncana/javascript/jquery.initboxes.js
extension/community_design/design/suncana/javascript/app.js
extension/community_design/design/suncana/javascript/twitterwidget.js
extension/community_design/design/suncana/javascript/community.js
extension/community_design/design/suncana/javascript/roadmap.js
extension/community_design/design/suncana/javascript/ez.js
extension/community_design/design/suncana/javascript/ezshareevents.js
extension/sevenx/design/simple/javascript/main.js

Templates used to render the page:

UsageRequested templateTemplateTemplate loadedEditOverride
1pagelayout.tpl<No override>extension/sevenx/design/simple/templates/pagelayout.tplEdit templateOverride template
 Number of times templates used: 1
 Number of unique templates used: 1

Time used to render debug report: 0.0001 secs