Reputation: 7663
I am having trouble with this code. I am trying to get dynamically some data and displayed. I use firebug to see if the request is success or not and indeed it is fine, but the problem is when I am trying to apply the activeImage() function. The images just don't want to show up. I think the problem is with using $(".stream .image").each(function() . Someone any ideas how to fix the issue:
AJAX CALL
$(function(){
$('.work .navigate li').on('click' , function() {
var album = $(this).attr("data-search");
$(".work .navigate li").removeClass("active");
$(this).addClass("active");
$('.stream .columns').empty();
$.ajax({
type: "POST",
url: "<?php echo site_url('work/imageLoader');?>",
data: "requestCategory=" + album,
cache: false,
success: function(html){
$('.stream .columns').append(html);
activeImage();
},
error:function(exception){alert('Exeption:'+exception);}
});
return false;
});
});
This function is trying to display the images.
function activeImage() {
var s = $(".stream").width();
$(".stream").attr("data-width", s);
var z = 0;
$(".stream").append("<div class='row'></div>");
$(".stream .image").each(function() {
var image = $(this);
var link = $(this).attr("data-url");
var w = $(this).attr("data-width");
var h = $(this).attr("data-height");
var l = 300 * (w / h);
$(this).css("background-image", "url("+link+")");
$(this).css("width", l);
var t = s/z;
if (t > 1.5 && s > 767) {
z += l;
$(".stream .row").last().append($(this));
} else {
z = l;
$(".stream .row").last().append($(this));
var m = 25;
var j = 0;
$(".stream .row").last().find("div.image").each(function() {
j += $(this).width();
});
var p = j - s;
if(j < s) p = s - j;
$(".stream .row").last().find("div.image").each(function() {
var i = $(this).width();
var f = p * (i / j);
var r = i - f;
if(j < s) r = i + f;
$(this).css('width', r - m);
$(this).attr("z-width", r - m);
$(this).attr("z-height", 300);
if(!$(this).is(":last-child")) {
$(this).css('margin-right', m);
}
});
$(".stream").append("<div class='row'></div>");
}
});
}
Here is the HTML structure:
<section class="work" id="work">
<div class="offset">
<div class="navigate columns">
<ul>
<li data-search="all"><?php echo lang('work_all');?></li>
{categories}
<li data-search="{search}">{name}</li>
{/categories}
<li data-search="private"><?php echo lang('work_private');?></li>
</ul>
</div>
<div class="stream columns">
</div>
</div>
</section>
Upvotes: 0
Views: 70
Reputation: 20467
The problem is the selector here:
$('.stream .columns').append(html);
This is looking for an element with a class columns
that's an ancestor of an element with a class stream
. In your HTML, you have this:
<div class="stream columns">
Which doesn't match the selector - you're trying to append HTML to a non-existent element.
So your JS probably wants to have this instead:
$('.stream.columns').append(html);
This selects an element that has both the class steam
and the class columns
. Notice there is no whitespace between them.
Upvotes: 1