We Keep Coding

ajax post working on chrome but not working on firefox and safari

I've encountered an issue where a jquery ajax post method works on chrome but does not work on safari or firefox. I've looked through all the other similar posts and they don't solve the problem. Whenever I run the ajax code, it just returns the entire HTML of the page the form is found on.
Here's my javascript:
$("#piece-form").submit(function(e)
{
e.preventDefault();
// gets which submit button was clicked
var selectedButton = $(this).find("input[type=submit]:focus");
var url = selectedButton.attr("name");
var formData = new FormData(this);
$.ajax
(
{
type: "POST",
url: url,
data: formData,
cache: false,
processData: false,
success: function(data)
{
if(data == "Success!")
{
$("#error-box").css("display", "none");
$("#success-box").html("Success! Publishing...");
$("#success-box").css("display", "block");
}
else
{
$("#success-box").css("display", "none");
$("#error-box").html(data);
$("#error-box").css("display", "block");
}
}
}
)
});
No matter the content of the PHP file the function points to, it doesn't work as planned. I've tried making a PHP file with a single echo line and I still run into the same problem. I've implemented an error block in the ajax as well and it returns nothing. I also don't receive an error in the console other than: "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr.spec.whatwg.org/" in Firefox
Edit: I've added contentType:false and it still isn't functioning properly on Firefox and Safari

Have you tried wrap your code in document ready?
Also as much as i know now it is correct to use on():
$( document ).ready(function() {
$("#piece-form").on('submit', function(e){
//your main code here
});
});
For now it does not looks like there would be any issue. ..

I finally found the answer.
The error is in the following line of code:
var selectedButton = $(this).find("input[type=submit]:focus");
var url = selectedButton.attr("name");
For some reason, Firefox and Safari don't properly get the value of "selectedButton" (although Chrome does) resulting in the url variable being incorrectly set. In order to circumvent this, I did the following:
$(".piece-button").click(function (){
url = $(this).attr("name");
})
I needed the submittedButton method because I had two submit buttons for the form and was trying to find which one was clicked. This alternate method does that and is transferrable across all three browsers I have tested. This may not be an optimal solution to the two button submit issue but it worked for me and now the ajax works without a hitch.

Though you have got the solution but from interest I am sharing mine as I have just encountered same problem and got the workaround by adding event.preventDefault(); after success. Example code is given
$(document).ready(function() {
$('form').on('submit', function(event) {
$.ajax({
data: {
name: $('#nameInput').val(),
email: $('#emailInput').val()
},
type: 'POST',
url: '/post_for_db',
success: function(data) {
console.log(data)
$("body").html(data);
// This will navigate to your preferred location
document.location = '/render_table_from_db';
},
event.preventDefault(); // solution is this for me
});
});

IE and Edge returns same response on AJAX request using jQuery

jQuery version: 2.1.4
Server-side technology: ASP.NET MVC 5
Erratic behaviour in browsers: Internet Explorer 11 and below. Also in latest Microsoft Edge
I'm doing an AJAX request like this:
$(document).ready(function(){
$.ajax({
url: "/actions/addPost",
type: "POST",
data: { name: "Jesús", ... },
sync: true,
success: function(data){
$("#blog-posts").load("/actions/getPosts");
},
error: function(data){
// show error ..
}
});
});
The load("actions/getPosts") will always return the same response, when It should return all the posts. Funny thing is, when I reload the page, it will load all the posts, also, if I request /actions/getPosts directly it will return every post correctly. But it's as if the requests had been cached somehow by IE and Edge. In every other browser, Chrome, Firefox, Opera and Safari, it works nicely.
What's the cause of this issue? How to fix it?

Ajax request seems to fail in IE 8

The following jQuery code returns an xml file from the Met Office datapoint and should alert the user with an attribute in the xml data:-
$.ajax({
url: "http://datapoint.metoffice.gov.uk/public/data/val/wxfcs/all/xml/324246?res=daily&key=myapikey",
dataType: "xml",
method: "GET",
success: function (text) {
myValue = $(text).find("Period Rep").first().attr("W");
alert(myValue);
},
error: function () {
alert("Not working");
}
})
This works fine in Chrome and does what I expect, but in IE8 the error function is called. Any ideas what I'm doing wrong or why IE doesn't want to work?
(Note: I know IE8 is far from ideal but I have to support it for this application unfortunately. There's no way around this at present)

Try
jQuery.support.cors = true;
Before request and
crossDomain: true
as ajax option

Javascript / Ajax Redirect Issues

Very new to code in general so apologies in advance if i dont explain myself properly,
But I have a form, that actions a piece of JavaScript on submit.
If the form validates successfully then it calls a php file for server side processing.
Once the server side processing is complete the php file returns some data (a url) which the user is then redirected to (client side)
This all works fine on desktop (chrome, IE, FF) and via modern mobile devices, however the redirect is not working on some devices (blackberry for one), and a i assume other older devices. Instead of the redirect URL going straight into the address bar, it is being placed after the url of the original page - as such causing the user to be redirected to a page that of course doesnt exist.
Below is the script that is called on submit. Again apologies if none of the above makes sense...I am very new to all this:
$(function () {
$('#wait').hide();
$('form#leads_form').on('submit', function (e) {
if (validateFrm()) {
$(":submit", this).attr("disabled", true);
$('#wait').show();
var jqxhr = $.ajax({
type: 'post',
timeout: 300000,
url: 'sell-save-leads.php',
cache: false,
data: $('form').serialize(),
success: function (data) {
//alert("Submit success: " + data);
window.top.location.href = data;
}
});
} else {
//alert("validation errors");
$('#wait').hide();
}
e.preventDefault();
});
});
If anyone is able to help or offer some advice that would be great.

As your form is located in an iFrame I suggest you to use this jQuery plugin to send messages from an iframe to its parent:
http://benalman.com/projects/jquery-postmessage-plugin/
With this you could send a message from inside your success function, containing the new url, and catch it in the parent window.

You can also use
window.top.location.assign(data);
Ref: https://developer.mozilla.org/en-US/docs/Web/API/Window.location

Javascript FormData function works with Chrome and Opera but not Firefox

var data = new FormData(document.getElementById("uploadform"));
$.each($('#file')[0].files, function(i, file) {
data.append('file-'+i, file, this.name);
});
That code works on Chromium 26 but not Firefox 21. I put an alert within the each loop, "alert(this.name)", which displays the filename in Chrome, but nothing in Firefox...so that's apparently where it's all bogging down in Firefox.
I also tried it on Firefox 24--same problem. I know this code used to work on Firefox--an older version than 21.
This slight change, just leaving off a couple parameters, gives me the same results:
var data = new FormData();
$.each($('#file')[0].files, function(i, file) {
data.append('file-'+i, file);
});
I just have no idea what's up, because Mozilla docs show that this is supported and that I'm doing it right.
Here's the ajax call portion of the code if anyone curious (but this is not the problem--it's bogging down in the above code per my alert check):
$.ajax({
url: 'upload.php',
data: data,
contentType: false,
processData: false,
cache: false,
type: 'POST',
success: function(data){ }
Anyone have any similar problems, or have any inkling where to even look?

Are there errors in your browser's console? Check the Net (or Network) tab as well.
I would test in IE or Opera as well to confirm that it is specifically a FF issue.
Also try producing an alert
if (!window.FormData) {
alert('Doh!');
}