www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 28

Thread: Twitter Like, Load more, to "we are done"

  1. #1
    Join Date
    Nov 2009
    Posts
    116

    Twitter Like, Load more, to "we are done"

    I have this up and running

    Demo here
    goo.gl/E03KY

    Source here
    http://goo.gl/TsL3O

    It is a twitter like load more widget. My question is, is there a way when i reach the end of my database instead of it saying "load more" to say something like "we are done".

    I believe that it would be here

    Code:
    //place the initial posts in the page
    		postHandler(initialPosts);
    		//first, take care of the "load more"
    		//when someone clicks on the "load more" DIV
    		var start = <?php echo $_SESSION['posts_start']; ?>;
    		var desiredPosts = <?php echo $number_of_posts; ?>;
    		var loadMore = $('#load-more');
    		//load event / ajax
    		loadMore.click(function(){
    			//add the activate class and change the message
    			loadMore.addClass('activate').text('Loading...');
    			//begin the ajax attempt
    			$.ajax({
    				url: 'load-more.php',
    				data: {
    					'start': start,
    					'desiredPosts': desiredPosts
    				},
    				type: 'get',
    				dataType: 'json',
    				cache: false,
    				success: function(responseJSON) {
    
    				//reset the message
    				loadMore.text('Load More');
    					//increment the current status
    					start += desiredPosts;
    					//add in the new posts
    					postHandler(responseJSON);
    				},
    
    				//failure class
    				error: function() {
    					//reset the message
    					loadMore.text('Oops! Try Again.');
    				},
    				//complete event
    				complete: function() {
    					//remove the spinner
    					loadMore.removeClass('activate');
    				}
    			});
    		});
    	});

  2. #2
    Join Date
    Nov 2009
    Posts
    116
    Anyone have any ideas?

  3. #3
    Join Date
    Jan 2009
    Posts
    3,346
    The change would be on the PHP side to provide a message to the client (AJAX) that there were no more items to load. Then the client (AJAX) would need to check for that message to do what you would like it to do in that case.

  4. #4
    Join Date
    Nov 2009
    Posts
    116
    Is there anyway you could point me in the right direction? The php is,


    PHP Code:
    <?php 
        
    /* settings */
        
    session_start();
        
    $number_of_posts 1//5 posts will load at a time
        
    $_SESSION['posts_start'] = $_SESSION['posts_start'] ? $_SESSION['posts_start'] : $number_of_posts//where we should start
    ?>
    <?php 
        
    /* grab stuff */
        
    function get_posts($start 0$number_of_posts 5) {
            
    /* connect to and select the db */
            
    $connection mysql_connect(''); //hostname, username, password
            
    mysql_select_db('People',$connection);
            
    /* create the posts array */
            
    $posts = array();
            
    /* get the posts */
            
    $query "SELECT * FROM table1 WHERE style='time' AND webfilter LIKE '%Help%' ORDER BY table1.ID DESC LIMIT $start,$number_of_posts";
            
    $result mysql_query($query);
            
    /* for every post... */
            
    while($row mysql_fetch_assoc($result)) {
                
    /* set the post content equal to the first paragraph...a "preview" regular expression */
                
    preg_match("/<p>(.*)<\/p>/",$row['makernotes'],$matches);
                
    $row['makernotes'] = strip_tags($matches[1]);
                
    /* add this record to the posts array */
                
    $posts[] = $row;
            }
            
    /* return the posts in the JSON format */
            
    return json_encode($posts);
        }

    ?>
    <?php 
    /* loading of stuff */  
    if(isset($_GET['start'])) {  
        
    /* spit out the posts within the desired range */  
        
    echo get_posts($_GET['start'],$_GET['desiredPosts']);  
        
    /* save the user's "spot", so to speak */  
        
    $_SESSION['posts_start']+= $_GET['desiredPosts'];  
        
    /* kill the page */  
        
    die();  
    }  

    ?>

  5. #5
    Join Date
    Jan 2009
    Posts
    3,346
    Looks like an empty JSON string is what you'll get when there are no results. You can just check for that I would think.

  6. #6
    Join Date
    Nov 2009
    Posts
    116
    How would I do this ?

    Would I use something like jQuery.isEmptyObject()?

    Or what is the best way for me to do this?

  7. #7
    Join Date
    Jan 2009
    Posts
    3,346
    I would assume you would need to do something in the postHandler function...which wasn't included in your posted code.

  8. #8
    Join Date
    Nov 2009
    Posts
    116
    Is this what you are talking about?

    Thank you for the help.

    Code:
    var postHandler = function(postsJSON) {
    			$.each(postsJSON,function(i,post) {
    				//post url
    				var postURL = '' + domain + "test.php?ID=" + post.ID;
    				
    				var id = 'post-' + post.ID;
    				//create the HTML
    				$('<div></div>')
    				.addClass('post')
    				.attr('id',id)
                          //generate the HTML
                             .html('')
    				.click(function() {  
                    window.location = postURL;  
                })  
    				//inject into the container
    				.appendTo($('#posts'))
    				.hide()
    				.slideDown(250,function() {
    					if(i == 0) {
    						//$.scrollTo($('div#' + id));
    					}
    				});

  9. #9
    Join Date
    Jan 2009
    Posts
    3,346
    You'll want to check if the response is empty prior to this line:
    $.each(postsJSON,function(i,post) {
    Or you can set a variable before that line to false and set it to true somewhere within the loop, then check if the variable is still false at the end of your function and you'll know if there were any responses.

  10. #10
    Join Date
    Nov 2009
    Posts
    116
    Yea, kinda lost, think you can offer up anymore help...

    I have been trying for 2 hours now not getting very far. I understand if your fed up with this thread.

  11. #11
    Join Date
    Jan 2009
    Posts
    3,346
    Maybe something like:
    Code:
    var postHandler = function(postsJSON) {
    var postsLocated = false;
    			$.each(postsJSON,function(i,post) {
    postsLocated = true;
    				//post url
    				var postURL = '' + domain + "test.php?ID=" + post.ID;
    				
    				var id = 'post-' + post.ID;
    				//create the HTML
    				$('<div></div>')
    				.addClass('post')
    				.attr('id',id)
                          //generate the HTML
                             .html('')
    				.click(function() {  
                    window.location = postURL;  
                })  
    				//inject into the container
    				.appendTo($('#posts'))
    				.hide()
    				.slideDown(250,function() {
    					if(i == 0) {
    						//$.scrollTo($('div#' + id));
    					}
    if(postsLocated != true){
    //there were no more posts
    }
    				});
    Untested and possible logic errors since my brain is fried from work.

  12. #12
    Join Date
    Nov 2009
    Posts
    116
    I guess, I don't know how to now tie that into the button.

  13. #13
    Join Date
    Jan 2009
    Posts
    3,346
    It might help to see the rest of the code. Is this some code you downloaded or inherited from someone else?

  14. #14
    Join Date
    Nov 2010
    Posts
    1,100
    not sure that I follow completely, but using the postsLocated flag like in #11, wouldn't it just be
    Code:
    if(!postsLocated){ //there were no more posts
    $('#load-more').val('We are done'); //change text of button
    }
    ?

  15. #15
    Join Date
    Nov 2009
    Posts
    116
    this is the source

    http://goo.gl/TsL3O


    demo here

    goo.gl/E03KY

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles