【问题标题】:data is not showing dynamically in modal window with ajax数据未在带有 ajax 的模式窗口中动态显示
【发布时间】:2019-12-26 17:37:03
【问题描述】:

我有一个模态窗口,我在其中借助 Ajax 功能动态获取数据,但数据未显示在模态窗口中。

以下是模态窗口的 HTML 代码。

<div id="tariffdetailModal" class="modal show fade" data-backdrop="static">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title">Dynamic Data</h6>
      </div>
      <input type="text" name="tmcode" id="tmcode" />
      <div class="modal-body pt-1">
        <div class="control-container" id="tariffdetail_data"> </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal"> <i class="fa fa-close"></i> Cancel </button>
      </div>
    </div>
  </div>
</div>

以下是使用 Ajax 函数加载数据的 JavaScript 代码。

<script>
  $(document).ready(function(){

    $('#tariffdetailModal').on('show.bs.modal', function(e) {
      var tmcode = $(e.relatedTarget).data('book_id').tmcode;
      $(e.currentTarget).find('input[name="tmcode"]').val(tmcode);
      load_data();
    });

    function load_data(){
         $.ajax({
              url:"tariffdetaildata.php",
              method:"POST",
              //async: true,
              data:{},
              success:function(data){
                   $('#tariffdetail_data').html(data);
              }
         });

    }
  })
</script> 

以下是在 Ajax 函数中调用的数据的 php 页面......

<?php
    $output=''; 
    $output .='<input type="text" name="abcd" value="abcd" />';
    echo $output;
?>

【问题讨论】:

  • 使用inspect或from source确保页面中没有其他具有相同ID tariffdetail_data的元素
  • 控制台是否记录任何错误?
  • 只显示源映射错误:错误:请求失败,状态为 404 资源 URL:localhost/egp/style/css/bootstrap.min.css 源映射 URL:bootstrap.min.css.map
  • tariffdetaildata.php 放这个文件

标签: javascript php html ajax


【解决方案1】:

我没有看到任何var tmcode = $(e.relatedTarget).data('book_id').tmcode;。属性“book_id”来自哪里? .data('book_id) 可能返回未定义或空值。检查一下。

【讨论】:

  • 实际上这个变量来自打开模式窗口的锚标签代码是 更多详情
  • 实际上我检查了它返回的正确值,我将值更改为“12345”只是为了简单起见,但它正在从数据库中获取此变量的值。我检查了警报(tmcode)及其返回的正确值
  • 我只需要将 $output 数据放入关税详细数据 div 中。
  • 我仍然认为您需要检查那里的值。 e.relatedTarget 的值是多少?还要检查这个data-book_id='{"tmcode":"12345"}'。您正在从数据属性返回一个直接字符串,而不是在调用('book_id').tmcode 之前对其进行解析。你可以像data-book_tmcode='12345'这样简单
  • 检查控制台看ajax调用是否有错误
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-11-04
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多