Load a JavaScript file dynamically

By Anonymous - February 26, 2019

Load a JavaScript file dynamically using jQuery

jQuery.getScript()

Load a JavaScript file from the server using a GET HTTP request, then execute it.

Eg:
$.getScript( "ajax/test.js", function( data, textStatus, jqxhr ) {
console.log( data ); // Data returned
console.log( textStatus ); // Success
console.log( jqxhr.status ); // 200
console.log( "Load was performed." );
});

By default, $.getScript() sets the cache setting to false. This appends a timestamped query parameter to the request URL to ensure that the browser downloads the script each time it is requested. You can override this feature by setting the cache property globally using $.ajaxSetup():

$.ajaxSetup({
cache: true
});

Sample code and demo

<!doctype html><html lang="en">    <head>        <title>Tryit Editor - tools.bitcompiler.com</title>        <style>            .block {                 background-color: blue;                 width: 150px;                 height: 70px;                 margin: 10px;             }         </style>        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>    </head>    <body>        <h3>Load a JavaScript file dynamically using jQuery</h3><button id="go">» Run</button>        <div class="block"></div><script>            $("#go").click(function () {                 var url = "https://code.jquery.com/color/jquery.color.js";                 $.getScript(url, function () {                      $(".block")                             .animate({                                 backgroundColor: "rgb(255, 180, 180)"                             }, 1000)                             .delay(500)                             .animate({                                 backgroundColor: "olive"                             }, 1000)                             .delay(500)                             .animate({                                 backgroundColor: "#00f"                             }, 1000);                 });             });         </script>     </body></html>

Demo

Search This Blog

Meaau cat

Load a JavaScript file dynamically

Comments

Post a Comment

Popular posts from this blog

Gove confirms mandatory housebuilding targets for councils will be abolished in face of Tory rebellion – UK politics live

Ben Jennings on Matt Hancock’s return from I’m a Celebrity – cartoon

Kotak Mahindra Bank Recruitment 2022 Released for Graduate Candidates And Apply Online