JQuery динамический .load - работает для 1, а не для других? - PullRequest
Новая
       7

JQuery динамический .load - работает для 1, а не для других?

0 голосов
/ 22 августа 2009

ОБНОВЛЕНИЕ: Сайт в сети

http://qwickqual.com/memorial/create/

в «Memoria Media» -> Нажмите «Наши видео» и загрузите список категорий. нажмите на любую подкатегорию, и она проходит процесс ниже

---------------- конец редактирования ----------------------------- -----

ОБНОВЛЕННОЕ ОПИСАНИЕ ОШИБКИ: 

All code is based on <li> objects being linked
If I click on an <li> from the Initial page load to load:
  section 1: I can click on an <li> to load sub-categories

  section 2: I then click on an <li>, the query is made server returns section 3,
      section is not loaded to screen / and callback function is skipped over

возможно, кто-то сталкивался с подобной проблемой раньше ??

---------------- конец редактирования ----------------------------- -----

Я также добавил комментарии к коду

У меня есть функция jquery, которая настроена для загрузки списков миниатюр по категориям. Пока эта функция используется в 3 местах. Каждый из них генерирует HTML, используя один и тот же шаблон под django. Эта функция отлично работает в 2 из 3 мест, и я совершенно не понимаю, почему 3-е не будет работать.

Ниже приведен полный набор соответствующего javascript, страницы загрузки HTML для соответствующего раздела. И 2 примера HTML, который загружается через скрипт,

1 из них работает, 1 из них не работает, и оба загружаются на одну и ту же страницу, загружают HTML

Есть идеи, что мне здесь не хватает? Или информацию, которую мне нужно добавить, чтобы помочь отладке? В настоящее время публикуем это на живом сервере для взаимодействия, являемся локальными только до сих пор ...

Ошибка: Скрипт работает правильно на всех уровнях title = "our_photos" Скрипт загружает 1-й уровень заголовка = "our_videos"

Скрипт не будет загружать подкатегорию title = "our_videos"

* +1032 * Пример: Из HTML ниже: Нажмите на Скрипт правильно запросит сервер: GET http://localhost:8000/memorial/media_type/our_videos/4/

Скрипт не будет загружать возвращенный HTML-код в #select_media div

