Jquery div fill from PHP just redirects to PHP page?

Question

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.

Not sure if you have missed out while posting the question, but fix your code in the question first. I've re-indented the HTML, and it shows you are not closing your script tag in the right position. — Nrzonline, Mar 13 '17 at 20:08

Sᴀᴍ Onᴇᴌᴀ · Accepted Answer · 2017-03-14T18:23:21.570

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.} ¹

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.

Update:

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');

¹_{https://responsivevoice.org/api/}

Hi, what does `new=1` mean in your phpfiddle example on the line `$('#load_updates').load('?new=1',speakInnerHTML).fadeIn("slow");`? Also, in your phpfiddle example, the tts works intermittently. — triops124, Mar 14 '17 at 16:55
That is a query string - that way, in the PHP code, `$_GET['new']` will evaluate to a truthy value (and thus the text will be printed) — Sᴀᴍ Onᴇᴌᴀ, Mar 14 '17 at 16:58
Thanks Sam. If I wanted to put the php file separate from the html file, could I just use `$('#load_updates').load('separate.php',speakInnerHTML);`? — triops124, Mar 14 '17 at 17:12
yes- I merely did that because I could only have one file on the phpfiddle — Sᴀᴍ Onᴇᴌᴀ, Mar 14 '17 at 17:15

Jquery div fill from PHP just redirects to PHP page?

1 Answers1

SPEAK(STRING TEXT, [STRING VOICE], [OBJECT PARAMETERS])

Update: