JQuery dynamic .load - 2 sections work, 1 other nogo??
Warning
-
this is a long post
-
this code has my completely stumped
- from #jquery recieved 1 unconfirmed (he had to leave) report that it (might be) working properly though I didn't get OS or browser - I have tested in Windows Firefox 3.5 / IE 6/7/8 / Linux Firefox 3.5 all same behavior
I have a jquery function that is setup to load categorized lists of thumbnails. So far the function is in full use in 3 locations (5 in total). 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>
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>, function waits for the server return section 3 (list of objects - currently all the same list),
section is not loaded to screen / and callback function is skipped over
perhaps someone has run into a similar issue before??
Site is online to test:
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 above
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...
---------------
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">
// 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 <li title="our_photos" - **section 1**
this section can make calls to subcategories and it will work
----------------------------------------------------------------
-
<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" - **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>