Sometimes we need to update a certain part of the page without having to refresh it, a function I often use is jQuery load().
This function has been obsolete since jQuery version 1.8, if you need to load external content and send parameters you can use the get() and post() jQuery functions.
With load() we can load in a certain div an external file (php, html, asp…) in the moment we need or under request of the user by means of forms, buttons, links…
This external file to the script must be hosted in the same domain of the web.
Let’s see the syntax extracted from the official website:
.load( url [, data] [, callback(responseText, textStatus, XMLHttpRequest)] )
This method is a simple way to obtain data from the server from the same HTML, it is quite similar to $.get(url, data, success), load() is a method and get() is a global function.
In the demos that I put below we are going to force this external load through the jQuery Click() function, which will be executed when the button is pressed.
Let’s see the example 1 demo:
<html> <head> <title>jQuery Load</title> <!-- jQuery lib --> <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <!-- Action on the button with id=button and update the div with id=layer --> <script type="text/javascript"> $(document).ready(function() { $("#button").click(function(event) { $("#layer").load('/examples/03-jquery-load01.php'); }); }); </script> </head> <body> <div id="layer">Press 'Update Layer' and this text will be updated</div> <br> <input name="button" id="button" type="button" value="Update Layer" /> </body> </html>
Let’s see the example 2 demo:
<html> <head> <title>jQuery Load</title> <!-- jQuery lib --> <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <!-- Action on the button with id=button and update the div with id=layer --> <script type="text/javascript"> $(document).ready(function() { $("#button").click(function(event) { $("#layer").load("/examples/03-jquery-load03.php",{value1:'First value', value2:'secod value'}, function(response, status, xhr) { if (status == "error") { var msg = "Loading error!: "; $("#layer").html(msg + xhr.status + " " + xhr.statusText); } }); }); }); </script> </head> <body> <div id="layer">Press 'Update Layer' and this text will be updated</div> <br> <input name="button" id="button" type="button" value="Update Layer" /> </body> </html>
echo $_POST['value1'] . ' ' . $_POST['value2'];
Let’s see the example 3 demo:
<html> <head> <title>jQuery Load</title> <!-- jQuery lib--> <script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <!-- Acción sobre el botón con id=boton y actualizamos el div con id=capa --> <script type="text/javascript"> $(document).ready(function() { $("#button").click(function(event) { $("#layer").load('/examples/03-jquery-load05.php #content'); }); }); </script> </head> <body> <div id="layer">Press 'Update Layer' and this text will be updated</div> <br> <input name="button" id="button" type="button" value="Update Layer" /> </body> </html>
<div id="content">YOU CAN SEE THIS CONTENT</div> <div id="no">YOU CAN´T SEE THIS CONTENT</div>
Another practical example in this new fourth demo to load an external html after clicking a text link, here the code:
<script type="text/javascript"> $(document).ready(function() { $("#text").click(function(event) { $("#layer").load('/examples/03-jquery-load01.php'); }); }); </script>
If you work with other libraries than jQuery I recommend you to use jQuery noConflict() in case of problems.