I am trying to pull a string from a looping PHP variable and load it as it updates into a div using jQuery.
The problem is, it just redirects me to the PHP page when the conditions are met instead of pulling info from it and putting that info in a div on the main html page.
I'm also trying to put that string from the div into a JavaScript function responsiveVoice.speak("string"); but that's not working also.
I'm trying to keep my questions formatted as clearly as I can think of, and I have followed stack overflow recommendations to my best understanding. I'm trying to ask good questions, but I haven't been well-received in the past with other questions.
EDIT: Fixed the location of the closing script tag and body tag. It no longer has the problem of redirection to the PHP page, but it is still not running the TTS. It has a new problem; instead of refreshing a single echo based on the changes, it just prints the echo over and over again.
Here's the index.html file:
<html>
<head>
</head>
<body>
<script src="http://code.responsivevoice.org/responsivevoice.js"></script>
<script>
var speek = document.getElementById("load_updates");
responsiveVoice.speak(speek);
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#load_updates').load('new3.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
</script>
<div id="load_updates"></div>
</body>
</html>
And here's the background looping new3.php file:
<?php
for($z=0;$z<2880;$z++) {
$frog = "15";
$tent = "2";
if ($frog >= $tent) {
echo "+ frog!";
echo "tent";
$sayit = "Hello! plus frog tent";
}
}
?>
I removed the part of the PHP loop that changes for sake of brevity.
Per the ResponsiveVoice.JS API, the speak method takes a string parameter (as well as optional voice and options parameters).
SPEAK(STRING TEXT, [STRING VOICE], [OBJECT PARAMETERS])
Starts speaking the text in a given voice.
text: String
The text to be spoken.
voice: String
Defaults to “UK English Female”. Choose from the available ResponsiveVoices.
parameters: Object
Used to add optional pitch (range 0 to 2), rate (range 0 to 1.5), volume (range 0 to 1) and callbacks.
Pitch, rate and volume may not affect audio on some browser combinations, older versions of Chrome on Windows for example. 1
The code in your example is passing a reference to the DOM element (i.e. var speek = document.getElementById("load_updates");). Pass the text content of that element, using .innerHTML, .text(), etc.
So this line:
responsiveVoice.speak(speek);
Can be updated to:
responsiveVoice.speak(speek.innerHTML);
Or to keep with jQuery methods:
responsiveVoice.speak($(speek).text());
Which could also be simplified to the following, which would make the line above unnecessary:
responsiveVoice.speak($('#load_updates').text());
See this demonstrated in this PHPFiddle - just click the button labeled "Run - F9".
The demonstration example on phpFiddle uses the same filename to send the asynchronous request (i.e. $('#load_updates').load(') because it didn't seem possible to have more than one file on phpfiddle.
It also utilizes $(document).ready() to ensure the DOM is ready before the code starts interacting with elements from it. Also notice that the call to .load() has the call to the function speakInnerHTML() passed as the second argument, so that the new text will be spoken after it is loaded.
Since .load() sends the request as a POST when an object is passed as the second argument, I updated the example on phpFiddle to pass a simple object.
$('#load_updates').load('<?php echo $_SERVER['PHP_SELF'];?>', {postData: 1}, speakInnerHTML).fadeIn("slow");
Then in the PHP code, check for that POST data:
if (isset($_POST['postData'])) {
echo date('Y-m-d h:i:s');