Вставка іншої сторінки за допомогою prototype

Якщо необхідно на сторінці розмістити деяку інформацію, яка знаходить у іншому файлі, можна використати фрейми, вставку через PHP та інше. Але іноді такі варіанти не підходять з тих чи інших міркувань, як приклад, для фрейму потрібно створювати оформлення на CSS, щоб інформація була частиною дизайну сайту. Для такого випадку можна використати PHP, але іноді несумісність кодування сайту та сторінки, яку необхідно вставити, приводять до нечитабельності усієї сторінки.
У цій статті ми розглянемо просте вирішення проблеми завдяки ajax-бібліотеки prototype.

Не будемо вдаватися у подробиці написання коду, а відразу приступимо до основної частини, а саме до практики.

Для того, щоб вставити в тіло сторінки файл нам потрібно або в самому шаблоні, або у новому модулі Користувача вписати наступний код:

<div id="load" class="firstClass secondClass ajaxLoad: /myFile.php"></div>

Ми маємо firstClass, secondClass та myFile.php, де firstClass і secondClass - назви класів для оформлення блоку із змістом файлу myFile.php.

Далі нам необхідно відобразити індикатор завантаження файлу myFile.php. Для цього у файлі шаблону CSS потрібно вписати наступний код:

.loader { 
  background: url('../images/ajax-loader.gif') no-repeat; 
  background-position: center center; 
  width: 100%; 
  height: 40px; 
}

А в шаблоні прописати шлях до файлів бібліотеки:

<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/prototype.js"></script>
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/js/ajaxIncl.js"></script>

На цьому наші приготування закінченні і в результаті ми отримаємо вставлений в тіло сторінки файл:

Тепер розглянемо приклад несумісності кодування сайту (windows-1251) та вивід останніх повідомлень з форуму SMF, який працює на utf-8.
Майже у всіх форумів є можливість підключення останніх повідомлень через PHP та SSI.

Тому ми створимо файл forum.php і розмістимо його у корені сайту.

У цьому файлі пропишемо наступний код:

<?php
    header('Content-Type: text/html; charset=utf-8');
    require('forum/SSI.php');
    ssi_recentPosts();
?>

Тепер необхідно його тільки підключити до нашого коду:

<div id="load" class="ajaxLoad: /forum.php"></div>

Оскільки оформлювати блок із змістом файлу ми не будемо (використовуємо стандартні класи Joomla!), то немає необхідності зазначати які-небудь класи у коді.

Завантажити:

• prototype.js
• ajaxIncl.js

Prototype: prototype.conio.net
Бібліотека вставки файлу від fastfwd: www.fastfwd.be