Information



Tags



Share

How to load PHP files automatically with jQuery to get information

Advertisement:


read_later

Read Later

Keywords



Keywords



read_later

Read Later

Information

Tags

Share





Advertisement

Advertisement



Definition

While updating variables in a database, it would be incongruous to force the user to refresh the page for getting the updated variables every time especially if it is a user interface so that it is mandatory to get information automatically from a database to improve the user experience. And, it is simple in jQuery; you can load whichever file type you want recursively by using the setInterval() method easily. In this tutorial, I will show you how to load a PHP file automatically by using jQuery, named testLoad.php. To better comprehend this tutorial, you have to understand the jQuery syntax explicitly. Aside from the load function, the code is pretty much the same with JavaScript.

When you combine jQuery and MySQL, you can create either an efficient user interface for your subscribers or a UI for your web projects without needing any addition to your code.

As a result of that, when you change a default variable in the testLoad.php file, it will appear on the page automatically without the need of refreshing.

.ready()(1)

The .ready() method offers a way to run JavaScript code as soon as the page's Document Object Model (DOM) becomes safe to manipulate. This will often be a good time to perform tasks that are needed before the user views or interacts with the page, for example to add event handlers and initialize plugins. When multiple functions are added via successive calls to this method, they run when the DOM is ready in the order in which they are added. As of jQuery 3.0, jQuery ensures that an exception occurring in one handler does not prevent subsequently added handlers from executing.

Code

When the page is fully loaded, activate the setInterval function.

The setInterval() method calls and executes a function at specified intervals.

Basically, the load() method loads a file from the given path into the selected HTML element as depicted on the code below.


/* ---------- JS ---------- */
$(document).ready(function(){
setInterval(function(){
$("#testLoad").load('testLoad.php');
}, 2000);
});

/* ---------- PHP(testLoad.php) ---------- */
<?php

echo '<h2 style="text-align:center;color:yellow;">There is no error uploading files!</h1>';

?>

Result:



References

(1)https://api.jquery.com/ready/