iPhone jquery / ajax仅适用于某些情况

Question

我正在处理的项目中有多个页面，使用AJAX向django提交表单。除了移动游猎之外，所有这些按钮都可用于看似所有东西（移动和桌面，铬，火狐，桌面游猎）。在iPhone上使用safari，一些请求将起作用，但其他请求不会，我似乎无法弄清楚原因。我试图让它们全部采用与有效结构类似的结构，但仍然没有，所以我认为我会寻求一些帮助。提前谢谢！

这是一个有效的例子：

使用Javascript：

$('#submit').on('click',function(){
        dataDict = {csrfmiddlewaretoken:'{{ csrf_token }}'};
        dataDict['deleted_exercises'] = deleted_exercises;
        var errors = 0;
        $('.error').hide();
        dataDict['workout_id'] = '{{ workout.id }}';
        var exist_exercise_list = [];
        $('.existing').each(function(){
            //add either new or existing exercise name to exercise list
            var ex_name = $(this).find('.ex-name').data('name');
            var edit_ex_name_input = $(this).find('.ex-name-input').val(); 
            var ex_name_lower = ex_name.replace(/\s+/g, '-').toLowerCase();
            exist_exercise_list.push(ex_name);

            var edit_ex_name = ex_name_lower + '-name';
            dataDict[edit_ex_name] = edit_ex_name_input;

            //add exercise unit to data dict
            var edit_ex_unit = $(this).find('.ex-unit').val();
            var ex_unit_name = ex_name_lower + '-unit';
            dataDict[ex_unit_name] = edit_ex_unit;

            //add max event for exercise to data dict
            var max_event = $(this).find('.max-event-select').val();
            var max_event_name = ex_name_lower + '-max-event';
            dataDict[max_event_name] = max_event;

            //add color group to data dict
            var color_group = $(this).find('.ex-color-select').val();
            var color_group_name = ex_name_lower + '-color';
            dataDict[color_group_name] = color_group;

            //add exercise order to dataDict
            var exercise_order = $(this).data('order');
            var order_name = ex_name_lower + '-order';
            dataDict[order_name] = exercise_order;

            //add exercise notes
            var notes = $(this).find('.ex-notes').val();
            var notes_name = ex_name_lower + '-notes';
            dataDict[notes_name] = notes;

            //
            var sets = $(this).find('.exist-set');
            var num_sets = $(sets).length;
            var num_sets_name = ex_name_lower + '-num-sets';
            dataDict[num_sets_name] = num_sets;
            $(sets).each(function(){
                var set_num = $(this).find('.set-num').data('number');

                //add target weight for this set to dataDict
                var target_weight = $(this).find('.weight').val();
                if (target_weight != '' && Math.round(target_weight) !== parseInt(target_weight)){
                    errors = errors + 1;
                    $(this).find('.weight').before("<span class='error' style='color: #FF4444'>Please enter a valid weight</span>");
                }
                var target_weight_name = ex_name_lower + '-set-' + set_num + '-weight';
                dataDict[target_weight_name] = target_weight;

                //add max percentage to dataDict
                var max_percent = $(this).find('.percentage').val();
                if (max_percent != '' && isNaN(max_percent)){
                    errors = errors + 1;
                    $(this).find('.percentage').before("<span class='error' style='color: #FF4444'>Please enter a valid percent</span>");
                }
                var max_percent_name = ex_name_lower + '-set-' + set_num + '-percent';
                dataDict[max_percent_name] = max_percent;

                //add reps to dataDict
                var reps = $(this).find('.reps').val();
                if (reps != '' && Math.round(reps) !== parseInt(reps)){
                    errors = errors + 1;
                    $(this).find('.reps').before("<span class='error' style='color: #FF4444'>Please enter a valid rep number</span>");
                }
                var reps_name = ex_name_lower + '-set-' + set_num + '-reps';
                dataDict[reps_name] = reps;
            })

            var added_sets_list = [];
            var added_sets = $(this).find('.new-set');
            $(added_sets).each(function(){
                var set_num = $(this).find('.set-num').data('number');
                var target_weight = $(this).find('.target-weight-input').val();
                if (target_weight != '' && Math.round(target_weight) !== parseInt(target_weight)){
                    errors = errors + 1;
                    $(this).find('.target-weight-input').before("<span class='error' style='color: #FF4444'>Please enter a valid weight</span>");
                }
                var max_percent = $(this).find('.max-percent').val();
                if (max_percent != '' && isNaN(max_percent)){
                    errors = errors + 1;
                    $(this).find('.max-percent').before("<span class='error' style='color: #FF4444'>Please enter a valid percent</span>")
                }

                var reps = $(this).find('.reps').val();
                if (reps == '' || Math.round(reps) !== parseInt(reps)){
                    errors = errors + 1;
                    $(this).find('.reps').before("<span class='error' style='color: #FF4444'>Please enter a valid rep number</span>");
                }

                var add_set = set_num + '_-&&-_' + target_weight + '_-&&-_' + max_percent + '_-&&-_' + reps;
                added_sets_list.push(add_set);
            })
            var added_sets_name = ex_name_lower + '-added-sets';
            dataDict[added_sets_name] = added_sets_list;

        })

        var new_exercises = [];
        $('.new-ex').each(function(){
            var new_ex_name = $(this).find('.new-ex-name').val();
            if (new_ex_name == ''){
                errors = errors + 1;
                $(this).find('.new-ex-name').before("<span class='error' style='color: #FF4444'>Please enter an exercise name</span>")
            }
            new_exercises.push(new_ex_name);
            var new_ex_name_lower = new_ex_name.replace(/\s+/g, '-').toLowerCase();

            var new_ex_order = $(this).data('order');
            var new_ex_order_name = new_ex_name_lower + '-order-new';
            dataDict[new_ex_order_name] = new_ex_order;

            var new_ex_unit = $(this).find('.new-ex-unit').val();
            var new_ex_unit_name = new_ex_name_lower + '-unit-new';
            dataDict[new_ex_unit_name] = new_ex_unit;

            var new_ex_max_event = $(this).find('.new-ex-max-event').val();
            var new_ex_max_event_name = new_ex_name_lower + '-max-event-new';
            dataDict[new_ex_max_event_name] = new_ex_max_event;

            var new_ex_color = $(this).find('.new-ex-color-select').val();
            var new_ex_color_name = new_ex_name_lower + '-color-new';
            dataDict[new_ex_color_name] = new_ex_color;

            var new_ex_notes = $(this).find('.new-ex-notes').val();
            var new_ex_notes_name = new_ex_name_lower + '-notes-new';
            dataDict[new_ex_notes_name] = new_ex_notes;

            var new_ex_sets = $(this).find('.set');
            var num_set_new = $(new_ex_sets).length;
            var num_set_new_name = new_ex_name_lower + '-num-sets-new';
            dataDict[num_set_new_name] = num_set_new;

            $(new_ex_sets).each(function(){
                var set_num = $(this).find('.set-num').data('number');
                var weight = $(this).find('.target-weight-input').val();
                if (weight != '' && Math.round(weight) !== parseInt(weight)){
                    errors = errors + 1;
                    $(this).find('.target-weight-input').before("<span class='error' style='color: #FF4444'>Please enter a valid weight</span>");
                }
                var weight_name = new_ex_name_lower + '-set-' + set_num + '-weight-new';
                dataDict[weight_name] = weight;

                var percent = $(this).find('.max-percent').val();
                if (percent != '' && isNaN(percent)){
                    errors = errors + 1;
                    $(this).find('.max-percent').before("<span class='error' style='color: #FF4444'>Please enter a valid percentage</span>");
                }
                var percent_name = new_ex_name_lower + '-set-' + set_num + '-percent-new';
                dataDict[percent_name] = percent;

                var reps = $(this).find('.reps').val();
                if (reps == '' || Math.round(reps) !== parseInt(reps)){
                    errors = errors + 1;
                    $(this).find('.reps').before("<span class='error' style='color: #FF4444'>Please enter a valid rep number</span>");
                }
                var reps_name = new_ex_name_lower + '-set-' + set_num + '-reps-new';
                dataDict[reps_name] = reps;

            })
        })
        dataDict['removed_sets'] = removed_sets;
        dataDict['deleted_exercises'] = deleted_exercises;
        dataDict['existing_exercises'] = exist_exercise_list;
        dataDict['new_exercises'] = new_exercises;

        if (errors == 0){
            $.ajax({
                url: "/edit_athlete_workout/",
                type: 'POST',
                data: dataDict,
                success : function() {
                            window.location.reload(true);
                    },
                error : function(xhr,errmsg,err) {
                    $('#result').append("<div class='alert-box alert radius' data-alert>Oops! We have encountered an error: "+errmsg+
                    " <a href='#' class='close'>&times;</a></div>"); // add the error to the dom
                    console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
                }
            });
        }

    })

