Wednesday 25 July 2018

Load more button in jquery (listing)

Load more button in jquery (listing)

$rowperpage = 6;

$allcount = $allcount_fetch['allcount'];   // all record

 <div class="post" id="post_(parameter)">

content here 

</div>

            <input type="hidden" id="row" value="0">
            <input type="hidden" id="all" value="<?php echo $allcount; ?>">

<section class="blog_posts_view">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<button type="button" class="btn hvr-bounce-to-right load-more">view more</button>
</div>
</div>
</div>
</section>

<script>
$(document).ready(function(){
    $('.load-more').click(function(){
        var row = Number($('#row').val());
        var allcount = Number($('#all').val());
        row = row + 6;
        if(row <= allcount){
            $("#row").val(row);
            $.ajax({
                url: 'getData.php',
                type: 'post',
                data: {row:row},
                beforeSend:function(){
                    $(".load-more").text("Loading...");
                },
                success: function(response){
                    setTimeout(function() {
                        $(".post:last").after(response).show().fadeIn("slow");
                        var rowno = row + 6;
                        if(rowno > allcount){
$('.load-more').css("display","none");
                            //$('.load-more').text("Hide Post");
                           // $('.load-more').css("background","darkorchid");
                        }else{
                            $(".load-more").text("View more");
                        }
                    }, 2000);
                }
            });
        }else{
            $('.load-more').text("Loading...");
            setTimeout(function() {
                $('.post:nth-child(6)').nextAll('.post').remove().fadeIn("slow");
                $("#row").val(0);
                $('.load-more').text("View more");
                $('.load-more').css("background","#15a9ce");
            }, 2000);
        }
    });
});

</script>

Jquery POST fetching data on keyup

Jquery POST fetching data on keyup :


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<input type="text" name="search" id="search"/>
<br />
<div class="result"></div>

<script>
    $(document).ready(function() {
        $(document).on('keyup', 'input#search', function() {
            if($(this).val().length > 0) {
                $.post('gettest.php', {"search":$(this).val()}, function(data) {
                    $('div.result').html(data);
                });
            }
        });
    });

</script>