Onclick Table Row With Onclick Button and Bootstrap Modal Inside

var people = [];var data = {  "person": [{    "firstName": " ",    "lastName": "Kent",    "job": "Reporter",    "roll": 20,    "hours": 10  }, {    "firstName": " ",    "lastName": "Wayne",    "job": "Playboy",    "roll": 30,    "hours": 20  }, {    "firstName": " ",    "lastName": "Scott",    "job": "PaperMan",    "roll": 20,    "hours": 40  },    {    "firstName": " ",    "lastName": "Mike",    "job": "writer",    "roll": 12,    "hours": 30   },    {    "firstName": " ",    "lastName": "Charlie",    "job": "Driver",    "roll": 2,    "hours": 23   },   {        "firstName": " ",    "lastName": "Tom",    "job": "Cook",    "roll": 1,    "hours": 40    }
  ]};
var row = 0;
$('#userdata').on('click', '.toggleModalFromTable', function(e) {  row = $(this).closest('tr').index() + 1;  $('.modal').toggleClass('active');});
$.each(data.person, function(i, f) {  var tblRow = "<tr>" + "<td><button class='button-border toggleModal toggleModalFromTable'><span class='icon'></span> Timesheet Approval</button></td>" + "<td>" + f.lastName + "</td>" + "<td>" + f.job + "</td>" + "<td>" + f.roll + "</td>" + "<td>" + f.hours + "</td>" + " </tr>"  $(tblRow).appendTo("#userdata tbody");
});
$('.approve').click(function() {  $('.modal').toggleClass('active');  $('table tbody tr:nth-child(' + row + ')').remove();});
$('.disapprove').click(function() {  $('.modal').toggleClass('active');  $('table tbody tr:nth-child(' + row + ')').css({    'background': 'red'  });});

html {  font: 0.75em/1.5 sans-serif;  color: #333;  background-color: #fff;  padding: 1em;}

/* Tables */
table {  width: 100%;  margin-bottom: 1em;  border-collapse: collapse;  border: 1px;}
th {  font-weight: bold;  background-color: #ddd;}
td {  padding: 0.5em;  border: 1px solid black;}
tr:nth-child(even) {  background-color: #ddd;}
a.button {  -webkit-appearance: button;  -moz-appearance: button;  appearance: button;  text-decoration: none;  color: initial;}
@font-face {  font-family: 'ios7-icon';  src: url("//ios7-icon-font-demo.herokuapp.com/fonts/ios7-icon.woff") format("woff"), url("//ios7-icon-font-demo.herokuapp.com/fonts/ios7-icon.ttf") format("ttf");  font-weight: normal;  font-style: normal;}
*,*:before,*:after {  -moz-box-sizing: border-box;  -webkit-box-sizing: border-box;  box-sizing: border-box;}
body {  padding: 50px;  font-family: 'Helvetica Neue' !important;  font-weight: 300;}
.wrapper {  max-width: 500px;  margin: 0 auto;}
h1 {  font-weight: 100;  font-size: 45px;  color: #007aff;}
h2 {  font-weight: 500;  font-size: 21px;  margin-bottom: 15px;}
section {  margin-top: 30px;}
section p {  line-height: 1.4;  margin-bottom: 20px;}
button {  -webkit-appearance: none;  -moz-appearance: none;  -ms-appearance: none;  -o-appearance: none;  appearance: none;  -moz-border-radius: 6px;  -webkit-border-radius: 6px;  border-radius: 6px;  border: none;  outline: none;  font: inherit;  cursor: pointer;  margin: 0;  padding: 0;  background: LightBlue;  color: #007aff;  font-weight: 300;  font-size: 14px;  -moz-border-radius: 0px;  -webkit-border-radius: 0px;  border-radius: 0px;  /* &:nth-child(even){ */  /* background: white; */  /* } */  /*  &:last-child {      border-color: red;      margin-bottom: 0;    }*/}
button:hover {  text-decoration: underline;}
button.button-border {  -moz-border-radius: 5px;  -webkit-border-radius: 5px;  border-radius: 5px;  padding: 10px 12px 8px 12px;  border: 1px solid #007aff;}
button.button-border:hover {  background: #007aff;  color: #ffffff;  text-decoration: none;}
button.button-success {  /color: #4dd865;  */ border-color: #4dd865;}
button.button-success:hover {  background: #4dd865;}
button.button-error {  color: #ff3b30;  border-color: #ff3b30;}
button.button-error:hover {  background: #ff3b30;}
.modal {  display: none;  position: fixed;  top: 50%;  left: 50%;  width: 430px;  height: auto;  margin-left: -200px;  margin-top: -150px;  background-color: #ffffff;  padding: 25px;  border-radius: 5px;  z-index: 10;  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);}
.modal.active {  display: block;}
.modal header {  position: relative;}
.modal h2 {  text-align: center;}
.modal .close {  position: absolute;  top: 3px;  right: 0;  margin: 0;}
.pull-right {  float: right;}
.icon {  display: inline-block;  font-size: inherit;  font-family: circle;  margin-right: 5px;  color: inherit;  -webkit-text-rendering: geometricPrecision;  -moz-text-rendering: geometricPrecision;  -ms-text-rendering: geometricPrecision;  -o-text-rendering: geometricPrecision;  text-rendering: geometricPrecision;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table id="userdata" rules="groups" style="border: 1px solid black;">  <thead>
    <tr>      <th> </th>      <th>EmployeeNum</th>      <th>EmployeeName</th>      <th>ChargeNum</th>      <th>Hours</th>    </tr>
  </thead>
  <tbody>
  </tbody></table>
<div class="modal">
  <header>
    <button class="close toggleModal">Close</button>  </header>
  <section>    <p>To approve the timesheet and submit it to WAM press "Approve", to decline the timesheet for later viewing press "Disapprove"</p>  </section>
  <button class="button-border button-success toggleModal approve">    <span class="icon"></span> Approve </button>
  <button class="button-border button-error pull-right toggleModal disapprove">    <span class="icon"> < </span> Disapprove </button>  <!-- <script> $(docuemnt).ready(function(){ -->  <!-- var rowCount = $('table#tableId tr:#a').index() + 1; -->  <!-- $("#a").style.color = "red"}); -->  <!-- </script> -->
</div>

How to open a modal with a form inside when any button within my table is clicked in one function

So here is the edit after the comment you've made to clear what you wanted to do.

I have made the code, with a really deep commenting, you should understand each part of it, and why they are written on. I've tried to keep it simple, and not too technical, keeping the logic simple, not using fancy methods or properties, just the essential that you should know as a beginner.

I have added a bunch of console.log() for you to be able to understand what is happening, and when, if you were to try the code out. Even though the comments are extremely clear, and the logic self-explainatory.
Do not hesitate to comment for me to explain something, but I am sure that you'll get everything. I have added a little trick that will prevent users from cheating by sending another answer.

const tr = document.querySelector("#tr")
const trChildrens = Array.from(tr.children)
const modal = document.querySelector("#modal")
const answerInput = document.querySelector("#answerInput")
const answerButton = document.querySelector("#answerButton")
const result = document.querySelector("#result")
const isCorrect = document.querySelector("#isCorrect")

let modalToggle = false // We're setting it in the global scope in case you need to access it further on.
let answer = "" // Same reason, else we'd put it on the function scope, which would works in your case. Answer is empty per default.

// We will use forEach, which will apply the code for each entry of our array, see it as a for loop, and read about it if you don't know about it.
trChildrens.forEach(child => { 
  child.addEventListener("click", () => {
    console.log("Hey, I've been clicked, so I'll open up the modal!")
    modalToggle = !modalToggle  // We're putting modalToggle to what it's not currently: false if it's true, true if it's false.
    if(modalToggle) { // In the case of modalToggl to be set to true, we want to display the modal.
      modal.style.display = "block" // Replacing the display:none of the modal to the display:block to show it.
    }
  })
})


answerButton.addEventListener("click", answerCheck) // Simply execute answerCheck() when clicking the Answer button.

function answerCheck() {
 // When the answer button is clicked, we want to put the current value of the input as the answer.
 answer = answerInput.value // .value allows us to get the value of an input;
 answerButton.disabled = true  // Once the uesr press the "Answer" button, he shall not be allowed to do it again.
 answerButton.removeEventListener("click", answerCheck) // prevent people to use a trick where they would remove the disabled in DevTools, and resend answer to get it correct while they were not.
 
 // This will need to be coded with your API logic, I will code it with the logic in mind, you'll have to adapt.
 // At this point, you'll have to call your API to get the correct answer, store it in a variable and just use it in the if statement.
 if (answer != "This will be the result of the API") {
   console.log("The answer is different from the API result, the answer is not correct!")
   isCorrect.textContent = "incorrect"
 } else {
   console.log("The answer is corresponding to the API result, the answer is correct!")
   isCorrect.textContent = "correct"
 }
 result.textContent = "Your API result."
}

Here is the HTML part of the code with the id being set.

<table>
    <tr id="tr">
        <td><button id="21" data-category="255">500</button></td>
        <td><button id="22" data-category="190">500</button></td>
        <td><button id="23" data-category="135">500</button></td>
        <td><button id="24" data-category="145">500</button></td>
        <td><button id="25" data-category="130">500</button></td>
    </tr>
</table>
</div>
<div class="board">
    <!-- categories get injected here -->
</div>
<!-- answers container -->
<div id="modal" class="card-modal" style="display: none;">
    <button type="button" class="open-modal" data-open="modal1">...</button>
    <div class=card-modal-inner>
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h2 class="clue-text">
            <!-- clue gets added here -->
        </h2>
        <form autocomplete="off">
            <input id="answerInput" name="user-answer" type="text" />
            <button id="answerButton" type="button">Answer</button>
        </form>
        <div class="result">
            <p class="result_correct-answer">
                The correct answer is <span id="result" class="result_correct-answer-text">
                    <!--answer gets injected here-->
                </span>. Your answer was <span id="isCorrect"></span>

            </p>
        </div>
    </div>
</div>

All you have to do is the API part on the end of the answerCheck() function. Store the result in a variable, and just replace my "string" to your variable to makes it make sense.

Buttons in table row are not working after adding a row click function

$('.table td.row-link').each(function(){
  $(this).css('cursor','pointer').hover(
      function(){ 
          $(this).parent().addClass('active'); 
      },  
      function(){ 
          $(this).parent().removeClass('active'); 
      }).click( function(){ 
          document.location = $(this).parent().attr('data-href'); 
      }
  );
});

Click button on row of the table and show values in modal-window

The click event should be associated with button not the table :

$('.btn-edit').click(function() {

            var $row = $(this).closest("tr"),

            $tdata = $row.find("td");

            console.log($(this).text());

            $.each($tdata, function(index, value) {
                alert ('Entró');
                console.log($(this).text()); 
                $( "input:eq(" + index + ")").val($(this).text());
            });
            $('#edit').modal('show')
        }); 

Your edit button trigger the bootstrap modal : you could either remove data-toggle='modal' from your edit button and trigger the modal programatically in the click event $('#edit').modal('show') . Or use the modal events show.bs.modal as follow

$('#edit').on('show.bs.modal', function (event) {
  var $button = $(event.relatedTarget) // Button that triggered the modal
  var $row = $button.closest("tr"),

        $tdata = $row.find("td");

        console.log($button.text());

        $.each($tdata, function(index, value) {
            alert ('Entró');
            console.log($(this).text()); 
            $( "input:eq(" + index + ")").val($(this).text());
        });
 });

Foreach Entry in DB: Table row with Onclick Modal with a row

Use javascript to generate your modals.
Listen to click event on your labels, pass the DB record id to your javascript code and make an ajax call for the data that goes into the modal and render it.

Bootstrap Modal passing data through on('click-row.bs.table'

So i figured out to managed this properly:

    $('#items-table').on('click-row.bs.table', function (e, row, $element) {
    $('#items').modal('hide');
    $modal('#item');
    $modal.data('id', row.id);
    $modal.modal('show');
    //Need to pass row.id to #item
});

and catch it in the modal like:

$('#item').on('shown.bs.modal', function (event) {

  var modal = $(this);
  var id = modal.data('id');

})

big thanks to @wenyi for that link!

Opening MUI modal from a button in react-table not working

So it was dumb of me not to read thoroughly the minified error mentioned and as the documentation said,

 Do not call (hooks) in event handlers.

So what I did instead is to create a modal function and called it instead of a button.

export const COLUMNS = [
{...},
{
    Header: 'Actions',
    Cell: (row) => (
        <span>
            {row.row.original.id !== null ? (
                <>
                    <BasicModal row={row.row.original.id} />
                </>
            ) : "No ID!"}
        </span>
    ),
    className: 'actions'
}

];

---

Related Topics