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

557

I have a single page with multiple forms, submitting each of them with an AJAX call to the same PHP controller. In Chrome, when I submit the form, I get a beforeSend message, and then a success call. In Safari, IE and Firefox, it instead refreshes the page, thus seemingly going right past the ajax call that should keep it from refreshing.

The forms are of this type:

The JS is like this:

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

    // Lock and load the ajax request -
    var ajax_options = {
        type: 'post',
        url: ajaxURL,
        beforeSend: function() {
            //Display a loading message while waiting for the ajax call to complete
            $jsOutput.html("Updating...");
        },
        success: function(response) {
            $jsOutput.html(response);
        }
    };
    $jsForm.ajaxForm( ajax_options );


});

My php files query the database and send back information to a view which is echoed to the same page that the forms sit on.

345

Answer

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>

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"?

887

Answer

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>

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.

273

Answer

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

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.

952

Answer

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;


});

People are also looking for solutions to the problem: php - Why does fetchColumn() always return 1?

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.