Bootstrap 引导模式内无 AJAX 外观

我创建了一个模态，并在其中插入了一个输入字段。当我在这个输入字段中写入一个产品名称术语时，它必须显示所有的术语。
在空白页上，我可以看到ap（苹果术语）所有的苹果产品，没有问题我 AJAX 工作得很好
现在，在一个页面中有一些html元素，当有我的输入字段时，我调用一个模态。在这种情况下， AJAX 肤色不工作，在控制台日志/结果中，我看到我的输入字段，而不是关于我的请求的结果。我不明白我的错误在哪里下面的结果与图片。
我模态叫：工作很好

<!-- Link trigger modal -->
  <div class="row">
    <div class="col-md-12">
      <div class="form-group row">
        <label for="<?php echo $this->getDef('text_select_products'); ?>" class="col-5 col-form-label"><?php echo $this->getDef('text_select_products'); ?></label>
        <div class="col-md-5">
          <a
            href="<?php echo $this->link('SelectPopUpProducts'); ?>"
            data-bs-toggle="modal" data-refresh="true"
            data-bs-target="#myModal"><?php echo '<h4><i class="bi bi-plus-circle" title="' . $this->getDef('icon_edit') . '"></i></h4>'; ?></a>
          <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
               aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-body">
                  <div class="te"></div>
                </div>
              </div> <!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
          </div><!-- /.modal -->
        </div>
      </div>
    </div>
  </div>
  <script src="<?php echo this->link('modal_popup.js'); ?>"></script>

现在我的模态显示字段

<div class="col-md-12">
   <div class="form-group row">
     <label for="<?php echo $this->getDef('text_products_name') ; ?>" class="col-5 col-form-label"><?php echo $this->getDef('text_products_name') ; ?></label>
     <div class="col-md-7">
       <?php echo HTML::inputField('products_name', '', 'id="ajax_products_name" list="products_list" class="form-control"'); ?>
       <datalist id="products_list"></datalist>
       </div>
     </div>
   </div>
   <?php $products_ajax = $this->link('ajax/products.php'); ?>

<script>
    window.addEventListener("load", function(){
        // Add a keyup event listener to our input element
        document.getElementById('ajax_products_name').addEventListener("keyup", function(event){hinterManufacturer(event)});
        // create one global XHR object
        // so we can abort old requests when a new one is make
        window.hinterManufacturerXHR = new XMLHttpRequest();
    });

    // Autocomplete for form
    function hinterManufacturer(event) {
        var input = event.target;

        var ajax_products_name = document.getElementById('products_list'); //datalist id

        // minimum number of characters before we start to generate suggestions
        var min_characters = 0;

        if (!isNaN(input.value) || input.value.length < min_characters ) {
            return;
        } else {
            window.hinterManufacturerXHR.abort();
            window.hinterManufacturerXHR.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    var response = JSON.parse( this.responseText );

                    ajax_products_name.innerHTML = "";
                    response.forEach(function(item) {
// Create a new <option> element.
                        var option = document.createElement('option');
                        option.value = item.id + ' - ' + item.name;//get name
                        option.hidden = item.id; //get id

                        ajax_products_name.appendChild(option);
                    });
                }
            };

            window.hinterManufacturerXHR.open("GET", "<?php echo $products_ajax ; ?>?q=" + input.value, true);
            window.hinterManufacturerXHR.send()
        }
    }
</script>

添加了js开放模式

$( document ).ready(function() {
  $("#myModal").on("show.bs.modal", function(e) {
    const link = $(e.relatedTarget);
    $(this).find(".modal-body").load(link.attr("href"));
  });
});

这是结果的屏幕截图。
console result

也许事件keyup永远不会触发，因为在触发shown.bs.modal事件之前，输入ajax_products_name并不存在。
试试看：

$("#myModal").on("shown.bs.modal", function(ev) {
  document.getElementById('ajax_products_name').addEventListener("keyup", function(event) {
    hinterManufacturer(event)
  });
})

让我们树立一个榜样
第一次
总之，我们的想法是在ajax_products_name加载后，在ajax_products_name上执行addEventListener。因此，给定您的新代码片段，尝试以下操作：

// instead of 
$(this).find(".modal-body").load(link.attr("href"));

// do:
$(this).find(".modal-body").load(link.attr("href"), function(responseTxt, statusTxt, xhr) {
  if (statusTxt == "success") {

    // now that modal is opened AND content loaded
    document.getElementById('ajax_products_name').addEventListener("keyup", function(event) {
      hinterManufacturer(event)
    })
  }
});

Bootstrap 引导模式内无 AJAX 外观

1条答案

相关问题

热门标签

最新问答