Develop Reference

AJAX Refresh Div Not Functioning

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

how can i notify me when input is change?

The program needs to notify when input is changed. Below is my code :
$(document).ready(function(){
var myfunction = setInterval(function(){
$('input').change(function(){
});
$.post("getvalue.php",function(callback){
$(notify.createNotification("NOTIFICATION", {body:"<?php echo $arrb; ?>", icon: "../src/func/notif/icon.jpg"})).html(callback);
});
clearInterval(myfunction) },1000);
});

Use change event handler, you've just bound the change event handler but you're not doing anything when the event occur.
Call function notify when the value of input is changed
There is no need of using setInterval
If you want to use setInterval use setTimeout instead of setInterval as you're clearing it when the callback is called.
Don't use callback as the name of the response variable, use it as response(for better naming convention)
Ex:
var interval = setInterval(function () {
clearInterval(interval);
}, 1000);
Is equivalent to
setTimeout(function () {
}, 1000);
Code:
$(document).ready(function () {
function notify() {
$.post("getvalue.php", function (response) {
$(notify.createNotification("NOTIFICATION", {
body: "<?php echo $arrb; ?>",
icon: "../src/func/notif/icon.jpg"
})).html(response);
});
}
$('input').change(notify);
});

Take the .change handler out of the set interval and call it once you have created your input in the DOM, typically on page load is fine so your script should look something like this:
$(document).ready(function () {
$('input').change(function () {
console.log("any input changed because I hooked all input elements on my page");
});
var myfunction = setInterval(function () {
$.post("getvalue.php", function (callback) {
$(notify.createNotification("NOTIFICATION", {
body: "<?php echo $arrb; ?>",
icon: "../src/func/notif/icon.jpg"
})).html(callback);
});
clearInterval(myfunction);
}, 1000);
});
I'm not sure what your notify function is supposed to do, but it doesn't look much correct other than it will get called once after 1000ms when the page is ready.
Goodluck.

hiding an html element after showing for few seconds

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

Timer for Simple Ajax loaded page

Have a simple ajax for loading content into a page.
What I want is for the loaded content to wait a set amount of time before showing on the page. (before the fadeIn)
I tried using jQuery's .delay() function after it fades the #body in but it did not work.
Can anyone point me in the right direction?
Thank you in advance for your time
JS
var default_content="";
$(document).ready(function(){
checkURL();
$('ul li a').click(function (e){
checkURL(this.hash);
});
//filling in the default content
default_content = $('#pageContent').html();
setInterval("checkURL()",250);
});
var lasturl="";
function checkURL(hash)
{
if(!hash) hash=window.location.hash;
if(hash != lasturl)
{
lasturl=hash;
// FIX - if we've used the history buttons to return to the homepage,
// fill the pageContent with the default_content
if(hash=="")
$('#pageContent').html(default_content);
else
loadPage(hash);
}
}
function loadPage(url)
{
url=url.replace('#page','');
$('#body').hide ();
$('#loading').css('visibility','visible');
$.ajax({
type: "POST",
url: "load_page.php",
data: 'page='+url,
dataType: "html",
success: function(msg){
if(parseInt(msg)!=0)
{
$('#pageContent').html(msg);
$('#body').fadeIn( 'slow' );
$('#loading').css('visibility','hidden');
}
}
});
}
PHP
if(!$_POST['page']) die("0");
$page = (int)$_POST['page'];
if(file_exists('pages/page_'.$page.'.html'))
echo file_get_contents('pages/page_'.$page.'.html');
else echo 'There is no such page!';
?>

You want the setTimeout Javascript function.
setTimeout(function(){
$('#pageContent').html(msg);
$('#body').fadeIn( 'slow' );
$('#loading').css('visibility','hidden');
}, 5000);
This will wait 5s für the content to be set.

You can use setTimeout:
setTimeout(checkURL(/* value to pass */),250);
Please don't quote calls to functions, as what's in a " " will be handled as a string, not a function call.

auto load in ajax jquery on every one minute

$('.msg_block').on('click', 'section.msgholder', function(event) {
var clickedItem = $(this).attr('id');
var id = jQuery(this).data('value');
var date = jQuery(this).data('date');
$.ajax({
type:"POST",
url:"/Messages/messageDetails",
data: {id: id, ddate: date},
beforeSend: function()
{
},
success : function(response) {
// Do all my stuff here
},
error : function() {
alert('error');
}
});
});
This is my simple jquery ajax call to the server. Now i want to fire this ajax request every second. Could anyone please help me in this.
Any help would be appreciable.

Try this to call your AJAX function after every one minute
$(document).ready(function () {
setInterval(function () {
SomeFunction();
}, 60000); // 1000 ==> 1 second
});
function SomeFunction() {
$(".msg_block").click();
}

You can use setInterval. Look:
window.setInterval(event, 60000); // It will call the function every 1 min
And function event would be
function event() {
$(".msg_block").click(); // it will click that class so ajax function called
}