Partial Javascript and MVC4 views loaded by AJAX

Question

I have an ASP.NET MVC 4 view that dynamically loads two nested particles into <div> elements through JQuery AJAX calls. Each particle has a rather large bunch of its own Javascript. To make this work, I currently have all the Javascript in success each AJAX call:

 function LoadPartial(someImportantId) { $.ajax({ url: '@Url.Action("LoadThePartial")' + '?id=' + someImportantId, type: 'POST', async: false, success: function (result) { $("#partialContainerDiv").html(result); //here there be great piles of javascript } }); } 

Since there are two of these particulars, and each of them requires hundreds of Javascript lines, the main file with the view becomes hard to access. I would like to put all this script code in a separate .js file, but I'm still fairly new to Javascript, which relied heavily on the Chrome script debugging tools, and it's hard for me to understand how (and if) I can load this script file. I tried:

• Adding a script refers to a partial file. In this case, partial Javascript is still not loading at run time, but obviously including a partial view, in any case, this is not a good idea .

• Adding a script includes the main view. This does not work. No partial javascript is properly attached, which makes sense for the level of synchronization.

Is there a way that I can have a separate Javascript file for partial AJAX, and still be able to debug the partial on the client? More importantly, where do I put all this Javascript for loaded partial AJAX views?

Answer 1

Wrap scripts for partial in function included in the main page; call the function in the AJAX success handler, executing the scripts after your partial files have loaded.