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

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

Related

AJAX form submitting multiple values to MySQL even after using bind unbind, on off

Okay so this problem has been solved multiple times but mine is a bit more complicated. The following is my AJAX which takes as input Text fields and image and submits the fields and file path to the database.
$(function () {
$('form#data').off('submit').on('submit',function () {
var formData = new FormData($(this)[0]);
$.ajax({
type:'POST',
url: 'upload.php',
data: formData,
async:false,
cache:false,
contentType: false,
processData: false,
success: function (returndata) {$('#result').html(returndata);}
});
return false;
});
});
Now when I submitted a file it was uploaded normally. Then if I tried submitting a second file, it created multiple copies on the database. And it went on exponentially increasing as I went on uploading further.
So I looked up and saw that bind/ unbind and on/off were two solutions.
This worked for for the second file uploaded, but from the third file onwards the repetition continued.
Please let me know where i am going wrong.
Thanks.
Okay so I solved it. I removed the on off and did this. Now works fine!
$(function () {
$('form#data').submit(function (e){
e.preventDefault();
e.stopImmediatePropagation();
var formData = new FormData($(this)[0]);
$.ajax({
type:'POST',
url: 'upload.php',
data: formData,
async:false,
cache:false,
contentType: false,
processData: false,
success: function (returndata) {$('#result').html(returndata);}
});
return false;
});
});

Form submit Ajax using jQuery sometimes does not works

I am doing form data submit using Ajax with jQuery.
When I submit form on popup window, I refresh the parent page.
My code:
$(document).ready(function() {
$("#frm_addSpeedData").submit(function(event) {
//event.preventDefault();
$.ajax({
type: "POST",
url: "/webapp/addSpeedDataAction.do",
data: $(this).serialize(),
success: function(data) {
//console.log("Data: " + data);
window.opener.location.reload();
}
});
});
});
However page gets refreshed on success of callback but i can not see update on my parent page. Sometimes I can see updates and sometimes not. What is the issue? I also need to know how I can write it in native javascript and submit form using ajax javascript.
Maybe your getting this error due the fact that javascript is async and your code will proceed even when you have yet no response from the request.
Try this:
$(document).ready(function() {
$("#frm_addSpeedData").submit(function(event) {
//event.preventDefault();
$.ajax({
type: "POST",
url: "/webfdms/addSpeedDataAction.do",
data: $(this).serialize(),
async: false, // This will only proceed after getting the response from the ajax request.
success: function(data) {
//console.log("Data: " + data);
window.opener.location.reload();
}
});
});
});

Netsuite form JavaScript Error in Safari

I added a recaptcha script on my Netsuite external form and it works on every browser except for Safari (using 5.1.7).
It gives this error:
"onSubmit (saveRecord) customform JS_EXCEPTION ReferenceError Can't find variable: onSubmit"
The code I'm using is below and the Safari error console doesn't give me anything. Any ideas?
function onSubmit() {
var captchaChallenge = $('#recaptcha_challenge_field').val();
var captchaResponse = $('#recaptcha_response_field').val();
var isToBeSubmitted = true;
$.ajax({
url: CAPTCHA_VERIFICATION_SUITELET_URL + '&challenge=' + captchaChallenge + '&response=' + captchaResponse,
type: 'POST',
accepts: 'application/json',
dataType: 'json',
cache: false,
async: false
}).done(function (data) {
if (!data.status.isSuccess) {
alert('Captcha Verification Failed.');
Recaptcha.reload();
isToBeSubmitted = false;
}
});
return isToBeSubmitted;
}
Images of script setup
Can you try to change the function to another name not so generic like
function onCustomerSubmit
Finally figured out the issue. When I attach a script to the online customer form, I needed to make sure the checkbox "Available Without Login" is checked. Never saw it before, but I checked it and it solved the issue with Safari. Attached a picture for reference.

jquery .ajax always returns error - data being added to database

