how to update content automatically without reloading webpage using php/ajax?

Question

I'm trying to create an auction tool using PHP. The problem I'm having (and I appreciate its a basic one but I need clarification) is that I don't understand how to update the "auction price" automatically on each users screen without them having to take any action or without causing a full reload of the page.

So far I understand that Ajax is used to do this but if anyone could point me in the right direction or to any useful materials. My plan for my project so far is to use PHP and JavaScript so any solution would need to be compatible with these languages.

Note: I'm using a MySQL database.

You could use a meta-tag, but it reloads page as well: http://en.wikipedia.org/wiki/Meta_refresh — Blauharley, Jan 24 '15 at 12:00
[Here you go](https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started). You can register a timed function with [setInterval()](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setInterval). — DontVoteMeDown, Jan 24 '15 at 12:01
You could use AngularJS and it's data-binding functionality. Like: https://docs.angularjs.org/tutorial/step_04 — Blauharley, Jan 24 '15 at 12:02
You are more looking for a bi-directionnal communication between clients and server, not the usual purpose of ajax. Your best bet would be websockets but it's quite more complicated to implement server side than e.g a long polling ajax. You could read: http://stackoverflow.com/questions/10028770/html5-websocket-vs-long-polling-vs-ajax-vs-webrtc-vs-server-sent-events — A. Wolff, Jan 24 '15 at 12:12
`websocket` is ur best bet for many reasons ,and yes its a daunting process but u can use something call pusher https://www.pusher.com/ which basically is a service that do all the crazy work for u and u just add some code in `js & php` to bind the data to the channel/pipe u will stream updates through. — ctf0, Jan 24 '15 at 12:19

score 3 · Answer 1 · answered Jan 24 '15 at 12:15

Ther question you asked has so much possible answers, they could fill a whole book.

The simplest way to do this is to make an ajax call every few seconds using a combination of the setInterval() function and AJAX calls. You basically make an AJAX request every few seconds:

setInterval(function(){
$.get( "anyChanges.php", function( data ) {
  //do something with the returned data. Maybe update a table or something
});
}, 3000);

On server side anyChanges.php returns some data immediately, like confirmation that something has changed and the new data.

Long polling is how Google and others do it. It's the same as the example above. The difference is on the server side. anyChanges.php would not return immediately, the script would keep the connection open until there is some new changes and return them. If you use long polling, you usually set the interval to longer, for example 30 seconds.

The best way to do it in my opinion, are WEB Sockets. It is a very new technology. With web sockets you can create a two-way connection to the server. That means that the server could simply send data to the clients without them having to ask for new data every few seconds. In PHP it's a little difficult to use web sockets (Or so I heard), but you could give it a shot. If you choose web sockets, try to learn about them first: tutsplus tutorial

This library will be helpfull: socketo.me

score 1 · Answer 2 · edited Jan 24 '15 at 14:29

Php/Ajax example:

In this example you have index.html and record_count.php files

Here is the Code:

index.html contains the html code and javascript call to load record_count.php

<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_tweets').load('record_count.php').fadeIn("slow");
      }, 10000); // refresh every 10000 milliseconds
</script>

<body>
     <div id="load_tweets"> </div>
</body>

and record_count.php has the php code

<?php
echo "some code or variable here";
?>

you can change the javascript interval to suit your needs

I'll leave you the blog link as a reference: 9lessons

score 0 · Answer 3 · answered Jun 30 '17 at 20:48

As I making interactive displays, which must switch pages instantly, then I create pages without refreshing.

My approach is something like that:

I have one index.html with all structure (pages) with all necessary html tags.
javascript/typescript loads json from CMS (Kirby for example), which has all information about texts and image links.
when json is loaded now I just need to switch between pages by showing/hiding or creating/removing html elements. And all data and texts are loaded by javascript.

There is some cons, which can be fixed, for example link for each page in address bar. In that case You need to add history management and change url in address bar on page switch.

how to update content automatically without reloading webpage using php/ajax?

3 Answers3

Linked