How to send parameter in modal bootsrap?

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

What is this id="priceModal='+priceModal+'"? do you mean to add your json to your element's id like that? data-price-modal="+priceModal+'" would be far more appropirate — Wesley Smith
– Wesley Smith, Commented May 14, 2016 at 4:20

Wesley Smith · Accepted Answer · 2016-05-14 06:00:13Z

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'));

@mosestoh my bad, I forgot that JSON is a bit of a pain in this context. See my edit, its actually easier to add the object with jQuery and let it handle the details
it looks like I will use this way : jsfiddle.net/o5qn5gum/2. But there exist error
@mosestoh that jsFiddle does not use the code from the above
Look the new fiddle : jsfiddle.net/o5qn5gum/3. I add console.log(JSON.parse(json));. There exist error : SyntaxError: JSON.parse: unexpected non-whitespace character after JSON data at line 1 column 96 of the JSON data.

Jenson M John · Accepted Answer · 2016-05-14 12:59:34Z

1

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

edited May 14, 2016 at 12:59

answered May 14, 2016 at 5:14

Jenson M John

5,7295 gold badges32 silver badges48 bronze badges

6 Comments

Wesley Smith Over a year ago

I dont think this will quite work, see this jsFiddle, Im pretty sure you need to encode the string to be able to get anything useful back out of it later, if you set it in the html itself

Jenson M John Over a year ago

@DelightedD0D Have you checked given Fiddle URL??

moses toh Over a year ago

@DelightedD0D, It looks like I will use this way. But when I try the jsfiddle, there is exist error. The error : SyntaxError: JSON.parse: expected property name or '}' at line 1 column 2 of the JSON data. It looks like it failed to convert to objects

Wesley Smith Over a year ago

exactly, thats what Im saying, youd have to encode the string on the server if you want to do it this way

moses toh Over a year ago

Solved. Surplus double quotes in

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

. Thank you very much

|

Collectives™ on Stack Overflow

How to send parameter in modal bootsrap?

2 Answers 2

working jsFiddle

10 Comments

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

6 Comments

Linked

Related