2

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

}
1
  • to start you could add LIMIT 3 to the query so you get the first 3 videos
    – majick
    Aug 20, 2017 at 8:23

2 Answers 2

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;

}
3
  • is untested I grant you but not seeing any issues... if there is a problem you can click the load more link, inspect element of the page, unhide the iframe by unchecking the display:none attribute, and then you should be able to access the iframe contents... if you add that to you question it could give the further info needed
    – majick
    Aug 20, 2017 at 21:42
  • I removed the esc_attr around the $html in the script section which was converting HTML entities instead of outputting plain HTML.
    – majick
    Aug 21, 2017 at 2:47
  • yes it is still the single quote problem (which I was originally trying to solve with esc_attr ... see the changes to do a replace instead.
    – majick
    Aug 21, 2017 at 23:14
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

1
  • I have added the code now.Please help me do the ajax for displaying them 5 after 5.I couldn't understand the codex. Aug 16, 2017 at 13:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.