OBEC POCTE
NEVSEREMOS'!

User Rating: 2 / 5

Star activeStar activeStar inactiveStar inactiveStar inactive
 
Warning! The article is not actual since system plugin AjaxModuleLoader is available. It's not unpublished for learning purposes.

Give me your blood!Task: Load some modules after full page loaded only. Have possibility to periodically reload a module (i.e. a sport matсh scores).

Be able to use either Mootools or jQuery.

Explanation: A web-site has too many modules what causes it to load slow. It would be preferable to load some secondary modules after main content structure  is loaded.

Limitation: Will not work for some moules which use much JS themselves. At least for mod_jreviews_listings.

Example. One time load.

Example. Reloads periodically. Time interval is set to 60 seconds.

Solution.

  • Generate an ajax loader image at http://ajaxload.info/ and plase it at your web-site to have it here:  /images/ajax-loader.gif
  • Place a file templates/YOURTEMPLATE/mymodule.php with content:
  • Place the following code in the place you want the module(s) to be loaded

    where attribute rel contains module position to be loaded and attribute alt contains module chrome. What module chrome is read here: http://docs.joomla.org/What_is_module_chrome%3F
  • Place the following code in the place you want the module(s) to be loaded. This may be an article, an HTML module, or it may be hard coded to Joomla template:
    • For one time load:
    • For periodail reload with default interval 5 seconds:
    • For periodail reload with custom interval ( here 10 seconds):
      • Where attribute rel contains module position to be loaded and attribute alt contains module chrome. What module chrome is read here: http://docs.joomla.org/What_is_module_chrome%3F. The attribute alt is not required.
      • Class name periodical tell the script to reload the module(s) periodically.
      • The attribute id sets the interval of reload in miliseconds (1000 ms = 1 sec)
  • Add to your template index.php this code:
  • If you use jQuery instead or together with Mootools, then change line $usejQuery = false; to $usejQuery = true; in the code above.

Explanation.

We need to have a link to load some module position without any non-module HTML. The resulting page must be a raw module output, no tags like  ,. Only the module(s) HTML code. Joomla gives us an opportunity to use own templates for such purposes. I got the info from ooffick at http://forum.joomla.org/viewtopic.php?p=1436858#p1436858.

So, firtsly we must create a file named mymodule.php in our template folder: templates/YOURTEMPLATE/mymodule.php . We can call the file by following link http://your-domain.com/index.php?tmpl=mymodule, or in this web-site case http://gruz.org.ua/index.php?tmpl=mymodule.

The file contents must be as follows. 

templates/YOURTEMPLATE/mymodule.php:

It's obivous from the code above, that we can pass 2 more parameters via a URL: moduleposition (the position with the modules to be loaded) and modulestyle (module chrome).

So following by the link http://gruz.org.ua/index.php?tmpl=mymodule we can see modules from the default user1 position. Module chrome is also default,  xhtml. The page code is like this:

As we can see, it's not a full page, but a raw output. If follow to http://gruz.org.ua/index.php?tmpl=mymodule&moduleposition=top&modulestyle=, we can see modules from top position without any chrome to minimize HTML code output. More about module chrome: http://docs.joomla.org/What_is_module_chrome%3F

Such a link we must have to load modules using Ajax without redundant code.

Now we have to prepare the place for out module. So we will use a spinner image generated at  http://ajaxload.info/ and placed to /images/ajax-loader.gif at our web-site. Here it is:

Next place the code in the place where you want to load modules using Ajax:

As we can see, rel contains the module position and alt - module chrome. I used this attributes just for convinience.

And finally the AJAX part. The following code must be placed into the Joomla template after

defined( '_JEXEC' ) or die( 'Restricted access' );

The code is:

Comments   

ataman
+3 # ataman 2011-10-26 15:10
It's good to load the module with ajax, but can we continue to reload this module, using ajax for example every 5 min ?
gruz
+1 # gruz 2011-10-26 23:37
I've updated the article. Check it now.
ataman
+2 # ataman 2011-10-27 19:17
Thank you for the fasr answear
Ben
0 # Ben 2011-12-07 03:26
Thank you so much for this.

Question: How can I add an increment tot the url so that the url becomes:
index.php?tmpl....&queryid=1
index.php?tmpl....&queryid=2
etc... with every reload?

