FullAjax library allows you to update more than one container through the implementation of it with two models of request – one request for one block and one request for multiple blocks. In the plugin Add FullAjax (2011.01.10) this feature is used to update the “Breadcrumbs” module. Of course instead of the “Breadcrumbs” module you can use any other, but only one – this is due to the fact that now I have not thought how to automate the setup process to upgrade several modules. Below a little instruction how to configure the update several modules through Ajax.

The theory. How to it work in FullAjax.

Suppose that we have three blocks, we need to update them simultaneously using Ajax.

1
2
3
<div id="menu">Here HTML code of the menu</div>
<div id="content">Here HTML code of the content</div>
<div id="baner_img">Here HTML code of the image</div>

First need say for FullAjax which the blocks need to update. For this we create model in to FullAjax configuration:

1
2
3
4
5
6
7
8
9
/* basic configuration */
SRAX.Filter.add({url:'/', id:'content'});
SRAX.directLink();
/* model */
SRAX.Model2Blocks['content'] = {
   'menu':'menu',
   'content':'content',
   'baner_img':'baner_img'
}

To make it work requires that the content that will give us the server was looks like follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- :ax:menu:begin: //-->
HTML code of the menu
<!-- :ax:menu:end: //-->
 
Everything between these blocks will be ignored.
 
<!-- :ax:content:begin: //-->
HTML code of the content
<!-- :ax:content:end: //-->
 
<!-- :ax:baner_img:begin: //-->
HTML code of the baner image
<!-- :ax:baner_img:end: //-->

So now we can update a few blocks at a time.

Practice. How to update more than one module with plugin Add FullAjax.

Little Step by Step Instructions :)

1. First need install “fullajax_tmpl” if not installed;

2. Then need set “update modules” to “manually” in plugin configuration;

3. Look positions where is shown modules (look in Module Manager)(Example: position-3, position-1, and user3.);

4. Find this positions in index.php of the template and add unique ID for each.
Example:

1
2
3
4
5
6
7
8
9
10
11
<div id="id-for-pos-three">
	<jdoc:include type="modules" name="position-3" />
</div>
	...
<div id="id-for-pos-user">
	<jdoc:include type="modules" name="user3" />
</div>
	...
<div id="id-for-pos-one">
	<jdoc:include type="modules" name="position-1" />
</div>

5. Add in to field “Js code, parameters for FullAjax”(advanced configuration) code for model:

1
2
3
4
5
6
7
/* model */
SRAX.Model2Blocks['forajax'] = {
   'id-for-pos-one':'id-for-pos-one',
   'id-for-pos-user':'id-for-pos-user',
   'id-for-pos-three':'id-for-pos-three',
   'forajax':'forajax'
}

forajax – it content ID.

6. Now need edit /templates/fullajax_tmpl/index.php . There need to add missing modules like next:

1
2
3
4
5
6
7
8
9
10
11
<!-- :ax:id-for-pos-three:begin: //-->
	<jdoc:include type="modules" name="position-3" />
<!-- :ax:id-for-pos-three:end: //-->
 
<!-- :ax:id-for-pos-user:begin: //-->
	<jdoc:include type="modules" name="user3" />
<!-- :ax:id-for-pos-user:end: //-->
 
<!-- :ax:id-for-pos-one:begin: //-->
	<jdoc:include type="modules" name="position-1" />
<!-- :ax:id-for-pos-one:end: //-->

7. That’s all :)

