dqypcghd381390 2018-01-20 14:33
浏览 76
已采纳

从数据库PHP加载数据

I need to transfer data from my HTML table to my modal(I am not using bootstrap). As you can see from the image below, I displayed the data from my MySQL database into the table.

The problem is when I click the EDIT button of the 1st row the data will be transferred to my modal. However, when I click the EDIT button of the 2nd row the data transferred to my modal is still the data of the 1st row. Please help me in fixing this problem. I am still learning PHP and JavaScript.

Table Data Generation Here | Modal Here

PHP Code:

    while ($row = mysqli_fetch_array($result)) {
    echo "<tr class='table-row'>
    <td class='table-cell'>".$row['program']."</td>
    <td class='table-cell'>".$row['project_name']."</td>
    <td class='table-cell'>".$row['department']."</td>
    <td class='table-cell'>".$row['start_date']."</td>
    <td class='table-cell'>".$row['end_date']."</td>
    <td class='table-cell'><span style='color:".$color."'><i class='fa fa-circle-o'></i></span> ".$row['priority']."</td>
    <td class='table-cell'><span style='color:".$color_2."'><i class='fa fa-circle-o'></i></span> ".$row['status']."</td>
    <td class='table-cell'><a id='edit-modal-show' class='btn btn-edit'>Edit</a>
        <div class='editProject-modal' id='edit-project-modal'>
            <div class='editProject-modal-dialog'>
                <div class='editProject-modal-content'>
                    <div class='editProject-onboard'>
                        <header class='onboard-header'>
                            <h1 class='onboard-title'>Edit Project</h1>
                            <button class='onboard-close-2'>
                                <i class='fa fa-close'></i>
                            </button>
                        </header>
                    <div class='onboard-body'>
                    <form autocomplete='off' method='POST'>
                        <input type='hidden' id='".$row['project_id']."' name='p-id' value=".$row['project_id'].">
                            <div class='row'>
                                <div class='column-2'>
                                    <div class='form-field'>
                                        <label class='field-label'>Program</label>
                                        <input type='text' placeholder='Program' name='program' id='pr-".$row['project_id']."' class='form-control' value='".$row['program']."' required>
                                    </div>
                                </div>
                                <div class='column-2'>
                                    <div class='form-field'>
                                        <label class='field-label'>Project Name</label>
                                        <input type='text' placeholder='Project Name' name='pname' id='pn-".$row['project_id']."' class='form-control' value='".$row['project_name']."' required>
                                    </div>
                                </div>
                            </div>
                            <div class='row'>
                                <div class='column-2'>
                                    <div class='form-field'>
                                        <label class='field-label'>Project Description</label>
                                        <textarea type='text' placeholder='Project Description' name='description' id='desc-".$row['project_id']."' class='form-control' required>".$row['description']."</textarea>
                                    </div>
                                </div>
                                <div class='column-2'>
                                    <div class='form-field'>
                                        <label class='field-label'>Lead Department</label>
                                        <select class='form-control' name='department' required>
                                            <option value=''>Department</option>";
                                            if ($count_2> 0) {
                                                while ($row_2 = mysqli_fetch_array($result_2)) {
                                                    if ($row_2['department'] == $row['department']){
                                                        $selected = "selected";
                                                    }
                                                    else {
                                                        $selected = "";
                                                    }
                                                    echo "<option value='".$row_2['department']."'".$selected.">".$row_2['department']."</option>";
                                                }
                                            }
                                        echo"</select>
                                    </div>
                                </div>
                            </div>
                            <div class='row'>
                                <div class='column-2'>
                                    <div class='form-field'>
                                        <label class='field-label'>Start Date</label>
                                        <input type='date' name='s-date' id='s-date-".$row['project_id']."' class='form-control' value='".$row['start_date']."' required>
                                    </div>
                                </div>
                                <div class='column-2'>
                                    <div class='form-field'>
                                        <label class='field-label'>End Date</label>
                                        <input type='date' name='e-date' id='e-date-".$row['project_id']."' class='form-control' value='".$row['end_date']."' required>
                                    </div>
                                </div>
                            </div>
                            <div class='row'>
                                <div class='column-2'>
                                    <div class='form-field'>
                                        <label class='field-label'>Priority</label>
                                        <select class='form-control' name='priority' id='priority' required>
                                        <option value=''>Priority</option>";
                                        if ($count_3 > 0) {
                                            while ($row_3 = mysqli_fetch_array($result_3)) {
                                                if ($row_3['priority'] == $row['priority']){
                                                    $selected = "selected";
                                                }
                                            else {
                                                $selected = "";
                                            }
                                            echo "<option value='".$row_3['priority']."'".$selected.">".$row_3['priority']."</option>";
                                            }
                                        }
                                    echo "</select>
                                    </div>
                                </div>
                                <div class='column-2'>
                                    <div class='onboard-btn'>
                                        <button type='submit' class='btn btn-update' name='update'>Update</button>
                                    </div>
                                </div>
                            </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </td>
        <td class='table-cell'><a href='delete.php?del=".$row['project_id']."' class='btn btn-delete'>Delete</i></a></td>
    </tr>";
    }

Javascript:

/* Edit Project Modal Event */
var modal_edit = document.getElementById('edit-project-modal');
var span_edit = document.getElementsByClassName("onboard-close-2")[0];

$(document).on('click',".btn-edit",function(){
    $(modal_edit).toggleClass("edit-modal-show");
});

span_edit.onclick = function() {
    $(modal_edit).removeClass("edit-modal-show");   
}
  • 写回答

3条回答 默认 最新

  • dqsot35145 2018-01-20 14:49
    关注

    Because it does not know which edit button is related to witch modal. use

    var modal_edit;
    
    $(document).on('click',".btn-edit",function(){
       modal_edit = $(this).parent().find(".edit-project-modal");
       $(modal_edit).toggleClass("edit-modal-show");
    });
    $(".onboard-close-2").click(function(){
      $(modal_edit).removeClass("edit-modal-show");
    });

    An other thing I know this is not related to your request but it will give you wrong result when you fix this problem. The form in the model should have a unique name such as your record id so that when it submits it you know which form has been submitted.

    P.S. - If you are using double quotes in echo() then rather than doing .." . $PHPVariable . ".. use can directly write echo "<p id='$PHPVariable'>" double quotes can parse PHP Variables, but beware of messing up the single and double quotes.

    </div>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 求差集那个函数有问题,有无佬可以解决
  • ¥15 MATLAB动图问题
  • ¥15 【提问】基于Invest的水源涵养
  • ¥20 微信网友居然可以通过vx号找到我绑的手机号
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名