My problem is that my module is being reloaded fine in FF, Chrome and Safari, however in IE, the module is reloaded 3 times and then the same information is shown on every reload. I thought it had to do with browser cache which is why I thought that adding incremental queryids to the url would prevent caching....

Please check: bit.ly/t3V2O8
The module being reloaded is the Bird Spotlight in the sidebar.

Any ideas?
gruz
0 # gruz 2011-12-12 15:05
Updated the artcile. Not code generates an uniqie URL to avoid caching.
Mike Spy
0 # Mike Spy 2011-12-07 10:16
Hello!

Could you please tell me what do I need to change, if I am using only jQuery? Not Mootools...
gruz
0 # gruz 2011-12-12 15:04
Updated the artcile. Not it includes the jQuery compatible code. But this doesn't help with some modules using much JS, as in your case mod_jreviews_listings
PePe
+1 # PePe 2011-12-26 20:57
I wanna say you a fuc*in' great thank! This article saved me from hours of work!
Сергей Вячеславович
0 # Сергей Вячеславович 2012-01-15 20:11
:lol: Ну ты красавчик, я это искал целый месяц... Модуль вставленный таким образом насколько я понимаю не отображается в листинге кода??? А это уже хороший повод для SEO экспериментов
gruz
0 # gruz 2012-01-15 20:28
Quoting Сергей Вячеславович:
:lol: Ну ты красавчик, я это искал целый месяц... Модуль вставленный таким образом насколько я понимаю не отображается в листинге кода??? А это уже хороший повод для SEO экспериментов


Ну вот попробуешь и расскажешь.
magid
+1 # magid 2012-04-11 18:55
hi its not work with e7?
what im do to chenge program?
gruz
0 # gruz 2012-04-11 19:02
Quoting magid:
hi its not work with e7?
what im do to chenge program?


Have you tried viewing this page in IE7? Does it work there?
majid
0 # majid 2012-04-16 09:35
hi its work only in the front page ie7 and ie8
its not work in link page
in frontpage
gamepars.com/index.php/fa/
in link
show like
gamepars.com/.../...

help me i want to dev joomla
gruz
+1 # gruz 2012-04-16 14:45
Hi.
I'm confused about what you want and what is needed.
To avoid ?????? you should save the files in UTF-8. It seem's it's because you use somewhere Arabic encoding.
Add me to google talk, please, I have additional questions to debug the problem.
majid
0 # majid 2012-04-16 17:27
for view this problem go to this address with ie7 or ie8
gamepars.com/index.php/fa/
click شاهزاده ایرانی...
loading
you show Change page address to
change address to gamepars.com/.../...

i think your code not work in ie7 and ie8 to new page

your code very good!!! :eek: :eek:

i try for new modal ajax but i want help
you
gruz
0 # gruz 2012-04-16 18:51
Try this line in the code
Code:url = '?tmpl=mymodule&moduleposition='+modulepos+'&modulestyle='+modulestyle;
replace with this line:
Code:url = 'http://gamepars.com/index.php?tmpl=mymodule&moduleposition='+modulepos+'&modulestyle='+modulestyle;

If this doesn't work, then please provide me superadmin access so I can make experiments at yout site.
Guest
0 # Guest 2013-01-02 05:54
Hi

Thanks for this great help, I have implemented this to my site, it's working locally but problem when i upload to live site. Can you check my site once please?

Thanks
Jamal uddin
gruz
0 # gruz 2013-01-02 07:40
JQuery is loaded after the code from the article. This causes the error:

view.xscreenshot.com/.../


Try using mootools or adding JQuery in the AJAX loading module script.


extensions.joomla.org/.../jquery-scripts

www.designvsdevelop.com/.../
Guest
+1 # Guest 2013-01-02 09:26
Lot's of thanks :)
Guest
0 # Guest 2013-01-12 15:49
Hello
I have 2 questions

you said
"The following code must be placed into the Joomla template after"

Where? index.php default.php or anywhere else?

and second one

where can i put this ?
""
My template is Joomlike check it and u ll understand what i mean...

Thanks
gruz
0 # gruz 2013-01-12 16:02
As far as I can see from a very quick look:

The following code must be placed into the Joomla template after ... in this file:
/templates/joomlike/index.php.

The module DIVs should be placed in
/templates/joomlike/layout/default.php
Guest
0 # Guest 2013-01-12 16:16
ok i place in index the cycle works every 5 sec as i asked but the module not refreshing any idea?
gruz
0 # gruz 2013-01-12 16:20
I have dozens of ideas why this can happen.

