Захотел делать динамическую загрузку данных из бд.
Нашел скрипт.
Поправил скрипт под себя.
Оригинал взят отсюда http://webformyself.com/kak-dinamicheski-zagruzhat-i-animirovat-zagruzku-soderzhimogo-s-pomoshhyu-jquery/
При первом клике старый контент исчезает, а новый подгружается.
На последующие клики страница не реагирует.
Отладка особо не помогла.
Могу сказать только то что скрипт не выполняет функцию $('#content a').click(function(){ ... }
Java Script для динамической подгрузки данных в div
| Код |
$(document).ready(function() {
/*
var hash = window.location.hash.substr(1);
var href = $('#content a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});*/
$('#content a').click(function(){
var toLoad = '/load_content.php?var=' + $(this).attr('href').substr(1); //страница с которой получаем новый контент
$('#content').hide('fast',loadContent); //скрыть старый контент
$('#load').remove(); //удалить индикатор загрузки
$('.center').append('<span id="load">LOADING...</span>'); //отобразить индикатор загрузки
$('#load').fadeIn('normal'); // Скорость анимации
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length); //форм-е ссылки
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() { //Отобразить новый контент
$('#content').show('normal',hideLoader());
}
function hideLoader() { //скрыть индикатор загрузки
$('#load').fadeOut('normal');
}
return false;
});
});
|
Страница с генерированная с помощью php скриптов на которой должна производится динамическая подгрузка контента
| Код |
<!DOCTYPE HTML>
<html>
<head>
<title>Заголовок</title>
<meta name="keywords" content="" />
<link href="images/favicon.ico" rel="shortcut icon">
<link href="css/css.php" rel="stylesheet" type="text/css">
<script src='javascript/jquery/jquery-1.7.2.js' type='text/javascript' ></script>
<script src='modules/authorization/login_panel/js/slide.js' type='text/javascript'></script>
<script src='modules/dynamic_content/js.js' type='text/javascript'></script></head>
<body>
<!-- Панель -->
<div id="toppanel">
<div id="panel">
<div class="content clearfix">
<div class="left">
<h1>Первый блок</h1>
</div>
<div class="left">
<h1>Второй блок</h1>
</div>
<div class="left right">
<h1>Третий блок</h1>
<a href="?logoff">Выйти из системы</a>
</div>
</div>
</div>
<!-- Закладка наверху -->
<div class="tab">
<ul class="login">
<li class="left"> </li>
<li>Здравствуйте, serieznyi!</li>
<li class="sep">|</li>
<li id="toggle">
<a id="open" class="open" href="#">Открыть панель</a>
<a id="close" style="display: none;" class="close" href="#">Закрыть панель</a>
</li>
<li class="right"> </li>
</ul>
</div>
</div>
<div class="banner">
<div class="logo_3"><ul class="dropdown dropdown-linear">
<li><a href="market.php">Рынок</a></li>
<li><a href="users.php">Пользователи</a></li>
<li><a href="help.php">Помощь</a></li>
</ul></div>
<div class="logo"><a href="/"><img src="images/logo/logo_2.png"></a></div>
<div class="logo_4"></div>
</div>
<div class="center center_round">
<div id="content">
<div class='table_market'>
<div class='row'><div class='cell'>
<a href='#1'>
<img src='images/img1.jpg'></a></div><div class='cell'>
<a href='#2'>
<img src='images/img2.jpg'></a></div><div class='cell'>
<a href='#3'>
<img src='images/img3.jpg'></a></div><div class='cell'>
<a href='#4'>
<img src='images/tags/pc.jpg'></a></div></div></div>
</div>
</div>
<div class="bottom bottom_round">
Copyright © 2011 - serieznyi
</div>
</body>
</html>
|
Страница полученная в результате подгрузки нового контента.
| Код |
<!DOCTYPE HTML>
<html>
<head>
<title>Заголовок</title>
<meta name="keywords" content="" />
<link href="images/favicon.ico" rel="shortcut icon">
<link href="css/css.php" rel="stylesheet" type="text/css">
<script src='javascript/jquery/jquery-1.7.2.js' type='text/javascript' ></script>
<script src='modules/authorization/login_panel/js/slide.js' type='text/javascript'></script>
<script src='modules/dynamic_content/js.js' type='text/javascript'></script></head>
<body>
<!-- Панель -->
<div id="toppanel">
<div id="panel">
<div class="content clearfix">
<div class="left">
<h1>Первый блок</h1>
</div>
<div class="left">
<h1>Второй блок</h1>
</div>
<div class="left right">
<h1>Третий блок</h1>
<a href="?logoff">Выйти из системы</a>
</div>
</div>
</div>
<!-- Закладка наверху -->
<div class="tab">
<ul class="login">
<li class="left"> </li>
<li>Здравствуйте, serieznyi!</li>
<li class="sep">|</li>
<li id="toggle">
<a id="open" class="open" href="#">Открыть панель</a>
<a id="close" style="display: none;" class="close" href="#">Закрыть панель</a>
</li>
<li class="right"> </li>
</ul>
</div>
</div>
<div class="banner">
<div class="logo_3"><ul class="dropdown dropdown-linear">
<li><a href="market.php">Рынок</a></li>
<li><a href="users.php">Пользователи</a></li>
<li><a href="help.php">Помощь</a></li>
</ul></div>
<div class="logo"><a href="/"><img src="images/logo/logo_2.png"></a></div>
<div class="logo_4"></div>
</div>
<div class="center center_round">
<div id="content">
<div class='table_market'>
<div class='row'><div class='cell'>
<a href='#1'>
<img src='images/img1.jpg'></a></div><div class='cell'>
<a href='#2'>
<img src='images/img2.jpg'></a></div><div class='cell'>
<a href='#3'>
<img src='images/img3.jpg'></a></div><div class='cell'>
<a href='#4'>
<img src='images/img4.jpg'></a></div></div></div>
</div>
</div>
<div class="bottom bottom_round">
Copyright © 2011 - serieznyi
</div>
</body>
</html>
|
|