动态 ajax bootstrap modalbox 不起作用答案

【问题标题】：dynamic ajax bootstrap modalbox not work in action动态 ajax bootstrap modalbox 不起作用
【发布时间】：2015-12-19 13:20:57
【问题描述】：

我有这段代码用于使用$.ajax 和json 在引导模式框中显示动态数据。

JS：

$(function() {

    $('.push').click(function() {
        var id = $(this).attr('id');

        $.ajax({
            type: 'post',
            url: '<?PHP echo SITE;?>controller/booksdetails.php', // in here you should put your query 
            dataType: "json",
            data = {
                'bookid': id,
                'csrf_token': <?php echo $token; ?>
            },
            success: function(r) {
                // now you can show output in your modal 
                $('#bookdetails').modal({
                        backdrop: 'static',
                        keyboard: false
                    }) // put your modal id 
                $('.something').show().html(r);
            }
        });


    });

});

HTML：

<a href="javascript:void(0)" id="241" class="push info" title="Full details">show details</a>

<div id="bookdetails" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">title</h4>
            </div>
            <div class="modal-body text-justify">
               <div class="something" style="display:none;">

             </div>
            </div>
            <div class="modal-footer">
            <button type="button" data-dismiss="modal" class="btn btn-primary btn-sm"> close</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

但实际上当我点击链接时，没有显示模态和数据！如何解决问题并在我的模态中显示一个值？

DEMO

【问题讨论】：

标签： javascript jquery ajax twitter-bootstrap

【解决方案1】：

你有几个拼写错误：

'csrf_token': <?php echo $token; ?>

应该是：

 'csrf_token': '<?php echo $token; ?>'

字符串必须加引号。

还有：

data = {
    'bookid': id,
    'csrf_token': <?php echo $token; ?>
},

应该是：

data: {
    'bookid': id,
    'csrf_token': <?php echo $token; ?>
},

对象的属性分配是使用: 而不是= 运算符执行的。

我嘲笑了你的ajax reuqest 并修正了上面提到的错别字。您的代码运行良好：

http://jsfiddle.net/kwv3h8jv/2/

【讨论】：