CODEWITHSUNDEEP
jquerytwitter-bootstrap
StoledInk
StoledInk

Reputation: 174

get data attribute and show in bootstrap modal

I have a couple of table rows that each have data attribute attached. when i click on each table row i want to open modal and How do i get the data attribute, td value and display in modal specific field id on tr click

Table

<table class="table table-striped" id="fileInfo" data-toggle="modal" data-target="#modalInfo">
<thead>
    <th>Name</th>
    <th>Type</th>
    <th>Date Modified</th>       
</thead>
<tbody>
    <tr class="file" data-name="sample.jpg">
        <td>sample.jpg</td>
        <td>JPG</td>
        <td>12.24.2015</td>
    </tr>
    <tr class="file" data-name="sample2.jpg">
        <td>sample2.txt</td>
        <td>TXT</td>
        <td>12.24.2015</td>
    </tr>        
</tbody>

Jquery

$('#modalInfo').modal({
    keyboard: true,
    backdrop: "static",
    show:false,

}).on('show', function(){
    var getIdFromRow = $(event.target).closest('tr').data('name');
    $(this).find(".filename").html(getIdFromRow);
});

JSFIDDLE

Upvotes: 2

Views: 1982

Answers (1)

Ethaan
Ethaan

Reputation: 11376

First, lets take the data value like this.

$( ".file" ).click(function() {
  //we only use $(this).cata(); since Jquery library do the Bind() method for us.
  var valueText = $(this).data();
    console.log(valueText.name);
    document.getElementById("demo").innerHTML = valueText.name;
});

Also lets change the 'show' event to this.

.on('click', function(event){
        //Here just show a console with the DOM Input element, you can remove it if you want.
        getInput = document.getElementById('demo')
        console.log(getInput)
    });

So here we get the value from the .file class using the data function, and we are using document.getElementById("demo").innerHTML = valueText.name; to insert them into the input.

Here is the JSfiddle.

Good Luck

Upvotes: 1

Related Questions