堆棧內存溢出
  簡體   English   中英

為什么 Ajax 調用在特定部分代碼后不起作用？

[英]Why doesn't the Ajax call work after a certain part of the code?

 原文  2022-11-30 17:28:51  3   1    javascript/ php/ jquery/ ajax

問題描述

我在 PHP 和 JS 中有一個代碼，我在其中使用 Vis.js 創建時間軸，並使用 AJAX 向頁面發出請求以獲取頁面作為響應並將其放入 Bootstrap Modal 中。

每個用戶都有一個 ID（在照片所在的 div 中），單擊該 ID 將打開模式以及 AJAX 請求帶來的頁面。 在那之前，一切都很好。 對用戶的所有 AJAX 請求均有效，問題出在時間線項目上。

每個項目都應該與單擊用戶 ID 執行相同的操作，但會調出不同的頁面。 最多第 6 項可以完美運行，但是，在那之后，當我點擊第 7 項之后沒有任何反應。 用戶數也在6個以上，但是一個通話通，一個不通。

有誰知道為什么？

這是代碼：

<script>

var now = Date.now();

var options = {
  stack: true,
  maxHeight: 640,
  horizontalScroll: true,
  verticalScroll: true,
  zoomKey: "ctrlKey",
  start: '2022-01-01',
  end: '2022-12-31',
  orientation: {
    axis: "top",
    item: "top",
  },
};

var groups = new vis.DataSet();
var items = new vis.DataSet();

var count = 300;

<?php

$query_todos = 'SELECT * FROM booking';
$todos_booking = $conn->prepare($query_todos);
$todos_booking->execute();

$combined = array();
$i = 0;

function sort_by_name($a,$b)
{
    return $a["nome_social"] > $b["nome_social"];
}

