How to remove already generated script tag and re-generate?

Question

I am facing a critical problem. I have a page that has two parts. On the first part of the page, the html is rendered through an ajax request. And on the second page, the html is rendered on page load. Fist part of the page is handled separately having different pagination script. Pagination is also handled by sending ajax request to the same url.

I have a problem with part one. The script that generates the html for part one is also generating a lot of javascript tags and html using javascript. Now what I am doing when inserting a new script tag in that html is like this:

var script   = document.createElement("script");
script.type  = "text/javascript";
script.text  = "window.twttr = (function (d,s,id) {var t, js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;js.src=\"//platform.twitter.com/widgets.js\"; fjs.parentNode.insertBefore(js, fjs);return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });}(document, \"script\", \"twitter-wjs\"));(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return;js = d.createElement(s); js.id = id; js.src = \"//connect.facebook.net/en_GB/all.js#xfbml=1\"; fjs.parentNode.insertBefore(js, fjs);}(document, \"script\", \"facebook-jssdk\"));var script_generated=1";               // use this for inline script
document.body.appendChild(script);

It is in fact Twitter and Facebook connect statements to show a Facebook like button and a Twitter button on each item of the first part of the page. When the page loads for the first time, the script tag is generated successfully. But when I click on pagination, it sends a new ajax request to have html for a new page, it also generates the same script tag again. So on the second page my Twitter button and Facebook like buttons are not being shown.

I though it was due to double connecting statements of Facebook and Twitter. Then I generate a variable and set some value while generating that script tag. And on each request I check whether that variable exists or not. If it exists I don't generate that particular script tag like this:

if(typeof script_generated === "undefined") {
  var script   = document.createElement("script");
  script.type  = "text/javascript";
  script.text  = "window.twttr = (function (d,s,id) {var t, js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;js.src=\"//platform.twitter.com/widgets.js\"; fjs.parentNode.insertBefore(js, fjs);return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });}(document, \"script\", \"twitter-wjs\"));(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return;js = d.createElement(s); js.id = id; js.src = \"//connect.facebook.net/en_GB/all.js#xfbml=1\"; fjs.parentNode.insertBefore(js, fjs);}(document, \"script\", \"facebook-jssdk\"));var script_generated=1";
           // use this for inline script
  document.body.appendChild(script);
} 

Doing this script tag is not regenerated but the tweet and Facebook like buttons still don't show up.

Now what I have interpreted (I might be wrong) that as the script tags are generated by ajax request the buttons are not properly displayed as they don't find their script tags.

Now what I want is that whenever a request is sent to that file, it first checks whether that particular script tag exists, deletes that if it exists and generate a new one, else generate. Please guide me how to do this.

If I have interpreted the problem wrong, then please let me know what is the exact problem and how to overcome this.

Answer 1

Well you can give id to script tag when you are adding dynamically.

var script   = document.createElement("script");
script.setAttribute('id', 'addedScript');
script.type  = "text/javascript";
script.text  = "window.twttr = (function (d,s,id) {var t, js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;js.src=\"//platform.twitter.com/widgets.js\"; fjs.parentNode.insertBefore(js, fjs);return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });}(document, \"script\", \"twitter-wjs\"));(function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return;js = d.createElement(s); js.id = id; js.src = \"//connect.facebook.net/en_GB/all.js#xfbml=1\"; fjs.parentNode.insertBefore(js, fjs);}(document, \"script\", \"facebook-jssdk\"));var script_generated=1";
// use this for inline script
document.body.appendChild(script);

After that you can check if script tag exists by using this and remove using .remove() query function.

if(addedScript != undefined) {
  $("#addedScript").remove();
} 

Answer 2

Hi you can get the reference object for that script tag and you can change the referenced src file using object.

It should be like this,

var $jsRef = $('<script type="text/javascript" >').appendTo(document.body);
$jsRef.attr("src","jsFileName.js");

// You can also add content like this
$jsRef.append(content);


// You can change the js file name or content the same way
$jsRef.attr("src","newJSFileName.js");

// Changing the content like this
$jsRef.empty();
$jsRef.append(content);

ALternatively you can set the id for script tag and change the content based on the id instead of accessing with objects.