Balakumar B Balakumar B - 3 months ago 37
Javascript Question

How to get data-id attribute value in Jquery?

HTML CODE

<tbody>
<tr>
<td>0</td>
<td>204093D-P12</td>
<td>80443</td>
<td>Name</td>
<td><span class="label label-success">Updated</span></td>
<td><button class="btn btn-xs btn-flat" data-toggle="modal" data-id="204093D-P132" data-target="#myModal" type="button" title="Add" onClick="ShowModal()"><i class="fa fa-plus" aria-hidden="true"></i></button> | <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="204093D-P132" data-target="#myModal_edit" type="button" title="Edit" onClick="ShowEdit()"><i class="fa fa-pencil-square-o" aria-hidden="true" ></i></button>| <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="204093D-P132" data-target="#myModal_details" type="button" title="Details" onClick="ShowDetails()"><i class="fa fa-list-ul" aria-hidden="true"></i></button></td>
</tr><tr>
<td>1</td>
<td>216619D-P18</td>
<td>16009</td>
<td>Name</td>
<td><span class="label label-success">Updated</span></td>
<td><button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216619D-P918" data-target="#myModal" type="button" title="Add" onClick="ShowModal()"><i class="fa fa-plus" aria-hidden="true"></i></button> | <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216619D-P918" data-target="#myModal_edit" type="button" title="Edit" onClick="ShowEdit()"><i class="fa fa-pencil-square-o" aria-hidden="true" ></i></button>| <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216619D-P918" data-target="#myModal_details" type="button" title="Details" onClick="ShowDetails()"><i class="fa fa-list-ul" aria-hidden="true"></i></button></td>
</tr><tr>
<td>2</td>
<td>21663P0012</td>
<td>13116</td>
<td>Name</td>
<td><span class="label label-success">Updated</span></td>
<td><button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216693P0012" data-target="#myModal" type="button" title="Add" onClick="ShowModal()"><i class="fa fa-plus" aria-hidden="true"></i></button> | <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216693P0012" data-target="#myModal_edit" type="button" title="Edit" onClick="ShowEdit()"><i class="fa fa-pencil-square-o" aria-hidden="true" ></i></button>| <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="216693P0012" data-target="#myModal_details" type="button" title="Details" onClick="ShowDetails()"><i class="fa fa-list-ul" aria-hidden="true"></i></button></td>
</tr><tr>
<td>3</td>
<td>217496D-P078</td>
<td>16032</td>
<td>Name</td>
<td><span class="label label-success">Updated</span></td>
<td><button class="btn btn-xs btn-flat" data-toggle="modal" data-id="217496D-P078" data-target="#myModal" type="button" title="Add" onClick="ShowModal()"><i class="fa fa-plus" aria-hidden="true"></i></button> | <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="217496D-P078" data-target="#myModal_edit" type="button" title="Edit" onClick="ShowEdit()"><i class="fa fa-pencil-square-o" aria-hidden="true" ></i></button>| <button class="btn btn-xs btn-flat" data-toggle="modal" data-id="217496D-P078" data-target="#myModal_details" type="button" title="Details" onClick="ShowDetails()"><i class="fa fa-list-ul" aria-hidden="true"></i></button></td>
</tr>
</tbody>


And i have to tried to get data-id attribute value from using Jquery in following way

function ShowModal(){
alert($(this).attr("data-id"));
}


but return
undefined
how to get data-id value from jquery? and i have an another doubt data-id value can hold numeric value or string value?

Answer

You need to pass the current element context in inline click handler like

<button onClick="ShowModal(this)" data-id="217496D-P078"></button>

Then use the passed element reference to get the data-id. You can also use HTMLElement.dataset property like elem.dataset.id

function ShowModal(elem){
    var dataId = $(elem).data("id");
    alert(dataId);
}

Additionally, I would recommend you use to bind event handler's instead of ugly inline click handler.