<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function() {
setInterval(function() {
$.get('points.txt', function(data){
$('#show').html(data);
},1000);
});
});
</script>
<div id="show"></div>
I have the above script running, and in points.txt there's a number which keeps changing.
It's suppose to refresh the div every second.
Now, for some reason, the script ain't working. What am I doing wrong?
Your second param of timing function is not given to the setInterval, and not the get. Also I guess your request is getting cached. Try this:
$(document).ready(function() {
setInterval(function() {
$.get('points.txt?' + (new Date).getTime(), function(data){
$('#show').html(data);
});
}, 1000);
});
Or tell the AJAX, not to cache data:
$.ajaxSetup({
cache: false
});
I believe there is incorrect formatting of your code. Parameter 1000 is added as third parameter to get function. Instead it should be like this:
$(document).ready(function() {
setInterval(function() {
$.get('points.txt', function(data){
$('#show').html(data);
});
},1000);
});
Related
I'm making a chat with the simple javascript:
<script>
function chatClick(messages_other_user) {
$('#chatBox').remove();
document.body.innerHTML += "<div id='chatBox' class='chatDiv'></div>";
$("#chatBox").load("subs/chat/chat.php?ou="+messages_other_user);
}
</script>
This function is called in several links with the variable "messages_other_user" changing.
In the file "chat.php" I get the variable of "ou" and I have a script that writes to the console:
if (isset($_GET['ou'])) { $otherUserChat = $_GET['ou']; } else $otherUserChat = 0; // get $otherUserChat
<script>
$(document).ready(function() {
var chatUpdateVar = setInterval(function() {
console.log("<?= $otherUserChat ?>");
}, 2000);
$.ajaxSetup({ cache: false });
});
</script>
But the .remove line doesn't quite get rid of the javascript in the chat.php file. When I click a link to call the javascript chatClick function, it works fine. But when I then click another link that calls chatClick with a different variable for "messages_other_user" the old one keeps firing along with the new one.
How can I destroy the old javascript completely so it doesn't run anymore?
I found the solution - and I was mistaken by the true culprit of the issue.
I thought a console.log would yield the same result as what I truly do - I just chose to replace with console.log in the code for simplicity. So I guess I've learned that's a stupid thing to do.
What is actually happening in the chat.php file in the document ready script is this:
$(document).ready(function() {
var chatUpdateVar = setInterval(function() {
$("#chatArea").load("subs/chat/chatContent.php?ou="+<?= $otherUserChat ?>);
console.log("updated");
}, 4000);
});
I figured out I didn't readlly need to use the document ready, so I instead, I just do this directly in my script:
var chatUpdateVar = setInterval(function() {
$("#chatArea").load("subs/chat/chatContent.php?ou="+<?= $otherUserChat ?>);
console.log("updated");
}, 4000); // CHECK FOR UNREAD: 1000 equals 1 second
$.ajaxSetup({ cache: false });
For closing the chat window, I now trigger this function:
function closeChat() {
clearInterval(chatUpdateVar);
$('#chatBox').remove();
}
And in the file that calls the above script (chat.php), I check if the function closeChat exists - and if it does, I run it. This is part of the cal to the chat.php:
function chatClick(messages_other_user) {
if (typeof closeChat === "function") {
closeChat();
}
document.body.innerHTML += "<div id='chatBox' class='chatDiv'></div>";
$("#chatBox").load("subs/chat/chat.php?ou="+messages_other_user);
}
below is my script in that, particular div should be refresh every three seconds. how to add the time interval in my code using jquery and ajax?
<script>
$(document).ready(function () {
$('#data_form').on('submit', function (e) {
var form_data = $(this).serialize();
$.ajax({
type: "POST",
url: '<?php echo base_url(); ?>index.php/Profile_cntrl/supplier_communication',
data: form_data,
success: function (data)
{
scrollDown();
var message = $("#messagee").val();
$('#chat_log').append('<div class="row msg_container base_sent active"><div class="row msg_container base_receive"><div class="col-md-12 col-xs-12"><div class="messages msg_receive"><p><a>' + message + '</a></p></div></div></div></div>');
$('#messagee').val('');
},
error: function ()
{
alert('failed');
}
});
e.preventDefault();
});
scrollDown();
function scrollDown() {
$('.msg_container_base').animate({scrollTop: $('.msg_container_base').prop("scrollHeight")}, 200);
}
});
</script>
To refresh the div every 3Sec.
You can use "setInterval" function.
And to stop this interval you can use "clearInterval" function.
The simple code is as follows:
var refreshIntervalId = setInterval(function(){
// alert("Hello");
//Your Div's ID
}, 3000);
/* later */
clearInterval(refreshIntervalId);
This code simply calls the alert every 3seconds,so modify the above code and put the div's id to be refreshed.
You can use setInterval javascript function for that. check the code snippet below
setInterval(scrollDown, 3000);
I hope this will help you. Please check below code.
function animatedText() {
$('.text').animate({ opacity: 1 }, 200, function() {
$('.text').animate({ opacity: 0 }, 200);
});
setTimeout(function() {
animatedText();
},3000);
}
animatedText();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text">Animated Text</div>
Use
setInterval(function(){
getMessage();
}, 3000);
setIterval lets you to repeat a function or a code block every n seconds.
I think you should add your ajax call into a function.
function getMessage () {
//Your ajax call here
}
This way the code could be reused more times without repeating it.
After a successful ajax call I m showing an element telling the success status. I need to show it temporarily and hide it after say 10 seconds.
I have a paragraph element with the class set to hide on load <p class="response hide" >Successfully Updated!</p>
The code below does not seem to work as the element does not hide after its shown by adding the 'show' class
function UpdateChangeRequest() {
$.ajax({
url: '/Request/UpdateRequest',
cache: false,
data: $('form[id="RequestForm"]').serialize(),
type: 'POST',
success: function (data) {
$('.divPartial').html(data);
$('.response').addClass('show').removeClass('hide');
setTimeout(function () {
$('.response').fadeOut('fast');
}, 1000);
}
});
}
Any ideas? thanks
You should try to make something like the below in your success callback:
$(function(){
$('.response').hide();
$('#fake').click(function(){
$('.response').show();
setTimeout(function () { $('.response').fadeOut('fast'); }, 1000);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="response" >Successfully Updated!</p>
<input type="button" value="click" id="fake"/>
Update
Since you updated you post, I could be more specific:
function UpdateChangeRequest() {
$.ajax({
url: '/Request/UpdateRequest',
cache: false,
data: $('form[id="RequestForm"]').serialize(),
type: 'POST',
success: function (data) {
$('.divPartial').html(data);
// Show the success message
$('.response').show();
// Define a timeout after which fade out the success message.
setTimeout(function () { $('.response').fadeOut('fast'); }, 1000);
}
});
}
what about simple:
$(obj).show().delay(10000).hide();
You may use callbacks.
$(".response").fadeIn("slow","swing", function()
{
(".response").delay(10000).fadeOut("slow");
});
http://www.w3schools.com/jquery/jquery_callback.asp
You code should be working like i mentioned in the comments. I have put them in codepen with minimum changes
html:
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<p class="response hide" >Successfully Updated!</p>
<!--- response msg is hidden by default --->
css:
.hide{
display: none;
}
js:
var millisecondsToWait = 1000;
$(document).ready(function(){
//$('.response').addClass('show').removeClass('hide');
$('.response').show();
setTimeout(function () {
$('.response').fadeOut('fast');
}, millisecondsToWait);
});
codepen example: http://codepen.io/anon/pen/bNrGwW
Find your element, show it, add a delay of 10 seconds, and finally hide it. You can chain all these effects/events like that:
$('.response').show().delay(10000).hide();
Try this :-
$('.response').show().delay(10000).fadeOut('slow');
I need to create a div that will auto refresh every 10 seconds, and stop when it successfully loads. I created this jQuery script:
<script type="text/javascript">
$(document).ready(function(){
var j = jQuery.noConflict();
j(document).ready(function()
{
j(".refresh").everyTime(1000,function(i){
j.ajax({
url: "pin.php",
cache: false,
success: function(html){
j(".refresh").html(html);
}
})
})
});
j('.refresh');
});
</script>
It works but the refresh continues every 10 seconds. I need it to stop if pin.php returns a numeric output.
How can I edit it to stop refresh if pin.php returns a numeric output?
From the documentation over at http://www.jquery-plugins.info/jquery-timers-00013992.htm, the function you need is probably stopTime. Although I haven't tested it, the following in your success should work:
success: function(html) {
if (j.isNumeric(html)) {
j(".refresh").stopTime();
} else {
j(".refresh").html(html);
}
}
Try it with an interval like this, it fires till the loaded call is done then it stops the interval and ajaxcal
$(document).ready(function(){
var j = jQuery.noConflict();
jRefresh();
var jRefresh = setInterval(function(){
ajaxCall()
}, 1000);
function ajaxCall() {
j.ajax({
url: "pin.php",
cache: false,
success: function(html){
if (j.isNumeric(html)) {
myStopFunction();
}
}
})
}
function myStopFunction() {
clearInterval(jRefresh);
}
});
first of all you do not need to call $(document).ready() twice. To aviod conflicts you can write code like this :
jQuery(document).ready(function($){
// Your code here
});
Note the $ parameter
Second, I guess it is unuseful to use everytime ( looks like is a plugin and is not a good idea to load a lot of code since you have good alternatives for your needs ) when you can simply call setInterval;
According to your needs and following what i said above, the code should looks like :
jQuery(document).ready(function($){
var interval_time = 10000;
var interval = null;
var $wrapper = $('.refresh');
interval = setInterval(function(){
$.ajax({
url : 'pin.php',
cache : false,
success : function( html ){
if( $.isNumeric( html ) ){
clearInterval( interval );
}
$wrapper.html( html );
}
})
}, interval_time);
});
You can modify your code something like this:
var temp = setInterval(1000,function(i){
j.ajax({
url: "pin.php",
cache: false,
success: function(html){
if(isNaN(html))
j(".refresh").html(html);
}else{temp.clearInterval();}
})
})
You said, "I need it to stop if pin.php returns a numeric output".
if .refresh html contain number than it stop to call ajax call otherwise it make call.
if(isNaN(j(".refresh").html()){
//put your ajax call in this block
}
i have this js/ajax code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh
setInterval(function() {
$('.container').load('/copy/copy.php');
}, 4000);
});
// ]]></script>
<div class="container"></div>
but i need to make sure the 'copy.php' has fully loaded until it refreshes again
The .load() function provides a callback to use once the loading has completed:
$('.container').load('/copy/copy.php', function(){
// the load has completed successfully.
});
Use this callback to initiate the reloading of the content.
I would use a recursive-ish setTimeout instead:
function refreshContent() {
$.get('/copy/copy.php').done(function (content) {
$('.container').html(content);
}).always(function () {
setTimeout(refreshContent, 4000);
});
}
This way, the 4 second timer won't start until the call has finished.