while($todos = $todos_booking->fetch(PDO::FETCH_ASSOC)){

  $query_nome = 'SELECT nomesocial, foto, situacao FROM dados WHERE iddados =:id_funcionario';
  $nome = $conn->prepare($query_nome);
  $nome->bindParam(':id_funcionario', $todos['id_funcionario'], PDO::PARAM_STR);
  $nome->execute();

  $nome_social = $nome->fetch(PDO::FETCH_ASSOC);

  if(!empty($nome_social['foto'])){
    $img = $nome_social['foto'];
  }else{
    $img = '../img/avatar.png';
  }

    if( ( $key = array_search( $todos['id_funcionario'], array_column( $combined, 'id_funcionario') ) ) !== false )  {
      $combined[$key]['projeto'] .= '||'.$todos['projeto'];
      $combined[$key]['software'] .= '|||'.$todos['software'];
      $combined[$key]['data_inicio'] .= '||'.$todos['data_inicio'];
      $combined[$key]['data_fim'] .= '||'.$todos['data_fim'];
      $combined[$key]['confirmacao'] .= '||'.$todos['confirmacao'];
      $combined[$key]['img'] = $img;
      $combined[$key]['nome_social'] = $nome_social['nomesocial'];
      $combined[$key]['situacao'] = $nome_social['situacao'];
    } else {
      $todos['img'] = $img;
      $todos['nome_social'] = $nome_social['nomesocial'];
      $todos['situacao'] = $nome_social['situacao'];
      $combined[] = $todos;
    }
  }

  $combined_nome_social = $combined;

  uasort($combined,"sort_by_name");

  foreach($combined as $chave => $valor){
?>

<?php

  if(!empty($valor['projeto'])){

    ?>

  groups.add({
    id: <?php echo $i; ?>,
    content: "<div id='<?php echo str_replace(' ', '',$valor['nome_social']); ?>' class='row justify-content-center cursor'><img src='<?php echo $valor['img']; ?>' style='width: 100px; height: 80px; border-radius: 100%;'><div class='row justify-content-center'><?php echo $valor['nome_social']; ?></div></div>",
    order: <?php echo $i; ?>,
    <?php if($valor['situacao'] == '0'){
       echo "style: 'background-color: rgba(255, 0, 0, 0.2)',
        className: 'red'"; 
       } ?>
  });

  <?php }else{ ?>
groups.add({
    id: <?php echo $i; ?>,
    content: "<div id='<?php echo str_replace(' ', '',$valor['nome_social']); ?>' class='row justify-content-center cursor'><img src='<?php echo $valor['img']; ?>' style='width: 100px; height: 80px; border-radius: 100%;'><div class='row justify-content-center'><?php echo $valor['nome_social']; ?></div></div>",
    order: <?php echo $i; ?>,
    <?php if($valor['situacao'] == '0'){
       echo "style: 'background-color: rgba(255, 0, 0, 0.2)',
       className: 'red'"; 
       } ?>
  });

  <?php } ?>

  setTimeout(function(){

$(document).ready(function(){
  $("#<?php echo str_replace(' ', '',$valor['nome_social']); ?>").click(function(){
    $("#editar_funcionario").html('');
    $.ajax({
          url: '../utilities/modal_adicionar_booking.php?id_funcionario=<?php echo $valor['id_funcionario']; ?>',
          method: 'GET',
          cache: false,
          contentType: false,
          processData: false,
          success: function(resultado){
  $form = $("<form id='adicionar_funcionario_booking' method='POST' enctype='multipart/form-data'></form>");
  $("#editar_funcionario").append($form);
  $("#adicionar_funcionario_booking").html(resultado);
  $("#titulo_editar").html('Adicionar booking de <?php echo $valor['nome_social']; ?>');
  let el = document.getElementById('editar');
  let modal =new bootstrap.Modal(el);
  modal.show();

  let confirmacao = document.getElementById('confirmacao');

  confirmacao.addEventListener('click', ()=>{
  if(confirmacao.checked){
      document.getElementById('label_confirmacao').innerHTML = "Confirmado";
  }else{
      document.getElementById('label_confirmacao').innerHTML = "Não confirmado";
  }
})

$("#botao_salvar").click(function(){
    $('#botao_salvar').prop('disabled', true);
        $('#botao_salvar').html('');
        $('#botao_salvar').append('<img src="../img/loading.gif" style="width: 30px;"/>');
    var dados = new FormData(document.getElementById("adicionar_funcionario_booking"));
      $.ajax({
            url: '../utilities/adicionar_booking.php?id_funcionario=<?php echo $valor['id_funcionario']; ?>',
            method: 'POST',
            dataType: 'json',
            cache: false,
            contentType: false,
            processData: false,
            data: dados,
            success: function(resultado){
              let erros = ['erro_data_inicio', 'erro_data_fim'];
              let erros_select = ['erro_projeto', 'erro_software'];
              for (let i = 0; i < erros.length; i++) { 
                if((resultado[erros[i]]) && (resultado[erros[i]] != 'vazio')){
                $('#'+erros[i]).html(resultado[erros[i]]);
                $('#'+erros[i].replace('erro_', '')).removeClass();
                $('#'+erros[i].replace('erro_', '')).addClass('invalido form-control');

                $('#'+erros[i].replace('erro_', '')).on('input', ()=> {
                    $('#'+erros[i].replace('erro_', '')).removeClass();
                    $('#'+erros[i].replace('erro_', '')).addClass('form-control');
                    $('#'+erros[i]).html('');
                })
                }
              }
              for (let i = 0; i < erros_select.length; i++) {                 
                    if((resultado[erros_select[i]]) && (resultado[erros_select[i]] != 'vazio')){
                    $('#'+erros_select[i]).html(resultado[erros_select[i]]);
                    $('#'+erros_select[i].replace('erro_', '')+'_chosen').removeClass();
                    $('#'+erros_select[i].replace('erro_', '')+'_chosen').addClass('invalido chosen-container chosen-container-multi');
    
                    $('#'+erros_select[i].replace('erro_', '')).on('input', ()=> {
                        $('#'+erros_select[i].replace('erro_', '')+'_chosen').removeClass();
                        $('#'+erros_select[i].replace('erro_', '')+'_chosen').addClass('chosen-container chosen-container-multi');
                        $('#'+erros_select[i]).html('');
                    })
                    }
                    }
                    if(resultado.status){
                    modal.hide();
                    let status = document.createElement('div');
                    status.setAttribute("id", 'status');
                    document.body.appendChild(status);
                    $('#status').css({'position': 'fixed', 'top':'0', 'width':'100%', 'z-index':'100', 'text-align': 'center', 'color':'white', 'padding':'10px 10px 10px 10px', 
                    'font-size': '17px', 'background':'#0a5a0a'});
                    let progresso = document.createElement('span');
                    progresso.classList.add('progress-bar-fill');
                    progresso.style.cssText = 'width: 0%;';
                    $('#status').html(resultado.status);
                    document.getElementById('status').appendChild(progresso);
                    $('.progress-bar-fill').delay(50).queue(function () {
                        $(this).css('width', '100%')
                    });
                    setTimeout(() =>{
                        window.location.reload();
                    }, 1000);
                    $('#botao_salvar').remove();
                }
                $('#botao_salvar img:last-child').remove();
                $('#botao_salvar').html('Salvar alterações');
                $('#botao_salvar').prop('disabled', false);
            }
      })
    })

waitForElm('.chosen-select-software').then((elm) => {
      setTimeout(() =>{
    $.getScript('../bootstrap/_bootstrap/js/chosen_software.jquery.min.js', function() {
      console.debug('Script loaded.');
    });
    $.getScript('../bootstrap/_bootstrap/js/projeto_booking.js', function() {
      console.debug('Script loaded.');
    });
  }, 250);
});

}
})
})
})
}, 1000);

<?php
  $itens = explode('||', $valor['projeto']);
  $softwares = explode('|||', $valor['software']);
  $inicio = explode('||', $valor['data_inicio']);
  $fim = explode('||', $valor['data_fim']);
  $confirmacao = explode('||', $valor['confirmacao']);

  for($x = 0; $x < count($itens); $x++){

?>
  var start = '<?php echo $inicio[$x]; ?>';
  var end = '<?php echo $fim[$x]; ?>';

  <?php

  if(!empty($valor['projeto'])){

    ?>

  items.add({
    group: <?php echo $i; ?>,
    start: start,
    end: end,
    type: "range",
    content: "<div id='<?php $word = array_merge(range('a', 'z'), range('A', 'Z')); shuffle($word); $aleatorio = substr(implode($word), 0, 100); echo $aleatorio; ?>' title=' Projeto: <?php echo $itens[$x]; ?>&#10;Software: <?php echo str_replace('||', ', ', $softwares[$x]); ?>&#10;início: <?php echo date('d/m/Y', strtotime($inicio[$x])); ?>&#10;fim: <?php echo date('d/m/Y', strtotime($fim[$x])); ?>'><?php if($confirmacao[$x] == '0'){echo '<img src=\'../img/nao_confirmado.png\' style=\'width: 17px;\'><br>';}else{echo '<img src=\'../img/confirmado.png\' style=\'width: 17px;\'><br>';} ?><?php echo $itens[$x].'<br>'.str_replace('||', ', ', $softwares[$x]); ?></div>",
    className: '<?php echo $itens[$x]; ?>',
  });  


  $(document).ready(function(){
  setTimeout(function(){
    $("#<?php echo $aleatorio; ?>").click(function(){

      editarBooking();

    })

      function editarBooking(){
      $("#editar_funcionario").html('');
      $.ajax({
            url: '../utilities/modal_editar_booking.php?id_funcionario=<?php echo $valor['id_funcionario']; ?>&projeto=<?php echo $itens[$x]; ?>&data_inicio=<?php echo $inicio[$x]; ?>&data_fim=<?php echo $fim[$x]; ?>&software=<?php echo $softwares[$x]; ?>&confirmacao=<?php echo $confirmacao[$x]; ?>',
            method: 'GET',
            cache: false,
            contentType: false,
            processData: false,
            success: function(resultado){
    $form = $("<form id='editar_funcionario_booking' method='POST' enctype='multipart/form-data'></form>");
    $("#editar_funcionario").append($form);
    $("#editar_funcionario_booking").html(resultado);
    $("#titulo_editar").html('Editar booking de <?php echo $valor['nome_social']; ?>');
    let el = document.getElementById('editar');
    let modal =new bootstrap.Modal(el);
    modal.show();

    let confirmacao = document.getElementById('confirmacao');

    confirmacao.addEventListener('click', ()=>{
    if(confirmacao.checked){
        document.getElementById('label_confirmacao').innerHTML = "Confirmado";
    }else{
        document.getElementById('label_confirmacao').innerHTML = "Não confirmado";
    }
})

  $("#botao_salvar").click(function(){
    $('#botao_salvar').prop('disabled', true);
        $('#botao_salvar').html('');
        $('#botao_salvar').append('<img src="../img/loading.gif" style="width: 30px;"/>');
    var dados = new FormData(document.getElementById("editar_funcionario_booking"));
      $.ajax({
            url: '../utilities/editar_booking.php?id_funcionario=<?php echo $valor['id_funcionario']; ?>&projeto=<?php echo $itens[$x]; ?>&data_inicio=<?php echo $inicio[$x]; ?>&data_fim=<?php echo $fim[$x]; ?>&software=<?php echo $softwares[$x]; ?>&confirmacao=<?php echo $confirmacao[$x]; ?>',
            method: 'POST',
            dataType: 'json',
            cache: false,
            contentType: false,
            processData: false,
            data: dados,
            success: function(resultado){
              let erros = ['erro_data_inicio', 'erro_data_fim'];
              let erros_select = ['erro_projeto', 'erro_software'];
              for (let i = 0; i < erros.length; i++) { 
                if((resultado[erros[i]]) && (resultado[erros[i]] != 'vazio')){
                $('#'+erros[i]).html(resultado[erros[i]]);
                $('#'+erros[i].replace('erro_', '')).removeClass();
                $('#'+erros[i].replace('erro_', '')).addClass('invalido form-control');

                $('#'+erros[i].replace('erro_', '')).on('input', ()=> {
                    $('#'+erros[i].replace('erro_', '')).removeClass();
                    $('#'+erros[i].replace('erro_', '')).addClass('form-control');
                    $('#'+erros[i]).html('');
                })
                }
              }
              for (let i = 0; i < erros_select.length; i++) {                 
                    if((resultado[erros_select[i]]) && (resultado[erros_select[i]] != 'vazio')){
                    $('#'+erros_select[i]).html(resultado[erros_select[i]]);
                    $('#'+erros_select[i].replace('erro_', '')+'_chosen').removeClass();
                    $('#'+erros_select[i].replace('erro_', '')+'_chosen').addClass('invalido chosen-container chosen-container-multi');
    
                    $('#'+erros_select[i].replace('erro_', '')).on('input', ()=> {
                        $('#'+erros_select[i].replace('erro_', '')+'_chosen').removeClass();
                        $('#'+erros_select[i].replace('erro_', '')+'_chosen').addClass('chosen-container chosen-container-multi');
                        $('#'+erros_select[i]).html('');
                    })
                    }
                    }
                    if(resultado.status){
                    modal.hide();
                    let status = document.createElement('div');
                    status.setAttribute("id", 'status');
                    document.body.appendChild(status);
                    $('#status').css({'position': 'fixed', 'top':'0', 'width':'100%', 'z-index':'100', 'text-align': 'center', 'color':'white', 'padding':'10px 10px 10px 10px', 
                    'font-size': '17px', 'background':'#0a5a0a'});
                    let progresso = document.createElement('span');
                    progresso.classList.add('progress-bar-fill');
                    progresso.style.cssText = 'width: 0%;';
                    $('#status').html(resultado.status);
                    document.getElementById('status').appendChild(progresso);
                    $('.progress-bar-fill').delay(50).queue(function () {
                        $(this).css('width', '100%')
                    });
                    setTimeout(() =>{
                        window.location.reload();
                    }, 1000);
                    $('#botao_salvar').remove();
                }
                $('#botao_salvar img:last-child').remove();
                $('#botao_salvar').html('Salvar alterações');
                $('#botao_salvar').prop('disabled', false);
            }
      })
    })

    waitForElm('.chosen-select-software').then((elm) => {
      setTimeout(() =>{
    $.getScript('../bootstrap/_bootstrap/js/chosen_software.jquery.min.js', function() {
      console.debug('Script loaded.');
    });
    $.getScript('../bootstrap/_bootstrap/js/projeto_booking.js', function() {
      console.debug('Script loaded.');
    });
  }, 250);
});
    }
  })
}
})}, 1000);

<?php }else{ ?>

  items.add({
    group: <?php echo $i; ?>,
    start: '<?php echo  date('Y-m-d', strtotime('-4 month', strtotime(date('Y-m-d')))); ?>',
    end: '<?php echo  date('Y-m-d'); ?>',
    content: '<div class="row justify-content-center">NENHUMA INFORMAÇÃO DE BOOKING ENCONTRADA</div>',
  });  


<?php
}
}
$i++;
}
?>