I am trying to add users to a database using jquery ajax calls. The users get added just fine to the database, but the ajax always returns with error. I'm not sure how to retrieve the specific error either. Below is my code, form, php, and jquery.
Here is the jquery
$(document).ready(function() {
//ajax call for all forms.
$('.button').click(function() {
var form = $(this).closest('form');
$.ajax({
type: "POST",
url: form.attr('data'),
dataType: 'json',
data: form.serialize(),
success: function (response) {
alert('something');
},
error: function() {
alert('fail');
}
});
});
});
Here is the PHP
<?php
include 'class_lib.php';
if(isset($_POST['username'])) {
$user = new Users;
$user->cleanInput($_POST['username'], $_POST['password']);
if($user->insertUser()) {
echo json_encode('true');
} else {
echo json_encode('false');
}
}
Here is the HTML
<div id='newUser' class='tool'>
<h3>New User</h3>
<form method='post' name='newUser' data='../php/newUser.php'>
<span>Username</span><input type='text' name='username'><br>
<span>Password</span><input type='password' name='password'>
<input type='submit' name='submit' class='button' style='visibility: hidden'>
</form>
<span class='result'> </span>
</div>
#Musa, above you mentioned
My guess is its a parsing error, try removing dataType: 'json', and see if it works
You absolutely solved the problem I was having! My ajax post request was similar to above and it just kept returning to the 'error' section. Although I checked using firebug, the status was 200(ok) and there were no errors.
removing 'dataType:json' solved this issue for me. Thanks a lot!
Turns out I had to add async: false to the $.ajax function. It wasn't getting a response back from the php.
I know this is an old question but I have just run into a weird situation like this ( jquery ajax returns success when directly executed, but returns error when attached to button, even though server response is 200 OK )
And found that having the button inside the form tags caused JQuery to always return error. Simply changing the form tags to div solved the problem.
I believe JQuery assumes the communication should be form encoded, even though you say it is application/json.
Try moving your button outside your form and see what happens...
I had the same problem and discovery there. All the time the problem is the version of my jQuery, I had use jquery version (jquery-1.10.2.js) but this version is not Ajax stablish. So, I change version for (jquery-1.8.2.js) and this miracle heppened.
Good Luck Guy!
You should specify status Code 200 for successful response.
<?php
http_response_code(200);
?>
See here: http://php.net/manual/en/function.http-response-code.php
The first solution
Try to remove dataType in your js file like that:
$(document).ready(function() {
$('.button').click(function() {
var form = $(this).closest('form');
$.ajax({
type: "POST",
url: form.attr('data'),
data: form.serialize(),
success: function (response) {
alert('something');
},
error: function() {
alert('fail');
}
});
});
});
The second solution
Send a real clean JSON to AJAX like that:
PHP
if(isset($_POST['username'])) {
$user = new Users;
$user->cleanInput($_POST['username'], $_POST['password']);
if($user->insertUser()) {
$error = [
"title"=> 'true',
"body"=> 'some info here ... '
];
echo json_encode($error);
} else {
$error = [
"title"=> 'false',
"body"=> 'some info here ... '
];
echo json_encode($error);
}
}
JavaScript
$(document).ready(function() {
$('.button').click(function() {
var form = $(this).closest('form');
$.ajax({
type: "POST",
url: form.attr('data'),
dataType: 'json',
data: form.serialize(),
success: function (data) {
let x = JSON.parse(JSON.stringify(data));
console.log(x.title);
console.log(x.body);
},
error: function() {
//code here
}
});
});
});

Browser cache issue in IE

I have this JavaScript code:
$('#selectionoptions').change(function() {
var courseId = $(this).val();
$.get('../php/lecturer_getcourse_info.php',
{ course_id: $(this).val() },
function(courseData) {
var description = courseData.description;
$("#coursecontent").html(description);
...
Assume I can also modify 'description' and save it back to the db. Now, on Firefox every time I refresh the page I see the correct description; but on IE I have to clear the cache before I see the correct description....
How can I fix this?
The reason being in IE you have to false the Ajax Calls not to cache.
Use this:
$.ajaxSetup({
// Disable caching of AJAX responses
cache: false
});
or use a completely different ajax call rather than $.get such as:
$.ajax({
url: "test.html",
success: function(data){
alert('data returned!');
},
cache: false
});

Categories