Проблемы с вызовами jQuery Ajax - PullRequest
0 голосов
/ 22 мая 2019

У меня есть выпадающее меню, которое при выборе выполняет следующий код.Это прекрасно работает 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>

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...