Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I ran into this when attempting to integrate Dropbox's drop in chooser API to a plugin I'm writing.

The API documentation instructs you to place the following script tag at the top of your file:

<script type="text/javascript" src="https://www.dropbox.com/static/api/1/dropins.js" id="dropboxjs" data-app-key="MY_APP_KEY"></script>

All fine and good, and it actually works when I directly paste it into the page that is called in the admin section. But, I'd like to use some variation of wp_register_script(), wp_enqueue_script() and wp_localize_script() to pass the necessary id and data-app-key.

I've tried a couple different variations of this:

add_action('admin_enqueue_scripts', 'add_dropbox_stuff');
function add_dropbox_js() {
    wp_register_script('dropbox.js','https://www.dropbox.com/static/api/1/dropins.js');
    wp_enqueue_script('dropbox.js');
    wp_localize_script('dropbox.js','dropboxdata',array('id'=>"dropboxjs",'data-app-key'=>"MY_APP_KEY"));
}

And:

add_action('admin_enqueue_scripts', 'add_dropbox_stuff');
function add_dropbox_stuff() {
        wp_register_script('dropbox.js','https://www.dropbox.com/static/api/1/dropins.js');
        wp_enqueue_script('dropbox.js');
        wp_localize_script('dropbox.js','dropboxdata',array(array('id'=>"dropboxjs"),array('data-app-key'=>"MY_APP_KEY")));
    }

MY_APP_KEY is replaced with the appropriate application key in my code. Would appreciate any direction. Thanks.

EDIT: Also tried to do it with some jquery, but to no avail. Tried it on document load and on document ready. I get a {"error": "Invalid app_key"} return.

$('script[src="https://www.dropbox.com/static/api/1/dropins.js?ver=3.6"]').attr('id','dropboxjs').attr('data-multiselect','true').attr('data-app-key','MY_APP_KEY');
share|improve this question
2  
What wp_localize_script do is print a json-encoded object in the html output of the page. This object is recognized by the script and so you can use it. What you need is to add some attributes to script tag, and so wp_localize_script can't help you. –  G. M. Aug 20 '13 at 20:10
2  
G. M. is correct that wp_localize_script doesn't create script attributes. But is it possible to pass the app key directly into dropbox.js? Just a guess but have you tried array('appKey'=>"MY_APP_KEY")? This is the code that grabs the key from the attribute if(!Dropbox.appKey){Dropbox.appKey=(e=document.getElementById("dropboxjs"))!=nu‌​ll?e.getAttribute("data-app-key"):void 0} –  epilektric Aug 20 '13 at 20:21
    
Hey @epilektric Could you put that in an answer? I'm not quite following how to implement it. –  Andrew Bartel Aug 20 '13 at 21:40
    
@epilektric with wp_localize_script sure you can pass attributes to the script. I really don't know if this will work or not, however it is not a worpress related matter. –  G. M. Aug 20 '13 at 22:00
    
@AndrewBartel I'm not really sure how either. Maybe this will help. pippinsplugins.com/use-wp_localize_script-it-is-awesome –  epilektric Aug 20 '13 at 23:39

5 Answers 5

up vote 5 down vote accepted
+50

you can try to use the script_loader_src filter hook e.g:

add_filter('script_loader_src','add_id_to_script',10,2);
function add_id_to_script($src, $handle){
    if ($handle != 'dropbox.js') 
            return $src;
    return $src."' id='dropboxjs' data-app-key='MY_APP_KEY";
}

Update

i just figured it out myself that the src is escaped by esc_url, so looking a bit more i found the clean_url filter which you can use to return the value with your id and app key data :

add_filter('clean_url','unclean_url',10,3);
function unclean_url( $good_protocol_url, $original_url, $_context){
    if (false !== strpos($original_url, 'data-app-key')){
      remove_filter('clean_url','unclean_url',10,3);
      $url_parts = parse_url($good_protocol_url);
      return $url_parts['scheme'] . '://' . $url_parts['host'] . $url_parts['path'] . "' id='dropboxjs' data-app-key='MY_APP_KEY";
    }
    return $good_protocol_url;
}
share|improve this answer
    
It doesn't work. Before being printed, the result of 'script_loader_src' is escaped, so quotes are stripped out and what you output is recognized as part of 'src' attribute and not as separate attributes. This code will put in the html markup something like <script type='text/javascript' src='https://www.dropbox.com/static/api/1/dropins.js?ver=3.6&#039;id=&#039;dropb‌​oxjs&#039;data-app-key=&#039;MY_APP_KEY'></script> –  G. M. Aug 28 '13 at 7:21
    
yea i updated my answer. –  Bainternet Aug 28 '13 at 7:29
3  
I've tested code after my edit and it works. Thank for teaching something to me with this. –  G. M. Aug 28 '13 at 7:45
1  
I think OP will be happier than you an me. ;) –  G. M. Aug 28 '13 at 7:49
1  
Thanks @Bainternet for your help, got it working using your answer. –  Andrew Bartel Aug 29 '13 at 23:40

