Просмотр данных SQL по модальности

Здравствуйте, я не совсем уверен, где я ошибся с этим кодом, я очень плохо знаком с ajax, и у меня есть половина идеи о php. Я смотрел на другие вопросы, но все делают это по-другому, чем я.

Я вызываю данные через ajax для модального из SQL

index.php

    <?php
    $connect = mysqli_connect("localhost","root","","testing");
    $query = "SELECT * FROM employee";
    $result = mysqli_query($connect, $query);
    ?>

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>  </title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </head>
    <body>

    <div class="container" style="width:700px;">
    <h3 align="center">Employee Onboarding</h3>
    <br>
    <div class="table-responsive">

    <table class="table table-bordered">
    <tr> <th width="70%">Employee Name</th> <th width="30%">View</th> </tr>

    <?php
    while($row = mysqli_fetch_array($result))
    { 
    ?>

    <tr> <td> <?php echo $row['Name']; ?> </td> <td> <input type="button" name="view" value="view" id="<?php echo $row['EmployeeID']; ?>" class="btn btn-info btn-xs view_data"> </td> </tr>

    <?php
    }
    ?>



    </table>

    </div>
    </div>

    </body>
    </html>


    <!-- Modal -->
    <div id="dataModal" class="modal fade">
    <div class="modal-dialog">
    <div class="modal-content">

    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">&times;</button>
    <h4 class="modal-title">Employee Details</h4>
    </div>

    <div class="modal-body" id="employee_detail">

    </div>

    <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">close</button>
    </div>

    </div>
    </div>
    </div>
    <!-- Modal -->



    <script>
    $(document).ready(function(){
    $('.view_data').click(function(){
    var employee_id = $(this).attr("EmployeeID");

    $.ajax({
    url:"modal.php",
    method:"POST",
    data:{employee_id:employee_id},
    success:function(data){
    $('#employee_detail').html(data);
    $('#dataModal').modal("show");
    }
    });

    });
    });
    </script>

modal.php

    <?php
    if(isset($_POST['employee_id']))
    {
    $output = '';
    $connect = mysqli_connect("localhost","root","","testing");
    $query = "SELECT * FROM employee WHERE EmployeeID = '".$_POST["employee_id"]."'";
    $result = mysqli_query($connect, $query);

    $output .= '
    <div class="table-responsive">
    <table class="table table-bordered">';
    while($row = mysqli_fetch_array($result))
    {
    $output .= '
    <tr> <td width="30%"> <label> Name </label> </td> <td width="70%"> '.$row['Name'].' </td> </tr>
    <tr> <td width="30%"> <label> Adress </label> </td> <td width="70%"> '.$row['Address'].' </td> </tr>
    <tr> <td width="30%"> <label> Gender </label> </td> <td width="70%"> '.$row['Gender'].' </td> </tr>
    <tr> <td width="30%"> <label> Position </label> </td> <td width="70%"> '.$row['Position'].' </td> </tr>
    <tr> <td width="30%"> <label> Age </label> </td> <td width="70%"> '.$row['Age'].' </td> </tr>
    <tr> <td width="30%"> <label> Added Time </label> </td> <td width="70%"> '.$row['AddedTime'].' </td> </tr>
    ';
    }
    $output .= "</table></div>";
    echo $output;
    }
    ?>

Live / Тестирование сайта

Источник

1 ответ

Вы также должны опубликовать свой AJAX! Вы должны добавить результат вашего modal.php в фактический модальный.

modal.php

    $output .= '
<div class="table-responsive">
<table class="table table-bordered">';
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr> <td width="30%"> <label> Name </label> </td> <td width="70%"> '.$row['Name'].' </td> </tr>
<tr> <td width="30%"> <label> Adress </label> </td> <td width="70%"> '.$row['Address'].' </td> </tr>
<tr> <td width="30%"> <label> Gender </label> </td> <td width="70%"> '.$row['Gender'].' </td> </tr>
<tr> <td width="30%"> <label> Position </label> </td> <td width="70%"> '.$row['Position'].' </td> </tr>
<tr> <td width="30%"> <label> Age </label> </td> <td width="70%"> '.$row['Age'].' </td> </tr>
<tr> <td width="30%"> <label> Added Time </label> </td> <td width="70%"> '.$row['AddedTime'].' </td> </tr>
';
}
$output .= "</table></div>";
echo $output;
}

В твоем аяксе. Предполагая, что вы используете jquery:

$.ajax({
     type: 'POST',
     url : 'modal.php',
     cache: false,
     success: function(data){
            $('#target').html(data);
      }
});

HTML

<div class="modal">
     <div id="target"></div>
</div>
Источник
Другие вопросы по тегам