We Keep Coding

Problem jquery ajax call,success function is not behaving properly

I made ajax call with jquery to get some information from database with php,but the problem is that when i am using $.ajax it is not working,it doesn't show any errors,it doesn't console.log('success') and i can't figure out why,while when i do the same thing with $.post it works.Any idea what is happening here?
function get_all_chats()
{
$.ajax({
url: "get_previous_chats.php",
type: "POST",
succes: function(data){
console.log(data);
console.log("succes");
},
error: function(xhr, status, error) {
console.log(error);
}
})
$.post("get_previous_chats.php", {}, function(data){
console.log(data);
})
}

You are using ajax properly but there are properties that needs to be checked and apply. First is your 'success' where yours is 'succes' with a single S in the end. Next is you must throw request using 'data' property. So this is how it looks.
function get_all_chats()
{
$.ajax({
url: "get_previous_chats.php",
type: "POST",
data: { data: YOUR_DATA },
success: function(data){
console.log(data);
console.log("succes");
},
error: function(xhr, status, error) {
console.log(error);
}
})
}

JQuery AJAX - How to refresh/reload page using a method GET call

For some reason I can't make this code work, I am trying to reload/refresh the page using GET. All the sample codes that I have found uses POST but I can't go to that because our forms require GET.
This is my code:
$.ajax({type: "GET",
url: "CorrectResults",
data: data,
beforeSend: function() {
console.log("Submitting Data");
},
cache: false,
success: function(html) {
document.location.reload();
//location.reload(true);
//$("#acceptDiv").html(html);
}
});
It should be a simple way to get this done, why this is so easy with POST and not with GET?

Here we go:
$.ajax({type: "GET",
url: "CorrectResults",
data: data,
beforeSend: function() {
console.log("Submitting Data");
},
cache: false,
success: function(html) {
window.location.href= "../yourUrl";
}
});
Hope it helps;)

if you have not any other error in your script( please go to console in your browser press F12),
then you can try with location.reload();
in your success method, like that:
$.ajax({type: "GET",
url: "CorrectResults",
data: data,
beforeSend: function() {
console.log("Submitting Data");
},
cache: false,
success: function(html) {
location.reload();
}
});

Ajax request not working when a function is added to the success option

I am having trouble getting an ajax GET request (or any request for that matter) to retrieve the response. I am simply trying to return the response in an alert event:
<script>
$(document).ready(function() {
$('#test').click(function() {
$.ajax ({
type: 'Get',
url: 'https://crm.zoho.com/crm/private/json/Potentials/searchRecords?authtoken=XXX&scope=crmapi&criteria=(((Potential Email:test#email.com))&selectColumns=Potentials(Potential Name)&fromIndex=1&toIndex=1',
dataType: 'json',
success: function(data) {
alert(data);
}
});
});
});
</script>
I can get this and other similar post requests to work by taking away the function in the success option and editing the code like this:
<script>
$(document).ready(function() {
$('#test').click(function() {
$.ajax ({
type: 'Get',
url: 'https://crm.zoho.com/crm/private/json/Potentials/searchRecords?authtoken=XXXX&scope=crmapi&criteria=(((Potential Email:test#email.com))&selectColumns=Potentials(Potential Name)&fromIndex=1&toIndex=1',
dataType: 'json',
success: alert('success')
});
});
});
</script>
Why is this? And more importantly, how can I retrieve the response data and transfer it to an alert message? Any help is appreciated!
** Update:
Upon reading the first two users' responses on this question, this is what I have:
<script>
$(document).ready(function() {
$('#test').click(function() {
$.ajax ({
type: 'GET',
url: 'https://crm.zoho.com/crm/private/json/Potentials/searchRecords?authtoken=418431ea64141079860d96c85ee41916&scope=crmapi&criteria=(((Potential%20Email:test#email.com))&selectColumns=Potentials(Potential%20Name)&fromIndex=1&toIndex=1',
dataType: 'json',
success: function(data) {
alert(JSON.stringify(data));
},
error: function(data) {
alert(JSON.stringify(data));
}
});
});
});
</script>
I am able to get the error response, so I can confirm there is some kind of error. I also want to point out that I am making the request from a different domain (not crm.zoho.com) so should I be using jsonp? If so, how would I alter the code?

