How to solve jQuery ajax load more issue?

Question

I am using load more functionality in my application using jQuery ajax. This is my ajax code:

$(document).ready(function() {
     $(document).on('click','.show_more', function(e) {
                e.preventDefault();
                var ID = $(this).attr('id');
                //$('.show_more').hide();
                //$('.loding').show();
                alert(ID)
                $.ajax({
                    type:'POST',
                    url:'ajax_load_more.php',
                    data:{"id" : ID},
                    success:function(html){
                        $('#show_more_main'+ ID).remove();
                        $('.showmorediv').append(html);
                    }
                });
                e.preventDefault();
            });

For testing i put alert to display id it working perfectly. But ajax code is not working.there is no error and no console log found. i double check ajax_load_more.php page it working perfectly according to alerted id.

Here is my php code

if(isset($_POST["id"]) && !empty($_POST["id"]))
{

    $queryAll = $conn->query("SELECT COUNT(*) as num_rows FROM product WHERE id < ".$_POST['id']." ORDER BY id DESC");
    $row = $queryAll->fetch_array();
    $allRows = $row['num_rows'];
    $showLimit = 3;

    $query2 = $conn->query("SELECT * FROM product WHERE id < ".$_POST['id']." ORDER BY id DESC LIMIT ".$showLimit);
    $rowCount = $query2->num_rows;
    if($rowCount > 0){ 
        while($row_p = $query2->fetch_array()){ 
            $loadmoreid = $row_p["id"]; ?>
            <div class="col-md-4 col-sm-6 col-xs-12 mar-bot showmorediv">
            <!-- single-product-start -->
            <div class="single-product">
                <div class="single-product-img">
                    <a href="product-details/<?=preg_replace('!\s+!', '-',preg_replace("/[^A-Za-z0-9 \s+]/",' ',$row_p[4]));?>-<?=$row_p[0];?>">
                        <img src="<?=$row_p[13];?>" alt="<?=$row_p[3];?>"/>
                    </a>
                    <span class="sale-box">
                        <span class="sale">-<?php echo $offprice=round((($row_p[5]-$row_p[6])*100)/$row_p[5]); ?>%</span>
                    </span>                                            
                </div>
                <div class="single-product-content">
                    <div class="product-title">
                        <h5>
                            <a href="product-details/<?=preg_replace('!\s+!', '-',preg_replace("/[^A-Za-z0-9 \s+]/",' ',$row_p[4]));?>-<?=$row_p[0];?>"><?=$row_p[3];?></a>
                        </h5>
                    </div>                                            
                    <div class="price-box">
                        <span class="price">Rs.<?=$row_p[6];?></span>
                        <span class="old-price">Rs.<?=$row_p[5];?></span>
                    </div>
                    <div class="product-action">
                        <button class="btn btn-default add-cart" data-id="<?=$row_p[0];?>" data-name="<?=$row_p[3];?>" data-summary="<?=$row_p[3];?>" data-price="<?=$row_p[6];?>" data-quantity="1" data-image="<?=$row_p[13];?>">Add to cart</button>        
                    </div>
                </div>
            </div>
            </div>
            <?php   
            } 
            if($allRows > $showLimit)
            { 
            ?>
                <div class="show_more_main" id="show_more_main<?php echo $loadmoreid; ?>">
                    <span id="<?php echo $loadmoreid; ?>" class="show_more btn btn-primary" title="Load more posts btn btn-primary">More</span>
                    <span class="loding" style="display: none;"><span class="loding_txt">Loading…</span></span>
                </div>
        <?php }
        } 
    }
?>

i try that not working.Showing SyntaxError : missing : after property id — TarangP, Oct 10 '17 at 13:25
`data: {"id" : ID}` should do the trick. and you might want to perform some integer validation on `ID` before sending it with ajax. — Nabil Ali, Oct 10 '17 at 13:26
dont put quotation marks for id. do it as i did data: { id : ID } — Güney Saramalı, Oct 10 '17 at 13:28
@GüneySaramalı javascript will accept a json formatted array or a regular array, it doesn't matter. — Nabil Ali, Oct 10 '17 at 13:29
@TarangPanchal the best way to do debugging is putting if else check into your php that you could know if the data is submited, if the query is problem what ever. if data is not empty continue code else echo "data empty", if mysql query result > 0 do the code else query failed. — Güney Saramalı, Oct 10 '17 at 13:31
i check php file according to alert(ID) by ajax . it works fine. checked in phpmyadmin. it returns data. but i dont know why it doesent showing in webpage. — TarangP, Oct 10 '17 at 13:34
And i note one thing i disabled $('.show_more').hide(); still after click button will be hide — TarangP, Oct 10 '17 at 13:36
Use https://www.getpostman.com/ to make the POST request manually, i'm sure you'll find a problem with your php code, if not then remove the two `e.preventDefault()`, they're not doing anything at all. — Nabil Ali, Oct 10 '17 at 13:44
You might benefit from posting a [minimal complete verifiable example](https://stackoverflow.com/help/mcve) — Sarah Phillips, Oct 10 '17 at 13:46
You need to look into [prepared statements](https://stackoverflow.com/a/24989031/778975)... you have a HUGE SQL injection vulnerability in there, including `$_POST['id']` as part of the SQL statement allows an attacker to do *anything* from stealing your users table to deleting your entire database. — Useless Code, Dec 16 '17 at 13:36

score 0 · Answer 1 · answered Oct 25 '17 at 10:18

0

You can get the unknown error by using jquery ajax error function as like this

https://stackoverflow.com/a/8918298/7419418

answered Oct 25 '17 at 10:18

Janen R

729
10
21

How to solve jQuery ajax load more issue?

1 Answers1