Как проверить данные PHP с помощью jQuery AJAX?

Question

У меня есть страница PHP с оператором else, который отфильтровывает данные из базы данных SQL по пользовательскому вводу; Вот некоторый псевдокод:

NextPage. php

    //Include database configuration file
    include('../dbConfig.php'); 

    if(isset($_POST['pageno']) || isset($_POST['FetchFilters'])) {

        $limit = 10;    
        $pageno = $_POST['pageno'];
        $offset = !empty($pageno) ? $pageno: 1;

        $SQL = "

            SELECT * FROM list WHERE wt >= 2.5

        ";

        if($pageno >= 1) {


            if(isset($_POST["shape"])) {

                $shape_filter = implode("','", $_POST["shape"]);

                $SQL .= "

                    AND stoneshape IN('".$shape_filter."') 

                ";
            }

            if(isset($_POST["color"])) {

                $color_filter = implode("','", $_POST["color"]);

                $SQL .= "

                    AND stonecolor IN('".$color_filter."')

                ";

            }

            $SQL .= "

                ORDER BY wt ASC
                LIMIT 
                    $offset,
                    $limit

            ";

            $result = mysqli_query($db, $SQL);

            $output = '';

            if(isset($_POST["shape"]) && isset($_POST["color"]) && $row = mysqli_fetch_array($result)) {

                while($row = mysqli_fetch_array($result)) {

                    $output .=  '

                        <div class="Listing">

                            <!-- landing page -->
                            <a href="#ItemPage" class="ItemLink">

                                //Item Information goes here

                            </a>

                        </div>

                    ';

                }

            }

        } else {

            $output = '

                <h1 class="Error">
                    NO DATA MATCHES THAT
                </h1>

            ';

        }

        echo $output;

    }

?>

Затем у меня есть вызов AJAX, который разбивает на страницы, когда изображение (с идентификатором #Loader) в inView); вот его псевдокод:

InfiniteScroll. js

$(document).ready(function(){

    $('#Loader').on('inview', function(event, isInView) {

        if (isInView) {

            //Pagination    
            var nextPage = parseInt($('#pageno').val()) + 1;

            //Filters
            var shape = get_filter('shape');
            var color = get_filter('color');

            $.ajax({

                type: 'POST',
                url: 'vendors/php/NextPage.php',
                data: {
                    pageno: nextPage,
                    shape: shape,
                    color: color
                },
                async: true,
                cache: false,
                error: 

                    function(jqXHR, strError) {

                        if(strError == 'timeout') {

                            // Do something. Try again perhaps?
                            alert('Seems like there was an error loading the next page.');

                        }

                    },

                success: 

                    function(data) {

                        $('#Container').append(data); //Container where the NextPage.php data appends to
                        $('#pageno').val(nextPage);

                        if(data != '') { //Here is where my question lyes
                            $('.Error').hide();     //Else statement on NextPage.php should 'hide' as there is data to show
                            $('#Loader').show();    //Show image for pagination
                        } else {
                            $('.Error').show();     //Else statement on NextPage.php should 'show' as there is data to show
                            $('#Loader').hide();    //Hide image for pagination 
                        }

                    },

                timeout: 3000

            });

        }

    });

});

//Gets values of filters for filters variables
function get_filter(class_name) {

    var filter = [];

    $('.'+class_name+':checked').each(function() {
        filter.push($(this).val());
    });

    return filter;

}

Моя проблема в том, что оператор else на NextPage. php обрабатывается как данные, так что Я не знаю, как проверить, показывает ли $row. Я хочу, чтобы класс .Error равнялся hide, когда $row (s) показаны еще hide #Loader и show .Error. Как я могу проверить .Error в моем AJAX звонке?

Answer 1

Чтобы скрыть #Loader, когда не было больше data, подсчитайте общее количество итераций SQL строк и поместите это как переменную PHP рядом с текущей итерацией. Затем я поместил обе переменные в скрытый ввод внутри оператора PHP PHP и с помощью jQuery превратил каждый из атрибутов ввода в переменную, где я мог бы затем проверить, совпадают ли числа, в таком случае я бы скрыл #Loader.

Что касается ошибки (оператор PHP else), я проверил, имеют ли данные класс .Error, и если да, то я бы спрятал #Loader.

Вот псевдокод:

SQL Запрос (оконные функции работают только с MySQL 8.0+)

...
    SELECT inv.*, COUNT(*) OVER() AS totalrows FROM list inv WHERE wt >= 2.5
...

NextPage. php

...
    $ListingCounter = 0; // Begin counting iterations of while loop

    $Output = '';

        if($RowCount > 0) {

            while($row = mysqli_fetch_array($MySQLiQuery)) {

                $ListingCounter++; // Count iterations
                $ListingCount = $ListingCounter + $Offset; // Continue counting iterations after $Limit

                $output .=  '

                        <div class="Listing">

                            <!-- landing page -->
                            <a href="#ItemPage" class="ItemLink">

                                //Item Information goes here

                            </a>

    <input id="StoneIteration" type="hidden" data-listing="'echo $ListingCount;'" data-totalrows="'echo $row['totalrows'];'">


                        </div>

                    ';
...

InfiniteScroll. js

...

success: 

    function(data) {

        $('#Container').append(data);
        $('#PageNo').val(NextPage);

        // If the hidden input inside each .Stone's data attributes content both match hide #Loader
        $('.Listing').each(function(index, element) {

            var TotalRowCount = $(element).find('[data-totalrows]').data('totalrows');
            var ListingCount = $(element).find('[data-listing]').data('listing');

            if(TotalRowCount != ListingCount) {
                $('#Loader').show();   // Show infinite scroll
            } else {
                $('#Loader').hide();   // Hide infinite scroll
            }

        });

        // If data has .Error hide #Loader
        if(data.indexOf('class="Error"') > -1) {
            $('#Loader').hide();   // Hide infinite scroll
        }

    }
...

Надеюсь, это кому-нибудь поможет. Если у вас есть какие-либо вопросы, пожалуйста, задавайте!