Changing Javascript method to Jquery

Question

So I have the following Jquery calling a Javascript method

$j("a.Pinterest").attr("href", "javascript:void(addScript());");

And this is the Javascript Method

   function addScript() {
    var e = document.createElement('script');
    e.setAttribute('type', 'text/javascript');
    e.setAttribute('charset', 'UTF-8');
    e.setAttribute('src', 'http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random() * 99999999);
    return document.body.appendChild(e);
}

I was wondering if there was a way to have it all in Jquery ?

Have a look at the jQuery documentation: http://api.jquery.com/jQuery.getScript/ — Felix Kling, Apr 13 '12 at 15:47
Duplicates: http://stackoverflow.com/questions/4881164/loading-an-external-script-after-page-load-with-jquery, http://stackoverflow.com/questions/9441142/load-external-js-file-with-jquery, http://stackoverflow.com/questions/5624366/dynamically-load-external-js-and-write-response-to-a-div, http://stackoverflow.com/questions/4361033/jquery-load-script-on-click — Felix Kling, Apr 13 '12 at 15:48
Instead of injecting inline JavaScript with jQuery, use a jQuery click handler. — Sparky, Apr 13 '12 at 15:48

score 1 · Answer 1 · answered Apr 13 '12 at 15:48

http://api.jquery.com/jQuery.getScript/

$.getScript("http://assets.pinterest.com/js/pinmarklet.js")
    .done(function(script, textStatus) {
     console.log( textStatus );
 })

edit: I didn't try this, I just took your address and threw it in the getScript demo.

score 1 · Accepted Answer · answered Apr 13 '12 at 15:55

1

$j("a.Pinterest").attr("href", "javascript:void(addScript());");

Please don't do this. I suggest using a click handler.

$j("a.Pinterest").click(addScript);

And then in your addScript you can use getScript to load the script.

function addScript(e) {
    e.preventDefault();
    $j.getScript('http://assets.pinterest.com/js/pinmarklet.js');
}

answered Apr 13 '12 at 15:55

gen_Eric

223,194
41
299
337

1

Finally. +1 for nuking that inline garbage. – Sparky Apr 13 '12 at 15:58
This works fine but how can I add the link cursor when hovering over the selected link – StevieB Apr 13 '12 at 17:23
@StevieB: You need to give it something as the `href` attribute. Try `$j("a.Pinterest").attr("href", "#");`, or add `href="#"` to the link in the HTML. – gen_Eric Apr 13 '12 at 17:40
Is this a good solution to ? $j("a.Pinterest").css('cursor', 'pointer'); – StevieB Apr 13 '12 at 19:01

score 0 · Answer 3 · answered Apr 13 '12 at 15:50

function addScript() {
      return $('<script/>',{
                          'type':'text/javascript',
                          'charset':'UTF-8',
                          'src':'http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random() * 99999999 
              }).appendTo("body")[0];
}

score 0 · Answer 4 · answered Apr 13 '12 at 15:51

You can create elements in jQuery using the $ selector.

$('<script></script>')

jQuery is also chainable, so you can have this:

$('<script></script>')
    .attr({
        'type' : 'text/javascript',
        'charset', 'UTF-8',
        'src' : 'http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random() * 99999999)
     })
     .appendTo(whatever)

If you're doing conditional script loading, you might want to take a look at the yepnope library.

I would question why you're dynamically added a script to the page on a button click. Seems like you would want the script ready and waiting for the user to click. If you're worried about load time, but the script tag at the bottom of the page to defer the loading.

I just wanted to hide the href attribute from the mark up, since the mark up has to go into content editor for a cms and I didnt want users to mess with it — StevieB, Apr 13 '12 at 15:54

Changing Javascript method to Jquery

4 Answers4