У меня есть выпадающее меню, которое при выборе выполняет следующий код.Это прекрасно работает 100% времени на Chrome на моем персональном компьютере, однако на компьютерах других людей (использующих Chrome, Firefox и т. Д.) Код может быть темпераментным.Я также нахожу проблемы в Firefox на моем собственном компьютере.
По сути, в коде есть три вызова ajax, первый для отображения логотипа на странице, второй для отображения html-таблицы, а третий обновляет холст chartjs.
Одна конкретная проблема, связанная сFirefox заключается в том, что элементы страницы отображаются только каждый раз, когда я меняю выбор в раскрывающемся меню.Другие сообщаемые проблемы заключаются в том, что иногда определенные выпадающие списки не отображают какие-либо элементы, однако в выпадающем коде нет ничего плохого, поскольку он отлично работает для других пользователей.
Однако я не специалист по jQueryМы использовали эту структуру для вызовов Ajax на других страницах и вообще не имели проблем.Есть ли в приведенном ниже коде некоторые основные проблемы, которые могут представлять эти проблемы?
jQuery(document).ready(function($) {
var valueCheck;
jQuery('#afl_team').on('change', function() {
afl_team = $('#afl_team').val();
jQuery.ajax({
type: "POST",
url: "/wp-admin/admin-ajax.php",
data: {
action: 'call_team_logo',
afl_team: afl_team,
},
success: function(output) {
jQuery('#team_logo').html(output);
}
});
jQuery.ajax({
type: "POST",
url: "/wp-admin/admin-ajax.php",
data: {
action: 'call_ruck_team_stats',
afl_team: afl_team,
},
success: function(output) {
jQuery('#ruck_stats').html(output);
}
});
jQuery.ajax({
type: "POST",
url: "/wp-admin/admin-ajax.php",
dataType: "json",
data: {
action: 'call_ruck_contests',
afl_team: afl_team,
},
success: function updateruckChart(output) {
ruckChart.data.datasets = [];
for (var i = 0; i < output[0].length; i++) {
ruckChart.data.datasets.push({
label: output[0][i],
backgroundColor: output[2][i],
borderColor: output[2][i],
data: output[1][i]
});
ruckChart.update();
}
}
});
});
});
----------- ОБНОВЛЕНИЕ -----------
Основываясь на комментариях к этому посту, я объединил часть этого кода, чтобы вернуть json из меньшего количества вызовов AJAX, но у меня все еще есть проблемы.Используя инструмент разработчика в Firefox, я заметил, что нет проблем с обработкой вызовов Ajax, это только 80% времени, когда он возвращает результат, а остальные 20% времени это не так.
Когдаон не возвращает ничего, что инструмент разработчика указывает тип как xml, но когда он работает успешно, он указывает html.Нет никакой согласованности с тем, когда он будет работать или когда он не будет работать.
Мой Ajax Call Javascript во всей своей полноте для страницы приведен ниже.Я пытался удалить сценарии и перезапустить, но я все еще получаю прерывистый успех.
Временная страница для справки здесь .
<script type="text/javascript">
jQuery(document).ready( function($) {
var valueCheck;
jQuery('#afl_team').on( 'change', function () {
afl_team = $('#afl_team').val();
jQuery.ajax({
type: "POST",
url: "/wp-admin/admin-ajax.php",
dataType: "html", //POSSIBLY DELETE
data: {
action: 'call_team_logo',
afl_team: afl_team,
},
success:function(output){
jQuery('#team_logo').html( output );
}
});
});
});
</script>
<script type="text/javascript">
jQuery(document).ready( function($) {
var valueCheck;
jQuery('#afl_team,#afl_opponent').on( 'change', function () {
afl_team = $('#afl_team').val();
afl_opponent = $('#afl_opponent').val();
jQuery.ajax({
type: "POST",
url: "/wp-admin/admin-ajax.php",
data: {
action: 'call_ruck_last_time',
afl_team: afl_team,
afl_opponent: afl_opponent,
},
success:function(output){
jQuery('#ruck_last_time').html( output );
}
});
}).change();
});
</script>
<script type="text/javascript">
jQuery(document).ready( function($) {
var valueCheck;
jQuery('#afl_team').on( 'change', function () {
afl_team = $('#afl_team').val();
jQuery.ajax({
type: "POST",
url: "/wp-admin/admin-ajax.php",
dataType: "json",
data: {
action: 'call_ruck_team_stats_json',
afl_team: afl_team,
},
success:function(output){
var myJSON = output[0];
var myJSON2 = output[1];
var col = [];
for (var i = 0; i < myJSON.length; i++) {
for (var key in myJSON[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
var table = document.createElement("table");
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
for (var i = 0; i < myJSON.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = myJSON[i][col[j]];
}
}
var divContainer = document.getElementById("teamSummary");
divContainer.innerHTML = "";
divContainer.appendChild(table);
var col = [];
for (var i = 0; i < myJSON2.length; i++) {
for (var key in myJSON2[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
var table = document.createElement("table");
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
for (var i = 0; i < myJSON2.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = myJSON2[i][col[j]];
}
}
var divContainer = document.getElementById("opponentSummary");
divContainer.innerHTML = "";
divContainer.appendChild(table);
ruckChart.data.datasets = [];
for (var i=0; i<output[2].length; i++) {
ruckChart.data.datasets.push({
label: output[2][i],
backgroundColor: output[4][i],
borderColor: output[4][i],
data: output[3][i]
});
ruckChart.update();
}
} // THIS BRACKET CLOSES SUCCESS FUNCTION
});
}).change();
});
</script>