javascript - AJAX call working in Chrome, but not in Safari, Firefox or Internet Explorer

Solution:

Try using type="button" instead of type="submit".

As in:

   <button type="button" class="btn btn-default btn-med account_submit" id="personal_submit" name="personal_submit">Update Personal</button>
Copy code

It's hacky, but it works in every browser I've tried. The type="submit" means something special to most browsers.

Edit: Wait...are you using Malsup's "jQuery Form Plugin"?

Solution:

Two things:

1.) Turn your button type tobutton a la:

<button type="button" class="btn btn-default btn-med account_submit" id="personal_submit" name="personal_submit">Update Personal</button>
Copy code

2.) Change your event handler to call$jsForm.ajaxSubmit( ajax_options ); instead of$jsForm.ajaxForm( ajax_options );

According to their docs,$jsForm.ajaxForm( ajax_options ); doesn't actually submit the form. The fact that this was working as you expected in Chrome suggests it's doing something weird behind the scenes when submitting forms.

Solution:

Try this solution for a plain, jQuery option:

var which_button;

$('.account_submit').click(function() {
    which_button = $(this).attr('id');

    // Create empty jQuery objects -
    var $jsOutput = $([]);
    var $jsForm = $([]);

    // url to submit to
    var ajaxURL = "/users/p_teacher_account_work";

    // Assign jQuery selector objects
    switch (which_button) {
        case "work_submit":
            $jsOutput = $('#pay_output');
            $jsForm = $('#pay_form');
            break;
        case "edu_submit":
            $jsOutput = $('#edu_output');
            $jsForm = $('#edu_form');
            break;
        case "image_submit":
            $jsOutput = $('#image_output');
            $jsForm = $('#image_form');
            break;
        case "personal_submit":
            $jsOutput = $('#personal_output');
            $jsForm = $('#personal_form');
            break;
    }

    // Get the form data
    var formData = $jsForm.serializeArray();

    // Lock and load and fire the ajax request -
    $.ajax({
        type: 'POST',
        url: ajaxURL,
        data: formData,
        contentType: "application/x-www-form-urlencoded",
        dataType: "html",
        cache: false, // this will save you a bunch of IE headaches
        beforeSend: function() {
            //Display a loading message while waiting for the ajax call to complete
            $jsOutput.html("Updating...");
        },
        error: function(jqHXR, textStatus, errorThrown) {
            alert("Sorry, something went wrong.\nDetails: " + textStatus + ". " + errorThrown);
        },
        success: function(response) {
            $jsOutput.html(response);
        }
    });
});
Copy code

Now, you can make the button type="button" or even replace it with an element with no default onclick event action such as a span.

Solution:

It was not working because of a boostrap formhelpers plugin country picker dropdown http://bootstrapformhelpers.com/country/#jquery-plugins that wasn't loading correctly in the problematic browsers. For what it's worth, here is the code that wound up working (not including the removal of that nefarious plugin):

var which_button;
//$('.account_submit').click(function() {
$('form.teacher_account_form').on('submit', function(e) {
    e.preventDefault();
    which_button = $(this).attr('id');

    // Create empty jQuery objects -
    var $jsOutput = $([]);
    var $jsForm = $([]);

    // url to submit to
    var ajaxURL = "/users/p_teacher_account_work";

    // Assign jQuery selector objects
    switch (which_button) {
        case "pay_form":
            $jsOutput = $('#pay_output');
            $jsForm = $('#pay_form');
            break;
        case "edu_form":
            $jsOutput = $('#edu_output');
            $jsForm = $('#edu_form');
            break;
        case "image_form":
            $jsOutput = $('#image_output');
            $jsForm = $('#image_form');
            break;
        case "personal_form":
            $jsOutput = $('#personal_output');
            $jsForm = $('#personal_form');
            break;
    }

    // empty data object
    var form_data = {};

    // variables for data
    $(this).find('[name]').each(function(index, value) {
        var that = $(this),
            name = that.attr('name'),
            value = that.val();

        // load loaded variables into array
        form_data[name] = value;

    });

    $.ajax({
        type: 'post',
        url: ajaxURL,
        data: form_data,
        beforeSend: function() {
            //Display a loading message while waiting for the ajax call to complete
            $jsOutput.html("Updating...");
        },
        success: function(response) {
            $jsOutput.html(response);
        }

    });

    return false;


});
Copy code