Member Avatar for butler1233

Hi guys

Im wondering how it is possible to refresh the data on the page (read from php database), without having to refresh the whole page.

What i want i something similar to facebook and twitter, where it will say that new stuff has appeared. Instead of this though, i want it to just appear, instead of a box coming up with it appearing.

Instead of some messed up hard to understand guide, I would like a simple to understand, straight forward guide on how to do this,

Thanks guys.
-Butler

  • 13 Contributors
  • 12 Replies
  • 26K Views
  • 9 Years Discussion Span
  • Latest Post Latest Post by Mollyron

Dani AI

Generated

If you only want new items to appear in-place (like a live feed), you do not need to reload the whole page or rely on a full framework. You have three common choices: polling with fetch, Server-Sent Events (SSE), or WebSockets. For one-way updates from server to client, SSE is often the simplest and works well with PHP because the server can stream events as they happen.

Example client for SSE:

<div id="feed" aria-live="polite"></div>
<script>
  const feed = document.getElementById('feed');
  const es = new EventSource('/updates'); // endpoint returns text/event-stream
  es.onmessage = (e) => {
    const items = JSON.parse(e.data); // your server sends an array or single item
    for (const item of (Array.isArray(items) ? items : [items])) {
      if (document.getElementById('i-' + item.id)) continue; // dedupe
      const el = document.createElement('article');
      el.id = 'i-' + item.id;
      el.textContent = item.title;
      feed.prepend(el); // insert without a modal/banner
    }
  };
</script>

UX and performance tips:

  • Preserve scroll: if the user is scrolled down, insert above the viewport and optionally show a small badge count.
  • Show a lightweight loader until the first event; hide it on first onmessage.
  • Send only deltas (since last ID/timestamp) and add caching headers (ETag/If-None-Match) for poll-based approaches.
  • Pause updates when the tab is hidden and resume with backoff.
  • Use aria-live="polite" so screen readers announce new content.

References: Using server-sent events, WebSockets API, Fetch API, ETag, aria-live.

Recommended Answers

All 12 Replies

Member Avatar for weekendrockstar

The following page gives an example: . It uses JQuery which you can download from their official site http://jquery.com/. You can download the latest package, upload it to your site and change the location of the jquery .js file in the example. You may be able to use the "latest version" method that the example uses if JQuery still supports it.

<div id="responsecontainer">
</div>

You can change the name of the div's ID if you so choose but if you do change it then you need to change the two places in the code below where the div's ID is specified to match what you name the ID above.

<script>
 $(document).ready(function() {
 	 $("#responsecontainer").load("YourScript.php");
   var refreshId = setInterval(function() {
      $("#responsecontainer").load('YourScript.php');
   }, 9000);
   $.ajaxSetup({ cache: false });
});
</script>

Change the "YourScript.php" to the file which does the database querying and prints it out as you wish.

Read the first link for more details on the time until automatic refresh.

This will make whatever YourScript.php outputs available on the page load and then automatically refreshes it at the time you state for as long as the visitor remains on the page.

Member Avatar for teraro

how to add loading gif at beging?

Member Avatar for rootoa 
        How to load Whole page without Refreshing It.
Member Avatar for S_4

How about load in it self page. I wanna modify this code :
.load("YourScript.php");

thank you

Member Avatar for Gustavo_3

Just wanted to thank you for the tip !!! It works great ... thanks a lot ...

Member Avatar for kiruthi_1

Thanks for shared great information. This information assist me

Member Avatar for 5starsautoparts

This post is very nice . I impress of this post. when i see this post , I am excited of your post.

Member Avatar for jatinkalsi

Great information and best forum of information thanks

Member Avatar for jamesgambill458

We are providing number of digital marketing services all over USA.

Member Avatar for satish159

If you want whole page update and load without refresh the page so you can use JQUERY, jquery is part of javascript library , its very usefull for website.

Member Avatar for Seven_3

Hi! Thanks for the advice!

Edited by pritaeas because: Removed spam link
Member Avatar for Mollyron

Thanks for the tips.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.