How to send parameter json array when modal open?

问题

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

My HTML code is like this :

<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(){

        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+'">tes</button>';

        $("#tes").html(isitable);
        $('#priceModal').on('show.bs.modal', function(e) {
            var param = e.relatedTarget.id;
            console.log(param);
        })
    })

When open modal, I want get parameter priceModal. I do console.log(param); in $('#priceModal').on('show.bs.modal', function(e) {.

But the result : priceModal={

Any solution to solve my problem?

Thank you

回答1:

JSFiddle

You are using not correct quotes:

 $(document).ready(function(){

        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+'">tes</button>';

        $("#tes").html(isitable);
        $('#priceModal').on('show.bs.modal', function(e) {
            var param = e.relatedTarget.id;
            console.log(param);
        });
    });

回答2:

Well this is not suggested but still if you want to achieve it then you can just remove " during id assignment for button. DOM still inserts "" to the attribute value, but this will help to fetch you the value. Again, this ain't good practice to store such a value for id. You can store it in any data-* attribute for the same element.

Below example shows what happens when you remove "" while assigning id

$(document).ready(function() {

  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 + '>tes</button>';
       //^Remove "" from here
  $("#tes").html(isitable);
  $('#priceModal').on('show.bs.modal', function(e) {
    var param = e.relatedTarget.id;
    $('.modal-body').html(param);
  })
})

.clsDatePicker {
  z-index: 100000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

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

来源：https://stackoverflow.com/questions/37209847/how-to-send-parameter-json-array-when-modal-open

标签

javascript

jquery

json

bootstrap-modal