按钮：

<button class='btn' id='submit' type='button'>Submit</button> 

其中一个不起作用：

$('#complete-wo').on('click',function(){
    event.preventDefault();
    results = {csrfmiddlewaretoken:'{{ csrf_token }}'};
    $('.errorDesc').remove();
    var ex_ids = [];
    var errors = 0;
    results['exercises'] = ex_ids;

    $('.ex-id').each(function(i, obj){
        var exercise_id = $(obj).val()
        ex_ids.push(exercise_id);
        var reps_comp = $('input[name="reps-ex-'+ exercise_id + '"').val();
        if (reps_comp == '' || Math.round(reps_comp) !== parseInt(reps_comp)){
            errors = errors + 1;
            $('input[name="reps-ex-'+ exercise_id + '"').before('<div class="errorDesc" style="color: #FF0000"> Enter a valid rep number</div>');
        }
        var load_comp = $('input[name="load-ex-'+ exercise_id + '"').val();
        if (load_comp == '' || Math.round(load_comp) !== parseInt(load_comp)){
            errors = errors + 1;
            $('input[name="load-ex-'+ exercise_id + '"').before('<div class="errorDesc" style="color: #FF0000"> Enter a valid weight</div>');
        }
        results['reps-ex-' + exercise_id] = reps_comp;
        results['load-ex-' + exercise_id] = load_comp;
        //alert(exercise_id + '/' + results['reps-ex-' + exercise_id] + results['load-ex-' + exercise_id]);
    })
    if (errors == 0){
        $.ajax({
                url: "/submit_workout/",
                type: 'POST',
                data: results,
                success : function() {
                            window.location.href = '/player_calendar/';
                    },
                error : function(xhr,errmsg,err) {
                    $('#result').append("<div class='alert-box alert radius' data-alert>Oops! We have encountered an error: "+errmsg+
                    " <a href='#' class='close'>&times;</a></div>"); // add the error to the dom
                    console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
                }
            });
    }

});

按钮：

<button class='btn btn-primary btn-block' id='complete-wo' type='button'>Workout Complete</button>

Answer 1

我找到了解决这个问题的方法。出于某种原因，在移动Safari中，使用以下方法选择输入时出现问题：

var reps_comp = $('input[name="reps-ex-'+ exercise_id + '"').val();
load_comp = $('input[name="load-ex-'+ exercise_id + '"').val();

一旦我将这些页面切换为基于类的选择器，页面工作正常。