Add CSS and JS in AJAX-loaded PartialView

Question

I found many answers about similar topics but all refers to PartialViews loaded not by AJAX where solutions are e.g. HtmlHelpers or Head section, but it doesn't work when I load PartialView by AJAX.

I wanna add CSS stylesheet and JS script inside AJAX-loaded PartialView. Now I coded it inside PartialView and it works but it's not good solution (include scripts and stylesheets inside body).

If it would be that easy ;) Sadly no ... e.g. I must add some jquery scripts which work on div that exist only in that PartialView, so if I add that script earlier in Layout, it will not work. — mrzepa, Jul 03 '11 at 23:41
I didn't say it'd be easy, per se... :D If you encapsulate your css with selectors and your jQuery in functions, you could call the function in your callback, right? — Jared Farrish, Jul 03 '11 at 23:43

score 0 · Answer 1 · edited May 23 '17 at 12:13

0

Everything should work just fine except validation. You need to tell jQuery about your new content on order to validate it. See ASP.Net MVC: Can you use Data Annotations / Validation with an AJAX / jQuery call?

edited May 23 '17 at 12:13

Community

1
1

answered Jul 03 '11 at 23:34

Adam Tuliper

29,982
4
53
71

score 0 · Answer 2 · edited May 23 '17 at 12:27

If you are only loading the PartialView once onto the page, there should be no problem including the scripts and CSS in the body. Like Adam said if you are including a HTML Form dynamically you just have to tell jQuery about it see here ASP.Net MVC 3 client side validation with a dynamic form

However if you want to include the same PartialView multiple times on to the page and do not want to load the script multiple times. Then there are dynamic script loaders you can use that:

You can call just one from your main page, when you load the AJAX so that it is only included once
Include a check to make sure the same script is not loaded multiple times.

score 0 · Accepted Answer · answered Jul 04 '11 at 15:53

I didn't know that earlier that using script tag inside body is not evil. So it's not that bad I thought at first.

I implemented two functions in cssLink.js which I include in head:

/// <reference path="../jquery-1.4.4.js" />

function addCssLink(link) {
    var _cssLink = '<link rel=\"stylesheet\" href=\"' + link + '\" type=\"text/css\" />';
    $head = $('head');
    $link = $('link[href=' + link + ']', $head);
    if ($link.length == 0) {
        $head.append(_cssLink);
    }
}

function removeCssLink(link) {
    $('head link[href=' + link + ']').remove();
}

and I use those functions within PartialViews:

<script type="text/javascript">
    $(document).ready(function () {
        $('#sideMenu').tabs('#content', '#content > *');
        addCssLink('/Content/SideMenu.css');
    });
</script>

<script type="text/javascript">
    $(document).ready(function () {
        removeCssLink('/Content/SideMenu.css');
    });
</script>

Thank you guys for help, I think that informations about validation should be helpful for me later :)

Add CSS and JS in AJAX-loaded PartialView

3 Answers3