JQuery dynamic .load - works for 1 and not for the other??
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 <div>

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 <li id="our_videos_category-4" class="our_videos_category" title="4">
Script will query the server properly: GET http://localhost:8000/memorial/media_type/our_videos/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">
    function img_thumb_loader(label, wrapper, uri, multi) {
        if(!(wrapper)) { wrapper = label }
        $('.'+label+'_category').click(function () {
            $('div#'+wrapper+'_load').show();
            type = $(this).attr('title') || '';
            $('#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 - 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 <li title="our_photos" 
----------------------------------------------------

    <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 <li title="our_videos"
This is where I am having trouble
----------------------------------------------------

    <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>


JQuery dynamic .load - works for 1 and not for the other??
===

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 <div>

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 <li id="our_videos_category-4" class="our_videos_category" title="4">
Script will query the server properly: GET http://localhost:8000/memorial/media_type/our_videos/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">
    function img_thumb_loader(label, wrapper, uri, multi) {
        if(!(wrapper)) { wrapper = label }
        $('.'+label+'_category').click(function () {
            $('div#'+wrapper+'_load').show();
            type = $(this).attr('title') || '';
            $('#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 - 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 <li title="our_photos" 
----------------------------------------------------

    <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 <li title="our_videos"
This is where I am having trouble
----------------------------------------------------

    <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>

