Question

I wrote a script to hide and show a loader for my asp.net web application. The script works great when placed inline. I tried to extract the script to an external file and received the following error:

Error: The value of the property ‘Pausing’ is null or undefined, not a Function object

I tried to look up the error, but I was unable to find a solution to the problem. I am new to asp.net so it may be that I’m not sure how to search for the right question.

My inline code that works is:

<script type="text/javascript">

    function Pausing() {
        window.setTimeout(ShowLoader, 1);
    }

    function ShowLoader() {
        if ((typeof Page_IsValid === 'undefined') || 
            (Page_IsValid != null && Page_IsValid)) {
            var i = document.getElementById("loader");
            var img = document.getElementById("img");
            i.style.display = "block";
            setTimeout("document.images['img'].src=document.images['img'].src", 10);
            Endpausing();
        }
    }

    function HideLoader() {
        var i = document.getElementById("loader");
        i.style.display = "none";
    }

    function Endpausing() {
        window.setTimeout(HideLoader, 4000);
    }
</script>

The event call is attached to an asp:button control below:

<asp:Button ID="btnGetReport" runat="server" OnClick="btnGetReport_Click" OnClientClick="Pausing();" />

I removed the inline script and replaced with this…

<script type="text/javascript" src="../../Scripts/Loader.js"></script>

Added script to external file:

window.onload = initAll;

function initAll() {

    function Pausing() {
        window.setTimeout(ShowLoader, 1);
    }

    function ShowLoader() {
        if ((typeof Page_IsValid === 'undefined') ||      // asp page has no validator
                (Page_IsValid != null && Page_IsValid)) {
            var i = document.getElementById("loader");
            var img = document.getElementById("img");
            i.style.display = "block";
            setTimeout("document.images['img'].src=document.images['img'].src", 10);
            Endpausing();
        }
    }

    function HideLoader() {
        var i = document.getElementById("loader");
        i.style.display = "none";
    }

    function Endpausing() {
        window.setTimeout(HideLoader, 4000);
    }
}

Then I receive the previously mentioned error.

Any help would be greatly appreciated!

Answer 1

Always use ResolveUrl to call your script files like this

Lets assume your script is in Script folder of your root path with a file Name as MyScriptFile.js

 <script type="text/javascript" src="<%= ResolveUrl ("~/Scripts/MyScriptFile.js") %>"></script>  

EDIT : you can use ResolveUrl or ResolveClientUrl based on your needs

ResolveUrl creates the URL relative to the root where as
ResolveClientUrl creates the URL relative to the current page.