Update src of script tag using jQuery - reload a script with jQuery without refreshing page

Question

The question says it all. How to update the "src" of script tag using jQuery. Let say, I have a script,

 <script id="somescript" type="text/javascript" src=""></script>

So when I a click on a button, the src of the script must be added. Like,

 <script id="somescript" type="text/javascript" src="linktoscript.js"></script>

I am doing it with a click handler like this, using the following code.

$("#somescript").attr("src","linktoscript.js");

It actually updates the src but when I check it via firebug, it tells me to refresh the page to get the script working.

Research:

After some research, I've found $.get() of jQuery would do the job and yes, it loads the script. But it is not getting my job done.

The Actual Problem:

I am trying to load Google's conversion code using Ajax on successful form submission.

Here is the part of the Ajax script that should work for the Google's conversion code.

                    if (res == "yes") {
                        $('#success').fadeIn().delay(5000).fadeOut();
                        $('#regform')[0].reset();
                        window.location.href = '#'; 
                        /* <![CDATA[ */
                        var google_conversion_id = xxxxxxxxx;
                        var google_conversion_language = "en";
                        var google_conversion_format = "2";
                        var google_conversion_color = "ffffff";
                        var google_conversion_label = "CiaXCOXjzlcQy__EyQM";
                        var google_remarketing_only = false;
                        /* ]]> */

 $.getScript("http://www.googleadservices.com/pagead/conversion.js");   
  }

It loads the conversion script but when I check it from firebug, all the values of the conversion variables are null. So I am giving it a try by putting all of the conversion code into the html file and then load the conversion script like,

 <script type="text/javascript">
  /* <![CDATA[ */
  var google_conversion_id = xxxxxxxxx;
  var google_conversion_language = "en";
  var google_conversion_format = "2";
  var google_conversion_color = "ffffff";
  var google_conversion_label = "CiaXCOXjzlcQy__EyQM";
  var google_remarketing_only = false;
  /* ]]> */ 
 </script>

 <script type="text/javascript" src="#"></script> <!--Update this src-->

 <noscript>
  <div style="display:inline">
   <img height="1" width="1" style="border-style:none;" alt="" src="#" />
  </div>
 </noscript>

Any Help?

Link:

Here is the link to the live site : Link

Update: This is what I get. In the firebug's script panel, after form submission,

Answer 1

It would appear that the Google conversion script relies on google_conversion_id, google_conversion_language, etc. to be available as global variables. Presuming that the code you have there is executing inside a function (which would make sense if this is inside an event), the code you have there will not work because the variables will be local to the function they are in, and the google code will have no way to get at them.

There are two things you can do.

One is to define those variables in the global scope ahead of time, i.e. do this:

<script type="text/javascript">
  /* <![CDATA[ */
  var google_conversion_id = xxxxxxxxx;
  var google_conversion_language = "en";
  var google_conversion_format = "2";
  ...
</script>

(you can also put these in an external script file and load that file when the page loads:

If you do that, you can load the google conversion script whenever you want, and it will be able to access those variables:

$.getScript("http://www.googleadservices.com/pagead/conversion.js");   

The other option is to assign your variables to the window object right before you load the script, which is equivalent to putting them in the global scope:

if (res == "yes") {
    $('#success').fadeIn().delay(5000).fadeOut();
    $('#regform')[0].reset();
    window.location.href = '#'; 

    window.google_conversion_id = xxxxxxxxx;
    window.google_conversion_language = "en";
    window.google_conversion_format = "2";
    window.google_conversion_color = "ffffff";
    window.google_conversion_label = "CiaXCOXjzlcQy__EyQM";
    window.google_remarketing_only = false;

    $.getScript("http://www.googleadservices.com/pagead/conversion.js");   
}

---

Note: regarding the issue that this question was originally about, you can't load a script by changing the src attribute of an existing script element:

http://jsfiddle.net/5vf6b924/

Once a script element has loaded whatever is indicated by the src (even if it's #), it is essentially "used up" and won't load anything else.

What you can do is to create a new script element and add it to the DOM:

http://jsfiddle.net/ydu52cn1/

That should succeed in loading the script (asynchronously).

As you've found, jQuery also provides the $.getScript convenience method for this.

Answer 2

At the end, the following did the job for me. Thanks to JLRishe and A. Wolff for their support.

In my previous code, there were two problems.

1. I was not inserting the "img" element along with other conversion code. (Silly mistake but I was working with conversion code for the first time. So please pardon me).
2. Inserting src of the "img" tag in the default format would give error. The default & would render Invalid URL encode error upon AJAX response. Thanks for Tag Assitant. Rather than using &, use & directly like this.

www.googleadservices.com/pagead/conversion/xxxxxxxxx/?label=CiaXCOXjzlcQy__EyQM&guid=ONscript=0

Here is what finally worked for me.

    if (res == "yes") {
        $('#success').fadeIn().delay(5000).fadeOut();
        $('#regform')[0].reset();   

        <!-- Google Code for Lead Conversion Page -->                           
         /* <![CDATA[ */
         window.google_conversion_id = xxxxxxxxx;
         window.google_conversion_language = "en";
         window.google_conversion_format = "2";
         window.google_conversion_color = "ffffff";
         window.google_conversion_label = "CiaXCOXjzlcQy__EyQM";
         window.google_remarketing_only = false;
         /* ]]> */
         $.getScript("//www.googleadservices.com/pagead/conversion.js");                            

         window.scriptTag2 = document.createElement('noscript');
         window.imgTag = document.createElement('img');
         imgTag.height = 1;
         imgTag.width = 1;
         imgTag.border = 0;
         imgTag.src = "//www.googleadservices.com/pagead/conversion/xxxxxxxxx/?label=CiaXCOXjzlcQy__EyQM&guid=ONscript=0";                                  

    }

I hope it will help the someone else with the same problem. Thank you.

Answer 3

You could append the script tag to the DOM

if (yourCondition === true) {
$('head')
    .append($('<script id="somescript" type="text/javascript" src="linktoscript.js"></script>'));
}

The script is loaded at the moment it is appended, that way you have total control of when it is loaded.