Question

在一个页面上我有一个使用以下代码打开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"

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

在脚本中摆脱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>

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

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

Fiddle

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

1 个答案: