how to add javascript file only one time

Question

I am working on MVC appliction .I have a masterpage which is calling external javascript file and sometimes child page also calling the javascript file. i want if one time it is added by child page or masterpage it should not again add that Javascript file. please help me this i have done but is not working enter code here

    $(document).ready(function () {
        var fileref1 = document.createElement('script')
        fileref1.type = "text/javascript";
        fileref1.src = "~/Scripts/testZoomPlugin.js";
        fileref1.Id = "testZoomJS";
        if (typeof fileref1 == "undefined") {
            $.getScript('~/Scripts/testZoomPlugin.js');
        }
        fileref1.src = "~/Scripts/jquery.ui.widget.min.js";
        fileref1.Id = "testWidget";

        if (typeof fileref1 == "undefined") {
            $.getScript('~/Scripts/jquery.ui.widget.min.js');
        }
        fileref1.src = "~/Scripts/jquery.ui.slider.min.js";
        fileref1.Id = "testSlider";
        if (typeof fileref1 == "undefined"){
            $.getScript('~/Scripts/jquery.ui.slider.min.js');
        }
        if(typeof fileref1=="undefined"){
            $.getScript('~/Scripts/jquery.ui.slider.min.js');
    });

c69 · Accepted Answer · 2011-09-15 12:52:09Z

2

Just use RequireJS, it does what you need and have a straight-forward syntax, in your case it will be something like this :

<script src="~/Scripts/require.js"></script>
<script>
var modules = [], prefix = "~/Scripts/";
modules.push( prefix + "testZoomPlugin.js" );
modules.push( prefix + "jquery.ui.widget.min.js" );
    require( modules, function( someModule ) {
        //This function will be called when all the dependencies
        //listed above are loaded. Note that this function could
        //be called before the page is loaded.
        //This callback is optional.
    });
</script>

answered Sep 15, 2011 at 12:52

c69

21.8k8 gold badges56 silver badges83 bronze badges

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

Comments

dougajmcdonald · Accepted Answer · 2011-09-15 12:15:13Z

0

Why would you not just get these files in your master page? they will then be accessible to your child pages.

I'm not sure there is a lot of value in doing all this checking, if the file has been downloaded once it will not be downloaded again on a child page as it will exist in cache.

Or am I missing something here?

answered Sep 15, 2011 at 12:15

dougajmcdonald

20.2k12 gold badges61 silver badges100 bronze badges

6 Comments

hugomg Over a year ago

The problem is not the downloading. Its also adding a new script tag and executing the module twice. Modules are also important if you are making a big app (managing dependencies by hand can be a PITA)

dougajmcdonald Over a year ago

Surely though the master page in this situation will handle the script requirements in the same way as it would for say, the css?

hugomg Over a year ago

Not necessarily. Dojo, the toolkit I use, allows you to have the dynamic script tags for rapid development and you can use an automatic tool later to mash them all together in a single file for production. Really neat...

dougajmcdonald Over a year ago

We use that logic with Ext.js. Once it's deployed and the single file has been created it only needs to be included once, so I'm still not getting why you'd want to dynamically load/unload then have to potentially reload things, if they are all being mashed together anyway?

hugomg Over a year ago

Its to avoid the separate compilation step during development. It also allows me to pull extra modules on demand in the console when im debugging.

|

Groovetrain · Accepted Answer · 2011-09-15 12:17:39Z

0

I think you may be going about this backwards. In situations like this, you'd usually want to have the child page check for a certain variable being set to see if it should or shouldn't load a javascript file. For example: you could have a child page's ready function look like this:

$(function() {
  if( typeof $.fn.slider == 'undefined' )
    $('body').append('<script type="text/javascript" src="~/Scripts/jquery.ui.slider.min.js"></script>');
});

or something like that.

answered Sep 15, 2011 at 12:17

Groovetrain

3,32521 silver badges23 bronze badges

Comments

hugomg · Accepted Answer · 2011-09-15 12:22:06Z

0

Your module-loading functions should cache all module names to prevent them being calledd twice. If your current functions doesn't do that already, make a wrapper that does.

var modules_loaded = {};
function caching_get_script(name){
    if(modules_loaded[name]) return;
    modules_loaded[name] = true;
    $.getScript(name)
}

Or something like that...

answered Sep 15, 2011 at 12:22

hugomg

70.4k30 gold badges168 silver badges257 bronze badges

1 Comment

hugomg Over a year ago

I just gave you an example <_<

Collectives™ on Stack Overflow

how to add javascript file only one time

4 Answers 4

Comments

6 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

6 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related