如何在模态引导程序中发送参数？

Question

演示和完整代码如下：https://jsfiddle.net/xzxrp7nn/9/

我的 HTML 代码是这样的：

<button type="button">Click Me</button>

<div id="tes"></div>

<!-- Modal Currency-->
<div class="modal fade" id="priceModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">

            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>

我的 Javascript 代码是这样的：

$(document).ready(function(){
        $("button").click(function(){
            $.ajax({
                //type: 'POST',
                //url: 'script.php',
                success: function(data) {
                    var priceModal = '{"attributes":{"Code":"DBL","Total":"200000"},"DayPrice":{"Date":"2016-05-26","Rate":"200000"}}';

                    var isitable = '<button class="btn blue tes_button" data-toggle="modal" data-target="#priceModal" id="priceModal='+priceModal+'">Test get parameter json array</button>';
                    $("#tes").html(isitable);
                }
            });
        });

        $('#priceModal').on('show.bs.modal', function(e) {
             //console.log('yes');
            var param = e.relatedTarget.id;
            // var hotel_code = $(this).data('id');
            console.log(param);
            // console.log(hotel_code);
        })
    });

当点击“点击我”按钮时，会显示“测试获取参数json数组”按钮。

单击“测试获取参数json数组”按钮时，我想将参数priceModal发送到模态。参数priceModal 包含 json 数组。我做 console.log(param);在$('#priceModal').on('show.bs.modal', function(e) {.

但是结果：priceModal={。 获取priceModal的值失败

有什么办法可以解决我的问题吗？

谢谢

Answer 1

当您调用 id="priceModal='+priceModal+'" 时，您错误地将 json 附加到元素的 id。

数据属性会更合适，更像这样：

success: function(data) {
  var priceModal = {"attributes":{"Code":"DBL","Total":"200000"},"DayPrice":{"Date":"2016-05-26","Rate":"200000"}};
  var isitable = '<button class="btn blue tes_button" data-toggle="modal" data-target="#priceModal" data-price-modal="">Test get parameter json array</button>';
  $("#tes").html(isitable).find('[data-price-modal]').data('price-modal',priceModal);
}


$('#priceModal').on('show.bs.modal', function(e) {
  var param = $('[data-price-modal]').data('price-modal');
  console.log(param);
})

working jsFiddle

---

或者，您可以让您的服务器返回经过编码的 JSON 字符串以在属性中使用。例如，如果您使用 php，这将起作用：

echo htmlspecialchars(json_encode(someArray), ENT_QUOTES, 'UTF-8'));

Answer 2

将您的JSON 放入HTML5 data-*

var priceModal = "{'attributes':{'Code':'DBL','Total':'200000'},'DayPrice':{'Date':'2016-05-26','Rate':'200000'}}";

var isitable = '<button class="btn blue tes_button" data-toggle="modal" data-target="#priceModal" id="priceModel" data-json='+priceModal+'">Test get parameter json array</button>';

点击新创建的按钮访问JSON数据。

var json = $("#priceModel").attr("data-json");
$(".modal-body").html(json); //For eg.

JSFiddle