javascript - Getting an ID from a button into a bootstrap modal - Stack Overflow

admin管理员组

文章数量:1428567

I've managed to figure out how to grab external json and use that in a modal using a manually set id in the javascript.

I'm stuck on passing the id from the button to the javascript url. My button markup is as follows;

<button type="button" class="btn btn-primary btn-sm modal-btn" data-id="10">Details</button>

My JS currently looks like this;

<script type="application/javascript">
       $(document).ready(function() {
var table = $('#example').DataTable( {

    dom: 'T<"clear">lfrtip',
    tableTools: {
        "sRowSelect": "multi",
        "aButtons": [ "select_all", "select_none" ],
        "aoColumnDefs": [
            { "bVisible": false, "aTargets": [ 1 ] }
        ]
    }
});


$('#example tbody').on( 'click', 'tr', function (e) {

    if($(e.target).is('.modal-btn')){
        $('#fullDetails').modal('show');
           var event = "details.php?id=" + ($(this).data('id'));
                $.getJSON(event, function( data ) {
                    $(".modal-title").text(data.title);
                    $(".modal-audience").text(data.audience);
                    $(".modal-leader").text(data.leader);
                    $(".modal-date").text(data.date);
                    $(".modal-start_time").text(data.start_time);
                    $(".modal-end_time").text(data.end_time);
                    $(".modal-details").text(data.details);
                    $(".modal-venue").text(data.venue);
                    $(".modal-cost").text(data.cost);
                }, "json" );

    }else{
        $(this).toggleClass('selected'); 
    }
});

$('#button').click( function () {
    alert( table.rows('.selected').data().length +' row(s) selected' );
});

}); </script>

the line im having issue with is;

var event = "details.php?id=" + ($(this).data('id'));

I'm using ($(this).data('id')); to try and grab the id attribute from the button, but i keep getting undefined.

I've managed to figure out how to grab external json and use that in a modal using a manually set id in the javascript.

I'm stuck on passing the id from the button to the javascript url. My button markup is as follows;

<button type="button" class="btn btn-primary btn-sm modal-btn" data-id="10">Details</button>

My JS currently looks like this;

<script type="application/javascript">
       $(document).ready(function() {
var table = $('#example').DataTable( {

    dom: 'T<"clear">lfrtip',
    tableTools: {
        "sRowSelect": "multi",
        "aButtons": [ "select_all", "select_none" ],
        "aoColumnDefs": [
            { "bVisible": false, "aTargets": [ 1 ] }
        ]
    }
});


$('#example tbody').on( 'click', 'tr', function (e) {

    if($(e.target).is('.modal-btn')){
        $('#fullDetails').modal('show');
           var event = "details.php?id=" + ($(this).data('id'));
                $.getJSON(event, function( data ) {
                    $(".modal-title").text(data.title);
                    $(".modal-audience").text(data.audience);
                    $(".modal-leader").text(data.leader);
                    $(".modal-date").text(data.date);
                    $(".modal-start_time").text(data.start_time);
                    $(".modal-end_time").text(data.end_time);
                    $(".modal-details").text(data.details);
                    $(".modal-venue").text(data.venue);
                    $(".modal-cost").text(data.cost);
                }, "json" );

    }else{
        $(this).toggleClass('selected'); 
    }
});

$('#button').click( function () {
    alert( table.rows('.selected').data().length +' row(s) selected' );
});

}); </script>

the line im having issue with is;

var event = "details.php?id=" + ($(this).data('id'));

I'm using ($(this).data('id')); to try and grab the id attribute from the button, but i keep getting undefined.

• javascript
• jquery

Share Improve this question Follow asked Apr 22, 2015 at 13:16 NathanNathan 2,51344 gold badges3737 silver badges4949 bronze badges 1

• 2 $(this) is going to be referencing the tr from the initial .on( 'click', 'tr', function (e), use .proxy(), or just use var event = "details.php?id=" + ($(e.target).data('id')); – Josh Stevenson Commented Apr 22, 2015 at 13:21

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Try

var event = "details.php?id=" + ($(e.target).data('id'));

$(this) is pointing to the tr that was clicked.

Try to fetch it as below

$('#example tbody').on( 'click', 'tr', function (e) {
      var target = $( e.target );//Try this change

    if(target.is('.modal-btn')){ //pare it this way
        $('#fullDetails').modal('show');
           var event = "details.php?id=" + (target.data('id'));//fetch it like this
                $.getJSON(event, function( data ) {
                    $(".modal-title").text(data.title);
                    $(".modal-audience").text(data.audience);
                    $(".modal-leader").text(data.leader);
                    $(".modal-date").text(data.date);
                    $(".modal-start_time").text(data.start_time);
                    $(".modal-end_time").text(data.end_time);
                    $(".modal-details").text(data.details);
                    $(".modal-venue").text(data.venue);
                    $(".modal-cost").text(data.cost);
                }, "json" );

    }else{
        $(this).toggleClass('selected'); 
    }
});

Change the line to

var event = "details.php?id=" + $(e.target).data('id');

and try again

本文标签： javascriptGetting an ID from a button into a bootstrap modalStack Overflow