Load Javascript .js (calls a web service) Asynchrosusly into page

Question

JScript.js file

function Helloworld() {
$(document).ready(function () {
    $.ajax
    ({
        type: "POST",
        url: "Default.aspx/Helloworld",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: true,
        cache: false,
        success: function (msg) {
            document.getElementById('textbox').value = msg.d;
        }
    })
});

}

Default.aspx

    <head runat="server">
    <script src="jquery-1.7.1.min.js" type="text/javascript"></script>

   //Works Fine when I uncomment this 
   <%--  <script src="JScript.js" type="text/javascript"></script>--%>

    <script type="text/javascript" language="javascript">
        (function () {
        var load = document.createElement('script');
        load.type = 'text/javascript';
        load.src = 'JScript.js';
        load.async = true;
        (document.getElementsByTagName('head')[0] ||    document.getElementsByTagName('body')   [0]).appendChild(load);
    })();
    </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <input type="input" id="textbox" />
    </form>
    </body>

Default.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
    Page.ClientScript.RegisterStartupScript(this.GetType(), "KeyHelloworld", "<script type='text/javascript'>Helloworld()</script>");
}

[WebMethod(EnableSession = true)]
public static string Helloworld()
{
    return "Hello World";
}

i am trying to load this JavaScript file into a page asynchronously but the function does not execute above is the complete code to load the JavaScript file asynchronously

no I donot get any errors. i just donot see the output when i call the JavaScript file async . but i see the output when i uncomment this. <%-- --%> — Kinnan Nawaz, May 29 '12 at 05:44

score 1 · Answer 1 · answered May 28 '12 at 20:19

1

One glaring issue that I see is that you are embedding your $(document).ready() in the Helloworld() routine. Instead, take out the $(document).ready(). It is presumed that if you are calling RegisterStartupScript, you want to execute that Javascript when the document is ready any way, thus making $(document).ready() redundant and likely your issue because $(document).ready() may have already been invoked before your Helloworld() routine is fired.

So, change to the following code and see if it helps:

function Helloworld() 
{
    $.ajax
    ({
        type: "POST",
        url: "Default.aspx/Helloworld",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: true,
        cache: false,
        success: function (msg) {
            document.getElementById('textbox').value = msg.d;
        }
    })
}

answered May 28 '12 at 20:19

Jeremy

8,902
2
36
44

you are right it works . but only in IE when i try to load it in chrome, mozilla it does not work... do you know why?????? – Kinnan Nawaz May 29 '12 at 20:15
Does your `Helloworld()` method in your page codebehind get called at all when in chrome or mozilla? – Jeremy May 29 '12 at 21:14
No!!! the Helloworld() does not get called in Mozilla or Chrome but it does get called in IE – Kinnan Nawaz May 30 '12 at 18:50
Take a peak at the following post, and try some of the suggestions; I believe it may help: [jquery ajax problem in chrome](http://stackoverflow.com/questions/1742049/jquery-ajax-problem-in-chrome) – Jeremy May 30 '12 at 18:54

score 0 · Answer 2 · answered May 28 '12 at 20:25

You seem to load your script asynchronously, but calling it synchronously. Where in the output HTML would the Page.ClientScript.RegisterStartupScript land?

You will need to install a load handler for the dynamically added script:

    ...
    load.async = true;
    load.onload = function() {
        Helloworld(); // execute when loaded?
    };
    ...

Or execute it directly, i.e. remove the method declaration of Helloworld.

Load Javascript .js (calls a web service) Asynchrosusly into page

2 Answers2