how to use ajax to display from database and load more in wordpress plugin

Question

I developed a Plugin.It automatically creates the video URLs in the database.

The table consists of id, title, URL, Thurl. We can send the content to the database using the form from the wp-admin panel(If videos by pk).

I want to retrieve the rows from the database and display them.First when the page loads, it should show only 3 URLs and when clicked on load more it should show 3 more and so on.Basically, I need to know how to implement ajax in WordPress.

http://demos.codexworld.com/load-more-data-using-jquery-ajax-php-from-database/ Wordpress plugin should be making something like the above URL.

Please help me to solve this.

Below is the code for it.

    <?php
/*
Plugin Name: pkvideos
Plugin URI: http://pavan.com
Author: Pavan 
Version: 1.0
Description: Videos of IndianFolk.
Text Domain: pavan
Requires at least: 3.0
Tested up to: 4.7.3
*/

add_action('admin_menu', 'test_plugin_setup_menu');

function test_plugin_setup_menu(){
        add_menu_page( 'If Videos', 'If Videos by PK', 'manage_options', 'if-videos-by-pk', 'postvideo' );
        add_submenu_page('if-videos-by-pk', 'Edit Videos', 'Edit Videos', 'manage_options', 'if-videos-edit' );
        add_submenu_page('if-videos-by-pk', 'About Me', 'About Me', 'manage_options', 'if-videos-about' );
}

function postvideo(){
        echo "<h1>IndianFolk Videos</h1>";

        ?>
        <form action="" method="post">
 Title :<input type="text" name="title" required><br>
 Video Url: <input type="text" name="url" required><br>
 Thumbnail Url: <input type="text" name="thurl" required><br>
 <input type="submit" value="Submit" name="submit">
</form>


        <?php
        if(isset($_POST['submit'])){ //check if form was submitted
  $title = $_POST['title']; //get input text
  $url = $_POST['url'];
  $thurl = $_POST['thurl'];
  $aData = array(
            'title' => $title,
            'url' => $url,
            'thurl'=> $thurl
            );

  global $wpdb;
  $res = $wpdb->insert('wp_ifvideos', $aData);      
   $siteurll=get_site_url();

} 

}

function create_plugin_database_table() {
 global $wpdb;
 $table_name = $wpdb->prefix . 'ifvideos';
 $sql = "CREATE TABLE $table_name (
 id mediumint(9) unsigned NOT NULL AUTO_INCREMENT,
 title varchar(50) NOT NULL,
 url longtext NOT NULL,
 thurl longtext NOT NULL,
 PRIMARY KEY  (id)
 );";

 require_once( ABSPATH . 'wp-admin/includes/upgrade.php' );
 dbDelta( $sql );
}

register_activation_hook( __FILE__, 'create_plugin_database_table' );

/*=//This is used for adding form as the shortcode in pages or posts or widgets
function wp_first_shortcode(){
echo "Hello, This is your another shortcode!";
?>

<form action="" method="post">
 Title :<input type="text" name="title"><br>
 Url: <input type="text" name="url"><br>
 Thumbnail Url: <input type="text" name="thurl"><br>
 <input type="submit" value="Submit" name="submit">
</form>
<?php

if(isset($_POST['submit'])){ //check if form was submitted
  $title = $_POST['title']; //get input text
  $url = $_POST['url'];
  $thurl = $_POST['thurl'];
  $aData = array(
            'title' => $title,
            'url' => $url,
            'thurl'=> $thurl
            );

  global $wpdb;
  $res = $wpdb->insert('wp_ifvideos', $aData);      
   $siteurll=get_site_url();

}  

}//this is used for adding short code 
add_shortcode('first', 'wp_first_shortcode');*/

function videos_info() 
{
    global $wpdb; 

$videos = $wpdb->get_results( "SELECT * FROM wp_ifvideos ORDER BY id DESC" , ARRAY_N);

foreach ( $videos as $video ) {
    //Here $user[1], 1 is the column number.
    echo do_shortcode("[video width='256' height='144' 
 poster='$video[3]' mp4='$video[2]'][/video]");
 echo $video[1]. '<br>';
}
?>

<?php
}
add_shortcode('showinfo','videos_info');


function video_ajax()
{
    ?>

    <?php

}
 add_shortcode('ajaxvideo','video_ajax');
?>

Please help me making the changes to the below code.

$videos = $wpdb->get_results( "SELECT * FROM wp_ifvideos ORDER BY id DESC" , ARRAY_N);

foreach ( $videos as $video ) {
    //Here $user[1], 1 is the column number.
    echo do_shortcode("[video width='256' height='144' 
 poster='$video[3]' mp4='$video[2]'][/video]");
 echo $video[1]. '<br>';
}
?>

<?php
}
add_shortcode('showinfo','videos_info');


function video_ajax()
{
    ?>

    <?php

}

Answer 1

Here is one approach, by using an iframe for the AJAX request it can be much easier to learn and debug your AJAX code... try this:

function videos_info() {
    global $wpdb; 

    // add LIMIT 3 here
    $videos = $wpdb->get_results( "SELECT * FROM wp_ifvideos ORDER BY id DESC LIMIT 3" , ARRAY_N);

    foreach ( $videos as $video ) {
        echo do_shortcode("[video width='256' height='144' poster='$video[3]' mp4='$video[2]'][/video]");
        echo $video[1]. '<br>';
    }

    $ajaxurl = admin_url('admin-ajax.php');
    echo "<iframe style='display:none;' name='loadmorevids' id='loadmorevids' src='javascript:void(0);'></iframe>";
    echo "<script>function loadmorevideos(offset) {
        document.getElementById('loadmorevids').src = '".$ajaxurl."?action=video_ajax&offset='+offset;}</script>";    
    echo "<div id='morevideos-3'><a href='javascript:void(0);' onclick='loadmorevideos(\"3\");'>Load More Videos</a></div>";
}

// For Logged in Users
add_action('wp_ajax_video_ajax', 'video_ajax');
// For Logged Out Users
add_action('wp_ajax_video_ajax', 'video_ajax');

function video_ajax() {

    global $wpdb;    
    $videos = $wpdb->get_results( "SELECT * FROM wp_ifvideos ORDER BY id DESC" , ARRAY_N);

    $offset = $_GET['offset']; $html = '';
    foreach ( $videos as $i => $video ) {
        // limit to 3 videos using offset
        if ( ($i > ($offset-1)) && ($i < ($offset+2)) ) {
            $html .= do_shortcode("[video width='256' height='144' poster='$video[3]' mp4='$video[2]'][/video]");
            $html .= $video[1]. '<br>';
        }
    }

    // append the new load more link
    $html .= '<div id="morevideos-'.($offset+3).'">';
    $html .= '<a href="javascript:void(0);" onclick="loadmorevids('.($offset+3).');">Load More Videos</a></div>';

    // replace any single quotes with escaped ones
    $html = str_replace("'", "\\'", $html);
    // (or alternatively)
    // $html = str_replace("'", "&apos;", $html);

    // replace the previous loadmore link with the loaded videos
    echo "<script>parent.document.getElementById('morevideos-".$offset."').innerHTML = '".$html."';</script>";
    exit;

}

Answer 2

Here is Codex to make proper ajax calls https://codex.wordpress.org/AJAX_in_Plugins

Its very simple add action to your Ajax.

Also read about nonce https://codex.wordpress.org/WordPress_Nonces