How to load javascript code dynamically - asp.net-mvc

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.

Answer 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/

Answer 2

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.

Answer 3

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...
}
});
}