function on('load' ... ) not working after page refresh - javascript

Helo there.
We have a javascript function when the page is loading, then "open" some stuff. it's made with .on('load', function().
Is works great for the first pageview. but when you refresh the page, the function does not work anymore/is not triggert. when you reload the page with shift+refresh it works again. is there a workaround or another solution?
thanks!
<script>
$('#zoomBtn img').on('load', function() {
$('.zoom').find('#musicinfo').toggleClass('showList');
});
</script>

Probably the images are loaded before you bind the event. Something like this should help.
function showList () {
$('.zoom')
.find('#musicinfo')
.toggleClass('showList');
}
$('#zoomBtn img')
.on('load', showList)
.each( function () {
if (this.complete) {
showList()
}
})

Related

closed! jquery get function and callback

I have a trigger button on my page that activate to load code from another htmldoc into a div on my page.
Works great like here:
https://blog.kulturbanause.de/2012/12/inhalte-per-ajax-jquery-nachladen/
I take this code:
<script>
function kb_source_2_target() {
$.get('source.html', function(data) {
$('#target').html(data);
})
}
</script>
Now I want my trigger-button to start a second function after loading the code in the div.
in the loading code there is a div, f.e. class="divtofadeoutafter loading"
i want to trigger now the loading and then the fadeout of an other div in the loaded content.
Can I do this with a callback?
I tried this:
<script>
function kb_source_2_target() {
$.get('source.html', function(data) {
$('#target').html(data,
function callback(){
$(".divtofadeoutafterloading").fadeOut();
}
);
})
}
</script>
thanks for any idea
stefan
There is no callback in html() so you just need to do it inline since it is a synchronous operation.
function kb_source_2_target() {
$.get('source.html', function(data) {
$('#target').html(data)
$(".divtofadeoutafterloading").fadeOut();
})
}

Call function after window reload using same button

$('#start').click(function () {
window.location.href=window.location.href;
runme();
});
This is my simple goal, every time user click the start button, I want the page to reload but still call the custom rume function. Please let me know if this is possible or there are other way. Thanks in advance.
Whenever you reload the page JS run again from start, So you can't directly trigger some function after page reload.
But in order to achieve this, you can use, sessionStorage
So, you can do something like:
$('#start').click(function () {
sessionStorage.setItem('callRunMe', '1')
window.location.href=window.location.href;
});
//On Page load
$(document).ready(function () {
if (sessionStorage.getItem('callRunMe')) {
runMe();
sessionStorage.removeItem('callRunMe');
}
});
you can set a flag into sessionStorage or localStorage and get the flag after document ready.
var SOTRAGE_NAME = 'needRunme'
$('#start').click(function () {
sessionStorage.setItem(SOTRAGE_NAME, true);
runme();
});
$(document).ready(function(){
var isNeedRunme = sessionStorage.getItem(SOTRAGE_NAME);
if(isNeedRunme){
runme();
}
})
Place your runme inside $(document).ready, and just use location.reload() to reload the page. Use localStorage to make sure this only happens when you click a button:
$(document).ready(() => {
if (localStorage.getItem("clickedStart") runme();
});
$("#start").on("click", () => {
localStorage.setItem("clickedStart", "true");
location.reload();
});

Why ajax is not working after page loaded

I'm using Youtube SPF for my web page and I have a lot of js and they work as expect it's okey so far but my ajax is not working by clicking for example after page loaded if I click any page the page has loaded with ajax but nothing is work..and I want to share with you my instance js which is not working after ajax
for example this code is not work after ajax
$(".all-content-tab .tab-content,.trustyou-tab .tab-content").find(".tab-pane:first").addClass("active");
or this
$(".add-active").find('li:first').addClass("active");
and I change my all event function with this
$(document).on("click","#element",function(){
//
})
instead of this
$("#element").on("click",function(){
//
})
and last thing
my spf function
$(function () {
spf.init();
NProgress.configure({ showSpinner: false });
$(document).on('spfrequest', function (event) {
NProgress.set(0.4);
});
$(document).on('spfprocess', function (event) {
NProgress.set(0.6);
NProgress.set(0.8);
});
$(document).on('spfdone', function (event) {
NProgress.set(1.0);
NProgress.done();
});
$(document).on('spfhistory', function (event) {
NProgress.set(0.7);
NProgress.set(0.9);
NProgress.set(1.0);
NProgress.done();
});
});
how can I fix this problem ? I read all document but nothing could I do

how to unbind onbeforeunload event on javascript function call and page refresh

Please help me how to unbind onbeforeunload event on javascript function call .
Also I want to unbind onbeforeunload on page refresh.
Actually I want to give pop up alert on page exit .For this I have successfully unbinded onbeforeunload from form submit button and anchor tags. Kindly help me. The code I have used is
var jQuery = jQuery.noConflict();
jQuery(document).ready(function() {
jQuery(window).bind("onbeforeunload", function() {
return confirm("Do you really want to close?")
}
);
jQuery('a').on('click', function() {
jQuery(window).unbind('onbeforeunload')
});
jQuery("form").submit(function() {
jQuery(window).unbind('onbeforeunload')
});
});
Thanks
Do some minor change in your code, it will be work
jQuery(document).ready(function () {
window.onbeforeunload = function () {
return confirm("Do you really want to close?")
};
jQuery('a').on('click', function () {
jQuery(window).unbind('onbeforeunload')
});
jQuery("form").submit(function () {
jQuery(window).unbind('onbeforeunload')
});
});
Check this on jqfiddler, Message pop-up showing on refresh click here

Execute JqueryMobile Popup on Jquery timing event

I am having trouble attaching a timing event to my function I want this to on execute the function after 25 seconds. what am I doing wrong?
setTimeout("ajaxTimeout();", 25000);
$(document).on({
//open popup here
'pageshow': function ajaxTimeout(){
$('#askforsomething').popup('open');
}
}, '#homepage');
Two points:
You probably mean $(document).ready(function () { ... }). Alternatively, a shorthand for this is simply $(function () { ... }).
You can (and should) pass a function to setTimeout instead of a code string.
Result:
$(function () {
setTimeout(function () {
$('#askforsomething').popup('open');
}, 25000);
});
I don't know all the logic behind it but this did work for me. and the guy above looks like he was pretty close to the same.
$(document).on({
//open popup here
"pageshow": function () {
setTimeout("$('#askaquestion').popup('open');", 15000);
}
}, "#homepage");

Categories

Resources