UPDATE: Site is online

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

under "Memoria Media" -> Click on "Our Videos" and it loads the list of categories click on any sub category and it goes through the process below

---------------- end edit ----------------------------------

UPDATED DESCRIPTION OF ERROR:

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

perhaps someone has run into a similar issue before??

---------------- end edit ----------------------------------

I've also added comments to the code

I have a jquery function that is setup to load categorized lists of thumbnails. So far the function is in use in 3 location. Each of them generates HTML using the same template under django. The function works perfectly in 2 of the 3 locations, and I"m plain stumped as to why the 3rd won't work.

Below is the complete set of relevant javascript, the page load HTML for the relevant section. And 2 examples of HTML that is loaded through the script,

1 of them works, 1 of them doesn't and both are loaded into the same page load HTML

Any ideas what I'm missing here? Or information I need to add to help debug? Currently posting this to a live server to interact with, been local only till now...

Error: Script works properly through all levels of title="our_photos" Script loads 1st level of title="our_videos"

Script will not load sub-category of title="our_videos"

Example: From HTML below: Click on Script will query the server properly: GET http://localhost%3A8000/memorial/media%5Ftype/our%5Fvideos/4/

Script will not load the returned HTML into the #select_media div

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

relative vars: label = "our_videos" wrapper = "media" 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 - Initial Page load

<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 - Returned from Click on section 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 - Returned from click on Section 2

Having trouble with sub-categories from this area

<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 that fails to load inside - Section 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>