传递数据以填充在 ajax Modal 中加载的输入字段答案

【问题标题】：Pass data through to fill input fields loaded in ajax Modal传递数据以填充在 ajax Modal 中加载的输入字段
【发布时间】：2016-03-31 03:20:22
【问题描述】：

在一个页面上，我有一个使用以下代码打开 ajax 模式的按钮 <button onclick="showAjaxModalcal('<?php echo base_url();?>index.php?modal/popup/add_appointment','09-15-2019');"

ajax modal 的脚本如下

    <script type="text/javascript">
    function showAjaxModalcal(url,data)
    {
    // SHOWING AJAX PRELOADER IMAGE
    jQuery('#modal_ajax .modal-body').html('<div style="text-align:center;   margin-top:200px;"><img src="assets/images/preloader.gif" style="height:25px;" /></div>');

    // LOADING THE AJAX MODAL
    jQuery('#modal_ajax').modal('show', {backdrop: 'true'});

    // SHOW AJAX RESPONSE ON REQUEST SUCCESS
    $.ajax({
        url: url,
        data: {date_timestamp:data},
        success: function(response)

        {
            jQuery('#modal_ajax .modal-body').html(response);
            //window.scrollTo(0, 0);
            $('html, body').animate({ scrollTop: 0 }, 'fast');
        }
    });
}

</script>'

模态框包含一个带有名称的输入文件 <input type="text" name="date_timestamp" id="date_timestamp" class="form-control datepicker" data-format="d-m-yyyy" placeholder="">

我想要实现的是在 ajax 模式以 09-15-2019 值打开时自动填充此输入字段。日期并不总是相同的。

问题是我得到了下面的代码 "NetworkError: 400 Bad Request - http://**************/index.php?modal/popup/add_appointment&date_timestamp=09-15-2019"

【问题讨论】：

标签： javascript jquery ajax bootstrap-modal

【解决方案1】：

如果我理解正确，您想在模态显示时将 date 传递给模态输入，因为 date 和模态 HTML 都在同一页面上。

最简单的解决方案

使用 bootstrap 模式事件监听器和数据属性，让 bootstrap 为您完成这项工作

带有数据属性data-date的模态调用按钮（日期可以是动态的，可以是任何值）

<button data-toggle="modal" data-modal="#modal_ajax" data-date="09-15-2019">Whatever</button>

事件监听脚本

$(document).ready(function(){
    $('#modal_ajax').on('show.bs.modal', function (e) {
        var date = $(e.relatedTarget).data('date');
        $("#date_timestamp").val(date);
    });
});

注意：去掉onclick="showAjaxModalcal()函数

您的方法

从模态触发按钮中删除url

<button onclick="showAjaxModalcal('09-15-2019');">whatever</button>

并在 Script 中摆脱 Ajax 方法

<script type="text/javascript">
function showAjaxModalcal(data) {
  alert(data);
  // SHOWING AJAX PRELOADER IMAGE
  $('#modal_ajax .modal-body').html('<div style="text-align:center;   margin-top:200px;"><img src="assets/images/preloader.gif" style="height:25px;" /></div>');
  $('#modal_ajax').modal({
    backdrop: 'true'
  }).on('shown.bs.modal', function() {
    alert(data);
    $("#date_timestamp").val(data);
  });
}
</script>

旁注：在Ajax 方法中，没有输入定义来填充日期

success: function(response){
    jQuery('#modal_ajax .modal-body').html(response);
    //window.scrollTo(0, 0);
    $('html, body').animate({ scrollTop: 0 }, 'fast');
}

Fiddle

【讨论】：