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

Wait until data (30,000 rows) is displayed after AJAX request before calling function

Basically I have a function that cannot be called until it's data has been processed.
My data.done function apparently did not work, there is about 30,000 + records so therefore the browser lags for about 5 seconds, and the function is called before the data has been processed meaning the function will not work.
$('#order').html(data) is the culprit, and I need to find a way to know when it has finished processing the data?
I really hope you guys/gals can help me on this one.
<script>
function DataTable() {
$('#dataTables-example').DataTable({
responsive: true
});
}
</script>
<script type="text/javascript">
$(document).ajaxStart(function() {
$("#loading").show();
}).ajaxStop(function() {
$("#loading").hide();
DataTable()
});
$(document).ready(function() {
$('.text').text('');
$.ajax({
type: "GET",
dataType: 'html',
url: "vieworderhistory",
timeout: 120000,
cache: true,
success: function(data, status, xhr) {
$('#order').html(data).done(function() {
alert("Data processed.");
DataTable() //This is the function I want to be called when the data has been processed and is on the browser page.
});
},
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(thrownError);
}
});
});
</script>

$('#order').html(data);
alert("Data processed.");
DataTable();
This should work. The alert will show up only when $('#order').html(data) will be done.

Loader-GIF doesn't move when AJAX is loading

I'm trying to make a GIF-loader, which will be shown as long as my AJAX request is being processed. I'm using the jquery loader plugin.
The problem is, the GIF doesn't move when the browser is busy processing the AJAX request, though it is moving, when setting it to visible for testing purposes.
I've tested it in 3 major browsers.
This is an extract of my code. The real code is, of course, much more complex:
$("#myButton").click(function() {
$.loader({
className: "blue-with-image-2",
content: ''
});
getData();
});
function getData() {
$.ajax({
type: "GET",
url: "https://jsonplaceholder.typicode.com/photos",
success: function(data) {
// do something with data
console.log(data)
$.loader('close'); // close the loader
},
error: function(jqXHR, status, error) {
console.error(status, error);
}
});
}
Here is a fiddle with that example code.
The funny thing is, when testing this particular code in jsFiddle, it does
work. But not my real code, which is almost the same, but just more complex.

Use function 'beforeSend' in ajax call
function getData() {
$.ajax({
type: "GET",
url: "https://jsonplaceholder.typicode.com/photos",
beforeSend: function() {
$('#response').html("<img src='/images/loading.gif' />");
},
success: function(data) {
// do something with data
console.log(data)
$.loader('close'); // close the loader
},
error: function(jqXHR, status, error) {
console.error(status, error);
}
});

Onclick ajax is not working

When I click on submit button info of textarea tag should be sent to mail using ajax.can anyone helpme.thankyou.
$(document).on("click", "#submit-btn", function() {

The issue is because you've hooked to the click event of the submit button, not the submit event of the form. This means that the form is still submit as normal, and the response from your AJAX request is ignored.
As mentioned, hook to the submit event of the form to solve the problem and use preventDefault() to stop the standard form submission:
$(document).on("submit", "#yourFormElement", function(e) {
e.preventDefault();
$.ajax({
url: "https://ivr.callxl.com/callXLWeb/SendingEmail",
type: 'POST',
contentType: "application/json; charset=utf-8",
data: { comment: $("#cmessage").val() },
dataType: "json",
success: function (data, textStatus, jqXHR) {
if (data.success) {
alert("successfully sent");
} else {
// handle error here...
}
},
error: function(jqXHR, textStatus, errorThrown){
alert(jqXHR.responseText);
console.log("Something really bad happened " + textStatus);
$("#errorResponse").html(jqXHR.responseText);
}
});
});
Also note that I removed the async property (as true) is the default, and provided an object to the data property so that the values are encoded for you.
You should also ensure that the domain you're calling supports cross domain requests, otherwise your request will be blocked by the Same Origin Policy. If that is the case, then you would need to make the request on the server-side.

I think you should do it like this.
$("#submit-btn").on("click",function() {
$.ajax({
url: "https://ivr.callxl.com/callXLWeb/SendingEmail",
type: 'POST',
contentType: "application/json; charset=utf-8",
data: { comment: $("#cmessage").val() },
dataType: "json",
success: function (data, textStatus, jqXHR) {
if (data.success) {
alert("successfully sent");
} else {
// handle error here...
}
},
error: function(jqXHR, textStatus, errorThrown){
alert(jqXHR.responseText);
console.log("Something really bad happened " + textStatus);
$("#errorResponse").html(jqXHR.responseText);
}
});
});

jquery .click() not functioning after Ajax 403 response

I have some ajax that's returning a 403 error message but when it does, the click() function that was associated with the ajax call no longer works. I don't append or add any HTML before or after the ajax call, and if the ajax doesn't receive a 403 error, there are no problems. It's just simply if I receive a 403 error from the ajax POST, then the click() breaks. How can I fix this?
Here is my code:
$( "#add_comment" ).on('click', null, function() {
var data = {token:"{{ Session::token() }}", comment:$('#game_comment_form form textarea').val() };
$.ajax({
type: "POST",
dataType: 'json',
url: '/game/comment/{{$game->id}}',
data: data,
success: function(data){
alert("Success");
},
statusCode: {
403: function() {
alert( "Forbidden" );
}
},
error: function(e){
alert("Error");
console.log(e);
}
});
return false;
});

Why dont you try $.post(); method ?
like this...
$.post('/game/comment/{{$game->id}}',data,function(data){
alert("Success");
}).done(function(data, textStatus, jqXHR) {
// called on success
}).fail(function(jqXHR, textStatus, errorThrown) {
// called on failure
}).always(function() {
// called in both cases
});

Turns out I was completely overlooking the fact that I manually disable the input button and just simply forgot to re-enable it after the 403. I was going to delete this but hopefully someone else possibly realizes their simple mistake as I have and this helps them out.