This is my AJAX code. It's working fine and sends data to my database. However I don't get any alert() on success.
Can you tell me why?
$(function() {
$('#placeBid').on('submit', function(e) {
$.ajaxSetup({
headers: {
'X-CSRF-Token': $('meta[name="csrf_token"]').attr('content')
}
});
e.preventDefault(e);
$.ajax({
method:"POST",
url: $("#placeBid").attr("action"),
data: $(this).serialize(),
dataType: 'json',
success: function(data) {
if (data == true)
alert('working');
else
alert('not working');
},
error: function(data) {}
})
});
});
Remove the dataType: 'json' option will fix the issue because the callback will wait for data to be json when you're returning I guess string because you're trying to make a condition data == true (by the way it will be never achieved because data returned could not be boolean).
So just remove the option and dataType will make by default Intelligent Guess for (xml, json, script, or html) :
$.ajax({
method:"POST",
url: $("#placeBid").attr("action"),
data: $(this).serialize(),
success: function(data) {
if (data == 'true')
alert('working');
else
alert('not working');
},
error: function(data) {}
})
Hopet this helps.
Related
I'm creating an app for a project and I'm stuck with this feature. I've already created a POST method for the checked checkboxes but I don't know how to get that information and then display it on my HTML page. I'm not sure with my GET method. It's basically an edit page feature. And we're only supposed to use AJAX and flask. Please help.
function edit_food() {
console.log($('input[name="food"]:checked').serialize());
$.ajax({
url: 'http://127.0.0.1:5000/edit_food.html/',
data: JSON.stringify({}),
type: "POST",
dataType: "json",
success: function (newSet) {
$('input[name="food"]:checked');
if (newSet.status == 'ok') {
alert("SAVED!")
}
},
error: function (e) {
alert("Something went wrong!");
}
});
var $set = $('#set');
$.ajax({
url: 'http://127.0.0.1:5000/food.html/',
data: JSON.stringify({}),
type: "GET",
dataType: "json",
success: function (set) {
$('input[name="food"]:checked');
if (set.status == 'ok') {
alert("SAVED!")
}
},
error: function(e) {
alert("Something went wrong!");
}
});
}
When you use Ajax, you can return data type string, json, or html.
I often return json data or html data.
With html data you can using:
.done(function(res){
$('#id_reaload').html(res);
})
I'm using Ajax to add an array of data to a database.
Currently when "#bookingbutton" is clicked on this returns a block of HTML with ".select-room-button" button.
I've added the ".select-room-button" code in the success function of the original Ajax call for "#bookingbutton" otherwise it doesn't work.
I want to be able to click on the ".select-room-button" unlimited times without having to repeat the code loads of times in each success function if that makes sense? I feel like there must be a smarter way to do this but I'm not sure how?
jQuery(document).ready(function($) {
$('#bookingbutton').click(function() {
$('.booking-main').html('<img src="http://mailgun.github.io/validator-demo/loading.gif" alt="Loading...">');
$('.booking-side-response').html('<img src="http://mailgun.github.io/validator-demo/loading.gif" alt="Loading...">');
$.ajax({
type: 'POST',
url: AJAX_URL,
data: $('#bookroom').serialize(),
dataType: 'json',
success: function(response) {
if (response.status == 'success') {
$('#bookroom')[0].reset();
}
$('.booking-main').html(response.content);
$('.booking-side-response').html(response.sidebar);
$('.select-room-button').click(function() {
$('.booking-main').html('<img src="http://mailgun.github.io/validator-demo/loading.gif" alt="Loading...">');
$('.booking-side-response').html('<img src="http://mailgun.github.io/validator-demo/loading.gif" alt="Loading...">');
$.ajax({
type: 'POST',
url: AJAX_URL,
data: $('#bookroom').serialize(),
dataType: 'json',
success: function(response) {
if (response.status == 'success') {
$('#bookroom')[0].reset();
}
$('.booking-main').html(response.content);
$('.booking-side-response').html(response.sidebar);
}
});
});
}
});
});
});
For this you can use various selector for a single event to trigger ajax calls.
So your code snippet will look like
jQuery(document).ready(function($) {
$(document).on("click",'#bookingbutton, .select-room-button', function() {
$('.booking-main').html('<img src="http://mailgun.github.io/validator-demo/loading.gif" alt="Loading...">');
$('.booking-side-response').html('<img src="http://mailgun.github.io/validator-demo/loading.gif" alt="Loading...">');
$.ajax({
type: 'POST',
url: AJAX_URL,
data: $('#bookroom').serialize(),
dataType: 'json',
success: function(response) {
if (response.status == 'success') {
$('#bookroom')[0].reset();
}
$('.booking-main').html(response.content);
$('.booking-side-response').html(response.sidebar);
}
});
});
});
You can try using .on like this on the document. It will bind events for dynamically generated HTML too.
jQuery(document).ready(function($) {
$(document).on("click",'#bookingbutton, .select-room-button').click(function() {
$('.booking-main').html('<img src="http://mailgun.github.io/validator-demo/loading.gif" alt="Loading...">');
$('.booking-side-response').html('<img src="http://mailgun.github.io/validator-demo/loading.gif" alt="Loading...">');
$.ajax({
type: 'POST',
url: AJAX_URL,
data: $('#bookroom').serialize(),
dataType: 'json',
success: function(response) {
if (response.status == 'success') {
$('#bookroom')[0].reset();
}
$('.booking-main').html(response.content);
$('.booking-side-response').html(response.sidebar);
});
});
});
You can make these change
use $(document).ready(function() instead of jQuery(document).ready(function($)
use $('body').on('click', '.select-room-button', function() instead of $('.select-room-button').click(function() and get it out $('#bookingbutton').click(function()
Here is the code I am using to access my web API controller named Owner; the success function is not being called. Any ideas?
$.ajax({
type: "GET",
url: 'http://localhost:26533/api/Owner',
contentType: "application/json",
dataType: "jsonp",
success: function (response) { alert("yes"); }
});
Remove the contentType and dataType and check the response..
Here an example:
$.ajax({
type: 'GET',
url: 'http://localhost:26533/api/Owner',
success: function(data){
alert(data);
},
error: function(xhr, type, exception) {
// if ajax fails display error alert
alert("ajax error response type " + type);
}
});
With this you can see what's wrong...
$.ajax({
url: url,
dataType: 'jsonp',
success: function(data) { //not firing at all
console.log('success');
console.log(data);
}
error: function() { //always firing even with status 200 & valid JSON response.
console.log('error');
}
});
$.ajax({
url: url,
dataType: 'jsonp',
success: function(data) { //not firing at all
console.log('success');
console.log(data);
}, //You have missed a comma here..
error: function() { //always firing even with status 200 & valid JSON response.
console.log('error');
}
});
You have missed a comma.
Just check the comment
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).