including javascript in another included javascript

Question

I am using the JQuery.UI datepicker, but have several changes that need to be applied that update the plug-in widget before it can actually be used in my web-app. For testing, I simply load JQuery and the datepicker libraries with the normal tags, then put in the modifying code in its own tag, and finally I put in the tag for the datepicker and the initializing code in yet another tag. This all works when there is only one page that uses the modified datepicker.

Now I want to start using modified data on several pages and I don't want to have to maintain all of the modifications for the datepicker in each place where I use it. What I'd like to do is create a wrapper file for the datepicker, which includes the modifying code and the includes needed to use datepicker, then in the pages that use a datepicker, I'd just include the wrapper script file.

This all boils down to including a javascript file in another included javascript file.

I realize that this is a duplicate of some of the other questions, but when I tried the suggested fixes in those other questions, such as the document.write, and the JQuery addScript techniques, they don't seem to work for me in Chrome. The first problem I run into is that the addScript function tells me that there is a problem way down deep in the JQuery library, which is loaded normally with a tag in the main file. If I comment out the addScript then the error doesn't occur. The document.write method seems to run, but then none of the datepickers work.

I'd like to know how the best do the script load within another script load, so I can create my wrapper, and the solution needs to work in all of the major browsers.

The wrinkle in all of this is that the process must be adaptable to pages created using PHP + Ajax, but I first want to get a pure HTML + Javascript + JQuery + JQuery.UI Datepicker solution working.

If this has already been answered, and works with the constraints that I've outlined here, please point me to that solution, please don't just say 'duplicate question' and leave it at that. I've reviewed the solutions in this forum and others, and have seen lots of simple and more complex solutions that just don't work or result in out right errors.

It would be really, really, nice if tag did support nested includes, this all would be much easier, and using this concept to support wrappers to isolate overrides to the base library objects is what objects are all about. So a robust, cross browser technique that supports the and css includes really is over-due. If it's out there then I missed it, but from what I've seen it's not there in a 'ready-for-prime-time' fashion.

Thanks, Howard Brown

Answer 1

have you tried something like this?

var Loader = function () { }
Loader.prototype = {
    require: function (scripts, callback) {
        this.loadCount      = 0;
        this.totalRequired  = scripts.length;
        this.callback       = callback;

        for (var i = 0; i < scripts.length; i++) {
            this.writeScript(scripts[i]);
        }
    },
    loaded: function (evt) {
        this.loadCount++;

        if (this.loadCount == this.totalRequired && typeof this.callback == 'function') this.callback.call();
    },
    writeScript: function (src) {
        var self = this;
        var s = document.createElement('script');
        s.type = "text/javascript";
        s.async = true;
        s.src = src;
        s.addEventListener('load', function (e) { self.loaded(e); }, false);
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(s);
    }
}

usage

var l = new Loader();
l.require([
    "example-script-1.js",
    "example-script-2.js"], 
    function() {
        // Callback
        console.log('All Scripts Loaded');
    });

You could potentially nest as many includes as you want (each one in it's respective callback) and they would all still work.

Credit to CSS Tricks for the solution

Answer 2

I highly doubt ur gonna like my suggestion but ima give it a go anyways

create a file called includes.php

put all the stuff in tht file

use

<? include("includes.php"); ?>

where needed

this way you can put all your scripts in one file and have them included in as many pages as u want with one simple line of code

Answer 3

You could use a git system local repository with your changes so you can do some merging when needed. That would be what i'd suggest. Fork the original branch and then add your changes. This is also known as a patch file.