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

Question

Demo and full code is like this : https://jsfiddle.net/xzxrp7nn/9/

My HTML code is like this :

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

My Javascript code is like this :

$(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);
        })
    });

When click button "Click me", It will display button "Test get parameter json array".

When click button "Test get parameter json array", I want send parameter priceModal to modal. Parameter priceModal contain json array. I do console.log(param); in $('#priceModal').on('show.bs.modal', function(e) { .

But the result : priceModal={ . It failed to get the value of priceModal

Any solution to solve my problem?

Thank you

Answer 1

When you call id="priceModal='+priceModal+'" you are incorrectly appending your json to your element's id.

A data attribute would be far more appropriate, something more like this:

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

---

Alternatively, you could have your server return the JSON string encoded for use in the attribute. For example, if you were using php , this would work:

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

Answer 2

Place your JSON in 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>';

Access JSON data upon clicking newly Created button.

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

JSFiddle

Answer 3

if you want just get json array in modal use this way:

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

in 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);
                }
            });
        })

if you want use the your way change this line to get your data. html attributes start " and end " because of this you get only this value priceModal={

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