How to send parameter based on which button is clicked in modal?

问题

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

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) {
                    // alert(data);
                    // $("p").text(data);
                    var priceModal1 = '[{"@attributes":{"Code":"SGL","Total":"200000"},"DayPrice":{"Date":"2016-05-26","Rate":"200000"}},{"@attributes":{"Code":"DBL","Total":"200000"},"DayPrice":{"Date":"2016-05-26","Rate":"200000"}}]';
                    var priceModal2 = '[{"@attributes":{"Code":"SGL","Total":"225000"},"DayPrice":{"Date":"2016-05-26","Rate":"225000"}},{"@attributes":{"Code":"DBL","Total":"225000"},"DayPrice":{"Date":"2016-05-26","Rate":"225000"}}]';
                    var priceModal3 = '[{"@attributes":{"Code":"SGL","Total":"410000"},"DayPrice":{"Date":"2016-05-26","Rate":"410000"}},{"@attributes":{"Code":"DBL","Total":"410000"},"DayPrice":{"Date":"2016-05-26","Rate":"410000"}}]';

                    var isitable = '';
                    isitable += '<br><button class="btn blue tes_button" data-toggle="modal" data-target="#priceModal" id="priceModel1" data-json='+priceModal1+'>Test get parameter json array 1</button><br><br>';
                    isitable += '<button class="btn blue tes_button" data-toggle="modal" data-target="#priceModal" id="priceModel2" data-json='+priceModal2+'>Test get parameter json array 2</button><br><br>';
                    isitable += '<button class="btn blue tes_button" data-toggle="modal" data-target="#priceModal" id="priceModel3" data-json='+priceModal3+'>Test get parameter json array 3</button><br>';

                    console.log(isitable);
                    $("#tes").html(isitable);

                }
            });
        });

        $('#priceModal').on('show.bs.modal', function(e) {
             //console.log('yes');

            var json = $(this).attr("data-json");
            $(".modal-body").html(json);
            console.log("JSON »» From priceModel Element "+json);
            console.log(JSON.parse(json));

        })
    });

When click button "Click me", It will display three button. Look jsfidde.

When click button "Test get parameter json array 1", I want send parameter priceModal1 to modal. When click button "Test get parameter json array 2", I want send parameter priceModal2 to modal When click button "Test get parameter json array 3", I want send parameter priceModal3 to modal Parameter priceModal1, priceModal2 and priceModal3 contain json array. I do

console.log("JSON »» From priceModel Element "+json);
            console.log(JSON.parse(json));

in $('#priceModal').on('show.bs.modal', function(e) {.

But it's not working.

Although I using : $(this).attr("data-json");

Any solution to solve my problem?

Thank you

回答1:

this inside the show.bs.modal event, refers to the modal itself, while the json data attribute is set at the button. You can access the button that triggered the event at e.relatedTarget.

var json = $(e.relatedTarget).attr('data-json');

Furthermore, accessing a data- attribute with $.data will automatically parse JSON. So you could instead write:

var json = $(e.relatedTarget).data('json');

... and skip JSON.parse, as json is now an object and not a string.

来源：https://stackoverflow.com/questions/37224595/how-to-send-parameter-based-on-which-button-is-clicked-in-modal

标签

javascript

jquery

html

json

bootstrap-modal