CODEWITHSUNDEEP
javascriptjquerycssbuttonshow-hide
Jay Smoke
Jay Smoke

Reputation: 604

Jquery hide/show load more button

I have a script, see below:

Index page: jQuery script

<script type="text/javascript">
        $(document).ready(function(){
            $("#loadmorebutton").click(function (){
                $('#loadmorebutton').html('<img src="ajax-loader.gif" />');
                $.ajax({
                    url: "loadmore.php?lastid=" + $(".postitem:last").attr("id"),
                    success: function(html){
                        if(html){
                            $("#postswrapper").append(html);
                            $('#loadmorebutton').html('Load More');
                        }else{
                            $('#loadmorebutton').replaceWith('<center>No more posts to show.</center>');
                        }
                    }
                });
            });
        });
    </script>

HTML:

<div id="wrapper">
<div id="postswrapper">
<?php 
    $getlist = mysql_query("SELECT * FROM table_name LIMIT 25"); 
    while ($gl = mysql_fetch_array($getlist)) { ?>
         <div class=postitem id="<? echo $gl['id']; ?>"><?php echo $gl['title']; ?></div>
    <?php } ?>
</div>
<button id="loadmorebutton">Load More</button>
</div>
</div>

The loadmore.php page has;

<?php 
$getlist = mysql_query("SELECT * FROM table_name WHERE id < '".addslashes($_GET['lastid'])."' 
LIMIT 0, 25 LIMIT 10"); 
while ($gl = mysql_fetch_array($getlist)) { ?>
<div><?php echo $gl['title']; ?></div>
<?php } ?>

Basically what it this script does is, the index page will load the first 25 items from the database, and when you click on load more, it triggers loadmore.php, which will load 10 more the data starting from the last id loaded already. What I want to do is to remove the "Load more" button from the screen IF there's less than 25 items in the database and show if there's more than 25 items in the database.

Upvotes: 1

Views: 5390

Answers (4)

Samuel Liew
Samuel Liew

Reputation: 79032

This will work for you:

<?php 
    $getlist = mysql_query("SELECT * FROM table_name LIMIT 25"); 
    while ($gl = mysql_fetch_array($getlist)) { ?>
         <div class=postitem id="<? echo $gl['id']; ?>"><?php echo $gl['title']; ?></div>
    <?php } 
    if(mysql_num_rows($getlist) <= 25) { ?>
    <script type="text/javascript">
        $(function(){
             $('#loadmorebutton').hide();
        });
    </script>
    <?php } ?>

Upvotes: 3

run
run

Reputation: 1186

chagne your php script to with coount variable

<div id="wrapper"> 
<div id="postswrapper"> 
<?php 
$count=0;
$getlist = mysql_query("SELECT * FROM table_name LIMIT 25"); 
while ($gl = mysql_fetch_array($getlist)) {
 $count++;?> 
<div class=postitem id="<? echo $gl['id']; ?>"><?php echo $gl['title']; ?></div> 
<?php } ?> 
</div> 
<button id="loadmorebutton" value="<? echo $count ?>">Load More</button> 
</div> 
</div>

<script type="text/javascript"> 
        $(document).ready(function(){ 
            $("#loadmorebutton").click(function (){ 
                $('#loadmorebutton').html('<img src="ajax-loader.gif" />'); 
                $.ajax({ 
                    url: "loadmore.php?lastid=" + $(".postitem:last").attr("id"), 
                    success: function(html){ 
                        if(html){ 
                            $("#postswrapper").append(html);                
                            var count = patserInt($('#loadmorebutton').val()); 
                if(count<25){
                        $('#loadmorebutton').html('Load More'); 
                        }else {
                            $('#loadmorebutton').hide();


                        }else{ 
                            $('#loadmorebutton').replaceWith('<center>No more posts to show.</center>'); 
                        } 
                    } 
                }); 
            }); 
        }); 
    </script>

Upvotes: 1

Valdemar_Rudolfovich
Valdemar_Rudolfovich

Reputation: 3101

<div id="wrapper">
<div id="postswrapper">
<?php 
    $getlist = mysql_query("SELECT * FROM table_name LIMIT 25"); 
    **$cnt = 0;**
    while ($gl = mysql_fetch_array($getlist)) { ?>
         <div class=postitem id="<? echo $gl['id']; ?>"><?php echo $gl['title']; ?></div>
         **$cnt++;**
    <?php } ?>
</div>
**<?php if ($cnt == 24) { ?>
<button id="loadmorebutton">Load More</button>
<?php } ?>**
</div>
</div>

Upvotes: 1

Matt
Matt

Reputation: 7249

I'll give you two options, whichever is more readable to you.

<?php if(25 or more){ ?>
  <button id="loadmorebutton">Load More</button>
<?php } ?>

<?php if(25 or more): ?>
  <button id="loadmorebutton">Load More</button>
<?php endif; ?>

Upvotes: 0

Related Questions