0

I'm implementing lazy loading functionality on tabs in a view which make up a form.

However sometimes the views are not lazy loaded for example in case of a ModelState error in which case I'm calling a Html.Action() to retrieve the view.

In order to do this I'm interrogating the model to see if the relevant properties are null:

@if (Model.CaseDetails != null)
{
    @Html.Action("LoadCaseDetails", new { id = Model.CaseManagement.Id, model = Model.CaseDetails })
}
else
{
    //Empty as later added in with ajax call
}

This works fine when I ajax the view in later however if the view is loaded in with the page the relevant javascript libraries haven't been loaded in so the javascript that rely on the libraries fails.

How can I resolve this issue short of loading the the js libraries at the start of the page?

Please note that I can't easily put the javascript in the main view as it relies on data that is only loaded when the view is rendered and to add to this my actual requirement is more complex than I've let on (We have lazy loading in tabs inside other lazy loading tabs) so this approach isn't really viable.

Ryan Searle
  • 1,597
  • 1
  • 19
  • 30
  • you are using asp.net so can't you just add the libraries into the bundle.config file? – Axel Bouttelgier Mar 03 '17 at 12:23
  • Add a custom script bundle and render that in your partial view. – KKS Mar 03 '17 at 12:24
  • @Axel How is that relevant? As I mentioned in my questions yes I can load all of the libraries at the start of the page but that causes all page loads to appear slow (the client has to download all the js libraries before the `Html`) – Ryan Searle Mar 03 '17 at 12:25
  • @SiddharthPandey that sounds like a reasonable idea, I will do that if nothing else comes up, thanks. – Ryan Searle Mar 03 '17 at 12:28
  • Probably related reference http://msprogrammer.serviciipeweb.ro/2010/10/09/five-common-mistakes-for-asp-net-mvc-accesing-resources-css-js-images-ajax/ – Anil Mar 03 '17 at 12:28
  • @AnilKumar Seems fairly outdated as it's based of .aspx pages, also I understand why it doesn't work I'm looking for workarounds (see siddhath's comment). – Ryan Searle Mar 03 '17 at 12:31
  • Are you using BundleConfig? – Anil Mar 03 '17 at 12:31
  • @RyanSearle give that a try and if that doesn't work for any reason comment again. It should be fairly easily I believe to add a custom script bundle with your js file and rendering it in view. – KKS Mar 03 '17 at 12:33
  • @AnilKumar I'm using some bundles, and in other places just the standard ` – Ryan Searle Mar 03 '17 at 12:34
  • @SiddharthPandey The issue with going down that route is that I'll be importing the script files multiple times (All the scripts are imported at the bottom of the page already) which is never a good idea – Ryan Searle Mar 03 '17 at 12:35
  • @RyanSearle, can this be used http://stackoverflow.com/questions/1828237/check-if-jquery-has-been-loaded-then-load-it-if-false ? – Anil Mar 03 '17 at 12:39
  • @RyanSearle If you have got your script file loaded already then I'd recommend you to use data- attributes on your HTML and read the values from your script file if you are using jQuery OR render a client-side JS view-model that contains this data. So, your js file is independent and can be loaded once and then you just get data via either data-attributes OR client-side view-model and process that as per your needs. – KKS Mar 03 '17 at 12:39
  • @SiddharthPandey Are you suggesting that I conditionally load in the second script file dependant on wherever it's already loaded? – Ryan Searle Mar 03 '17 at 12:45
  • @RyanSearle nope, that is not what I meant at all. You said that going through above mentioned route you will end up loading script file multiple times. By this I make an assumption that your app can render this partial view more than once on the same page without reloading the page. In this case, you should load the JS file once on page load and get data either as JSON or JS object or from data-attributes when you render your partial view. So, you load your file once that can process that data accordingly no matter how many times you load that partial view on the same page. – KKS Mar 03 '17 at 12:51
  • 1
    @RyanSearle Please paste your js file code too that you need to render. – KKS Mar 03 '17 at 12:52

1 Answers1

1

You have to defer the execution of the JavaScript. There's many ways to do that. However, your best bet is to use a JS module loading library like RequireJS. It will require some initial work on your part to become familiar with how it works and setting up your configuration, but it will be infinitesimally more maintainable and functional once you do.

The easiest way, though probably not remotely the best way, is to simply utilize window.onload:

(function () {
    var onload = window.onload;
    window.onload = function () {
        onload();

        // put your js code here that should only happen when everything is loaded
    };
})();
Chris Pratt
  • 232,153
  • 36
  • 385
  • 444