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.

No script in debugger

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.

Stuff does not work

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?

Evan Davis · Accepted Answer · 2012-12-26 16:42:09Z

7

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.

answered Dec 26, 2012 at 16:42

Evan Davis

36.7k7 gold badges53 silver badges58 bronze badges

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

3 Comments

AJ. Over a year ago

Is there a way I can put the functions in a separate script file?

Evan Davis Over a year ago

Yes; essentially you'd wrap your entire DiagnosticAssessment.js file in a named function, then call that function by name to execute the code once ready.

AJ. Over a year ago

Unfortunately, I have a lot of razor syntax calls (like @Url.Action()) in my Javascript. Fortunately, I think I can remedy that with help from stackoverflow.com/q/4624626/27457. Thanks!

Kevin · Accepted Answer · 2018-06-06 15:36:20Z

1

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

answered Jun 6, 2018 at 15:36

Kevin

6,0243 gold badges30 silver badges35 bronze badges

Collectives™ on Stack Overflow

Javascript and MVC4 partial views loaded with AJAX

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related