douhaoqiao9304 2013-12-21 22:18
浏览 53
已采纳

AJAX调用在Chrome中运行,但不适用于Safari,Firefox或Internet Explorer

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:

<form method="post" class = "multi-form teacher_account_form" id="personal_form" name="personal_form">
    <div class = "form-group">
        <label for="phone">What is your phone number?*</label>
        <input type="text" class="form-control bfh-phone" data-format="+86 ddd dddd dddd" name="phone" id="phone" value="<?=$this_user[0]['phone']?>">
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-default btn-med account_submit" id="personal_submit" name="personal_submit">Update Personal</button>
    </div>                
</form>

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.

展开全部

  • 写回答

4条回答 默认 最新

  • doubu1970 2013-12-22 21:48
    关注

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

    展开全部

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)
编辑
预览

报告相同问题?

手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部