April 14, 2021

Load() in jQuery

One cool feature of jQuery is the ability to load up content and place the content in a webpage. This is done using the LOAD() function. It's an alternative way to share a file between web pages.

Official Description

This method is the simplest way to fetch data from the server. It is roughly equivalent to $.get(url, data, success) except that it is a method rather than global function and it has an implicit callback function. When a successful response is detected (i.e. when textStatus is "success" or "notmodified"), .load() sets the HTML contents of the matched elements to the returned data.

jQuery Load Truck

Example Code

<script> $(document).ready(function() { $('#myfooter').load('/footer.html'); $('#myheader').load('/header.html'); }); </script>

Three Things I Learned

In order to use the load() functionality you can't use the jQuery slim minified version. You should be using the jquery minified version.

Developers should call the jquery.js file in the header before calling the load action. Otherwise, you may get delays or undesired behavior.

The full load() syntax is: $.load(url,[data],[callback]); Where data is the GET data to send to the URL and the callback is the JavaScript function to be executed when the request is successful. The data and callback are optional.


Add your Comments

Feel free to leave a comment about this post.

- Feel Free to add HTML to your comment!