我正在处理的项目中有多个页面使用AJAX向django提交表单。所有这些按钮似乎都适用于除移动safari之外的所有功能（移动和桌面、chrome、firefox、桌面safari）。在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'>×</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'>×</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>
我找到了这个问题的解决方案。出于某种原因，在移动safari上，使用选择输入时出现了问题
var reps_comp = $('input[name="reps-ex-'+ exercise_id + '"').val();
load_comp = $('input[name="load-ex-'+ exercise_id + '"').val();
当我将这些切换为仅基于类的选择器时，页面运行良好。