You either have done something wrong, or the template needs some special behavior.
Guest
0 # Guest 2013-01-12 16:26
hmmmm i done it BUT the original module is steel there is this normal?
gruz
0 # gruz 2013-01-12 16:29
There means where? If you need a particular answer you must provide as many details as possible.
Guest
0 # Guest 2013-01-12 16:34
yeah you are right sorry

the module is in "right-top" position
plz check it goo.gl/7aQJw and u ll unterstand more than me for sure :P
gruz
+1 # gruz 2013-01-12 16:57
I think the module is published to right-top, but it's present 2 times. Use some other position name for the module, i.e. right-top-delayed and publish module to this position. Change the rell attribute in the appropriate place in the file you have added to the template, named in the tutorail templates/YOURTEMPLATE/mymodule.php
Guest
0 # Guest 2013-01-12 17:33
disappear both of them :-?
Guest
0 # Guest 2013-01-12 18:06
anyway m8 it work in right-1 pos. i ll try it again !

Thanks alot for your support and fast answers !!! have a nice day !
Guest
0 # Guest 2013-01-12 18:32
i have done it m8 !! it works great !!!

Thanks alot for all!!!
Guest
0 # Guest 2013-01-28 09:11
Hi, i am a bit puzzled sorry for stupid questions, could you explain the order of actions i need to take to have what is being ajax-ed editable in joomla? I am using 3.0. What do i do to ajax an article dynamically? Thanks you!
gruz
0 # gruz 2013-01-30 14:25
I didn't implement it for something except showing modules. Sorry, I have nothing to advise.
Roger Smets
0 # Roger Smets 2013-07-22 07:11
Can you explain where the option "start" comes from and what is its purpose in the request.HTML, In the mootools documentation I can't find a "start" option
gruz
0 # gruz 2013-07-22 13:38
It's either deprecated, or has been a mistake from the very beginning. Try removing the line and let me know how it goes (-:
Roger Smets
0 # Roger Smets 2013-07-22 15:51
Quoting gruz:
It's either deprecated, or has been a mistake from the very beginning. Try removing the line and let me know how it goes (-:


Maybe its deprecated but I couldn't find anything on the net for that matter. The fact is that the code works but I hate to use code that I do not understand. Removing the line breaks the code but strangely enough replacing "start" with anything else ('test' for example) is ok (?).
I read the mootools documentation and changed the line with "start" as follows
onRequest: function() {element.set('html','');},
which works and is understandable to me anyway.
May I point out that your plugin AjaxModuleLoader also contains the option "start"
Roger Smets
0 # Roger Smets 2013-07-22 15:58
Well it seems I can't render the HTML but its just an image tag
gruz
0 # gruz 2013-07-22 16:04
I change the plugin code to this: Code:onRequest: function() {element.set('html','<img src="plugins/system/ajaxmoduleloader/images/ajax-loader.gif" >');}

Seems to work.
gruz
0 # gruz 2013-07-22 16:12
Check the latest plugin version
gruz.org.ua/.../1_0_8.html
Roger Smets
+1 # Roger Smets 2013-07-22 16:25
Quoting gruz:
Check the latest plugin version
gruz.org.ua/.../1_0_8.html


I took a look at the code and saw the changes. The "start" option is apparently something from an older mootools version, hence the code for Joomla 1.5.
I'm glad we cleared this out

You have no rights to post comments

FaLang translation system by Faboba
Orphus System

Comments

  • AutoReadMore

    Joseph Joseph 26.02.2014 17:58
    Hi... Can you allow to truncate the title as well? Regards, Joseph

    Read more...

     
  • NotifyArticleSubmit

    Mich Mich 20.02.2014 10:45
    I forgot, my Joomla is 2.5.18

    Read more...

     
  • NotifyArticleSubmit

    Mich Mich 20.02.2014 10:44
    I use your plugin for many months. Now I get an error when I edit an article in backend Before I have ...

    Read more...

     
  • NotifyArticleSubmit

    Richardkl Richardkl 16.02.2014 20:14
    This is a great plugin , you really gave it alot of thought of "What would I want" one of the best ...

    Read more...

     
  • NotifyArticleSubmit

    Jose Jose 14.02.2014 09:58
    The plugin NotifyArticleSubmit cannot been installed in Joomla 2.5.17 as a blank page appears and ...

    Read more...