CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
xblade52
xblade52

Reputation: 37

Is Bootstrap usable in this case?

Can I edit all text fields (tr's) with Bootstrap's modal? including the new fields that I can create. Some friend told me that is usable in this case, but I haven't worked with this framework before. I've made some research, and tried some codes posted here and on the internet, but haven't worked. If this is not difficult to do and you guys can help me I'll appreciate it. I'm trying to make mini projects for self learning, and obviously after starting with big ones in school.

Code: HTML

<!DOCTYPE html>
<html>
<head>
    <title>Main Page</title>
    <script src="js/jquery-3.1.0.min.js"></script>
    <script src="js/script1.js"></script>
</head>
<body>
    <table id="mainTable" name="mainTable" align="center" border="0" width="auto">
      <tbody>
        <tr>
          <td align="center">
            <input type="number" id="regsAmount" name="regsAmount" style="width:40px; text-align: center;">
            <input type="button" id="submitAmount" name="submitAmount" style="width:auto;" value="Add">
            <th style="text-align:center; border-style:solid; width:120px; border-width:2px;">Name</th>
            <th style="text-align:center; border-style:solid; width:120px; border-width:2px;">Last Name</th>
            <th style="text-align:center; border-style:solid; width:120px; border-width:2px;">ID</th>
            <th style="text-align:center; border-style:solid; width:250px; border-width:2px;">Mail</th>
            <th style="text-align:center; border-style:solid; width:120px; border-width:2px;">Username</th>
          </td>
        </tr>

        <tr align="center">
          <td>

          </td>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
          <td>5</td>
          <td><button type="button" data-id="1" class="btn btn-default editButton">Edit</button></td>
        </tr>

        <tr align="center">
          <td></td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
          <td>9</td>
          <td>10</td>
          <td><button type="button" data-id="2" class="btn btn-default editButton">Edit</button></td>
        </tr>

        <tr align="center">
          <td></td>
          <td>11</td>
          <td>12</td>
          <td>13</td>
          <td>14</td>
          <td>15</td>
          <td><button type="button" data-id="3" class="btn btn-default editButton">Edit</button></td>
        </tr>

        <tr align="center">
          <td></td>
          <td>16</td>
          <td>17</td>
          <td>18</td>
          <td>19</td>
          <td>20</td>
          <td><button type="button" data-id="4" class="btn btn-default editButton">Edit</button></td>
        </tr>

        <tr align="center">
          <td></td>
          <td>21</td>
          <td>22</td>
          <td>23</td>
          <td>24</td>
          <td>25</td>
          <td><button type="button" data-id="5" class="btn btn-default editButton">Edit</button></td>
        </tr>
      </tbody>
    </table>

    <p align="center"><input type="button" id="saveRegs" name="saveRegs" value="Save All" style="width:auto;" onclick="disable_inp()"></p>

</body>
</html>

JS:

function disable_inp()
{
  $("tr:gt(0) td:has(input)").text(function() 
  {
    return $('input', this).val();
  });
}

$(document).ready(function()
{  
    $(document).on('click', "#submitAmount", function()
    {
      var ValReg = $("#regsAmount").val();
      var i = 1;
      var array = new Array(5)
      array = ["<input type='text' class='reqField'>", "<input type='text' class='reqField'>", "<input type='text'  class='reqField'>", "<input type='text' class='reqField'>", "<input type='text' class='reqField'>"];

      while (i <= ValReg) 
      {
        $("#mainTable").last().append("<tr></tr>");
        $("tr").last().append('<td> </td>' + '<td align="center">' + array[0] + '</td>' + '<td align="center">' + array[1] + '</td>' + '<td align="center">' + array[2] + '</td>' + '<td align="center">' + array[3] + '</td>' + '<td align="center">' + array[4] + '</td>');
        i++;
      }
})
});

Upvotes: 1

Views: 138

Answers (2)

Dipak Thoke
Dipak Thoke

Reputation: 1983

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="//oss.maxcdn.com/bootbox/4.2.0/bootbox.min.js"></script>
    <script>


    function disable_inp()
    {
      $("tr:gt(0) td:has(input)").text(function() 
      {
        return $('input', this).val();
      });
    }

    $(document).ready(function()
    {  
        $(document).on('click', "#submitAmount", function()
        {

          var ValReg = $("#regsAmount").val();
          var i = 1;
          var array = new Array(5)
          array = ["<input type='text' class='reqField'>", "<input type='text' class='reqField'>", "<input type='text'  class='reqField'>", "<input type='text' class='reqField'>", "<input type='text' class='reqField'>"];

          while (i <= ValReg) 
          {
            $("#mainTable").last().append("<tr></tr>");
            $("tr").last().append('<td> </td>' + '<td align="center">' + array[0] + '</td>' + '<td align="center">' + array[1] + '</td>' + '<td align="center">' + array[2] + '</td>' + '<td align="center">' + array[3] + '</td>' + '<td align="center">' + array[4] + '</td>');
            i++;
          }live
    })

    $('.editButton').on('click', function() {
            // Get the record's ID via attribute
            var id = $(this).attr('data-id');


                // Populate the form fields with the data returned from server


                // Show the dialog
                bootbox
                    .dialog({
                        title: 'Edit the user profile',
                        message: $('#userForm'),
                        show: false // We will show it manually later
                    })
                    .on('shown.bs.modal', function() {
                        $('#userForm')
                            .show()                             // Show the login form

                    })
                    .on('hide.bs.modal', function(e) {
                        // Bootbox will remove the modal (including the body which contains the login form)
                        // after hiding the modal
                        // Therefor, we need to backup the form
                        $('#userForm').hide().appendTo('body');
                    })
                    .modal('show');

        });



    $('table tbody tr  td').on('click',function(){

            $("#name").val($(this).closest('tr').children()[1].textContent);

        $("#lastname").val($(this).closest('tr').children()[2].textContent);


        $("#id").val($(this).closest('tr').children()[3].textContent);

        $("#mail").val($(this).closest('tr').children()[4].textContent);

        $("#username").val($(this).closest('tr').children()[5].textContent);

    });
 }); 
    </script>

    </head>
    <body>
        <table id="mainTable" name="mainTable" align="center" border="0" width="auto">
          <tbody>
            <tr>
              <td align="center">
                <input type="number" id="regsAmount" name="regsAmount" style="width:40px; text-align: center;">
                <input type="button" id="submitAmount" name="submitAmount" style="width:auto;" value="Add">
                <th style="text-align:center; border-style:solid; width:120px; border-width:2px;">Name</th>
                <th style="text-align:center; border-style:solid; width:120px; border-width:2px;">Last Name</th>
                <th style="text-align:center; border-style:solid; width:120px; border-width:2px;">ID</th>
                <th style="text-align:center; border-style:solid; width:250px; border-width:2px;">Mail</th>
                <th style="text-align:center; border-style:solid; width:120px; border-width:2px;">Username</th>
              </td>
            </tr>

            <tr align="center">
              <td>

              </td>
              <td>1</td>
              <td>2</td>
              <td>3</td>
              <td>4</td>
              <td>5</td>
              <td><button type="button" data-id="1" class="btn btn-default editButton">Edit</button></td>
            </tr>

            <tr align="center">
              <td></td>
              <td>6</td>
              <td>7</td>
              <td>8</td>
              <td>9</td>
              <td>10</td>
              <td><button type="button" data-id="2" class="btn btn-default editButton">Edit</button></td>
            </tr>

            <tr align="center">
              <td></td>
              <td>11</td>
              <td>12</td>
              <td>13</td>
              <td>14</td>
              <td>15</td>
              <td><button type="button" data-id="3" class="btn btn-default editButton">Edit</button></td>
            </tr>

            <tr align="center">
              <td></td>
              <td>16</td>
              <td>17</td>
              <td>18</td>
              <td>19</td>
              <td>20</td>
              <td><button type="button" data-id="4" class="btn btn-default editButton">Edit</button></td>
            </tr>

            <tr align="center">
              <td></td>
              <td>21</td>
              <td>22</td>
              <td>23</td>
              <td>24</td>
              <td>25</td>
              <td><button type="button" data-id="5" class="btn btn-default editButton">Edit</button></td>
            </tr>
          </tbody>
        </table>

        <p align="center"><input type="button" id="saveRegs" name="saveRegs" value="Save All" style="width:auto;" onclick="disable_inp()"></p>

    <form id="userForm" method="post" class="form-horizontal" style="display: none;">
        <div class="form-group">
            <label class="col-xs-3 control-label">Name</label>
            <div class="col-xs-5">
                <input type="text" class="form-control" id='name' name="name" />
            </div>
        </div>

        <div class="form-group">
            <label class="col-xs-3 control-label">Last name</label>
            <div class="col-xs-5">
                <input type="text"  id='lastname' class="form-control" name="lastname" />
            </div>
        </div>



        <div class="form-group">
            <label class="col-xs-3 control-label">id</label>
            <div class="col-xs-5">
                <input type="text" class="form-control" id='id' name="id" />
            </div>
        </div>

    <div class="form-group">
            <label class="col-xs-3 control-label">Mail</label>
            <div class="col-xs-5">
                <input type="text" class="form-control" id='mail' name="mail" />
            </div>
        </div>


        <div class="form-group">
            <label class="col-xs-3 control-label">username</label>
            <div class="col-xs-5">
                <input type="text" id='username' class="form-control" name="username" />
            </div>
        </div>

        <div class="form-group">
            <div class="col-xs-5 col-xs-offset-3">
                <button type="submit" class="btn btn-default">Save</button>
            </div>
        </div>
    </form>
    </body>
    </html>

Upvotes: 2

sandrina-p
sandrina-p

Reputation: 4160

To show a modal you need to add data-toogle='modal' data-target="#myModal" to the button.

#myModalis the modal ID

<td><button type="button" data-id="1" class="btn btn-default editButton" data-toggle="modal" data-target="#myModal">Edit</button></td>

<div id="myModal" class="modal fade" role="dialog">
    <!-- your modal content -->
</div>

Also don't forget to include the library itself after the jQuery you inserted

<script src="js/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

See more examples here on w3schools

Upvotes: 0

Related Questions