0

I have created a Leaderboard for my quiz and have a custom Wordpress table where I use $wpdb->get_results. In the leaderboard I want to display the "score", "medal" and "display_name". I'm trying to use AJAX to loop through the arrays and display it into the leaderboard like pagination to show users results(scores). Below is what I have so far.

Leaderboard(with script:)

            <div id="result" class='row col-12' style='padding-top: 90px; '>
         
                    <div class='card-group'>
                        <div class='card'>
                            <div class='card-body'>
                                <h5 class='card-title bg-info text-white'>Weekly Leaderboard</h5>

                                <div id="leader_board">

                                    <?php for ($i = 0; $i <= count($display_result); $i++) { ?>
                                    <div class="card-text-page" id="card-text-page1">
                                        <div class='card-text border'>
                                            <div class='leader-detail'>

                                                <div class='leader-username'>
                                                    
                                                    <?= $display_result[$i]['display_name']; ?>

                                                </div>
                                                <div class='leader-score'>
                                                    <p><?= $display_result[$i]['score'] ?>%</p>
                                                </div>
                                            </div>
                                            <div class='leader-medal'>
                                                <?= $display_result[$i]['medal'] ?>
                                            </div>
                                        </div>
                                    </div>

                                    
                                    <?php } ?>

                                    <div id="tota_page_div">
                                        <?php
                                        for ($i = 1; $i <= $currentPage; $i++) {
                                            echo "<input type='button' value='" . $i . "' onclick='get_data(" . $i . ")'>";
                                        }
                                        ?>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>


            <script>
                $(document).ready(function() {

                    function get_data(no) {
                         $.ajax({
                            type: 'post',
                             url: '/quiz.php',
                             data: {
                                 row_no: no
                             },
                             success: function(response) {
                                 document.getElementById("card-text-page1").innerHTML = response;
                             }
                         });
                     }


                });
            </script>
        <?php endif; ?>

Insert and request from DB

//Insert into database
    global $wpdb, $current_user;
    wp_get_current_user();

    if (isset($_POST['submit'])) {
        $data_total = array(
            'score' => $_POST['totalscore'],
            'finish_time' => $_POST['countdown'],
            'medal' => $_POST['medal'],
            'insert_date' => date('Y-m-d'),
            'display_name' => $current_user->display_name
        );
        $table_name = 'wp_quiz';

        $wpdb->insert($table_name, $data_total, $format = NULL);
    }


    //set pages for pagination
    if (isset($_GET["page"])) {
        $page  = $_GET["page"];
    } else {
        $page = 1;
    };
    $limit = 4;

    $start = ($page - 1) * $limit;

    //Request from database
    $get_result = $wpdb->get_results(
        "select *
            from
                wp_quiz
        order by
                score desc
           limit $start, $limit
           "
    );
    $get_result1 = $wpdb->get_results(
        "select 
                count(id)
             as
                id
           from
                wp_quiz
           "
    );

    //change object into array
    $display_result = json_decode(json_encode($get_result), true);
    $display_result1 = json_decode(json_encode($get_result1), true);

    $total_result = $display_result1[0]['id'];
    $currentPage = ceil($total_result / $limit);

All the questions in the quiz are on the same page and the result page shows at the end with all the user's scores. I just can't get this to work. Any help will be much appreciated. Let me know if you need more information.

epicdigital
  • 3
  • 3
  • First, you should read about using ajax in wordpress the right way. Maybe start here https://stackoverflow.com/questions/10807368/how-to-use-wordpress-functions-in-an-ajax-call or https://stackoverflow.com/questions/43557755/how-to-call-ajax-in-wordpress – Howard E Sep 29 '20 at 10:04
  • Thank you. I'm looking into that now. How do I then, paginate all the arrays coming from the database? – epicdigital Sep 29 '20 at 14:23
  • You want to paginate posts, or something more like an infinite scroll? – Howard E Sep 29 '20 at 14:28
  • Basically, I need to display the list of array coming from the database containing each user's score, medal and display_name into pagination. Like a leaderboard. – epicdigital Sep 29 '20 at 14:46
  • My advice would be... go back to the drawing board... update your ajax function to actually work at all and return something... do this by using ajax the wordpress way, and then show your updated php functions and jquery(ajax). Right now, your php doesn't return or echo anything. – Howard E Sep 29 '20 at 15:05
  • Thank you. I ended up using some jquery and css to show the first 10. – epicdigital Oct 01 '20 at 10:28

0 Answers0