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
– mrzepa, Commented Jul 3, 2011 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
– Jared Farrish, Commented Jul 3, 2011 at 23:43

Community · Accepted Answer · 2017-05-23 12:13:20Z

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, 2017 at 12:13

CommunityBot

11 silver badge

answered Jul 3, 2011 at 23:34

Adam Tuliper

30.2k4 gold badges56 silver badges71 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:27:00Z

0

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.

edited May 23, 2017 at 12:27

CommunityBot

11 silver badge

answered Jul 3, 2011 at 23:39

Daveo

20k10 gold badges50 silver badges73 bronze badges

Comments

mrzepa · Accepted Answer · 2011-07-04 15:53:32Z

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 :)

Collectives™ on Stack Overflow

Add CSS and JS in AJAX-loaded PartialView

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related