When you have
success: alert('success')
you do NOT have a successful request, you are actually executing this function at the start of AJAX method. The success parameter requires a pointer to a function, and when you use alert('success') you are executing a function instead of providing a pointer to it.
First thing that you need to try is to update type to GET instead of Get:
$.ajax ({
type: 'GET',

Try using the .done() function as follows:
<script>
$(document).ready(function() {
$('#test').click(function() {
$.ajax ({
type: 'Get',
url: 'yourUrl',
dataType: 'json',
}
}).done(function(result) {alert(data);}) //try adding:
.error(function(jqXHR, textStatus, errorThrown) {
console.log(textStatus, errorThrown);})
});
});
the error function will also give you some information in your console as to the status of your request.

Ajax Get Request with JQuery Error

I'm trying to call a php script with a get request and using the data theaddress however the results are showing me the source of the page im calling.
The page im calling is here
Here is my ajax function that will get this page
$( document ).ready(function() {
var address = document.getElementById("address");
$.ajax({
url: '/r10database/checkSystem/ManorWPG.php',
type: 'GET',
data: 'theaddress='+address.value,
cache: false,
success: function(output)
{
alert('success, server says '+output);
}, error: function()
{
alert('Something went wrong, saving system failed');
}
});
});

$( document ).ready(function() {
var address = document.getElementById("address");
$.ajax({
url: '/r10database/checkSystem/ManorWPG.php',
type: 'GET',
data: 'theaddress='+address.value,
cache: false,
success: function(output)
{
alert('success, server says '+output);
}, error: function(error)
{
alert (error); // this is the change from the question
}
});
});

Put the dataType as json with a curly brace
data: {theaddress:address.value},
dataType:'json',
success: function(output)
{
alert('success, server says '+output);
}, error: function(xhr)
{
alert (xhr.status);
}
and get the data in ManorWPG.php as $_GET['theaddress']
** share the xhr.status if failed.

Page Loading Image after multiple ajax call

I have given a loading image binded to ajax start/stop functions like this..
$('#LoadingImage').bind('ajaxStart', function(){
$(this).show();
}).bind('ajaxStop', function(){
$(this).hide();
});
Now i have many ajax calls on my page under document.ready().so all ajax calls start at the same time..but ajax stop varies according to the results in the ajax..so what happens is
loading image appears and when one ajax call is complete the image is hidden and shows my main screen.. Is there a way to loading image till the final ajax call is complete ???
<script type="text/javascript">
$(document).ready(function () {
$('#LoadingImage').on('ajaxStart', function(){
$(this).show();
}).on('ajaxStop', function(){
$(this).hide();
});
$.ajax({
url: http:www.google.com(for example i gave this url),
data:JSON.stringify({login:{"loginid":userid,"reqType":"R"}}),
type: 'POST',
dataType:"json",
contentType: 'application/json',
success: function(data) {
$.each(data.GetRejectedRequestsMethodResult,function(key,val){
//some code
error: function(data, status, jqXHR) {
alert('There was an error.');
}
}); // end $.ajax
$.ajax({
url: http:www.google.com(for example i gave this url),
data:JSON.stringify({login:{"loginid":userid,"reqType":"R"}}),
type: 'POST',
dataType:"json",
contentType: 'application/json',
success: function(data) {
$.each(data.GetRejectedRequestsMethodResult,function(key,val){
//some code
error: function(data, status, jqXHR) {
alert('There was an error.');
}
}); // end $.ajax
$.ajax({
url: http:www.google.com(for example i gave this url),
data:JSON.stringify({login:{"loginid":userid,"reqType":"R"}}),
type: 'POST',
dataType:"json",
contentType: 'application/json',
success: function(data) {
$.each(data.GetRejectedRequestsMethodResult,function(key,val){
//some code
error: function(data, status, jqXHR) {
alert('There was an error.');
}
}); // end $.ajax
$.ajax({
url: http:www.google.com(for example i gave this url),
data:JSON.stringify({login:{"loginid":userid,"reqType":"R"}}),
type: 'POST',
dataType:"json",
contentType: 'application/json',
success: function(data) {
$.each(data.GetRejectedRequestsMethodResult,function(key,val){
//some code
error: function(data, status, jqXHR) {
alert('There was an error.');
}
}); // end $.ajax
$.ajax({
url: http:www.google.com(for example i gave this url),
data:JSON.stringify({login:{"loginid":userid,"reqType":"R"}}),
type: 'POST',
dataType:"json",
contentType: 'application/json',
success: function(data) {
$.each(data.GetRejectedRequestsMethodResult,function(key,val){
//some code
error: function(data, status, jqXHR) {
alert('There was an error.');
}
}); // end $.ajax
Like the above i have many ajax calls...The problem is that after the first ajax is complete the image hides..

You can set up one variable which increments on Ajax start and decrements on Ajax complete.
Inside the ajaxStop function check whether this variable is 0 or not.If zero then only hide the image.
Do like this,
$(document).ready(function () {
var count=0;
$('#LoadingImage').on('ajaxStart', function(){
count++;
if(count===1){
$(this).show();
}
}).on('ajaxStop', function(){
//count is decrementing and on same time checking whether it becomes zero
if(!--count){
$(this).hide();
}
});
//suppose 10 simultanious ajax calls
for(var j=0;j<10;j++){
$.ajax({
//configure whatever you want
});
}
});
this should work (theoretically).