How to prevent repeat in jQuery function? - javascript

I have a simple jQuery function as
$('.button').click(function(){
$("#target").slideToggle().load('http://page');
});
By slideToggle behavior, every click cause a slide, but the problem is that it will load url again too.
How can I limit the load() function to be performed only once, but slideToggle() on every click. In other words, how to prevent load() (only load, not the entire function) in the subsequent clicks?

$('.button')
.on('click.loadPage', function() {
$("#target").load('http://page');
$(this).off("click.loadPage");
})
.on('click.slideToggle', function(){
$("#target").slideToggle();
});
and another way without global vars:
$('.button')
.on('click', function() {
if ( !$(this).data("loaded") ) {
$("#target").load('http://page');
$(this).data("loaded", true);
}
$("#target").slideToggle();
});

Have a variable (global) which says whether it has been loaded or not. E.g:
var loaded = false;
$('.button').click(function(){
if(!loaded){
$('#target').load('http://page');
loaded = true;
}
$("#target").slideToggle();
});
This will cause the slideToggle to occur on every click, but the page to load only the once. :)

Related

Perform a click until the element can actually be clicked

I'm using this javascript code:
document.getElementsByName("commit")[0].click();
to perform a click on a button, the problem is that when I send the command sometimes the page is't loaded , so it can't be clicked .
So how i can perform the click until it actually happens ?
i have tried something like this:
if (document.readyState === 'complete') { //don't work
document.getElementsByName("commit")[0].click();
}
but it doesn't work. (I can't use jquery, cause I'm on a chrome extension)
Firing it on the DOMContentLoaded event should do the trick
document.addEventListener('DOMContentLoaded', function() {
document.getElementsByName("commit")[0].click();
})
Try this
window.onload = function() {
console.log("page loaded");
//your code here
}
I would also be sure that you are including your javascript files at the bottom of the page and not the top.
Try this code:
document.querySelector('#myBtn').addEventListener('click', function () {
// do some stuff here
});

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

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
});

jQuery PageBeforeShow Event Binding Multiple Times

I'm having code like following
$(document).on("pagebeforeshow", "#Newpage", function (event) {
$(".newtext").change( function() {
dostuff();
});
});
Now the problem is every time the NewPage is loaded , the binding of
$(".newtext").change( function()
occurs and it is triggered multiple times.So for 1st time if I open the page dostuff() happens once, if I navigate to some other page and come back to #Newpage again it occurs twice and so on
You can try this:
$(document).one("pagebeforeshow", "#Newpage", function (event)
set isFirstTime value true at very first, best place is deviceready event
window.sessionStorage.setItem("isFirstTime", true);
pagebeforeshow event occurs every time page before loads need to maintain in session storage or localstorage or local variable like that only
$(document).on("pagebeforeshow", "#Newpage", function (event) {
$(".newtext").change( function() {
if(window.sessionStorage.getItem("isFirstTime");){
dostuff();
}
});
});
In your function
function dostuff(){
window.sessionStorage.setItem("isFirstTime", false);
// do your code below...
}
I hope this example helps you problem.

Execute a javascript function on the second load of an iframe

Is there a way to execute a javascript function on the second load of an iframe? Right now I am nesting two addEventListeners:
document.getElementById('my_iframe').addEventListener("load", function() {
document.getElementById('my_iframe').addEventListener("load", doSomething(), true);
}, true);
The first "load" is triggered when I use document.my_iframe.write('...'). I want to trigger an action after I submit a form in the iframe, which is the second "load".
Is there a better way to accomplish my goal?
The event will fire each time the iframe is loaded no need for nesting, just for a counter.
var count;
element.addEventListener("load", function() {
count++;
if(count==2){
//code goes here
}
}, true);

Categories