We Keep Coding

Reload variables every 10 seconds

Okay here's the problem.
I want to have 6 realtime variables in php (now they are like Divs). The method I use works fine but it's awful (I know). I need better solution.
Now I load 6 diffrent files like this:
<script>
function loadText() {
$.ajax({
url: ("variable1.php"),
cache: false,
success: function(data) {
$("#variable1").html(data);
}
});
} setInterval(loadText, 60000);
</script>
<div id="variable1"></div>
What should I do? Thanks.

Are you going to want to do a setInterval()?
setInterval(function(){loadText();}, 10000);
Or, if you want it to run only after successfully completing the call, you can set it up in your .ajax().success() callback:
function loadText(){
var text = $.ajax({
type: "POST",
url: "variable1.php",
async: false
}).success(function(){
setTimeout(function(){loadText();}, 10000);
}).responseText;
$('#variable1').html(text);
}
Or use .ajax().complete() if you want it to run regardless of result:
function loadText(){
var text = $.ajax({
type: "POST",
url: "variable1.php",
async: false
}).complete(function(){
setTimeout(function(){loadText();}, 10000);
}).responseText;
$('#variable1').html(text);
}
Here is a demonstration of the two. Note, the success works only once because jsfiddle is returning a 404 error on the ajax call.
http://jsfiddle.net/YXMPn/

You can always have a function you set to run however often you want that has this... It's a much shorter way... If this is what you mean...
$("#variable1").load("variable1.php");

IE 8 caching ajax calls

