Наличие проблемы в выборе в модальной форме Bootstrap - PullRequest
Новая
       1

Наличие проблемы в выборе в модальной форме Bootstrap

0 голосов
/ 19 марта 2020

У меня есть 30 наборов данных, извлеченных из моей базы данных ... Я добавил опцию редактирования и удаления (модальная форма) для редактирования и удаления содержимого таблицы. Это будет работать только для первых 10 строк, для остальных строк этих опций не работают .... скажите, что в этом плохого.

Для параметров редактирования и удаления первых 10 строк (появится модальное значение)

И Другие, чем первые 10 строк модальной формы для редактирования и удаления опции не появится всплывающее 

<!-- ADDED SCRIPT FOR DELETE -->

<?php
$connection = mysqli_connect("localhost","root","");
$db = mysqli_select_db($connection, 'database');

if(isset($_POST['deletedata']))
{
    $id = $_POST['delete_id'];

    $query = "DELETE FROM users WHERE Id='$id'";
    $query_run = mysqli_query($connection, $query);

    if($query_run)
    {
        echo '<script> alert("Data Deleted"); </script>';
        header("Location:index.php");
    }
    else
    {
        echo '<script> alert("Data Not Deleted"); </script>';
    }
}

?>

<!-- SCRIPT FOR EDIT -->

<?php
$connection = mysqli_connect("localhost","root","");
$db = mysqli_select_db($connection, 'database');

    if(isset($_POST['updatedata']))
    {   
        $id = $_POST['update_id'];
        $fname = $_POST['First_Name'];
        $lname = $_POST['Last_Name'];
        $email = $_POST['Email'];
        $gender = $_POST['Gender'];
        $jobtitle = $_POST['Job_Title'];

        $query = "UPDATE users SET First_Name='$fname', Last_Name='$lname', Email='$email', Gender=' $gender' , Job_Title=' $jobtitle' WHERE Id='$id'  ";
        $query_run = mysqli_query($connection, $query);

        if($query_run)
        {
            echo '<script> alert("Data Updated"); </script>';
            header("Location:index.php");
        }
        else
        {
            echo '<script> alert("Data Not Updated"); </script>';
        }
    }
?>

<!-- INSERTING DATA TO DB -->

<?php

$connection = mysqli_connect("localhost","root","");
$db = mysqli_select_db($connection, 'database');

if(isset($_POST['insertdata']))
{
    $fname = $_POST['First_Name'];
    $lname = $_POST['Last_Name'];
    $email = $_POST['Email'];
    $gender = $_POST['Gender'];
    $jobtitle = $_POST['Job_Title'];

    $query = "INSERT INTO users (`First_Name`,`Last_Name`,`Email`,`Gender`,`Job_Title`) VALUES ('$fname','$lname','$email','$gender','$jobtitle')";
    $query_run = mysqli_query($connection, $query);

    if($query_run)
    {
        echo '<script> alert("Data Saved"); </script>';
        header('Location: index.php');
    }
    else
    {
        echo '<script> alert("Data Not Saved"); </script>';
    }
}

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> PHP CRUD with Bootstrap Modal </title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css"/>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
    
<!-- UPDATE MODAL FORM -->

<div class="modal fade" id="studentaddmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Add Student Data </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

        <form action="insertcode.php" method="POST">
            <div class="modal-body">
                <div class="form-group">
                    <label> First Name </label>
                    <input type="text" name="First_Name" class="form-control" placeholder="Enter First Name">
                </div>

                <div class="form-group">
                    <label> Last Name </label>
                    <input type="text" name="Last_Name" class="form-control" placeholder="Enter Last Name">
                </div>

                <div class="form-group">
                    <label> E-Mail </label>
                    <input type="text" name="Email" class="form-control" placeholder="Enter Your Email">
                </div>

                <div class="form-group">
                    <label> Gender </label>
                    <input type="text" name="Gender" class="form-control" placeholder="Enter the Gender">
                </div>

                <div class="form-group">
                    <label> Gender </label>
                    <input type="text" name="Job_Title" class="form-control" placeholder="Enter Your Job_Title">
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" name="insertdata" class="btn btn-primary">Save Data</button>
            </div>
        </form>

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

<!-- ####################################################################################################################### -->

<!-- EDIT POP UP FORM (Bootstrap MODAL) -->

