I'm working on a Table that logs all action and refreshes the table based on the interval given.
Everything works fine except when using setInterval, here's my code:
var interval = 3000;
var interval_en = true;
$(document).ready(function() {
$('#logs_tbl').DataTable();
$('.paginate_button,.paginate_button.current').click(function(){
e.preventDefault();
console.log("paginate click");
interval_en = false;
}).change(function(e){
e.preventDefault();
console.log("paginate click");
interval_en = false;
});
var aclogs_interval = setInterval(function () {
if(interval_en){
console.log("logging=true");
aclog_refresh(); //This function refreshes the table via Ajax
}else{
console.log("logging stopped");
clearInterval(aclogs_interval);
}
}, interval);
} );
What have I tried so far:
Different selector:
$('#logs_tbl_paginate a').click(function(){
interval_en = false;
clearInterval(aclogs_interval);
});
Binding per interval:
var aclogs_interval = setInterval(function (e) {
if(interval_en){
console.log("logging=true");
aclog_refresh();
$('.paginate_button,.paginate_button.current').click(function(){
e.preventDefault();
console.log("paginate click");
interval_en = false;
}).change(function(e){
e.preventDefault();
console.log("paginate click");
interval_en = false;
});
}else{
console.log("logging stopped");
clearInterval(aclogs_interval);
}
}, interval);
Though manually triggering interval_en = false; in the browser console will stop it. Still can't find out what went wrong.
Also clicking the pagination buttons before the first interval occur works.
You could try the following:
$('#logs_tbl').on( 'page.dt', function () {
console.log("paginate click");
$('.btn-live,.btn-notlive').prop('class','btn-notlive');
interval_en = false;
} );
This example is reference by datatable site.
Related
This is my javascript code ...i want call a function when click close browser at window.close().But not working..You can help me.Thank so much.<3
<script>
$(document).ready(function () {
var typeChange = false;
$(document).on("keyup", 'form input', function (e) {
typeChange = true;
});
$(document).on("change", 'form select', function (e) {
typeChange = true;
});
function changeURL() {
window.addEventListener("beforeunload", function (e) {
if (typeChange) {
e.preventDefault();
e.returnValue = "";
}
}, {once : true});
}
$(document).on('click', '.sidebar-menu a', function() {
changeURL();
});
// window.addEventListener("close", function () {
// changeURL();
// });
// window.close() = function() {
// changeURL();
// };
});
</script>
You were quite close... But there are two things:
You have to register the event listener for beforeunload when the page loads... Not when it is about to unload ;)
It won't be necessary to use an event handler on the .sidebar-menu a elements if those links are making the browser to navigate.
So here is the code that should work for you:
$(document).ready(function () {
var typeChange = false;
$(document).on("keyup", 'form input', function (e) {
typeChange = true;
});
$(document).on("change", 'form select', function (e) {
typeChange = true;
});
window.addEventListener("beforeunload", function (e) {
if (typeChange) {
e.preventDefault();
e.returnValue = "";
}
}, {once : true});
});
I'm afraid 'window' object doesn't have event 'close', howerver it has event 'beforeunload'. check belows codes copied from the below link.
window.addEventListener('beforeunload', function (e) {
e.preventDefault();
e.returnValue = '';
});
Below artilce explains it in much more details
https://www.geeksforgeeks.org/how-to-detect-browser-or-tab-closing-in-javascript/#:~:text=A%20tab%20or%20window%20closing,the%20tab%20or%20the%20browser.
I want to auto reload div in my site. If I click to bottom the script reload another div when i use clearInterval to stop interval1 it not working the script reload again interval1 ,when i use console.log interval i find false and the script reload again clearInterval not working or??
<script type="text/javascript">
var interval2;
var interval1;
$(document).ready(function() {
var get_template = function() {
$("#live-grouped-odds-current").load("template.php");
}
interval2 = setInterval(get_template, 6000);
$("#live_details").click(function() {
clearInterval(interval2);
console.log(interval2);
$('#live-overview-menuitem').removeClass('Actual');
$('#live_details').addClass('Actual');
$("#button_sp").css('display', 'none');
$("#button_dt").css('display', 'block');
clearInterval(interval2);
interval2 = false;
$("#live-grouped-odds-current").empty();
$("#loader12").css('visibility', 'visible');
$("#live-grouped-odds-current").load("details.php");
});
$("#loader12").css('visibility', 'visible');
$.get("details/events.php", function(data1) {
$("#event_list").html(data1);
});
$("#loader12").css('visibility', 'hidden');
var refresh = function() {
$.get("details/events.php", function(data1) {
$("#event_list").html(data1);
});
$.get("details/simple_event.php", function(data) {
$("#simple_event").html(data);
});
}
interval1 = setInterval(refresh, 6000);
});
function simple_event(id) {
clearInterval(interval1);
$('.Event').removeClass('Actual');
$("#" + id).attr('class', 'Actual');
$("#simple_event").empty();
$("#loader12").css('visibility', 'visible');
$.get("details/simple_event.php?id=" + id, function(data) {
$("#simple_event").html(data).hide();
$("#simple_event").slideDown(1000);
//alert( "Load was performed." );
$("#loader12").css('visibility', 'hidden');
});
interval1 = setInterval(refresh, 6000);
}
</script>
When you call clearTimeout it means the interval will not be triggered again, but if $("#live-grouped-odds-current").load("template.php"); is still running it will complete. If $("#live-grouped-odds-current").load("template.php"); takes more time than 6000ms you will begin to do multiple request in parallel as well. (It would be better to use setTimeout I think)
Once you call clearInterval(interval2) the first time, set interval2 to undefined
$("#live_details").click(function() {
clearInterval(interval2);
inteval2 = undefined;
});
and change get_template to
var get_template = function() {
$.get("template.php", function( data ) {
if (inteval2 !== undefined) {
$("#live-grouped-odds-current").html( data );
}
});
}
so #live-grouped-odds-current won't be undated if the interval has been cleared
The issue I'm having is every time you resize the browser a function is called, that function will make a side panel into an accordion if the screen width is a certain number or below or on a larger screen it's just displaying like an open side panel with no interaction.
In the resize event I call the sidepanel function. Unfortunately every time I resize the browser my side panel function is duplicated. I've been seeing stuff on unbinding but nothing that seems to make sense for how I'm calling the side panel function.
Is there a way in the resize.js to unbind the sidepanel function and rebind to the window so it's only called once every time the window is resized?
Resize.js
$(document).ready(function() {
var resizeTimer;
$(window).on('resize', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
sidePanelAccordion();
}, 250);
});
});
Side-panel.js
function sidePanelAccordion() {
var panelAccordion = $('.side-panel-accordion');
var panelHeader = $('.side-panel-header');
var panelBody = $('.side-panel-body');
var panelHeaderActive = $('.mobile-header-active');
if (userScreen.type === 'mobile') {
panelAccordion.find(panelBody).hide();
panelAccordion.find(panelHeader).addClass('mobile-header-active');
} else if (userScreen.type === 'desktop') {
panelAccordion.find(panelBody).show().removeClass('open');
panelHeader.removeClass('mobile-header-active');
}
panelHeaderActive.on('click', function(e) {
console.log('clicked');
if (panelBody.hasClass('open')) {
panelBody.removeClass('open').stop(true, true).slideUp().clearQueue();
//console.log('panel had class open');
e.stopPropagation();
return false;
} else {
panelBody.addClass('open').stop(true, true).slideDown().clearQueue();
//console.log('panel now has class open');
e.stopPropagation();
return false;
}
});
}
Try this code:
panelHeaderActive.unbind('click').on('click', function(e){
console.log('clicked');
if (panelBody.hasClass('open')) {
panelBody.removeClass('open').stop(true,true).slideUp().clearQueue();
//console.log('panel had class open');
e.stopPropagation();
return false;
} else {
panelBody.addClass('open').stop(true,true).slideDown().clearQueue();
//console.log('panel now has class open');
e.stopPropagation();
return false;
}
});
I want to display a pop-up window after 10 second if any other click event is not performed. i.e. I displayed the pop-up window after 10 as:
setTimeout( "jQuery('#rollup-page-Modal').modal('show');",10000 );
Now there are few pop-up windows which will be displayed once clicked as:
jQuery(".more-info").click(function(event){
jQuery("#more-info-modal").modal('show');
event.preventDefault();
});
jQuery(".call-now").click(function(event){
jQuery("#request-callback-modal").modal('show');
event.preventDefault();
});
jQuery(".popup-send-quote").click(function(){
jQuery("#request-callback-modal").modal('hide');
jQuery("#callback-thankyou-modal").modal('show');
});
Now I want, the first pop-up window (which will be displayed after 10 sec) should not be displayed if any other pop-up windows is displayed or any other click event is performed.
You should to store the id of the timeout in a variable, then you can use window.clearTimeout() to clear the timeout when a click happens in the document:
var timer = setTimeout( "jQuery('#rollup-page-Modal').modal('show');",10000 );
$(document).on("click",function(){
clearTimeout(timer);
});
Add a flag
var didClick = false;
jQuery(".more-info").click(function(event){
jQuery("#more-info-modal").modal('show');
event.preventDefault();
didClick = true;
});
jQuery(".call-now").click(function(event){
jQuery("#request-callback-modal").modal('show');
event.preventDefault();
didClick = true;
});
jQuery(".popup-send-quote").click(function(){
jQuery("#request-callback-modal").modal('hide');
jQuery("#callback-thankyou-modal").modal('show');
didClick = true;
});
then set it to false before timeout
didClick = false;
setTimeout(function() {
if (!didClick) {
jQuery('#rollup-page-Modal').modal('show');
}
},10000 );
first the timeout code:
var timeout = setTimeout( function () {
jQuery('#rollup-page-Modal').modal('show');
},10000 );
now that it's in a var you can cancel it elsewhere in the code:
jQuery(".more-info").click(function(event){
clearTimeout(timeout);
jQuery("#more-info-modal").modal('show');
event.preventDefault();
});
jQuery(".call-now").click(function(event){
clearTimeout(timeout);
jQuery("#request-callback-modal").modal('show');
event.preventDefault();
});
jQuery(".popup-send-quote").click(function(){
clearTimeout(timeout);
jQuery("#request-callback-modal").modal('hide');
jQuery("#callback-thankyou-modal").modal('show');
});
Based on this script I found on Stack Overflow, I tried adapting it to fade out an editor panel on a HTML page. Fading out works fine, but I'd like limit the fade-out from being triggered.
What I hope to accomplish is to prevent the fade-out whenever the mouse is over the editor panel (and child controls) or when there's keyboard activity in one of the input children.
var i = null;
// this part is working
$("#my-canvas").mousemove(function() {
clearTimeout(i);
$("#panel,#btn-panel-toggle,#fps").fadeIn(200);
var i = setTimeout('$("#panel,#btn-panel-toggle,#fps").fadeOut(800);', 3000);
})
// this part is not working
$("#panel").mouseover(function() {
clearTimeout(i);
})
For a live example, please check out this jsFiddle.
Two independent variables are needed here to indicate, whether the input#sc-url is focused and div#panel is hovered by mouse or not. Then you can handle the timer with these functions:
$(function () {
var t = null; //timer
var is_url_focused = false, is_panel_hovered = false;
var panel = $('#panel');
function hide_panel(){
if (t) {
clearTimeout(t);
}
t = setTimeout(function(){
if (is_url_focused || is_panel_hovered) {
return;
}
panel.stop().animate({
opacity:0
},800, function(){
panel.hide(); // == diplay:none
});
},2000);
}
function show_panel(){
panel.show().stop().animate({
opacity:1
},800);
}
$('#my-canvas').mouseenter(function(){
show_panel();
}).mouseleave(function(){
hide_panel();
});
$('#panel').hover(function(){
is_panel_hovered = true;
show_panel();
}, function(){
is_panel_hovered = false;
hide_panel();
});
$('#sc-url').focus(function(){
is_url_focused = true;
show_panel();
}).blur(function(){
is_url_focused = false;
hide_panel();
});
$('#btn-panel-toggle').click(function(){
if (panel.is(':hidden')) {
panel.css('opacity',1).show();
} else {
panel.css('opacity',0).hide();
}
});
});
http://jsfiddle.net/w9dv4/3/