Question

I have this function working

<script type="text/javascript">
  $(window).scroll(function() {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
      $('div#loadmoreajaxloader').show();
      $.ajax({
        url: "loadmore.php?wall=<?php echo $wall; ?>&lastid=" + $(".postitem:last").attr("id"),
        success: function(html) {
          if (html) {
            $("#postswrapper").append(html);
            $('div#loadmoreajaxloader').hide();
          } else {
            $('div#loadmoreajaxloader').html('<center><font color="white">No more posts to show.</font></center>');
          }
        }
      });
    }
  });
</script>

But I need to have the same stuff happening (on IOS Devices), but instead of it happening when the browser reaches the loadmoreajaxeloader div, I simply need it to happen on an onclick event on a link. Thanks heaps.

Tried to add code but didn’t format so here it is http://pastebin.com/p2VUqZff

Answer 1

You need to separate the Ajax and the scroll event.

So create a function to load the content like so:

// Create the load content function
function loadContent(){
    $.ajax({
        url: "loadmore.php?wall=<?php echo $wall; ?>&lastid=" + $(".postitem:last").attr("id"),
        success: function(html){
            if(html){
                $("#postswrapper").append(html);
                $('div#loadmoreajaxloader').hide();
            }else{
                $('div#loadmoreajaxloader').html('<center><font color="white">No more posts to show.</font></center>');
            }
        }
    });
}

Then bind the scroll event to the window:

// Set the onscroll event
$(window).scroll(function(){
    if($(window).scrollTop()==$(document).height()-$(window).height()){
        $('div#loadmoreajaxloader').show();
        // IF YOU WANT TO LOAD MORE CONTENT WHEN SCROLLING THEN UNCOMMENT THE NEXT LINE
        // loadContent();
    }
});

Then set the onclick event of the Load More link:

// Bind the click event to the Load More link
$('#loadMore').click(function(e){
    // This will prevent any default action
    e.preventDefault();
    // Load the content
    loadContent();
});

UPDATE

I forgot to make sure the events are assigned once the page has loaded. Surround all of your javascript with this:

$(document).ready(function(){
    // PUT ALL THE JAVASCRIPT HERE
});