<div class="modal fade" id="editmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"> Edit Student Data </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

        <form action="updatecode.php" method="POST">

            <div class="modal-body">

                <input type="hidden" name="update_id" id="update_id">

                <div class="form-group">
                    <label> First Name </label>
                    <input type="text" name="First_Name" id="fname" class="form-control" placeholder="Enter First Name">
                </div>

                <div class="form-group">
                    <label> Last Name </label>
                    <input type="text" name="Last_Name" id="lname" class="form-control" placeholder="Enter Last Name">
                </div>

                <div class="form-group">
                    <label> E-Mail </label>
                    <input type="text" name="Email" id="email" class="form-control" placeholder="Enter Your E-Mail">
                </div>

                <div class="form-group">
                    <label> Gender </label>
                    <input type="text" name="Gender" id="gender" class="form-control" placeholder="Enter the Gender">
                </div>

                <div class="form-group">
                    <label> Job_Title </label>
                    <input type="text" name="Job_Title" id="jobtitle" class="form-control" placeholder="Enter Your Job_Title">
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" name="updatedata" class="btn btn-primary">Update Data</button>
            </div>
        </form>

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

<!-- #################################################################################################### -->

<!-- DELETE POP UP FORM (Bootstrap MODAL) -->

<div class="modal fade" id="deletemodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"> Delete Student Data </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>

        <form action="deletecode.php" method="POST">

            <div class="modal-body">

                <input type="hidden" name="delete_id" id="delete_id">

                <h4> Do you want to Delete this Data ??</h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">  NO </button>
                <button type="submit" name="deletedata" class="btn btn-primary"> Yes !! Delete it. </button>
            </div>
        </form>

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

<!-- #################################################################################################### -->

<!-- DATABASE TABLE CONTENT -->

<div class="content container-fluid">
        <div class="header-section">
            <h2 class="text-center mt-4 mb-4"> INSERTING AND RETRIVING DATAS </h2>
           
            <div class="content-update text-center">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#studentaddmodal">
                    ADD DATA
                </button>
            </div>
        </div><br>

    <!-- CREATE TABLE & RETRIVE DATAS FROM DATABE -->
        <div class="container">
            <div class="row justify-content-center">
                <div class="table-container">
                    <h4 class="table-header text-center">RETRIVED DATA FROM THE USER FROM DATABASE</h4>
                    <hr>
                    <table class="table table-dark table-bordered  table-hover">
                        <thead>
                            <tr>
                                <th>Id</th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>E-mail </th>
                                <th>Gender</th>
                                <th>Job_Title</th>
                                <th scope="col"> EDIT </th>
                                <th scope="col"> DELETE </th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php
                                $conn = new mysqli("localhost","root","","database");
                                $sql="SELECT * FROM users";
                                $res=$conn->query($sql);
                                while($row=$res->fetch_assoc()){
                            ?>
                            <tr>
                                <td><?= $row['Id'] ?></td>
                                <td><?= $row['First_Name'] ?></td>
                                <td><?= $row['Last_Name'] ?></td>
                                <td><?= $row['Email'] ?></td>
                                <td><?= $row['Gender'] ?></td>
                                <td><?= $row['Job_Title'] ?></td>
                                <td> 
                                    <button type="button" class="btn btn-success editbtn"> EDIT </button>
                                </td> 
                                <td>
                                    <button type="button" class="btn btn-danger deletebtn"> DELETE </button>
                                </td>
                            </tr>
                        <?php } ?>
                        </tbody>
                    </table>
                </div>      
            </div>

            <!-- FILTERS & SEARCH -->
            <script type="text/javascript">
                $(document).ready(function(){
                    $('table').DataTable();
                })
            </script>

        </div>
</div>

<!-- #################################################################################################### -->

<!-- DELETE OPTION -->
<script>
$(document).ready(function () {

    $('.deletebtn').on('click', function() {
        
        $('#deletemodal').modal('show');

            $tr = $(this).closest('tr');

            var data = $tr.children("td").map(function() {
                return $(this).text();
            }).get();

            console.log(data);

            $('#delete_id').val(data[0]);
      
    });
});
</script>

<!-- #################################################################################################### -->

<!-- EDIT OPTION -->
<script>
$(document).ready(function () {
    $('.editbtn').on('click', function() {
        
        $('#editmodal').modal('show');

        
            $tr = $(this).closest('tr');

            var data = $tr.children("td").map(function() {
                return $(this).text();
            }).get();

            console.log(data);

            $('#update_id').val(data[0]);
            $('#First_Name').val(data[1]);
            $('#Last_Name').val(data[2]);
            $('#Email').val(data[3]);
            $('#Gender').val(data[4]);
            $('#Job_Title').val(data[5]);
    });
});
</script>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...