Javascript 引导程序将数据传递到模式

Javascript 引导程序将数据传递到模式,javascript,jquery,twitter-bootstrap,Javascript,Jquery,Twitter Bootstrap,我已经阅读了Bootsrap文档,甚至测试了它们的“基于触发器按钮的不同模式内容”示例,但这不起作用 关于如何将数据传递给模态以便在页面中不创建多个模态的任何想法 以下是触发模式的按钮: <a class="btn btn-danger" data-toggle="modal" data-target="#deleteSubject" data-whatever="<?= $subj_id ?>" role="button" title="Delete Subject">

我已经阅读了Bootsrap文档,甚至测试了它们的“基于触发器按钮的不同模式内容”示例,但这不起作用

关于如何将数据传递给模态以便在页面中不创建多个模态的任何想法

以下是触发模式的按钮:

<a class="btn btn-danger" data-toggle="modal" data-target="#deleteSubject" data-whatever="<?= $subj_id ?>" role="button" title="Delete Subject"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></a>
<div class="modal fade" id="deleteSubject" tabindex="-1" role="dialog" aria-labelledby="deleteSubjectLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
                <form action="#" method="post">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="deleteSubjectLabel">Delete Subject</h4>
                  </div>
                  <div class="modal-body">
                    <h4>Do you want to delete this subject?</h4>
                    <input type="text" id="subjid" name="subjid">
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger">Delete</button>
                  </div>
                </form>
            </div>
          </div>
        </div>

我认为您忘记了模态实例上的
$
,它应该是
$modal

 <script>
        $('#deleteSubject').on('show.bs.modal', function (event) {
          var button = $(event.relatedTarget)
          var subjId = button.data('whatever')
          var $modal = $(this)
          $modal.find('.modal-body input').val(subjId)
        })
    </script>

$('#deleteSubject').on('show.bs.modal',函数(事件){
var按钮=$(event.relatedTarget)
var subcid=button.data('whatever')
变量$modal=$(此)
$modal.find('.modal body input').val(subcid)
})

我认为您忘记了模态实例上的
$
,它应该是
$modal

 <script>
        $('#deleteSubject').on('show.bs.modal', function (event) {
          var button = $(event.relatedTarget)
          var subjId = button.data('whatever')
          var $modal = $(this)
          $modal.find('.modal-body input').val(subjId)
        })
    </script>

$('#deleteSubject').on('show.bs.modal',函数(事件){
var按钮=$(event.relatedTarget)
var subcid=button.data('whatever')
变量$modal=$(此)
$modal.find('.modal body input').val(subcid)
})

您需要将代码包装到一个文档中,因为您的输入是命名的,并且有一个id-直接指向它,然后您就不需要查找:

<script>
    $(document).ready(function(){
        $('#deleteSubject').on('show.bs.modal', function (event) {
          var button = $(event.relatedTarget);
          var subjId = button.data('whatever');
          $('#subjid').val(subjId);
        })
    })
</script>

$(文档).ready(函数(){
$('#deleteSubject').on('show.bs.modal',函数(事件){
var按钮=$(event.relatedTarget);
var subpid=button.data('whatever');
$('#subcid').val(subcid);
})
})

您需要将代码包装到一个文档中,因为您的输入是命名的,并且有一个id-直接指向它,然后您就不需要查找:

<script>
    $(document).ready(function(){
        $('#deleteSubject').on('show.bs.modal', function (event) {
          var button = $(event.relatedTarget);
          var subjId = button.data('whatever');
          $('#subjid').val(subjId);
        })
    })
</script>

$(文档).ready(函数(){
$('#deleteSubject').on('show.bs.modal',函数(事件){
var按钮=$(event.relatedTarget);
var subpid=button.data('whatever');
$('#subcid').val(subcid);
})
})

只需在点击事件期间使用JavaScript/jQuery设置输入subcid的值

$('#subjid').val(*value*);

只需在点击事件期间使用JavaScript/jQuery设置输入subcid的值

$('#subjid').val(*value*);

变量名
$modal
中的美元符号没有区别。您可能希望在被否决之前删除此项。变量名
$modal
中的美元符号没有区别。您可能希望在被否决之前删除此项。