How to send parameter json array when modal open?

Question

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

your question isn't very clear. What parameter do you want send or print? — Moses Koledoye
– Moses Koledoye, Commented May 13, 2016 at 12:21
check my fiddle: https://jsfiddle.net/xzxrp7nn/6/ Is this what you want? — AlexIL
– AlexIL, Commented May 13, 2016 at 12:30
check this fiddle, you don't need to add priceModel to button id as it can direly used inside model function check this out jsfiddle.net/trd0q40e/1 — Ranjeet Singh
– Ranjeet Singh, Commented May 13, 2016 at 12:34
do you want value of any attribute from within the string or you just directly want to print hole string at all. — Shalin Patel
– Shalin Patel, Commented Dec 15, 2016 at 20:46

AlexIL · Accepted Answer · 2016-05-13 12:33:34Z

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

answered May 13, 2016 at 12:33

AlexIL

5733 gold badges9 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

moses toh Over a year ago

{"attributes":{"Code":"DBL","Total":"200000"},"DayPrice":{"Date":"2016-05-26","Rate":"200000"}}. It can not be edited. It's taken from the API

Guruprasad J Rao · Accepted Answer · 2016-05-14 05:51:51Z

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>

I need you help. Look here : stackoverflow.com/questions/38280802/…

Collectives™ on Stack Overflow

How to send parameter json array when modal open?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related