Jquery append not loading javascript for element
I'm making an endless scroll table with movie details and at the movie
storyline I have an easy more/less javascript function(when you click
more,it displays all text and when you click less it hides it back) in
order to make the table look nice. The problem is that after the first 10
movies when the endless scroll kicks in the more/less function doesn't
work for the rest of the movies and it displays the entire story line.
The endless scroll script:
$(document).ready(function () {
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() -
$(window).height()) {
$('div#loadingModal').show();
$.ajax({
url: "movies.php?lastMovie=" +
$(".postedMovies:last").attr('id'),
success: function (html) {
$('div#loadingModal').hide();
if (html) {
$("#postedMovies").append(html);
}
}
});
}
});
});
More or less method:
$(document).ready(function() {
var showChar = 100;
var ellipsestext = "...";
var moretext = "more";
var lesstext = "less";
$('.more').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar-1, content.length - showChar);
var html = c + '<span class="moreellipses">' + ellipsestext+
' </span><span class="morecontent"><span>' + h +
'</span> <a href="" class="morelink">' + moretext +
'</a></span>';
$(this).html(html);
}
});
$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
Php echo
echo "<tr class='postedMovies' id=\" $fuid \">";
echo'
<td>'.$_SESSION['fid'].'</td>
<td><img width="51px" height="72px"
src="'.$movie_posterlarge.'" /></td>
<td><a target="_blank"
href="'.$movie_url.'">'.$movie_title.'</a></td>
<td>'.$movie_released.'</td>
<td>'.$movie_genres.'</td>
<td>'.$movie_rating_imdb.'</td>
<td>'.$movie_rating_user.'</td>
<td width="200 px">'.$movie_viewed.'</td>
<td style="text-align:left"><div class="comment
more">'.$movie_storyline.'</div></td>
';
echo "</tr>";
No comments:
Post a Comment