Javascript and MVC4 partial views loaded with AJAX

Question

I have an ASP.NET MVC 4 view that dynamically loads two nested partials into <div> elements via JQuery AJAX calls. Each of the partials has a pretty big pile of Javascript of its own. To get it all working, I currently have all of the Javascript in the success of 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 partials and each requires hundreds of lines of Javascript, the main view file is getting difficult to manage. I'd love to put all of this script code into a separate .js file, but I'm still new enough to Javascript that I rely heavily on Chrome's script debugging tools, and I'm having trouble figuring out how (and if) I can get this script file to load. I've tried:

• Adding a script include to the partial file. In this case, the partial's Javascript still does not load at runtime, and apparently having includes in a partial view isn't a good idea anyway.

• Adding a script include to the main view. This doesn't work. None of the partial's Javascript attaches correctly, which makes sense on a synchronization level.

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

Answer 1

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

Answer 2

There's now a solution that puts your dynamic JS code into the Sources treeview in the major browsers, which is all that is needed to make it debuggable. Add:

//# sourceURL=YOUR_FILENAME_OR_FULL_PATH_HERE

anywhere inside your <script> tag in your dynamically-loaded partial view. In my experiments, the space after the # seems to be required in Chrome and not in Firefox, which basically means it's required.

Source: https://developers.google.com/web/updates/2013/06/sourceMappingURL-and-sourceURL-syntax-changed and several other Stack Overflow questions