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);
}
});
});
Related
$.ajax({
type: "GET",
dataType: 'html',
url: "submitreef" + "?id=" + $id,
timeout: 5000,
cache: false,
success: function(data, status, xhr) {
Materialize.toast('Deleted', 4000);
},
error: function(xhr, ajaxOptions, thrownError) {
Materialize.toast('Error, we could not delete the campaign, please try again later', 4000);
$error = 'true';
}
});
}
if ($error != '') {
$(this).closest('tr').remove();
}
});
My problem is that when a button is pressed to delete a record from a table it works flawlessly, but when the error function is called it does not delete, I am trying to fix this, and my attempted fix is above, but it didn't work.
If you tried to delete it twice and there were 2 errors, it would then work, but that of course isn't very useful.
I really hope someone could help me out.
Many thanks.
var trToRemove = $(this).closest('tr');
$.ajax({
type: "GET",
dataType: 'html',
url: "submitreef"+"?id="+$id,
timeout: 5000,
cache: false,
success: function(data, status, xhr) {
trToRemove.remove();
Materialize.toast('Deleted', 4000);
},
error: function(xhr, ajaxOptions, thrownError) {
Materialize.toast('Error, we could not delete the campaign, please try again later', 4000);
}
});
so its basically the problem with asynchronous ajax. your error or success gets called only when it receives a response from server. but your following code gets executed before that.
if ($error != '') {
$(this).closest('tr').remove();
}
so thats why its producing unexpected removal of the element.
as suggested by #MuhammadOmerAslam You must also keep in mind that success callback may get called but your actual data has not been deleted. so its better to return something after you deleted the data on server side and compare it in your success handler before removing the tr element.
if you return "success" after data is deleted on server side then your success function should look something like the following:
success: function(data, status, xhr) {
if(data=='success'){
trToRemove.remove();
Materialize.toast('Deleted', 4000);
}else{
Materialize.toast('Error, we could not delete the campaign, please try again later', 4000);
}
},
My ajax request is hitting an api with rate limits.
$.ajax({
url:"https://api.themoviedb.org/xxx",
crossDomain: true,
dataType: "jsonp",
dataObj : index,
success: function (response, textStatus, xhr) {
console.log('success');
}
,error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log('error');
}
});
I would like to know when I hit the rate limit.
But for the requests showing this in the console :
Failed to load resource: the server responded with a status of 429 (OK)
I don't see 'success' or 'error'.
It's like success and error are not executed.
Is there a way to popup and alert e.g. ?
I tried complete but it does not work either.
Thank you
I could not find documentation for dataObj but removing it seemed to make the query run properly.
If you get rid of it the error callback gets executed and you will be able to see error in the console.
$.ajax({
url:"https://api.themoviedb.org/xxx",
crossDomain: true,
dataType: "jsonp",
success: function (response, textStatus, xhr) {
console.log('success');
}
,error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log('error');
}
});
edit:
turns out what you actually want to change is the datatype. Unless you are explicitly also passing a callback you should tell jQuery that you are getting json and not jsonp back.
$.ajax({
url:"https://api.themoviedb.org/xxx",
crossDomain: true,
dataType: "json",
dataObj: index,
success: function (response, textStatus, xhr) {
console.log('success');
}
,error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log('error');
}
});
Try using the jQuery statusCode object in the settings, like this:
$.ajax({
url:"https://api.themoviedb.org/xxx",
crossDomain: true,
dataType: "jsonp",
dataObj : index,
success: function (response, textStatus, xhr) {
console.log('success');
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
console.log('error');
},
statusCode: {
429: function() {
alert( "Exceeded request limit." );
}
}
});
I am trying to abort ajax call using beforeSend if certain condition is true.
As soon as I call jqXHR.abort() or return false.
I get following error
TypeError: $.ajax(...).fail is not a function
.fail(function (jqXHR, textStatus, errorThrown) {
following is the javascript code
$.ajax({
type: "POST",
beforeSend: function (jqXHR) {
if (1 === 1) {
jqXHR.abort();
}
},
data: { x:1},
url: 'echo/json'
})
.fail(function (jqXHR, textStatus, errorThrown) {
console.log("error"+textStatus)
})
.done(function (data) {
console.log("ajax complete");
console.log(data);
});
jsfiddle: http://jsfiddle.net/939xG/
Does anyone know why jqXHR.abort() in beforeSend thorws an error?
or how i can change the code in beforeSend such that I can abort the ajax request without any error.
I am using jquery 1.7.2 and can not upgrade to higher version
When you abort $.ajax in beforeSend, $.ajax will return false rather than a jqXHR. Avoid it by not aborting in beforeSend, or not using done and fail methods in favor of using success and error options instead.
http://jsfiddle.net/939xG/2/
var jqXHR = $.ajax({
type: "POST",
beforeSend: function (jqXHR) {
if (1 === 1) {
jqXHR.abort();
}
},
data: {
x: 1
},
url: 'echo/json',
success: function (data) {
console.log("ajax complete");
console.log(data);
},
error: function (jqXHR, textStatus, errorThrown) {
console.log("error" + textStatus)
}
});
console.log(jqXHR) // false
This sounds like a bug to me, but since upgrading jquery isn't an option, i didn't look into that possibility.
I have a simple form submission with ajax, but it keeps giving me an error. All the error says is "error". No code, no description. No nothing, when I alert it when it fails.
Javascript with jQuery:
$(document).ready(function(){
$(".post-input").submit(function(){
var postcontent = $(".post-form").val();
if (postcontent == ""){
return false;
}
$(".post-form").attr("disabled", "disabled");
$.ajax({
url: '/post',
type: 'POST',
data: {"post-form": postcontent},
dataType: json,
success: function(response, textStatus, jqXHR) {
alert("Yay!");
},
error: function(jqXHR, textStatus, errorThrown){
alert(textStatus, errorThrown);
}
});
});
});
HTML:
<form class="post-input" action="" method="post" accept-charset="utf-8">
<textarea class="post-form" name="post-form" rows="1" cols="10" onFocus="this.value='';return false;">What are you thinking about...</textarea>
<p><input class="post-submit" type="submit" name = "post.submitted" value="Post"></p>
</form>
and if there are no problems there, then the server-side (pyramid):
def post(request):
session = Session()
user = authenticated_userid(request)
postContent = request.POST['post-form']
if not postContent == '':
session.add(Activity(user.user_id, 0, postContent, None, None))
return {}
return HTTPNotFound()
UPDATE:
After some more debugging with firebug, I discovered that the post request body contains only post.submitted=Post, instead of the intended result of {"post-form": postcontent}.
According to jQuery documentation, you must declare the data type:
$.ajax({
type: 'POST',
url: url,
data: data,
success: success,
dataType: dataType
});
Also, looking at your server-side code, you don't actually want to post JSON formatted data. This {"post-form":postcontent} is JSON formatted data. What you actually want to do is send TEXT or HTML. Seeming as it's form data, I would guess at TEXT.
Try this:
$.ajax({
url: '/post',
type: 'POST',
data: 'post-form='+postcontent,
dataType: 'text',
success: function(response, textStatus, jqXHR) {
alert("Yay!");
},
error: function(jqXHR, textStatus, errorThrown){
alert(textStatus, errorThrown);
}
});
Since you are posting JSON-data you have to declare the dataType "JSON":
$.ajax({
url: '/post',
type: 'POST',
dataType: "json",
data: {"post-form": postcontent},
success: function(response, textStatus, jqXHR) {
alert("Yay!");
},
error: function(jqXHR, textStatus, errorThrown){
alert(textStatus, errorThrown);
}
});
I think the problem is that the data that you are passing is not properly written.
Try to change this:
data: {"post-form": postcontent},
To this:
data: 'post-form='+ $('.post-form').val(),
I have a php script, which return serialized in php data. And I try to receive this data by using $.ajax() method from jQuery 1.7. Here is the example.
$.ajax({
url: 'http://input.name/get.php?do=lookup' + '&domain=twittorama&tlds=.ru,.com,.net,.comf.ru',
type: 'GET',
dataType: 'text',
cache: 'false',
complete: function(res) {
alert('COMPLETE() done');
console.log(res);
}
});
In console I see only
Object { readyState=0, status=0, statusText="error"}
So, what I do wrong? Could you help me please?
UPD
Interesting notice: if I use JSONP dataType request can receive data, but can't process it.
Here is an example.
$.ajax({
url: 'http://input.name/get.php?do=lookup',
data: 'domain=twittorama&tlds=.ru,.com,.net,.comf.ru',
dataType: 'jsonp',
cache: false,
success: function(data) {
alert("Data: "+data);
},
error: function(jqXHR, textStatus, errorThrown) {
alert("Error: "+textStatus);
console.log(jqXHR);
}
});
Instead of complete: use success: then res will be the returned data from your ajax request.
Remember to use error: as well incase there is an error with you call, as it seems that there might be in your console output.
Code:
$.ajax({
url: 'http://input.name/get.php?do=lookup',
data: 'domain=twittorama&tlds=.ru,.com,.net,.comf.ru',
cache: false,
success: function(data) {
alert("Data: "+data);
},
error: function(jqXHR, textStatus, errorThrown) {
alert("Error: "+textStatus);
console.log(jqXHR);
}
});
Your code is probably fine, but you're trying to violate the same origin policy. Basically, if your site is http://aaa.com/, you cannot make AJAX called to http://bbb.com/.
There are a few ways around it:
Getting around same origin policy in javascript without server side scripts
But most of them require that both sides play nice.
The response is the second parameter of complete function:
$.ajax({
url: 'http://input.name/get.php?do=lookup' + '&domain=twittorama&tlds=.ru,.com,.net,.comf.ru',
type: 'GET',
dataType: 'text',
cache: 'false',
complete: function(res,response) {
alert('COMPLETE() done');
console.log(response);
}
});
More info: http://api.jquery.com/jQuery.ajax/
You should also consider using JSON, not php serialized data