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

Pass data through to fill input fields loaded in ajax Modal

本文关键字：加载 输入 字段 Modal ajax 数据 填充      更新时间：2023-09-28

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

ajax模式的脚本如下

    <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"

如果我理解正确，您希望在模态显示时将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

相关文章：