AJAX loading iFrame again and again
Question
I have iFrameA and iFrameB to display data. I have AJAX code which will get ID from mySQL and display video according to the ID. AJAX will check the code in every to seconds. Suppose I have ID 1 for video A to display in iFrameA and ID 2 for video B to display in iFrameB. If someone enter 1 in the database then video A will be displayed until ID 2 is entered. But AJAX will continue its task in every second.
I am trying the code bellow but in every second the iFrame is reloading. I want if video A is displaying no one enter ID 2 then video 2 will be display continue without reloading.
main.html
<!DOCTYPE html>
<html>
<head>
<title> View</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
function values(){
$.ajax({
type: "GET",
url: "task.php",
success: function(data){
$('div#myFrame').html(data);
}
});
};
setInterval(values, 1000);
});
</script>
</head>
<body>
<a>
<div id="myFrame">
<?php
include "task.php";
?>
</div>
</a>
</body>
</html>
test.php
<?php
//connect database and find
switch ($ID) {
case 1:
echo '<div>';
echo '<iframe src="../video/index.php" id="imgiframe"></iframe>';
echo '</div>';
break;
case 2:
echo '<div>';
echo '<iframe src="../video/index.php" id="imgiframe"></iframe>';
echo '</div>';
break;
default:
echo "NO VIDEO";
break;
}
?>
1 answers
solution1
0 ACCPTED 2014-09-11 10:15:26
You can check if the data you receive is the same as the previous time, then you don't change anything.
$(function(){
var lastData = '';
function values(){
$.ajax({
type: "GET",
url: "task.php",
success: function(data){
if (data != lastData) {
$('div#myFrame').html(data);
lastData = data;
}
}
});
};
setInterval(values, 1000);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.