I did some checking in the dropbox.js code (v2) to see what was happening and how to best solve this. As it turns out, the data-app-key is only used to set the variable Dropbox.appKey. I able to set the variable with the following extra line.

Using the javascript example on the Dropbox page https://www.dropbox.com/developers/dropins/chooser/js:

<script>
Dropbox.appKey = "YOUR-APP-ID";
var button = Dropbox.createChooseButton(options);
document.getElementById("container").appendChild(button);
</script>

In my code I set the Dropbox.appKey in every place where I reference the Dropbox javascript routines. Doing this allowed me to use wp_enqueue_script() without the extra parameters.

share|improve this answer

From Bainternet's reply above. This code worked for me.

function pmdi_dropbox( $good_protocol_url, $original_url, $_context){
    if ( FALSE === strpos($original_url, 'dropbox') or FALSE === strpos($original_url, '.js')) {
        return $url;
    } else {
        remove_filter('clean_url','pmdi_dropbox',10,3);
        $url_parts = parse_url($good_protocol_url);
        return $url_parts['scheme'] . '://' . $url_parts['host'] . $url_parts['path'] . "' id='dropboxjs' data-app-key='APIKEY";
    }
}

Edit: The only difference from the Bainternet code is, I added a condition to check if the script URL is dropbox and it is a .js file.

I'm ignoring all the other URL's and rewriting the dropbox URL.

share|improve this answer
1  
Please add some explanation on what you change and why you changed it (or had to change it). –  t f Feb 17 at 12:42

I did this with my eCards plugin and it's really simple.

Here's a direct copy/paste from the plugin:

$output .= '<!-- https://www.dropbox.com/developers/chooser -->';
$output .= '<script type="text/javascript" src="https://www.dropbox.com/static/api/1/dropbox.js" id="dropboxjs" data-app-key="' . get_option('ecard_dropbox_private') . '"></script>';
$output .= '<p><input type="dropbox-chooser" name="selected-file" style="visibility: hidden;" data-link-type="direct" /></p>';

Notice the API key is passed via an option.

share|improve this answer
    
How is $output used? Echoed? Add to wp_print_scripts()? –  Andrew Bartel Aug 26 '13 at 21:57
    
It is either returned or echoed, depending on your function. –  Ciprian Aug 27 '13 at 10:23

OK, it seems (to me) that with wp_enqueque_scripts is not possible to print the id and the app key as script tag attributes.

I'm sure at 90%, because WP_Dependencies is not a class that I know well, but looking at the code It seems not possible to me.

But I'm sure at 100% that using wp_localize_script is not useful for your scope.

As I said in my comment above:

What wp_localize_script do is print a json-encoded object in the html output of the page. This object is recognized by the script and so you can use it.

What I've not said in the comment is that the json-encoded object as an arbitrary name that you decide, in fact, looking at the syntax:

wp_localize_script( $handle, $object_name, $l10n );

The object named $object_name could be used by the script because is in the global scope and printed in the html of the page.

But the $object_name is a name that you decide, so it can be everything.

So ask to yourself:

how the script in the remote dropbox server can make use of a variable that they don't know how is called?

So there is no reason at all to pass id and/or app key to the script with wp_localize_script: you have just to print them as script tag attributes as is said in Dropbox API docs.

I'm not a js developer, but I think what dropbox script does is:

  1. get all <script> html elements in the page
  2. cycle through them looking for the one with the 'id' == 'dropboxjs'
  3. if that script is found, looking at the 'data-app-key' of that script
  4. check if that app key (if present) is a valid one and authorize you if so

Please, note that I don't know this for sure, I'm just guessing.

In this way, the script loaded from the dropbox server can check your app key in a way that is easy for them and easy to implement for you.

Because in the first sentence I've said that is not possible to print the id and the app key in the script using wp_enqueque_scripts, moral of the story is that you have to print them in the markup in another way.

A way that not smells too much (when there are no alternatives) is to use wp_print_scripts hook to print the script tag:

add_action('wp_print_scripts', 'do_dropbox_stuff');

function do_dropbox_stuff() {

  if ( ! is_admin() ) return; // only for admin area

  $app_key = 'MY_APP_KEY';

  // why do not create an option for it?
  // $app_key = get_option('dropbox_app_key');

  if ( empty($app_key) ) return;

  echo '<script type="text/javascript" src="https://www.dropbox.com/static/api/1/dropins.js" id="dropboxjs" data-app-key="' . esc_attr($app_key) . '"></script>';

}
share|improve this answer
    
Thanks G.M., I got it to work using this. I'm interested to see if there's alternative solutions using the enqueue hooks but I appreciate all the thought you put into the answer. –  Andrew Bartel Aug 26 '13 at 21:59
    
@AndrewBartel I think there is no way to use wp_enqueque_scripts in your case, but if you find one, let us know! :) –  G. M. Aug 27 '13 at 0:37

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.