javascript 为什么 AJAX 调用在代码的某个部分之后不起作用？

xlpyo6sf  于 2022-12-02  发布在  Java
关注(0)|答案(1)|浏览(128)

我有一个PHP和JS代码，其中我使用Vis.js创建一个时间轴，使用 AJAX 向一个页面发出请求，以获得一个页面作为响应，并将其放在一个Bootstrap Modal中。
每个用户都有一个ID（在照片所在的div中），当点击它时，会打开模态沿着 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>

这是时间线：
timeline

JavaScript

1条答案

按热度按时间
zzwlnbp8

zzwlnbp81#

万一有人需要，我会把解决方案留在这里，即使我发现有人很难需要它。
在做了大量的测试之后，我意识到了以下几点：
只有向下滚动并显示组时，才会创建项目。
也就是说，当我为屏幕上不可见的项目放置事件时，它们没有被创建，因此没有办法调用该事件，因为它的ID还不存在。
解决方案是使用MutationObserver API检查页面上何时存在该元素，并对其应用函数。

<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>
赞(0）分享  回复(0）举报  2022-12-02
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com