send content of dynamically changing div to database

Question

I have a Server Send Event working and updating a webpage. I then assign the contents of the div receiving the SSE to a var so as to send it to a php file to insert into a database. The div's data is constantly changing in sseReceiving.php page, but how to send it and it's changing values to the database dynamically. Now it is only sending the div content to the database when the page is re-submitted. How to do it continually?

sseTriggering.php

header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

//generate random number for demonstration
$new_data = rand(0, 1000);
//echo the new number
//echo "data: New random number:". $new_data. "\n\n";
echo "data:".$new_data."\n\n";;
flush();

sseReceiving.php

<body>
<div id="serverData">Here is where the server sent data will appear</div>   
<script type="text/javascript">
//check for browser support
if(typeof(EventSource)!=="undefined") {
    //create an object, passing it the name and location of the server side script
    var eSource = new EventSource("sseTriggering.php");
    //detect message receipt
    eSource.onmessage = function(event) {
        //write the received data to the page
        document.getElementById("serverData").innerHTML = event.data;
var MyDiv = document.getElementById("serverData").innerHTML;
window.location.href = "findpair.php?pair=" + MyDiv;
};
}
</script>    
</body>

findpair.php

$pair = $_GET['pair'];

$qX = "UPDATE product SET prod_name = '$pair' WHERE id = 1";
$rrr = mysqli_query ($dbc, $qX) or trigger_error("Query: $q\n<br />MySQL Error: " . mysqli_error($dbc));

I have researched this issue at the links below and some have helped me get it to the stage it is at now.

I have also put header('Refresh: 5'); in the php part of the various files and no change.

the // commenting out are removed now, they were not in it as I tested it. — Victor Victoria, Mar 18 '17 at 16:07
You could try saving to session or cookies and then when the receiving is run you can access that data. Cookies are supported in SSE — CommonKnowledge, Mar 18 '17 at 16:11
Why don't you just set `var MyDiv = event.data;`? Additionally, I assume you want to send the updates without changing the page, which is what it looks like you're currently doing, so you should look into sending AJAX requests to your `findpair.php` script. — forrestmid, Mar 18 '17 at 16:14
@forrestmid I did change the MyDiv as you suggested, and it continued to function as before so I will look into the AJAX requsts to findpair.php. If you have any direct suggest please comment again. — Victor Victoria, Mar 18 '17 at 16:24
@dearth Yeah that wouldn't have fixed it, just removed one extra call to the DOM. Look [here](http://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery) for making an AJAX request w/o jQuery, and [here](http://api.jquery.com/jquery.ajax/) if you have jQuery. — forrestmid, Mar 18 '17 at 16:28
Just wondering... Does the HTML need the "\n\n" in "echo "data:".$new_data."\n\n";;"? Because when you are posting the innerhtml the \n\n is included. — CommonKnowledge, Mar 18 '17 at 16:29
@CommonKnowledge I tried that earlier and the data was no longer being received by sseReceiving.php — Victor Victoria, Mar 18 '17 at 16:32

score 0 · Accepted Answer · edited May 23 '17 at 12:10

You should be able to send the request via AJAX for your main function which will allow the sse events to come to your client and then go to your findpair.php function.

if(typeof(EventSource)!=="undefined") {
    //create an object, passing it the name and location of the server side script
    var eSource = new EventSource("sseTriggering.php");
    //detect message receipt
    eSource.onmessage = function(event) {
        //write the received data to the page
        document.getElementById("serverData").innerHTML = event.data;

        //Send AJAX request.
        var xmlhttp = new XMLHttpRequest();

        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == XMLHttpRequest.DONE ) {
                if (xmlhttp.status == 200) {
                    //Do something with 'xmlhttp.responseText' if you want.
                }
                else if (xmlhttp.status == 400) {
                   alert('There was an error 400');
                } else {
                   alert('something else other than 200 was returned');
                }
             }
         };

         xmlhttp.open("GET", "findpair.php?pair=" + event.data, true);
         xmlhttp.send();
    };
}

More info here on submitting AJAX requests with javascript.

THIS WORKs PERFECTLY, I upvoted up because I am not yet '5' it is noted but does not register yet. — Victor Victoria, Mar 18 '17 at 17:05
@dearth I'm glad it's working for you. You should be able to click the little check button to mark it as your answer. :) — forrestmid, Mar 18 '17 at 17:08
I'm hoping now to adapt and modify this to try and get my data into mysql faster instead of using Cron to run scripts every minute. Answer checked, very, very !! — Victor Victoria, Mar 18 '17 at 17:13

send content of dynamically changing div to database

1 Answers1