Every 2 seconds I update a table on my page. This table has a Modal button that also contains information and therefore it is also updated every 2 seconds. The problem is that the info in the Modal doesn't load after using clear Interval. (No need to say that I do need to use clear Interval because Modal doesn't work with the table updating constantly). The code is as follow
var myTimer;
function startTimer() {
myTimer = setInterval(function () {
somefunction_to_updatetable();
}, 2000);
};
function stopTimer() {
clearInterval(myTimer);
};
$(document).on('show.bs.modal', '#idModal', function (e) {
stopTimer();
});
window.onload = function() {
startTimer();
};
In this code, when loading the page setInterval is defined with window.onload. It starts updating info in the table every 2 seconds. When I click the Modal button, stopTimer is read and setInterval is cleared. The Modal opens but the info is not there, only info that is not part of somefunction_to_updatetable() is present in the Modal... how can I fix this? I feel it is straightforward from where I am but I really cannot find a way
Related
I have developed a comment system with ajax and its working fine. I want to add a ajax/js code to refresh my time ago div after every 5 seconds so that the time changes while one is on same post.
Please note:
Sir, i just want code to request server to refresh div after a specific time period. I do not want to load page or div but i want contents within that div should be refreshed after a specific period of time.
I'm new in js/ajax and Ii tried this but not working yet
$(document).ready(function () {
setInterval(function () {
$("#showtimeago!").load();
}, 1000);
});
Result I want is:
<div class="p_timeAgo" id="showtimeago"> <?php time_stamp($timePost);?></div>
Can anyone help me to solve that issue?
I don't know what UI you are using, here is for the php(since Jquery is same) you can tune this up for your requirement.
function loadlink(){
$('#showtimeago').load('test.php',function () {
$(this).unwrap();
});
}
loadlink(); // This will run on page load
setInterval(function(){
loadlink() // this will run after every 5 seconds
}, 5000);
Try this:
<div id="showtimeago"></div>
setInterval(function(){
$('#showtimeago').load('test.php');
},5000);
test.php is the page the refresher stand.
Here is my problem,i have one google ad that expand on click and return when hit close button..but according to changed conditions what i want is to show expand first and close automatically after certain time and when ever it expanded it should close after certain time..i have done this with jquery but it is refreshing the page for the first time can anyone one help..add is made by using google web designer
here is my jquery code i am sure it wont refresh page abut again it is doing it that's why I was thinking of making custom javascript event and trigger it (core javascript)
<script>
var $j = jQuery.noConflict();
setTimeout(function clo(){
$j('#close_this').trigger('click');
$j('#expanded-page').addClass('ed');
},10000);
// above function to clpse it first time after 10 second
(function(){
$j('.banner').click(function(){
$j('#expanded-page').removeClass('ed');
var cl_chk = $j('#expanded-page').hasClass('ed')
if(!cl_chk){
setTimeout(function clo(){
$j('#close_this').trigger('click');
$j('#expanded-page').addClass('ed');
},10000)
}
})
})()
//this function is for closeing that expando ad after its expanded
</script>
here is the url demo:
demo link asian paints ad
dont know if this can help
jQuery.noConflict() // no need to declare a global variable for jQuery ...
(function ($j) { // ... cause you can pass it here
// i like to declare things once and for all....
var closeAfter10 = function () {
setTimeout(function clo() {
$j('#close_this').trigger('click');
$j('#expanded-page').addClass('ed');
}, 10000);
}
//this will attach the event and start the countdown when all contents on the page are loaded
$j(window).load(function() {
$j('.banner').click(function () {
$j('#expanded-page').removeClass('ed');
var cl_chk = $j('#expanded-page').hasClass('ed')
if (!cl_chk) {
closeAfter10(); // ... so i can use them this way ...
}
});
closeAfter10(); // ... here another use of that thing
);
})(jQuery);
I am facing one issue while using setInterval method.
When the jsp page is loaded at that time (onload), I have called one setInterval(function(),time) method. Following is the onload code of my jsp
var refreshLoop = 0;
var refreshFrequency = 900000;
$(window).load(function() {
startRefresh();
});
function startRefresh() {
refreshLoop = setInterval("refreshScreen()", refreshFrequency);
}
Now I have Drag and Drop functionality on this page which drag one row from div to another div. When I Drop my Row to another table that table got refresh. I had done ajax calling one drop happen to another div
Now What I want to do is when My drop id completed I want to clear this setInterval and make to default.
ex : I have set my setInterval timings 10 min on page load so every time it will load the page after 10 mins . Now once I had drag and drop it will start counting 10 mins once I drop my row to another div.
I had done this in JavaScript and ajax.
Please suggests something on this issues.
window.clearInterval(refreshLoop) whenever you wish to clear the interval.
//try this code
<script type="text/javascript">
var refreshLoop = '';
var refreshFrequency = 900000;
$(window).load(function() {
startRefresh();
});
function startRefresh() {
if(refreshLoop){
clearInterval(refreshLoop);
refreshLoop = '';
}
refreshLoop = setInterval("refreshScreen()", refreshFrequency);
}
</script>
When you want to clear the timer, use:
clearInterval(refreshLoop);
startRefresh();
I changed the bootstrab.js (just replaced click with hover):
$(function () {
$('body').on('hover.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
e.preventDefault()
$(this).tab('show')
})
})
Now i want the content-tab to close when you are not hovering over the tab or content.
How do i do this?
Update: something like the below
var timer;
$('tab_element').hover(
function(){ //hover
// clear timer first
clearTimeout(timer);
// then show the content
},
function(){ //unhovered, 1000 milliseconds
// set a timer to call the hide function
timer = setTimeout("hide_function", 1000);
}
);
$('content_tab_here').bind('mouseleave', function(){
// hide it, you can set a timer here too if you want
});
Here is the docs on timer http://www.w3schools.com/js/js_timing.asp
There are many options here but this will get you started, the jquery I used is old school so if you are using latest version of jquery you can change the code accordingly. I don't want to write out everything for you because then you won't be learning and I don't have that much time because I am at work. Good luck.
A quick thank you to those that have helped me so far with this script, you have all helped me enormously in learning some of the more elegant sides of javascript and jquery.
I have one final problem with this script, I am using setinterval() to cycle through an image changer, the JS/Jquerycode is as follows:
$(function() {
var rotateTimer = setInterval(rotateImg,15000);
$('#feature-links a').click(function() {
if (!$(this).hasClass('a-active')) {
clearInterval(rotateTimer);
switchToImg($(this).attr('class'));
}
});
function switchToImg(image) {
var $featureImage = $('#feature-image');
$featureImage.fadeOut(200, function() {
$featureImage.css('background-image', 'url(images/main_' + image + '.jpg)').fadeIn(200);
$('#feature-detail div').removeClass('d-active').filter('.d' + image).addClass('d-active');
});
$('#feature-links a').removeClass('a-active').filter('.' + image).addClass('a-active');
};
function rotateImg() {
var next = 'a' + (parseInt($('#feature-links a.a-active').attr('class').match(/[0-9]/))+parseInt(1));
if (!$('#feature-links a').hasClass(next))
next = 'a1';
switchToImg(next);
}
});
This script works on class names of <a> tags that allow a user to manually switch to an image. As well as this, rotateImg() is providing an automated image/text cycle every 15 seconds with the help of setInterval().
The problem I have is with setInterval() re-initialising once a user has clicked on a link manually.
In the .click function I clear the interval timer and then make a call to the switchToImg() function with the class name of the <a> tag that was clicked on passed as a variable.
I'm trying to work out how I can re-set the timer to avoid a user clicking on a link towards the end of the cycle and having it switch immediately to the next image.
I have researched building my own callback function in to switchToImg() so that once the function has completed the timer is reset, ideally I'd like this to be a longer time initially (30 seconds for example) but then settle back down into the 15 second clock. My research however has lead me to a load of different repositories that I'm having difficulty making head or tail of.
Any guidance as to how I can build this functionality into the script would be really appreacited. Thanks for your time. :)
I'm not 100% sure I follow what you're asking, but if what you're trying to do is to restart the interval timer after a delay after the user clicks, then you could do that like this:
$('#feature-links a').click(function() {
if (!$(this).hasClass('a-active')) {
clearInterval(rotateTimer);
switchToImg($(this).attr('class'));
setTimeout(function() {
rotateTimer = setInterval(rotateImg, 15*1000);
}, 15*1000);
}
});
You would be using a one-shot setTimeout() call to restart the interval timer after a 15 second delay. This would give you 15+15=30 seconds before the next image switched again after a click and then 15 seconds each time after that.
Not sure I understand the question correctly. But basically I get that you want to prevent the timer from happening after the user clicks. Shouldn't calling setInterval right after switchToImg do exactly that? It'll call switchToImg then after every 15 seconds from the click of the user.