Calling all developers! Registering javascripts... lets reuse the ones already there

Just putting my two cents here. I love the idea, but what about if the same idea applied across the web. Not just for EE developers, but all developers.

Essentially, that’s what the Google is advocating with the release of their AJAX API.

Not precisely, Visual Binary, as anyone can still use that service to call a specific version of jQuery, or even insert a call to it multiple times. However, the idea of it always being available without having to host the files yourself has a measure of attractiveness. Derek Allard has posted a more intimate look and the implications of using it on his personal blog that you might find interesting.

Not precisely, Visual Binary, as anyone can still use that service to call a specific version of jQuery, or even insert a call to it multiple times.

Well, true. But if two sites/applications require that version, the caching would still be of benefit. I didn’t mean it just covered every version of jQuery (or any other JS lib). If someone is using something that is newly included in the most recent release of jQuery, it wouldn’t make sense to call an older cached version of the scripts. So, some level of versioning has to be taken into account.

For something like what Ryan has posted about above – three extensions utilizing the same version of jQuery, the Google method would be of benefit.

Wow, I hadn’t really thought of this issue in-depth before today, and I see what a headache it can possibly be.

Hey Derek, how about releasing 1.6.4 that just has jQuery included. Sort of a quick “here ya go kids” before 2.0? I’m kidding. Get back to work now, please. (And by work I don’t mean playing with that expanding/collapsing sidebar in the control panel)

(And by work I don’t mean playing with that expanding/collapsing sidebar in the control panel)

Aw…..

Hmm…. 1.6.4 with jQuery would be very nice… but my guess is that if i was included on the admin pages by default there would be some issues.

I have also been following the google ajax api which looks great but doesn’t really address some of the issues regarding different versions of the same library.

Personally I will be using the Google Ajax Api to load all my jquery scripts until EE 2.0

Yeah, the “different versions of the same script” issue really throws a monkeywrench into things. I’m not sure how keen I am on calling JS from Google so save a second or two? I need to educate myself a bit more on that before I stick my foot in my mouth, though.

Well the different versions issue comes into play when you are using older plugins / extensions.

Maybe EE 2.0 could have some kind of compatibility checking built in for addons. Just thining of this on the fly but maybe a settings key in the plugin?

$plugin_compatibility = array(1.6, 2.0, 2.1.0, 2.1.1);

That way you would know which version of jquery was available and if your plugin supported it.

Still thinking on the fly… it may be better to check the version of jquery installed rather than the version of EE.

$plugin_jquery_compatibility = array(1.2, 1.3);

If the plugin was not compatible the plugin author could choose whether to disable it or show a warning.

Having coded a lot of Drupal modules (and as for EE, in my eyes, Drupal has the much better API), how about using a separate “jQuery Extension” which other modules / extensiond can “depend” on? This is the way Drupal does it - let’s say i have a module A and i know that there’s already some functionality included in other modules B and C i wanna use, i can define that module A depends on B and C (and cannot even install the module A before enabling those two others).

I know this is not ideal and can cause trouble too, but in my eyes, especially with the jquery version, this could solve the problem. Regarding the jQuery versioning, if the jQuery module / extension is upgraded and you module relies on the older version, that would be no problem as you could still use the old version (but in an ideal world, unless it’s something really major, jQuery extension / module should be backwards compatible anyway).

Just my 2 cents.

Hey guys,

I just posted this on another forum thread but it could be of some use here as well:

if (typeof jQuery == 'undefined'){
script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'jquery.js';
document.getElementsByTagName('head')[0].addChild(script);
}

Tests if jQuery has ben loaded but it doesn’t check the version.

Leevi - does that last bit work as advertised? I’m rewriting my Markitup extension because it keeps conflicting with your extensions - specifically LG Data Matrix and LG Live Look.

Extension development is starting to drive me mad.

I’ve been using some code I found inside your extensions to check the cache to see if jQuery has already been loaded. It looks similar to this:

$SESS->cache['mdesign'][MD_MU_addon_id]['require_scripts'] = TRUE;

Then a little later on:

if(empty($SESS->cache['scripts']['jquery']['1.2.6']) === TRUE)
{
$myjs .= '[removed]settings['jquery_core_path']).'">[removed]';
$SESS->cache['scripts']['jquery']['1.2.6'] = TRUE;
}

I’m not exactly sure what that is doing, down to the letter, but it seemed to solve a conflict with LG Live Look, but now I’m getting a report that MD Markitup is conflicting with LG Data Matrix (or vice versa 😉 )…pretty sure this is is related to multiple jQuery script tags littering the Control Panel.

After having a brief chat with Mark Huot about this issue, I may try the JavaScript check method rather than monkeying with PHP session variables. And as Mark pointed out, that first line of Leevi’s above should probably be:

if (typeof jQuery == 'undefined'){

Here goes nothing…

Leevi - does that last bit work as advertised? I’m rewriting my Markitup extension because it keeps conflicting with your extensions - specifically LG Data Matrix and LG Live Look. Extension development is starting to drive me mad. I’ve been using some code I found inside your extensions to check the cache to see if jQuery has already been loaded. It looks similar to this:

$SESS->cache['mdesign'][MD_MU_addon_id]['require_scripts'] = TRUE;

Then a little later on:

if(empty($SESS->cache['scripts']['jquery']['1.2.6']) === TRUE)
{
$myjs .= '[removed]settings['jquery_core_path']).'">[removed]';
$SESS->cache['scripts']['jquery']['1.2.6'] = TRUE;
}

I’m not exactly sure what that is doing, down to the letter, but it seemed to solve a conflict with LG Live Look, but now I’m getting a report that MD Markitup is conflicting with LG Data Matrix (or vice versa 😉 )…pretty sure this is is related to multiple jQuery script tags littering the Control Panel.

Hey Ryan,

The idea of the script is this…

1. Say for something like a custom field… you only want to include the jquery script once, not everything the custom field is used. So I add a request for the $SESS variable which we will check for later:

// this says that you require the scripts for LG Data Matrix
$SESS->cache['lg'][LG_DM_addon_id]['require_scripts']

Next in the show_full_control_panel_end hook I check if the scripts are required and have not been previously included:

$js = '';
if(
    // we haven't already included the script
    isset($SESS->cache['lg'][LG_DM_addon_id]['scripts_included']) === FALSE &&
    // AND a LG Data Matrix field has been rendered
    isset($SESS->cache['lg'][LG_DM_addon_id]['require_scripts']) === TRUE &&
    // AND its a publish or an edit page
    ($IN->GBL('C', 'GET') == 'publish' || $IN->GBL('C', 'GET') == 'edit')
)
{
    // include jquery
    if(empty($SESS->cache['scripts']['jquery']['1.2.6']) === TRUE)
    {
        $js .= "\n{script type='text/javascript' charset='utf-8' src='{$this->settings['jquery_core_path']}'}{/script}";
        $SESS->cache['scripts']['jquery']['1.2.6'] = TRUE;
    }
    // include jquery ui
    if(
        empty($SESS->cache['scripts']['jquery']['ui']['core']['1.6.0']) === TRUE ||
        empty($SESS->cache['scripts']['jquery']['ui']['interactions']['1.6.0']) === TRUE 
    )
    {
        $js .= "\n{script type='text/javascript' charset='utf-8' src='{$this->settings['jquery_ui_path']}'}{/script}";
        $SESS->cache['scripts']['jquery']['ui']['core']['1.6.0'] = TRUE;
        $SESS->cache['scripts']['jquery']['ui']['interactions']['1.6.0'] = TRUE;
    }
    // include data matrix scripts
    $js .= "\n{script type='text/javascript' charset='utf-8' src='". $PREFS->ini('theme_folder_url', 1) . "cp_themes/".$PREFS->ini('cp_theme')."/lg_data_matrix/js/admin_publish.js'}{/script}";
    // make sure we don't add it again
    $SESS->cache['lg'][LG_DM_addon_id]['scripts_included'] = TRUE;

}

Now this approach only works if everyone is checking that they are not overwriting each others jquery which is not always the case. Also different versions of jQuery might mess it up as well.

The idea is which ever extension gets called first includes the jquery lib. Every extension after that checks to see if it has already been included. If so great (only on http request), if not add it.

In the future I will be adding a second fallback to check if the path is blank. If it is do not try and add jquery. Of course this will only partially fix the problem we have at the moment.

Thanks for trying to understand my code and implement inclusion of jquery in the least harmful way.

I’m finding that the following works pretty well. For example, in Leevi’s LG Live Look (which seems to not play nice with LG Data Matrix, you’ll see this around line 323:

if(empty($SESS->cache['scripts']['jquery']['1.2.6']) === TRUE)
{
$js .= "\n[script type='text/javascript' charset='utf-8' src='".
$this->settings['jquery_core_path']."'][/script]";
$SESS->cache['scripts']['jquery']['1.2.6'] = TRUE;
}

Removing the version specific checking seems to fix things (thanks, Victor):

if(empty($SESS->cache['scripts']['jquery']) === TRUE)
{
$js .= "\n[script type='text/javascript' charset='utf-8' src='".
$this->settings['jquery_core_path']."'][/script]";
$SESS->cache['scripts']['jquery'] = TRUE;
}

I’m not sure if that will lead to other problems, but I have that code in LG Data Matrix, LG Live Look, and MD Markitup, and all three of those on one Publish/Edit page working together in perfect harmony - and only loading jQuery once in the header, not three times.

Can we get a “best practice” recommendation? How about a 1st Party Extension called jQuer-EE-CP whose sole purpose is to load jQuery in the Control Panel, and developers should check for its presence if they want to use jQuery? I could have written 3 more useful addons in the time it’s taking to figure out this script issue! 😉