Блог

У меня есть веб-приложение, которое использует навигацию с вкладками из набора пользовательского интерфейса: http://www.getuikit.com/docs/tab.html .

Каждая вкладка будет загружать разное содержимое, которое разбито на несколько php-скриптов, по одному на вкладку.

Один (не очень эффективный, но для успешного) вариант — загрузить все содержимое вкладок при первой загрузке страницы, чтобы использовать стандартный пример:

 <!-- This is the container of the toggling elements -->
<ul data-uk-switcher="{connect:'#my-id'}">
 <li><a id="1" class="load-tab" href="">Tab 1</a></li>
 <li><a id="2" class="load-tab" href="">Tab 2</a></li>
</ul>

<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher">
 <li><?php require('script1.php'); ?></li>
 <li><?php require('script2.php'); ?></li>
</ul> 
 

Я хочу избежать этого, потому что скрипты довольно большие, поэтому я хочу загружать их по требованию для улучшения пользовательского интерфейса.

Итак, что я сделал, это вместо этого добавил удерживающие divs и нацелил их на jQuery load() :

 <!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher">
 <li><div id="1"></div></li>
 <li><div id="2"></div></li>
</ul>
 

jq:

 $(document).on("click", "a.load-tab", function(){

//get the value of the tab clicked in the nav
var tab = $(this).attr('id');

//determine the filename to load based on tab clicked

if (tab == '1'){ var filename = 'script1.php'; }
if (tab == '2'){ var filename = 'script2.php'; }

//load it
$( "#" tab  ).load( filename );
});
 

Это работает нормально … иш.

Вопрос в следующем: с помощью начального (не jquery) метода каждый скрипт может использовать основные файлы главной страницы, которые уже были включены, например header.php , functions.php и т.д. и т.п. Но когда содержимое загружается из jquery, кажется, что каждый скрипт должен быть включен в scipt1.php файл и загружается снова, что приводит к созданию дублирующегося содержимого в DOM.

РЕДАКТИРОВАНИЕ script1.php в настоящее время структурировано примерно так:

  <?php
 require('header.php');
 require('connect.php');
 require('setUser.php');
 require('setParams.php');
 require('functions.php');
 ?>
 <div id="header">
 //header content
 </div>
 <table>
 //table content
 </table>
 

Страница, на которой находится навигация, давайте пока просто назовем ее index.php , уже должна содержать эти php-файлы, поэтому вы можете увидеть проблему дублирования.

Что можно сделать, чтобы избежать этого? Подумал о нескольких вариантах, таких как iframes, но, похоже, это может быть взлом.

Ваша проблема, по сути, внутри ‘script1.php » у вас есть что — то , что требует … «connect.php ‘ / данные, которые заполняются. Но вы удваиваете количество элементов DOM, когда используете это.

Два решения этой проблемы: 1. создайте более тонкие версии ваших файлов lib php, которые не содержат никаких элементов DOM, только данные, необходимые для заполнения script1.php данные пользователя, или

script1.php содержит

 <?php
 require('header.php');
 require('connect.php');
 require('setUser.php');
 require('setParams.php');
 require('functions.php');
 ?>
 <div id="header">
 //header content
 </div>
 //Everything inside #content is what you want to pull in
 <div id="content">
     <table>
     //table content
     </table>
 </div>
 

А потом позвони

 $("#1").load("script1.php #content");
 

Это загрузит только HTML-код, который находится внутри #content div.