We Keep Coding

Changing <script> tag dynamically with jQuery

I've been trying to figure out if it's possible to dynamically change the src of a <script> tag (or load a new script tag) and have the previous script no longer execute. Example below:
index.html
<button id="action">Click</button>
<script id="javascript-file-script" type="text/javascript" src="/js/oldjsfile.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#javascript-file-script").remove();
setTimeout(function() {
$('body').append('<script id="javascript-file-script" src="/js/newjsfile.js" type="text/javascript"><\/script>')
}, 100);
});
</script>
oldjsfile.js
$(document).ready(function() {
console.log('old file loaded');
$('#action').click(function() {
alert('old');
});
});
newjsfile.js
$(document).ready(function() {
console.log('new file loaded');
$('#action').click(function() {
alert('new');
});
});
Before changing the javascript file, clicking on #action would have 1 alert "old". Once I change the script, and click on #action I get both alerts "old" and "new". Is there a way to "unload" the previous file so that the original click function is removed/not executed?
I'm looking for a solution other than changing ids or editing the scripts. I'm thinking this isn't possible because the script is already in memory.

That isn't possible. It is already loaded and running. You should consider using .on and .off for binding to the click event.

To begin, you definitely do not want to load and unload scripts as that will cause other problems and loading scripts should be done asynchronously.
For your first event, you did everything fine.
For the second event, it has to happen when something else happens. In my snippet below, I created another button and when that was clicked it took off the old event and added the new one. This doesn't have to happen on button click it can be on anything but you have to remove the old event with unbind and create a new one just like you did originally.
To try the example below, click the first button and you'll see an alert of 'old'. Then click on the second button and click on the first button again and you'll see 'new'.
$(document).ready(function () {
// The original click event.
$('#action').click(function () {
alert('old');
});
// Let's set up a reference to our new button which will cause the #action click to change.
$('#changeAction').click(function () {
// Unbind the previous click event associated with #action:
$('#action').unbind('click');
// Create the new click event.
$('#action').click(function () {
alert('new');
});
});
});
<button id="action">Click</button>
<button id="changeAction">Click me to change the action of the first button</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

how should i have a javascript animation execute when the page loads?

I dont want to use css3 transition, keeping it pure .js. let assume the following link
when you click, div(s) appear, but how can i get the same function run when the page load/open rather than triggering the function by clicking on btn.??

In this case, they were showing it to you in jQuery, and they were already wrapping it in a function that is not executed until the page is loaded. You just need to remove the "guts" of the click handler and call it directly.
Change:
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
To:
$(document).ready(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});

Trigger the event on pageload or what jquery calls it, document.ready
$(document).ready(function() {
// do whatever.
});
document.ready short version
$(function () {
// do whatever.
});

jQuery trigger click event not working on div

I want to trigger a click event on a div. I use the following code but it is not working.
$('#showbanner').trigger('click');
<div id="showbanner">show banner</div>
What is that I am doing wrong? I actually want to show the banner 2 seconds after page is loaded. Before I could add delay event my click event for this div is not firing.
Here is my code example: http://codepen.io/anon/pen/aOzyxo

The issue is because your trigger('click'); call is the first thing in your script; it's called before the event is attached.
You need to move it to the end of the script so that the event handlers are bound when it is called:
Updated Codepen

enter code here
Try this .
$(function () {
$(document).on("click", "#showbanner", function () {
alert('Hola');
});
$("#showbanner").click();
});
show banner

Try this
JS
$('#showbanner').on("click", function() {
alert("test");
});
$('#showbanner').trigger('click');
HTML
<div id="showbanner">show banner</div>

Try this
$('#showbanner').on("click", function() {
alert("test");
});
$('#showbanner').click();

Bind .unload() or .onbeforeunload() to dynamically created iframe

I need to append a spinner every time the iframe unloads and clear them on iframe load. I tried to set iframe.unload() and iframe.onbeforeunload() but nothing working. Here is my code block,
var iframe = $('<iframe/>'), $this = $('div#iframeContainer');
iframe.attr('src', url).load(function() {
alert('iframe onload!');
}).unload(function() {
alert("iframe unload");
});
$this.append(iframe);
The jQuery .load() works fine for me, but .unload() is never called. I even tried to bind the unload event to the iframe.contents().find('body'), but that too didn't work.

Try using this :
document.getElementById("your_iframe").addEventListener("unload", function(){
//action here
});

Show jquery mobile dialog only once on startup (web app)

My problem is that following code works fine (dialog show once on startup), but when I navigate to another page (with standard ajax activated), and then navigate back to the first page, the dialog is showing again (and then in a loop manner when I click "dismiss").
What am I doing wrong?
Code looks like that:
$(document).on('pageinit', '#pageindex', function(event) {
setTimeout(function(){
$('#dialog').click();
$('#dialog').remove();
},1000);
});

For a quick fix, replace .on with.one. However, normally pageinit event should fire once only, so there must be something causing it to fire multiple times.

The following code is executed once on single/multipage page and multiple pages approach:
$(document).on('pageinit', '#pageindex', function (event) {
$(this).off(event);
setTimeout(function () {
$('#dialog').click();
$('#dialog').remove();
}, 1000);
});