JQUERY FUNCTION DEMOS
AJAX
Animations & Effects
DOM Manipulation
Events
Traversing & Data


jQuery Getscript Function Example

Let's have a closer look at the jQuery .getscript() function.

Demo Code Download

Description

The $.getScript function is an AJAX shorthand method for inserting JavaScript into the web page. This example loads in a geographical location JavaScript file which contains geo location functions we can call to access your current location (or more specifically the location of your ISP). Lets have a look at an example of the getscript jQuery function in action. Further Reading »

Demo

jQuery Function Demo - jQuery4u.com

Demo: Using $.getScript() to dynamically load a JavaScript file.

Run Demo View Code


Download

The download package includes all the inline HTML, CSS, JavaScript, jQuery and images required for the .getscript() function demo so you can try it yourself and change as you please.

Code

<!-- Copyright 2011 jQuery4u.com -->
<!DOCTYPE html>
<html>
<title>jQuery Function Demo - jQuery4u.com</title>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="http://www.jquery4u.com/scripts/function-demos-script.js"></script>

    <script type="text/javascript">

    var JQFUNCS =
    {
        runFunc:
        {
            /* ------------------------------ getScript Demo ------------------------------ */
            "getscript":
            {
                run: function(id)
                {
                    $('#'+id).html('<img src="/function-demos/images/loading.gif" />');
                    $.getScript('http://www.geoplugin.net/javascript.gp', function()
                    {
                        $('#'+id).html("Your location is: " + geoplugin_countryName() + ", " + geoplugin_region() + ", " + geoplugin_city() + ".");
                    });
                },

                reset: function(id)
                {
                    $('#'+id).empty().hide();
                }
            }
        }
    }

    </script>

    <style type="text/css" media="screen">
        #getscript {
            color: green;
            font-size: 24px;
            margin-top: 30px;
        }
    </style>

</head>
<body>

<p class="example">Demo: Using $.getScript() to dynamically load a JavaScript file.</p>
<p><a href="#" id="getscript-demobtn" class="demobtn btn actionr">Run Demo</a> <a href="#" id="getscript-codebtn" class="codebtn btn actionr">View Code</a> <a href="#" id="getscript-resetbtn" class="resetbtn btn actionr" style="display: none;">Reset</a></p>
<div class="demoarea" id="getscript"></div>

</body>
</html>
<!-- Copyright 2011 jQuery4u.com -->