57 Comments to “ How to update more than one module with Ajax ”

  1. JCC says:

    Hi, im using your plugin in manually mode (with the template) and works great but if i set a module and the module title is visible, if i navigate with my menu and back the titles of the modules are lost, how can i fix it?

    108.161.130.99/~insomnia

    ty

    • Fedik says:

      think because fullajax_tmpl have no modChrome style that used in the main template … try copy file /html/module.php from the main template to fullajax_tmpl

      • JCC says:

        Hi yeah if i copy /html/modules.php to fullajax_tmpl and set this module:

        My fullajax_tmpl:

        <section id="gkTop1" class="gkCols3API->modules(‘top1′) > 1) : ?> gkNoMargin”>

        <jdoc:include type="modules" name="top1" style="module_styles[‘top1′]; ?>” modnum=”API->modules(‘top1′); ?>” modcol=”3″ />

        The title no lose but if i navegate to another page my site isnt refreshed, the same content on every page,

        This is my JavaScript code, parameters for FullAjax:

        FLAX.Filter.add({url:’/’, id:fullAjaxId});
        FLAX.Filter.add({query:[‘task=weblink’,’task=profile’,’task=user.login’,’task=user.logout’,’task=article.edit’], type:’nowrap’});
        FLAX.Filter.on(‘beforewrap’, function(o) {
        var id = o.el.getAttribute(‘id’), regExt = /.+\.(jpg|jpeg|gif|png|mp3|mp4|ogg|ogv|webm|pdf|txt|odf|ods)$/i;
        if(id == (‘login-form’) || id == (‘form-login’) || (o.el.href && (regExt.test(o.el.href) || o.el.href.indexOf(‘#’) !=-1))){return false;}
        });
        FLAX.directLink();FLAX.Default.sprt_url = ‘!';
        FLAX.linkEqual[‘!ax!’+fullAjaxId+’!’] = ‘ajx';FLAX.linkEqual[‘[~q~]’] = ‘?';
        /* fix for mootools ‘domready’, uncomment if need */
        /* FLAX.Html.onall(‘load’, function(o){window.fireEvent(‘domready’);}); */

        /* model */
        SRAX.Model2Blocks[‘gkPageContent’] = {
        ‘gkTop1′:’gkTop1′,
        ‘gkTop2′:’gkTop2′,
        ‘gkMainbody':’gkMainbody’,
        ‘gkPageContent':’gkPageContent’
        }

        Im using gavick.com templates, but i think it should work fine.

        ty

      • Fedik says:

        hm, think it because you have doublet id`s after put “< section id=”gkTop1″ ” in to fullajax_tmpl

    • Kiss Ladislas says:

      Hi, in my page doesn’t work correctly Full Ajax for Joomla. Doesn’t refresh these positions: 2,12,22,18,19
      Could You help me?

      Here is my template index.php file:
      baseurl . ‘/templates/’ . $document->template;

      Artx::load(“Artx_Page”);

      // Initialize $view:
      $view = $this->artx = new ArtxPage($this);

      // Decorate component with style:
      $view->componentWrapper();

      JHtml::_(‘behavior.framework’, true);

      ?>

      <html dir="ltr" lang="language; ?>”>

      <link rel="stylesheet" href="baseurl; ?>/templates/system/css/system.css” />
      <link rel="stylesheet" href="baseurl; ?>/templates/system/css/general.css” />


      <link rel="stylesheet" href="/css/template.css” media=”screen”>

      <link rel="stylesheet" href="/css/template.responsive.css” media=”all”>

      if (‘undefined’ != typeof jQuery) document._artxJQueryBackup = jQuery;
      <script src="/jquery.js”>
      jQuery.noConflict();

      <script src="/script.js”>
      includeInlineScripts() ?>
      if (document._artxJQueryBackup) jQuery = document._artxJQueryBackup;
      <script src="/script.responsive.js”>

      positions(array(‘position-30′ => 45, ‘position-26′ => 55, ), ‘nostyle’); ?>

      positions(array(‘position-9′ => 35, ‘position-10′ => 30, ‘position-11′ => 35), ‘nostyle’); ?>
      containsModules(‘position-1′, ‘position-28′, ‘position-29′)) : ?>

      containsModules(‘position-28′)) : ?>
      position(‘position-28′); ?>

      containsModules(‘position-29′)) : ?>
      position(‘position-29′); ?>

      position(‘position-1′); ?>

      position(‘position-15′, ‘nostyle’); ?>
      positions(array(‘position-16′ => 33, ‘position-17′ => 33, ‘position-18′ => 34), ‘block’); ?>

      position(‘position-19′, ‘nostyle’);
      if ($view->containsModules(‘position-2′))
      echo artxPost($view->position(‘position-2′));
      echo $view->positions(array(‘position-20′ => 50, ‘position-21′ => 50), ‘article’);
      echo $view->position(‘position-12′, ‘nostyle’);
      echo artxPost(array(‘content’ => ”, ‘classes’ => ‘ messages’));
      echo ”;
      echo $view->position(‘position-22′, ‘nostyle’);

      ?>

      position(‘position-1′); ?>
      containsModules(‘position-24′)) : ?>

      positions(array(‘position-23′ => 25, ‘position-24′ => 50, ‘position-25′ => 25), ‘nostyle’); ?>

       

      position(‘debug’); ?>

  2. Talha says:

    I have implemented in on just SHOP section. its working fine. Issue is when that when I am on SHOPs page and click on LOGO to goto home page. Even for this it uses AJAX. i dont want this.

    same if you click the HOME link from BOTTOM menu. Then its properly refreshing which is fine

    Need help

  3. hamid says:

    Hello.

    I can’t done step2…

    set “update modules” to “manually”!?

    Need help.
    thanks…

    • Fedik says:

      now this options have a name “Positions update method” => “Yes, manually, using ‘fullajax_tmpl'”

      • 1style.ir says:

        Thanks for your responce.

        But i do not find it yet.
        I think that is not supported in joomla 2.5…
        is that correct?

        how to fix it?

      • Fedik says:

        it available for j2.5 and for j3.x
        it in the AddFullAJAX plugin configuration

  4. Роман says:

    Trying to configure this pluging on joomla 2.5 Got a problem with template conditions:
    1 If we have left or right column positions, we load #content
    2 If there are no left or right column positions, we load #content-full
    Is it possible to work around this structure?

  5. m says:

    Hello,
    i have problem to get it to work with 2 languages,
    (Menues doesnt get updated)
    the only possiblity to enable differnt template
    (some postion doesnt get updated always,only sometimes after hitting 4x f5..
    is Fullajax plugin generally working with standard joomla multilanguage?

Leave a Reply to Talha Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>