scopeChain: [Call, Call multi = false uri = / memorial / media_type / our_videos /, Window # 0 = Call 1 = Call 2 = window]

относительные переменные: label = "our_videos" обертка = "СМИ" uri = "/ memorial / media_type / our_videos /" multi = false

Javascript 

<script type="text/javascript">
// this piece is where I'm having trouble in the grand scheme of things
// label = piece of class tag
// wrapper = tag to load everything inside of
// uri = base of the page to load
// multi = not relevant for this piece but needed to pass on to next function
function img_thumb_loader(label, wrapper, uri, multi) {
    if(!(wrapper)) { wrapper = label }
    $('.'+label+'_category').click(function () {
// show the loading animation
        $('div#'+wrapper+'_load').show();
// get var of current object
        type = $(this).attr('title') || '';
// load it into the screen - this is the error
// when I click on an <li> from section 2 below it will query server
// (Tamper data & server see it - & return section 3 below
// But will not load into the screen on return
// also skips over the callback function
        $('#select_'+label).load(uri+type+'/', '', function() {
            $('div#'+wrapper+'_load').hide();
            $('input.img_'+label+'_field').each(function() {
                img = $(this).attr('value');
                $('li#img_'+label+'-'+img).css('selected_thumb');
            });
            img_thumb_selected(label);
            window[label+'_loader']();
        });
    });

    $('.img_'+label).click(function () {
        if($(this).hasClass('selected_thumb')) {
            $(this).removeClass('selected_thumb');
            id = $(this).attr('title');
            $('.img_'+label+'_selected[value="'+id+'"]').remove();
        } else {
            if(!(multi)) {
                previous = $('.img_'+label+'_selected').val();
                $('#img_'+label+'-'+previous).removeClass('selected_thumb');
                $('.img_'+label+'_selected').remove();
            }
            $(this).addClass('selected_thumb');
            id = $(this).attr('title');
            $('#select_'+wrapper).after('<input class="img_'+label+'_selected" id="img_'+label+'_field-'+id+'" type="hidden" name="imgs[]" value="'+id+'" />');
        }
    });

    img_thumb_selected(label);
}

function img_thumb_selected(label) {
    $('.img_'+label+'_selected').each(function() {
        current = $(this).val();
        if(current) {
            $('#img_'+label+'-'+current).addClass('selected_thumb');
        }
    });
}

function media_type() {
    $('.media_type').click(function () {
        $('#media_load').show();
        type = $(this).attr('title') || '';
        $('#select_media').load('/memorial/media_type/'+type+'/', '', function() {
            $('#select_media').wrapInner('<div id="select_'+type+'"></div>');
            $('#select_media').append('<ul class="root_link"><h3><a class="load_media" onclick="return false;" href="#">Return to Select Media Type</a></h3></ul>');
            load_media_type();
            $('#media_load').hide();
            window[type+'_loader']();
        });

    });
}
media_type();

function load_media_type() {
    $('.load_media').click(function () {
        $('#media_load').show();
        $('#select_media').load('{% url mem_media_type %}', '', function() {
            $('#media_load').hide();
            media_type();
        });
    });
}

function our_photos_loader() {
    img_thumb_loader('our_photos', 'media', '{% url mem_our_photos %}', true);
}

function our_videos_loader() {
    img_thumb_loader('our_videos', 'media', '{% url mem_our_videos %}', false);
}

</script>

HTML - Начальная загрузка страницы 

<fieldset>
        <legend>Memorial Media</legend>
        <div style="display: none;" id="media_load" class="loading"/>
        <div id="select_media">
            <ul style="width: 528px;" class="initial">
                <li title="your_photos" class="media_type"><div class="photo_select_upload"><h3>Your Photos</h3></div></li>
                <li title="our_photos" class="media_type"><div class="photo_select"><h3>Our Photos</h3></div></li>
                <li title="our_videos" class="media_type"><div class="video_select"><h3>Our Videos</h3></div></li>
            </ul>
</div>
    </fieldset>

HTML - Возвращено из клика по разделу 1

этот раздел может звонить в подкатегории, и он будет работать 

<br class="clear" />
<ul class="thumb_sub_category" style="width: 352px;">


    <li id="our_photos_category-29" class="our_photos_category" title="29">

        <div>

            <span style="background-image: url(/site_media/photologue/photos/cache/stuff_004_thumbnail.jpg);" class="thumb"><span></span></span>


            <p>Birds 1</p>

        </div>


    </li>

    <li id="our_photos_category-25" class="our_photos_category" title="25">

        <div>

            <span style="background-image: url(/site_media/photologue/photos/cache/dsc_0035_thumbnail.jpg);" class="thumb"><span></span></span>


            <p>Dogs 1</p>

        </div>

    </li>


</ul>

HTML - Возвращено из клика на Раздел 2

Проблемы с подкатегориями из этой области 

<br class="clear" />
<ul class="thumb_sub_category" style="width: 528px;">


    <li id="our_videos_category-1" class="our_videos_category" title="1">

        <div>

            <span style="background-image: url(/site_media/photologue/photos/cache/forest-1_thumbnail.jpg);" class="thumb"><span></span></span>


            <p>Video 1</p>

        </div>


    </li>

    <li id="our_videos_category-3" class="our_videos_category" title="3">

        <div>

            <span style="background-image: url(/site_media/photologue/photos/cache/mountain-1_thumbnail.jpg);" class="thumb"><span></span></span>


            <p>Video 3</p>

        </div>

    </li>

    <li id="our_videos_category-4" class="our_videos_category" title="4">


        <div>

            <span style="background-image: url(/site_media/photologue/photos/cache/mountain-3_thumbnail.jpg);" class="thumb"><span></span></span>


            <p>Video 4</p>

        </div>

    </li>

</ul>

HTML, который не загружается внутри - Раздел 3 

<br class="clear" />
<ul class="thumb_sub_category" style="width: 528px;">


    <li id="our_videos_category-1" class="our_videos_category" title="1">

        <div>

            <span style="background-image: url(/site_media/photologue/photos/cache/forest-1_thumbnail.jpg);" class="thumb"><span></span></span>

            <p>Video 1</p>
        </div>

    </li>


    <li id="our_videos_category-3" class="our_videos_category" title="3">

        <div>

            <span style="background-image: url(/site_media/photologue/photos/cache/mountain-1_thumbnail.jpg);" class="thumb"><span></span></span>

            <p>Video 3</p>
        </div>

    </li>

    <li id="our_videos_category-4" class="our_videos_category" title="4">

        <div>


            <span style="background-image: url(/site_media/photologue/photos/cache/mountain-3_thumbnail.jpg);" class="thumb"><span></span></span>

            <p>Video 4</p>
        </div>

    </li>

</ul>

Ответы [ 2 ]

0 голосов
/ 22 августа 2009

Слишком много кода для чтения. Но просматривая описание и последующий комментарий, звучит так, как будто вы загружаете некоторый HTML-код динамически и ожидаете, что уже существующее событие click сработает на вновь загруженном HTML.

Это не работает. Либо вам нужно назначить функцию click специально после загрузки HTML, либо использовать метод jQuery live, чтобы гарантировать, что весь добавленный HTML наследует функцию.

0 голосов
/ 22 августа 2009

В вашей функции load_media_type вы уверены, что этот код возвращает правильный HTML (ваш последний фрагмент HTML)? 

$('#select_media').load('{% url mem_media_type %}', '', function() {
  $('#media_load').hide();
  media_type();
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...