// create a Timeline
var container = document.getElementById("booking");
timeline = new vis.Timeline(container, null, options);
timeline.setGroups(groups);
timeline.setItems(items);

function debounce(func, wait = 100) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

function move(percentage) {
  var range = timeline.getWindow();
  var interval = range.end - range.start;

  timeline.setWindow({
    start: range.start.valueOf() - interval * percentage,
    end: range.end.valueOf() - interval * percentage,
  });
}

document.getElementById("zoomIn").onclick = function () {
  timeline.zoomIn(0.5);
};
document.getElementById("zoomOut").onclick = function () {
  timeline.zoomOut(0.5);
};
document.getElementById("moveLeft").onclick = function () {
  move(0.2);
};
document.getElementById("moveRight").onclick = function () {
  move(-0.2);
};

function waitForElm(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                resolve(document.querySelector(selector));
                observer.disconnect();
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}
</script>

這是時間線：

時間線

1 個解決方案

解決方案1
 0  2022-12-01 19:08:38

萬一有人需要它，我會把解決方案留在這里，即使我發現有人很難需要它。

經過大量的測試后，我意識到以下幾點：

只有當滾動向下並且組出現時才會創建項目。

也就是說，當我把不可見的項目的事件放在屏幕上時，它們沒有被創建，所以沒有辦法調用事件，因為它的 ID 還不存在。

解決方案是使用 MutationObserver API 檢查元素何時存在於頁面上並對其應用 function。

<script>
   function waitForElm(selector) {
    return new Promise(resolve => {
        if (document.querySelector(selector)) {
            return resolve(document.querySelector(selector));
        }

        const observer = new MutationObserver(mutations => {
            if (document.querySelector(selector)) {
                resolve(document.querySelector(selector));
                observer.disconnect();
            }
        });

        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    });
}
</script>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 為什么在第二次和第三次調用之后ajax load（）不起作用？ 為什么在用ajax重新加載部分頁面后，此javascript代碼不起作用？ 為什么通過ajax加載數據后，我的JQuery代碼不起作用？ 提交表單后，AJAX調用不起作用 我的jquery動畫在ajax調用后不起作用 jQuery數組在Ajax調用后不起作用 Ajax 調用成功后，DataTables 搜索框不起作用 Ajax調用后CSS和JQuery不起作用 ajax調用后，addClass（）函數不起作用 Ajax 調用后 Jquery 函數不起作用
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM