CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Gabriel Gomes
Gabriel Gomes

Reputation: 139

Multiple Modal on Table Row

I tried to create a table with 3 modal, in the same row i have 2 buttons, delete and details that will open each modal, and the whole line is a other button that will open the edit modal.

The problem is: when i click on delete or view button, open 2 modal, the edit modal and delete modal.

Example:

<!--Table-->
<tr data-toggle="modal" data-target="#modalEdit" >
    <td data-toggle="modal" data-target="#modalDelete">Delete Button</td>
    <td data-toggle="modal" data-target="#modalDetails">Details Button</td>
    <td>Id</td>
    <td>Name</td>
    <td>Description</td>
    <td>Price</td>
</tr>

<!--Modal Edit-->  
<div class="modal" id="modalEdit">
    Edit informations
</div>

<!--Modal Details-->    
<div class="modal" id="modalDetails">
    Details informations
</div>

<!--Modal Delete-->    
<div class="modal" id="modalDelete">
    Delete informations
</div>

When i click on row its OK, but when i click on button edit or delete, this open 2 modal, always the edit modal stay over delete ou details modal.

Can someone help me with this issue?

Upvotes: 0

Views: 1930

Answers (2)

Thusitha
Thusitha

Reputation: 3511

Problem is since your delete and details buttons are inside the tr, a click on the button will bubble up to the top and fire the row click event also. To fix that you should prevent event propagation in button clicks. You have to remove data attributes to achieve this.

HTML

<td data-toggle="modal" id="deleteBtn">Delete Button</td>

JavaScript

$("#deleteBtn").on("click", function(event){
   event.stopPropagation();
   $("#modalDelete").modal("show");
});

Same should apply to the details button as well. You can read more on event propagation here.
https://www.w3schools.com/jquery/event_stoppropagation.asp

Upvotes: 2

ShilpeshAgre
ShilpeshAgre

Reputation: 291

Following table structure will solve your issue

<tr>
 <td data-toggle="modal" data-target="#modalDelete">Delete Button</td>
 <td data-toggle="modal" data-target="#modalDetails">Details Button</td>
 <td data-toggle="modal" data-target="#modalEdit">Edit Button</td>
 <td>Id</td>
 <td>Name</td>
 <td>Description</td>
 <td>Price</td>
</tr>

Upvotes: 0

Related Questions