VPF::Загрузка контента без обновления

serieznyi

Дата 8.8.2012, 00:51 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 37
Регистрация: 19.9.2010
Где: Украина, Луганск

Репутация: нет
Всего: нет

Захотел делать динамическую загрузку данных из бд.
Нашел скрипт.
Поправил скрипт под себя.
Оригинал взят отсюда http://webformyself.com/kak-dinamicheski-z...moshhyu-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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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>

Это сообщение отредактировал(а) serieznyi - 8.8.2012, 03:34

нуп

Дата 8.8.2012, 10:42 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 12
Всего: 33

Вы повесили обработчик на '#content a' и потом их заменяете через load. Т.е события были для старых ссылок, вы их затерли, а на новые ссылки ничего не повесили.

serieznyi

Дата 8.8.2012, 10:55 (ссылка)

(нет голосов)

Загрузка ...

Я так понимаю вы об этой строке

Код


$('#content a').click(function(){ 
...
}

Но и новые ссылки формируются в контейнере с id='content'.

Как установить событие для новых ссылок? По подробнее, пожалуйста!

Это сообщение отредактировал(а) serieznyi - 8.8.2012, 10:59

нуп

Дата 8.8.2012, 10:59 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 12
Всего: 33

Обернуть в функцию ваш код и вызвать его после load. Либо прочитать про live(on, delegate) в jquery.

serieznyi

Дата 8.8.2012, 11:01 (ссылка)

(нет голосов)

Загрузка ...

Не скажу что мне это сильно помогло. Скажем так, я не особо дружу с javascript. И хотелось бы увидеть что то наглядное. но спасибо хотя бы за указания направления поиска.

Если вы достаточно знаете javascript, то могли бы просто сказать заменить

Код


$('#content a').click(function(){...}

на

Код


$('#content a').live('click',function(){...}

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

Это сообщение отредактировал(а) serieznyi - 8.8.2012, 11:16

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »