使用ajax从数据库加载详细信息

时间:2016-11-17 14:52:21

标签: php mysql ajax

我尝试了一些非常简单但又无法使其发挥作用的东西,我不知道为什么。我试图从数据库加载bootstrap模态窗口的详细信息,以便我可以编辑它们。我的按钮看起来像

<button onclick="GetUserDetails('.$row['row_id'].')" class="btn btn-warning">Update</button>

然后这是应该加载数据的php部分

include("../../misc/database.inc.php");


error_reporting(E_ALL); 
ini_set('display_errors', 1);
$pdo = Database::connect();
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

if(isset($_POST['row_id']) && isset($_POST['row_id']) != "") {

    $row_id = $_POST['row_id'];                 
    $value = $pdo->prepare('SELECT row_id, row_content, row_email FROM excel_table WHERE row_id =  ?'); 
    $value->bindParam(1, $id, PDO::PARAM_INT);
    $value->execute();

    $response = array();

    if($value->rowCount() > 0){
         while ($rs = $value->fetch(PDO::FETCH_ASSOC)) {
             $response = $row;

         }                  
    }
    else
    {
        $response['status'] = 200;
        $response['message'] = "Data not found!";
    }   
    echo json_encode($response);
    //var_dump($_POST['row_id']); // return correct id
} 

在控制台 - &gt;网络上,我看到了正确的回复

  

{&#34; ROW_ID&#34;:&#34; 1&#34;&#34; row_content&#34;:&#34; ASD&#34;&#34; row_email&#34;:& #34;悲伤&#34;}

这是应该加载数据的js部分

function GetUserDetails(row_id) {

    $("#row_id").val(row_id);
    $.post("ajax/readUserDetails.php", {
            row_id: row_id
        },
        function (data, status) {
            // PARSE json data
            var excel_table = JSON.parse(data);
            // Assing existing values to the modal popup fields
            $("#row_content").val(excel_table.row_content);
            $("#row_email").val(excel_table.row_email);
        }
    );
    // Open modal popup
    $("#update_user_modal").modal("show");
}

这是我的模态

<div class="modal fade" id="update_user_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Update</h4>
            </div>
            <div class="modal-body">

                <div class="form-group">
                    <label for="row_content">Desc</label>
                    <input type="text" id="row_content" placeholder="Описание" class="form-control"/>
                </div>

                <div class="form-group">
                    <label for="row_email">Email</label>
                    <input type="text" id="row_email" placeholder="Email" class="form-control"/>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="UpdateUserDetails()" >Save Changes</button>
                <input type="hidden" id="row_id">
            </div>
        </div>
    </div>
</div>

有谁可以告诉我为什么模态没有填充数据?

1 个答案:

答案 0 :(得分:2)

我的猜测是你需要在ajax异步调用结束后显示模态。

function GetUserDetails(row_id) {

    $("#row_id").val(row_id);
    $.post("ajax/readUserDetails.php", {
            row_id: row_id
        },
        function (data, status) {
            // PARSE json data
            var excel_table = JSON.parse(data);
            // Assing existing values to the modal popup fields

            //add console.log to make sure you have some value
            console.log('row_content: ' + excel_table.row_content);

            $("#row_content").val(excel_table.row_content);
            $("#row_email").val(excel_table.row_email);

            // then add another to make sure you update it correctly.
            console.log('#row_content: ' + $("#row_content").val());

           // Open modal popup AFTER YOU UPDATE 
           $("#update_user_modal").modal("show");
        }
    );     
}