I am trying to get some data using ajax GET method, it works great in all the browsers except IE.
In IE it is caching the data the first time the call is made and caching it I need to prevent it.
I tried the following methods in my code but still unable to resolve the issue
1) Setting caching = false globally in the code
$.ajaxSetup({ cache: false });
2) putting this in the meta tags
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
3)Using POST instead of GET method
$.ajax({
cache: false,
type: "POST",
url: '/XYZURL/' + Id,
dataType: "json",
async: false,
success: function(Response) {
$scope.data = Response;
},
4)Tried including this bit in my code but with no success
if(url.replace("?") != url)
url = url+"&rand="+new Date().getTime();
else
url = url+"?rand="+new Date().getTime();
Please help me with this issue, it has been bugging me for the past 2 days.
Thank you in advance.

var browser = window.navigator.userAgent;
var msie = browser.indexOf ( "MSIE " );
if(msie > 0){
var remoteId = index.entity.id;
var ie_fix = new Date().getTime();
$.ajax({
cache: false,
type: "GET",
url: '/XYZURL/' + Id,
dataType: "json",
async: true,
success: function(Response) {
$scope.data = Response;
},
error: function(jqXHR,errorThrown) {
alert("jqXHR");
}
});
}else{
$scope.data = datafactory.show({id: index.id});
}
Altough my code is angular based I used jQuery ajax for all the service calls but tried to implement angular and ajax calls depending on the browser and that has solved my issue. I know it may not be the right approach but the only solution which worked for me.

As suggested in this post, How to prevent a jQuery Ajax request from caching in Internet Explorer?
If you are using cache: false option, calls shouldn't be cached. What I found different is async option.
So, Try after changing, async: false to async: true in your ajax call.

Ajax sends empty POST-data but ONLY in IE and Firefox

I have a strange problem (which I've searched for but with no success). I'm using Ajax to post a form to a PHP-script. This works fine in Chrome, Opera and Safari. However, in both IE and Firefox the form gets sent to the script correctly but with the form data missing. When the POST-data is missing, I've made sure that the script returns an error. I've tried to search for this problem for hours, but without any luck. You're my last hope.
Here's the AJAX code (with some Javascript):
<script type="text/javascript">
$(document).ready(function() {
$("#latestNewsForm").on('submit', function(event) {
event.preventDefault();
$.ajax({
url : "http://devserver/site/php/getLatestArticles.php",
type : "POST",
data : new FormData(this),
contentType : false,
cache : false,
processData : false
}).done(function (data) {
$("#formResponse").html(data);
});
});
});
</script>
And here's the form:
<form id="latestNewsForm" method="post">
<input type="submit" name="currentPage" id="firstPage" value="1">
</form>
A BIG thanks in advance!

Ohgodwhy's comment is likely correct.
Put your data in a variable outside that ajax call. this is probably referring to something different than you expect in different browsers.
Try this:
$("#latestNewsForm").on('submit', function(event) {
event.preventDefault();
var data = new FormData(this);
$.ajax({
url : "http://devserver/site/php/getLatestArticles.php",
type : "POST",
data : data,
contentType : false,
cache : false,
processData : false
}).done(function (data) {
$("#formResponse").html(data);
});
});
Another possibility could be related to your submit button: Submit rollover button not working in FF and IE

Try this:
$.ajax({
type: "POST",
url: "/fetchdata",
data:JSON.stringify(sid),
success: function(result) {
alert('ok');
},
error: function(result) {
alert('error');
}
});

Run a ajax function to check a json response every 3 seconds

I want to check if my user is updated from another system using javascript.
I need help writing a function which checks a json response. If it is true or false.
The url /user/updatecheck/ has a json response like this: {"updated": "true"} or {"updated": "false"}
<script type="text/javascript">
$(document).ready(function() {
var updated='2013-01-02T10:30:00.000123+02:00'; //user variable from the system, will be empty if the user is not updated
if (!updated){
$('#not-updated').modal('show');
var updatedCheck = window.setInterval(
$.ajax({
url: "/user/updatecheck/", //Returns {"updated": "true"} or {"updated": "false"}
data: dataString,
dataType: "json",
success: function(data){
if (json.updated == 'true') { //not sure if this is the correct method
window.clearInterval(updatedCheck);
//The user is updated - the page needs a reload
}
} //success
})
, 3000); //Hoping this is the function to check the url every 3 seconds until it returns true
}
});
$(document).ajaxStop(function(){
window.location.reload();
});
</script>
It does not seem to work. Not sure if my ajax function is correct, I only get the modal window if the user is not updated at first, and the page does not reload if the url /user/updatecheck/ returns true.

The way you call jQuery ajax function as part of the setInterval is not proper. Please try placing it within a function,
var updatedCheck = window.setInterval(
function(){$.ajax({
url: "/user/updatecheck/", //Returns {"updated": "true"} or {"updated": "false"}
data: dataString,
dataType: "json",
success: function(data){
if (json.updated == 'true') { //not sure if this is the correct method
window.clearInterval(updatedCheck);
//The user is updated - the page needs a reload
}
} //success
})}
, 3000);
The data that you will receive from the ajax request is returned via the data parameter of you success callback function, so you can use that. Try to print the data result to the console (i.e. console.log(data);)or alert it (i.e. alert(data);). For instance you may need to call data.updated. I'm not sure if the json variable you are using in the if condition is initialised.

How to bring ajax search onkeyup with jquery

My Script to call ajax
<script language="javascript">
function search_func(value)
{
$.ajax({
type: "GET",
url: "sample.php",
data: {'search_keyword' : value},
dataType: "text",
success: function(msg){
//Receiving the result of search here
}
});
}
</script>
HTML
<input type="text" name="sample_search" id="sample_search" onkeyup="search_func(this.value);">
Question: while onkeyup I am using ajax to fetch the result. Once ajax result delay increases problem occurs for me.
For Example
While typing t keyword I receive ajax result and while typing te I receive ajax result
when ajax time delay between two keyup sometime makes a serious issue.
When I type te fastly. ajax search for t keyword come late, when compare to te. I don't know how to handle this type of cases.
Result
While typing te keyword fastly due to ajax delays. result for t keyword comes.
I believe I had explained up to reader knowledge.

You should check if the value has changed over time:
var searchRequest = null;
$(function () {
var minlength = 3;
$("#sample_search").keyup(function () {
var that = this,
value = $(this).val();
if (value.length >= minlength ) {
if (searchRequest != null)
searchRequest.abort();
searchRequest = $.ajax({
type: "GET",
url: "sample.php",
data: {
'search_keyword' : value
},
dataType: "text",
success: function(msg){
//we need to check if the value is the same
if (value==$(that).val()) {
//Receiving the result of search here
}
}
});
}
});
});
EDIT:
The searchRequest variable was added to prevent multiple unnecessary requests to the server.

Keep hold of the XMLHttpRequest object that $.ajax() returns and then on the next keyup, call .abort(). That should kill the previous ajax request and let you do the new one.
var req = null;
function search_func(value)
{
if (req != null) req.abort();
req = $.ajax({
type: "GET",
url: "sample.php",
data: {'search_keyword' : value},
dataType: "text",
success: function(msg){
//Receiving the result of search here
}
});
}

Try using the jQuery UI autocomplete. Saves you from many low-level coding.

First i will suggest that making a ajax call on every keyup is not good (and this why u run in this problem) .
Second if you want to use keyup then show a loading image after input box to show user its still loading (use loading image like you get on adding comment)

Couple of pointers. Firstly, language is a deprecated attribute of javascript. In HTML(5) you can leave the attribute off, or use type="text/javascript". Secondly, you are using jQuery so why do you have an inline function call when you can do that with jQuery too?
$(function(){
// Document is ready
$("#sample_search").keyup(function()
{
$.ajax({
type: "GET",
url: "sample.php",
data: {'search_keyword' : value},
dataType: "text",
success: function(msg)
{
//Receiving the result of search here
}
});
});
});
I would suggest leaving a little delay between the keyup event and calling an ajax function. What you could do is use setTimeout to check that the user has finished typing before then calling your ajax function.