How to send json array parameter when opening modal?

Question

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

My HTML code is as follows:

<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 as follows:

 $(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 a modal is open, I want to get the priceModal parameter. I am doing console.log(param); in $('#priceModal').on('show.bs.modal', function(e) { .

But the result: priceModal={

Any solution to solve my problem?

thanks

Answer 1

Jsfiddle

You are using the wrong quotation marks:

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

Answer 2

Well, this is not recommended, but if you want to achieve it, you can simply remove the " during the id assignment for the button . The DOM still inserts the "" attribute value, but that will help you get the value. Again, this is not a good practice to store this value for id . You can save it in any data-* attribute for the same element .

Below is an example of what happens when you delete "" when 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>