How to output content in real-time using jquery and ajax

Question

I would like to refresh the content within a block which is outputted by <?php print "R";print_r($convert->toCurrency('ZAR', 1));print " / $";print_r($convert->toCurrency('USD', 1)); ?> <?php print "R";print_r($convert->toCurrency('ZAR', 1));print " / $";print_r($convert->toCurrency('USD', 1)); ?>

 <div class="col-md-3 col-sm-6 col-xs-12"> <div class="info-box bg-red"> <span class="info-box-icon"><i class="fa fa-info-circle"></i></span> <div class="info-box-content"> <span class="info-box-text">1 BTC = ZAR/USD</span> <span class="info-box-number"><?php print "R";print_r($convert->toCurrency('ZAR', 1));print " / $";print_r($convert->toCurrency('USD', 1)); ?></span> <div class="progress"> <div class="progress-bar" style="width: 70%"></div> </div> <span class="progress-description"> </span> </div> <!-- /.info-box-content --> </div> <!-- /.info-box --> </div> <!-- /.col --> 

What I have tried so far: added :

 <script type="text/javascript"> function loadlink(){ $('#in-content').load('main_con.php',function () { $(this).unwrap(); }); } loadlink(); setInterval(function(){ loadlink() }, 5000); </script> 

I've placed the content into one div and have it an id of in-content . it works, although when it refreshes it is not a smooth refresh as well as the css starts changing and moving the content out of place. Which is weird since its not refreshing the css but simply refreshing the content within php tags.

Any ideas on how to go about keeping a connection open and display the content in real time, and without any changes to outputted display.

any help would be appreciated :)

Answer 1

You can certainly use websockets like Taplar has suggested but it comes with its headaches (server support, connections etc), but you don't really need that for simple updates of few elements.

I have used Ajax requests in the past with high fps without issues, here is what you can do:

1. Wrap your statements with spans or divs:

 <span class="info-box-number"><span id='conversions'></span></span> 

2. Call the server to get json

 <script type="text/javascript"> function loadlink(){ $.get( "data.php", function( data ) { $( "#conversions" ).text(data.conversions)}, "json" ); } loadlink(); setInterval(function(){ loadlink(); }, 5000); </script> 

3. Write an endpoint on the server data.php that returns json with conversions as property that has your data.

4. I wouldn't render any html on the server, if you have multiple data elements return them as different properties of your json object and replace them within loadlink

There should be no refresh issues or css issues if all your html was formatted nicely

Answer 2

Wrap contents into a div

<span class="info-box-number"><div id='btc-to-fiat'></span></span>

JavaScript to refresh the content without tampering with css when displayed

 <script type="text/javascript"> var refresh = setInterval( (function () { $("#btc-to-fiat").load("main_con.php"); }), 1000); </script>