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("");
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("");
echo $video[1]. '<br>';
}
?>
<?php
}
add_shortcode('showinfo','videos_info');
function video_ajax()
{
?>
<?php
}
2 Answers
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("");
echo $video[1]. '<br>';
}
$ajaxurl = admin_url('admin-ajax.php');
echo "<iframe style="display:none;" name="loadmorevids" id='loadmorevids' src="https://wordpress.stackexchange.com/questions/276825/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="https://wordpress.stackexchange.com/questions/276825/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("");
$html .= $video[1]. '<br>';
}
}
// append the new load more link
$html .= '<div id="morevideos-'.($offset+3).'">';
$html .= '<a href="https://wordpress.stackexchange.com/questions/276825/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("'", "'", $html);
// replace the previous loadmore link with the loaded videos
echo "<script>parent.document.getElementById('morevideos-".$offset."').innerHTML = '".$html."';</script>";
exit;
}
