Бібліотека FullAjax дозволяє оновлювати більше як один контейнер, завдяки реалізації в ній двох моделей запиту – один запит для одного блоку, та один – для декількох блоків. В плаґіні Add FullAjax (2011.01.10) ця можливість використовується для оновлення модуля “хлібних крихт”. Звичайно замість цього модуля можна підставити будь який інший, але лише один – це пов’язано з тим, що я ще не придумав як автоматизувати процес налаштування для оновлення декількох модулів/позицій.
Нижче маленька інструкція як налаштувати оновлення декількох модулів через Ajax.

Теорія, як це реалізовано в FullAjax.

Припустимо, що в нас є три блоки, які потрібно одночасно оновлювати з допомогою Ajax.

1
2
3
<div id="menu">Тут HTML код меню</div>
<div id="content">Тут HTML код вмісту</div>
<div id="baner_img">Тут HTML код картинки</div>

Для початку потрібно вказати для FullAjax які блоки потрібно оновлювати. Для цього додамо, в налаштування цієї бібліотеки, модель:

1
2
3
4
5
6
7
8
9
/* базове налаштування */
SRAX.Filter.add({url:'/', id:'content'});
SRAX.directLink();
/* модель */
SRAX.Model2Blocks['content'] = {
   'menu':'menu',
   'content':'content',
   'baner_img':'baner_img'
}

Для того, що це все щастя працювало, потрібно щоб вміст, який буде віддавати нам сервер, мав наступний вигляд:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- :ax:menu:begin: //-->
HTML код меню
<!-- :ax:menu:end: //-->
 
Все що знаходиться між цими блоками буде проігноровано при показі.
 
<!-- :ax:content:begin: //-->
HTML код вмісту
<!-- :ax:content:end: //-->
 
<!-- :ax:baner_img:begin: //-->
HTML код картинки банера
<!-- :ax:baner_img:end: //-->

Ось так просто, ми маємо змогу оновлювати декілька блоків одночасно.

Практика, як реалізувати оновлення декількох модулів в плаґіні Add FullAjax .

Маленька покрокова інструкція :)

1. Потрібно встановити шаблон “fullajax_tmpl”, якщо не встановлено.

2. В налаштуваннях плаґіну встановити оновлення модулів в ручну.

3. Далі, потрібно зайти в Module Manager та дізнатись позиції які бажаємо оновлювати. Для прикладу візьмемо: position-3, position-1, та user3.

4. Відкриваємо index.php нашого шаблону, та додаємо кожній цій позиції унікальний ідентифікатор(якщо цього не зроблено при створенні шаблону).
Приклад:

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. Заходимо в налаштування плаґіну, та в полі “Js code, parameters for FullAjax” додаємо модель для щойно створених блоків.

1
2
3
4
5
6
7
/* модель */
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 – це ідентифікатор вмісту.

6. Відкриваємо файл /templates/fullajax_tmpl/index.php та додаємо туди відсутні позиції.

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. От і все :)

57s коментарів to “ Як оновлювати більше як один модуль з допомогою Ajax ”

  1. JCC коментує:

    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 коментує:

      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 коментує:

        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 коментує:

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

    • Kiss Ladislas коментує:

      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 коментує:

    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 коментує:

    Hello.

    I can’t done step2…

    set “update modules” to “manually”!?

    Need help.
    thanks…

  4. Роман коментує:

    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 коментує:

    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?

Напишіть відгук

Ваша пошт@ не публікуватиметься. Обов’язкові поля позначені *

Можна використовувати XHTML теґи та атрибути: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>