How can I load javascript when needed into a single page ASP.NET MVC4 web site?

Question

I have the following code that loads a login page into my single page web site when a user clicks on the login button. The href in this case calls a MVC4 controller and this returns a partial view with the HTML.

$('#loginLink')
   .click(function () {
      var $link = $(this);
      var href = $link.attr('data-href');
      $('#article').load(href);
   }
   return false;
});

But I also need to have some additional Javascript loaded from the server. Can someone tell me how I can do this as the page is loaded. Rather than at the start when all my javascript is loaded into the browser.

Here's my MVC4 code for the login page:

@model WebUx.Models.LoginModel

<section id="content" class="grid_9">
    ........
</section>

@Scripts.Render("~/bundles/jqueryval")

Here's the C# code for the javascript bundle:

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
            "~/Scripts/jquery.unobtrusive*",
            "~/Scripts/jquery.validate*"));

Even if the scripts render then it seems they are not added to the web page when I check with the chrome developer tools. Ideally I don't want them to be inline. I would like them loaded as normal js that the browser can check against its js cache.

Darin Dimitrov · Accepted Answer · 2012-12-30 13:10:21Z

1

The scripts are actually added. In your particular case you are adding the jquery unobtrusive validation scripts and I guess that they do not work for you because you haven't called the $.validator.unobtrusive.parse method once you injected the new contents into the DOM:

So make sure that you have registered all newly added elements to the DOM with the unobtrusive validation framework:

$('#loginLink').click(function () {
    var $link = $(this);
    var href = $link.attr('data-href');
    $('#article').load(href, function() {
        $('form').removeData('validator');
        $('form').removeData('unobtrusiveValidation');
        $.validator.unobtrusive.parse('form');
    });
    return false;
});

answered Dec 30, 2012 at 13:10

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

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

4 Comments

Samantha J T Star Over a year ago

Hi Darin, When I check the Chrome browser I can't see these scripts at all. I load the partial page like this: .load(href); If it's a partial page will the javascript get rendered and included in the normal way as here it seems like I am just taking the contents of my partial and putting the HTML into the article DOM element.

Darin Dimitrov Over a year ago

Where are you checking in the Chrome browser? I hope you are not browsing the source code of your HTML page (coz you're never gonna see anything loaded with AJAX there) but you are looking at the Network tab.

Samantha J T Star Over a year ago

I used the developer > tools and clicked on the sources tab to look at the javascripts that were loaded. I will clear the cache and have a look at the network tab. Thanks

Samantha J T Star Over a year ago

Thanks for your help. Works okay now. Guess I just looked in the wrong place on the dev tools. I have another slightly related question that I'll post now.

personne3000 · Accepted Answer · 2012-12-30 13:33:52Z

0

To execute code you load with ajax, you can create a new tag with the code, and add it to the page. For instance :

    $("#article").append("<script type='text/javascript' src='script.js'></script>");

should execute the content of "script.js" (provided there is an element with the id "#article" in the page). In IE the tag has to be added to the page at the moment you want the script to be run (you can't just use .load on a script tag).

answered Dec 30, 2012 at 13:33

personne3000

1,8503 gold badges18 silver badges27 bronze badges

Collectives™ on Stack Overflow

How can I load javascript when needed into a single page ASP.NET MVC4 web site?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related