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;
}