How to load javascript code dynamically

Question

The main page is an .aspx file. I'm trying to generate a popup. When user clicks the Send Email, a javascript on the page calls the openEmailPopup function, shown below.

function openEmailPopup(taskId, popupElementName, gridElementName) {
 $("#" + popupElementName).dialog({
    width: 1300,
    height: 500,
    draggable: false,
    resizable: false,
    modal: true,
    open: function () {
        $.get("/Resources/Sendmail", function (data) {
            $('#masterPvlEmailGrid').html(data);
        });

      //more code here...
    }
  });
}

The problem is that the SendEmail.cshtml file depends on some javascript file.

<script language="javascript" src="../../Scripts/file1.js"></script>
<script language="javascript" src="../../Scripts/file2.js"></script>
<script language="javascript" src="../../Scripts/file3.js"></script>

<script language="javascript">
  var sendEmailViewModel = new SendEmailViewModel();
  var seUploadFilesViewModel = new UploadFilesViewModel();

   $(function () {
      sendEmailViewModel.Init();
    });
</script>

When the response of the ajax call is returned, those above javascript don't execute. There are two solutions for that. Either I add javascript reference on the .aspx page. However, to do that, I also need to add a content placeholder element in the master page. The big problem with that is the actual aspx file has a master page that is nested 2 times deep in other master pages.

Many people relies on those master pages, I want to make sure that there are solutions to that before I touch them.

What about loading and executing those javascript file dynamically? I've done some researches but, I still don't understand how it work with jquery.

Any idea?

EDIT

This is how I'm calling those file.

$.getScript("/Scripts/file1.js", function () {
 });
$.getScript("/Scripts/file2.js", function () {
 });
$.getScript("/Scripts/file3.js", function () {
 });

When I check google tools, I see that all the file being loaded.

jQuery's solution to that problem is $.getScript(). You will have to manage dependencies between scripts by implementing the proper chaining yourself, though. — Frédéric Hamidi
– Frédéric Hamidi, Commented Nov 12, 2014 at 20:47

Hyra · Accepted Answer · 2014-11-12 20:47:26Z

1

You could use jQuery's getScript method, which allows you to load javascript over HTTP and then execute it:

http://api.jquery.com/jquery.getscript/

answered Nov 12, 2014 at 20:47

Hyra

8281 gold badge6 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Richard77 Over a year ago

In the above case, there are 3 file that need to be loaded. Is that gonna result in 3 ajax calls, one for each file?

Henry Fieger · Accepted Answer · 2014-11-12 21:24:54Z

1

You might want to look at an AMD like RequireJS (http://requirejs.org/). RequireJS is designed to load JavaScript resources as needed, so you would not need to load them in the main page. In your example, all three files could be returned asynchronously for your popup form.

answered Nov 12, 2014 at 21:24

Henry Fieger

3463 silver badges5 bronze badges

Comments

osotorrio · Accepted Answer · 2014-11-13 18:22:42Z

I am not sure if this will solve your problem because I cannot test it right now. Could you try this out?

function openEmailPopup(taskId, popupElementName, gridElementName) {
    $("#" + popupElementName).dialog({
        width: 1300,
        height: 500,
        draggable: false,
        resizable: false,
        modal: true,
        open: function() {

            var deferreds = [];

            //Store a deferred into the array
            function addDeferred(url) {
                deferreds.push(
                    $.getScript(url)
                    .done(function() {
                        console.log("Module loaded: " + url);
                    })
                    .fail(function(ex) {
                        console.error(ex);
                    })
                );
            };

            //Call the scripts
            addDeferred("/Scripts/file1.js");
            addDeferred("/Scripts/file2.js");
            addDeferred("/Scripts/file3.js");


            //When all the scripts has been loaded....
            $.when.apply($, deferreds)
                .done(function() {
                    $.get("/Resources/Sendmail", function(data) {
                        $('#masterPvlEmailGrid').html(data);
                    });
                })
                .fail(function(ex) {
                    console.log(ex);
                });

            //more code here...
        }
    });
}

Collectives™ on Stack Overflow

How to load javascript code dynamically

EDIT

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

EDIT

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related