I am trying to use ajax (very much a novice in that area) and/or jquery to refresh a div with my mysql query results. My index.php looks something like this:
<head>
$( document ).ready(function() {
(function showscreen() {
$.ajax({
url: 'screen.php',
success: function(data) {
$('#screen').html(data);
},
complete: function() {
setTimeout(showscreen, 5000);
}
});
})();
});
</head>
<body>
<div id="screen"></div>
<?php
require '../dbauth/videos.inc.php';
//This handles my db connections.
$videosdbhandle = mysql_connect(
$videoshostname,
$videosusername,
$videospassword
) or die("INVALID USERNAME OR PASSWORD");
$videosselected = mysql_select_db($videosdbname, $videosdbhandle);
$checkvideosql = "SELECT * FROM videos ORDER BY votes DESC";
$checkvideoquery = mysql_query($checkvideosql, $videosdbhandle);
$checkvideocount = mysql_num_rows($checkvideoquery);
if ($checkvideocount > 0) {
$count = 0;
while ($checkvideocount > $count) {
$thevideoname = mysql_result($checkvideoquery, $count, "name");
$thevideovideo = mysql_result($checkvideoquery, $count, "video");
$thevideoid = mysql_result($checkvideoquery, $count, "id");
$thevideoimage = mysql_result($checkvideoquery, $count, "image");
echo '<div class="screen" id="video';
echo $thevideoid;
echo '" style="display: none; background-image: url(';
echo "'http://backcurrents.com/videos/";
echo $thevideoname;
echo '/';
echo $thevideoimage;
echo "'";
echo ');">';
echo '<video loop muted autoplay
poster="http://backcurrents.com/videos/';
echo $thevideoname;
echo '/';
echo $thevideovideo;
echo '" class="videobg">
<source src="http://backcurrents.com/videos/';
echo $thevideoname;
echo '/';
echo $thevideovideo;
echo '" type="video/mp4">
</video>';
echo '</div>';
$count++;
}
}else{
echo 'NO VIDEOS!';
}
?>
</body>
and then my screen.php looks something like this:
$videosusername = "theusername";
$videospassword = "thepassword";
$videoshostname = "localhost";
$videosdbname = "thedbname";
$videosdbhandle = mysql_connect(
$videoshostname,
$videosusername,
$videospassword
) or die("INVALID SHOW NAME OR PASSWORD");
$videosselected = mysql_select_db($videosdbname, $videosdbhandle);
$checkhighestvideosql = "SELECT * FROM videos ORDER BY votes DESC";
$checkhighestvideoquery = mysql_query($checkhighestvideosql,
$videosdbhandle);
$checkhighestvideocount = mysql_num_rows($checkhighestvideoquery);
if ($checkhighestvideocount > 0) {
$x=0;
while ($checkhighestvideocount > $x) {
$checkhighestvideoid = mysql_result($checkhighestvideoquery, $x, "id");
if ($x=0) {
echo '<script type="text/javascript">';
echo '$(".screen").hide();
$("#video';
echo $checkhighestvideoid;
echo '").show(); ';
echo '</script>';
}else{
echo '<script type="text/javascript">';
echo '$(".screen").hide();
';
echo '</script>';
}
$x++;
}
}else{
echo "NO VIDEOS!";
}
All I am trying to do is refresh my mysql query every 5 seconds but nothing is appearing in the div that the screen.php is supposed to. I have tried several different iterations of this, and error checked that my ajax code is firing by simply placing: echo "TEST TEXT"; in my screen.php, and that works. any time I insert a mysql query into the screen.php, nothing appears. Is there a better method than this to acheive what I am trying to? I basically have a voting system built into a mysql database which stores votes. the video with the most votes gets played onto in the index.php file im building.