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

Answer 3

如果你想以这种方式使用模态使用json数组：

<button type="button" data-toggle="modal" data-target="#priceModal" data-whatever="value">Click Me</button>

在jquery中：

 $('#priceModal').on('show.bs.modal', function(e) {

             //get data from trigger element fire the modal
             var sample= $(this).data('whatever');

        // you can send parameter to server and get data to display in modal
        $.ajax({
                type: 'GET',
                url: 'action url',
                data:{param:sample},
                async:false,
                success: function(data) {
                    console.log(data);
                },
               error:function(xhr){
                 console.log(xhr.responseText);
                }
            });
        })

如果您想使用您的方式更改此行以获取您的数据。 html属性开始“和结束”，因为这样你只得到这个价值priceModal = {

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

如何在modal bootsrap中发送参数？

3 个答案:

working jsFiddle