We Keep Coding

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

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,

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.

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.
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).
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.

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.

How to add custom code to prestashop

I am trying to add the following code to my prestashop site to be able to display my google trusted site badge:
<!-- BEGIN: Google Trusted Stores -->
<script type="text/javascript">
var gts = gts || [];
gts.push(["id", "STORE_ID"]);
gts.push(["badge_position", "BOTTOM_RIGHT"]);
gts.push(["locale", "english_australia"]);
gts.push(["google_base_offer_id", "ITEM_GOOGLE_SHOPPING_ID"]);
gts.push(["google_base_subaccount_id", "ITEM_GOOGLE_SHOPPING_ACCOUNT_ID"]);
gts.push(["google_base_country", "ITEM_GOOGLE_SHOPPING_COUNTRY"]);
gts.push(["google_base_language", "ITEM_GOOGLE_SHOPPING_LANGUAGE"]);
(function() {
var gts = document.createElement("script");
gts.type = "text/javascript";
gts.async = true;
gts.src = "https://www.googlecommerce.com/trustedstores/api/js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(gts, s);
})();
</script>
<!-- END: Google Trusted Stores -->
i need it to be visible on every page and no matter what i do, i cant get it to display the badge.

most likely you need installing a module to add custom html.
here is one to add on the bottom/footer area.
http://www.prestashop.com/forums/topic/165066-free-prestashop-module-easy-footer/
you can add custom html content on footer area and it will be visible to whole website.

It's a little bit late, but the easiest way is to create a js file, and put it in your theme script folder : /themes/yourtheme/js/autoload
That way it's loaded on every pages.

The simplest way is to insert your code in header.tpl.

Loading different JS file for iPad only?

I am trying to load a different Javascript file if the site is viewed on ipad.
I have the following code but it puts the code in head section (between head tags) because of this line of code:
var h = document.getElementsByTagName('head')[0];
I was just wondering how I can place the code where ever I want i.e. between a div without name or at the bottom of the page instead of placing automatically in between the head tags?
<script language="javascript">
if (navigator.userAgent.match(/iPad/i) != null){ // may need changing?
var js = document.createElement('script');
js.type = "text/javascript";
js.src = "mainaPPiPad.js";
var h = document.getElementsByTagName('head')[0];
h.appendChild(js);
}
</script>
Thanks in advance

You need to change this line to point at another element in the document:
var h = document.getElementsByTagName('head')[0];
To append it to the end of <body>, you'd do:
var h = document.getElementsByTagName('body')[0];
Or to append it to <div id="foobar">:
var h = document.getElementById('foobar');

Just select the element via JavaScript and append it. For example:
<div id="magic-div"></div>
document.getElementById('magic-div').appendChild(myNode);

Javascript widget inside JQuery

We are using the Ning platform, and in order to add a new container DIV underneath the blog content (but before the comment section), we added the following before the body tag:
<script type="text/javascript">
if (typeof(x$) != 'undefined') {
x$("DIV.xg_module.xg_blog.xg_blog_detail.xg_blog_mypage.xg_module_with_dialog").after('<div>CONTENT GOES HERE </div>');
}
else{
}
</script>
However, then the content we need to load is javascript from an affiliate program, who sent us this code to add into that div:
<div style="width:750px;">
<div style="border-bottom:1px solid #FFFFFF;color:#FFFFFF;font-family:Arial,Helvetica,sans-serif;font-size:22px;font-weight:bolder;margin-bottom:10px;padding-bottom:2px;text-transform:uppercase;">From Around the Web</div>
<script type='text/javascript'>
var _CI = _CI || {};
(function() {
var script = document.createElement('script');
ref = document.getElementsByTagName('script')[0];
_CI.counter = (_CI.counter) ? _CI.counter + 1 : 1;
document.write('<div id="_CI_widget_');
document.write(_CI.counter+'"></div>');
script.type = 'text/javascript';
script.src = 'http://widget.crowdignite.com/widgets/29949?_ci_wid=_CI_widget_'+_CI.counter;
script.async = true;
ref.parentNode.insertBefore(script, ref);
})(); </script>
</div>
And obviously, that does not work.
THE QUESTION: is there a better way to do this? Is it just a matter of all the conflicting 's and "s? Is there an easier way to format this or output it? Is it failing because it's simply not loading the javascript after the JQuery has already run post-page load? I have been trying different things and none seem to work and my eyes are ready to pop out of their sockets because I know there's something stupid I'm missing, so I thought I'd get some more eyes on it.
Thanks for any help/ideas/suggestions.

Try appending your new script element to the head element on your page. Most dynamic script loaders do this.
See Ways to add javascript files dynamically in a page for an example.

How to implement Facebook conversion tracking onclick or when there's no separate 'Thank you' page

Trying to implement Facebook conversion tracking within a Facebook Tab. You can view the page here http://www.facebook.com/StChristophersFellowship/app_366591783429546 the issue is a separate page is not run once the form has been submitted. Can I make a section of javascript run but ONLY onclick of the submit button, I think it also has the be injected into the head of the HTML doc.
I found this answer to running Javascript from a link or click - Will this method work if I call the tracking/conversion code from a separate JS doc?
Any help would be greatly appreciated - Thanks!
"I have to agree with the comments above, that you can't call a file, but you could load a JS file like this, I'm unsure if it answers your question but it may help... oh and I've used a link instead of a button in my example...
<a href='linkhref.html' id='mylink'>click me</a>
<script type="text/javascript">
var myLink = document.getElementById('mylink');
myLink.onclick = function(){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "Public/Scripts/filename.js.";
document.getElementsByTagName("head")[0].appendChild(script);
return false;
}
</script>"

I tried using Nicolás solution but the conversion was never verified.
However I found an article (archived version) describing a technique that worked instantly, using the URL from <noscript><img src="..." /></noscript>.
Place an element on your page like:
<div id="fb_pixel"></div>
Then declare these CSS rules for your conversions, changing the background-image for the <noscript> URL found in your own tracking code.
#fb_pixel { display:none; }
.fb_conversion
{
background-image: url('https://www.facebook.com/offsite_event.php?id=33333333333&value=0&currency=USD');
}
When you want the tracking to occur (e.g. upon AJAX form submission), you add the fb_conversion class to the <div> using JavaScript. For instance, with jQuery:
$("#fb_pixel").addClass("fb_conversion");
This will make the browser load the image, thus tracking your conversion.

I had a similar issue, I solved it putting the AJAX call on the tacking callback. As follows:
$(function () {
$('#btnSend').click(facebookTrackingSendClick);
});
function facebookTrackingSendClick(e) {
e.preventDefault();
var clickedElement = this;
var fb_param = {};
fb_param.pixel_id = '123';
fb_param.value = '0.00';
fb_param.currency = 'BRL';
(function () {
var fpw = document.createElement('script');
fpw.async = true;
fpw.src = '//connect.facebook.net/en_US/fp.js';
fpw.onload = function () {
// Callback here.
};
var ref = document.getElementsByTagName('script')[0];
ref.parentNode.insertBefore(fpw, ref);
})();
}