JavaBeat

  • Home
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Privacy
  • Contact Us

JQuery getScript Example

July 29, 2014 by Krishna Srinivasan Leave a Comment

Introduction to jquery getScript

The jQuery getScript() method loads and executes the JavaScript file from remote location using HTTP GET request, then execute it. It is often called as shorthand method for inserting JavaScript into the web page. The main advantage of using jquery getScript is that, it loads content on run time which better than including <script> tag in the head section.

  • Introduction to JQuery
  • Finding Duplicate Input Elements Using jQuery

Jquery getScript Syntax

[code lang=”xml”]
$.getScript ( url,[callback])
[/code]

Where,

  • url: Address to which request is sent.
  • callback: Is the optional callback function, executed when the JavaScript file is loaded successfully.

Jquery getScript Example

To load a JavaScript file, first create a script file and save it with .js extension. Here we have created JavaScript file called ‘index.js’ as shown in the below script.

[code lang=”xml”]
function myfunction (){
alert (&quot;JavaScript file is loaded&quot;);
}
[/code]

After creating a JavaScript file, write the coding part for the processing of the ajaxgetScript() method and save it with .html extension.

[code lang=”xml”]
<! DOCTYPE html>
<head>
<title>Jquery ajaxScript Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("button").click(function(event){
$.getScript(‘index.js’, function(e) {
myfunction();
});
});
});
</script>
</head>
<body>
<p>Click on the button to load JavaScript file:</p>
<button>Load data</button>
</body>
</html>
[/code]

  • $(“button”).click(function(event): line defines click event which occurs when button is clicked.
  • $.getScript (‘index.js’, function(e) {myfunction();}: line invokes the JavaScript function i.e. myfunction from the specified file name. When it finds the function, myfunction in the JavaScript file, then getScript method loads the file on the server.
  • After executing the script, we will get alert message saying “JavaScript file is loaded” on the browser.

JQuery getScript Demo

When you run the above example, you would get the following output :

JQuery ajaxgetScript Example1
JQuery ajaxgetScript Example2

Filed Under: jQuery Tagged With: JQuery Basics

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved