CODEWITHSUNDEEP
javascript
user4720622
user4720622

Reputation:

How do I reload a page without the user noticing?

I've been trying to figure out how to reload a page and pull dynamic info from a server without users noticing the page has been reloaded. For instance, if I want to create a 'live' message board system when the board updates every time other people make a comment or post a message.

I noticed that Javascript has a boolean function .reload() that when set to false reloads the page from the cache and when set to true reloads the page from the server, but from what it looks like, the function does something similar to reloading the browser. Is there another way do what I'm trying to do?

Upvotes: 0

Views: 2612

Answers (3)

Sahith Vibudhi
Sahith Vibudhi

Reputation: 5205

You can Achive what you want using AJAX. you can use ajax with either javascript or jquery. You can load the content you want dynamically without reloading the entire page. here is a quick example.

Here is a <div> with id load where your content will be loaded.

  <div id="load">Loaded Content:</div>
  <button id="load_more">load more</button>

JQuery to request for the data, where getdata.php is the php file which will send data you want to display.

<script type="text/javascript">
$(document).ready(function(){
    $("#load_more").click(function (){
        $.post("getdata.php", {variable1:yourvariable, variable2:ifneeded},function(data){
        //data is the string or obj or array echoed from getdata.php file
        $('#load').append(data); //putting the data into the loaded div.
        }
     });
     });
    });
 </script>`

finally getdata.php file

<?php
  //fetch data from Databas eif needed. or echo ut what you want to display in the div.
 echo "This is a small example of using JQuery AJAX post request with PHP.";
?>

Hope that helps!

Upvotes: 1

Maximilian Schneider-Ludorff
Maximilian Schneider-Ludorff

Reputation: 33

Are you sure you really want to do an reload?

What you could do is make an AJAX Request to the server and display the result, without even reloading the Page. I would recommend using jQuery for this, just out of comfort.

AJAX stands for Asynchronous JavaScript and XML. In a simple way the process could be:

  1. User displays page, a timer is started
  2. Every 10s (or 20s or whatever) you do an AJAX Request using JavaScript, asking the server for new data. You can set a callback function that handles the result data.
  3. Server answers with result data, your callback function inserts the new data.

Code Example (taken from jQuery Docs):

$.ajax({
  method: "POST",
  url: "target.php",
  // Data to be sent to the server
  data: { name: "John", location: "Boston" },
  // success will be called if the request was successfull
  success: function( result ) {
	// Loop through each Element
	$.each(result.newElements, function(index, value) {
		// Insert the Element to your page
		$('.classOfYourList').append(value);
	}
  });
});

Just set the proper endpoint of your server as the target and insert whatever you want to do in the success function. The function will get an answer containing whatever you sent to it from the server. More Information in the jQuery Documentation:

Upvotes: 1

An0nC0d3r
An0nC0d3r

Reputation: 1303

Something like this...

function getContent() 
{
    return new Promise(function(resolve, reject){

        var url = "http://yourendpoint.ext"
        $.ajax({
            url: url,  
            success: function(data) 
            {
                resolve(data); 
            },
            error: function(err)
            {
                reject(err);
            }
        });
    }));

}

// Usage
getContent()
.then(function(data)
{
    $('#some-element').html(data);
});

Upvotes: 1

Related Questions