1

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

Improve this question
9
  • Why not copying it into one file? Commented Jul 22, 2016 at 5:05
  • Why do you need to load it later? Commented Jul 22, 2016 at 5:05
  • what do you mean by including a javascript file in another included javascript file Commented Jul 22, 2016 at 5:06
  • You refer to attempts using solutions from other questions. Please show the actual code you've tried, provide links to those questions, and describe why it didn't work (behaviour, error messages in the console, and so on). Commented Jul 22, 2016 at 5:07
  • from what i can tell you want another js file with the custom datepiker code what is so hard to do Commented Jul 22, 2016 at 5:24

3 Answers 3

Reset to default
3

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

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

3 Comments

while this is perfectly viable and actually quite genius this would be far more tedious then the already suggested solutions
This truly is a unique solution! I see your credit to CSS Tricks so it appears that this might also allow me to load the two CSS files that I need in each page that uses datepicker. Interesting. As to other methods of doing the same. The ones I refer to initially didn't work, either the datepicker didn't function at all or script errors were reported.
Continuing - Of the new suggestions, I've already commented on them, above, but so far, except for your's they don't meet my need or would be messy to maintain in the case of combining the code into one <script src>. I'm still trying to get my head around yours. :)
0

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

Improve this answer

10 Comments

It would be even more efficient to do this once and cache the flattened and optionally minimized file.
why the downvote lol this is a perfectly valid answer not the most optimal maybe but still valid in practice ive seen various websites,engines,frameworks...using this method
Joseph Flames - I really like this one the best, and wouldn't vote it down. Instead, I would vote it up, but I don't have the rep to do so. Its simple and does exactly what I'm trying to do! Since I am using PHP, I'm going to implement this. Your other solution may still come in handy in Non-PHP cases, so I still need to try it out. :)
Golez Troi - You say why not cache and flatten and minimize the file - I'm not clear on how to do all of this in PHP. I could globally include the 'datepicker_includes.php' file in one header that is used by all of the other pages, but then there could be a lot of overhead for the majority of the pages that don't use datepicker. Since I don't need it everywhere, only 5 or 6, then the overhead of only having these few pages should be less than having it in all pages. At least that's the way I see it. I'm new to PHP, so I could be all wrong about this.
Continued - On to flatten the file. If flattening means putting the library and patch code in one file, then no, To me, the library should be separate from the patch code - so I can swap-out the library for newer versions. Having the naked library code, right out there,is difficult, it's not formatted, too long, and distracting, and below the library code are 5 patches, maybe more later. A comment before the datepicker library code 'chunk', saying 'goto line xxxx and DON'T EVEN THINK ABOUT EDITING THIS THING!' would help, but keeping the library in its original include file is cleaner.
|
-1

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.

Improve this answer

3 Comments

That is hard to maintain, and things might break easily when you want to update a library.
Why would I get downvoted for this? Its a valid solution a real solution may not be agree'd for you but its a solution and what most people actually would do. or they would submit the changes they want to the original creator.
JQluv - Thanks for chiming in. I wouldn't have voted it down as its a very good way to maintain the code base. However, I think this is the same as putting all of the datepicker code together in the wrapper script file - Easy to do, less clear to manage. I think pouring the +1000 lines of datepicker's library code into the same file with all of the patch code really would make understanding the whole thing difficult and maintain. Keeping the library separated from the patches helps to keep it all much clearer and modular. Having different files for each of the patches may be over kill.