编辑时将数据从模态表单传递到jquery

Question

我正在尝试从 while 循环中编辑一行，其中每一行的末尾都有编辑图标。当我单击编辑时，模态表单正在正确填充我选择的行。但是当我保存表单时，它只更新第一行。我什至将 $id 放在模态表单中，但从模态表单推送到 jquery 的数据是第一行。请参阅我的以下代码。

调用模态表单：

<img data-toggle="modal" data-target="#modalFormEdit<?php echo $row['die_id']; ?>" src=images/edit.png height='20' width='20' border=0>

我的模态表单：

<div class="modal fade" id="modalFormEdit<?php echo $row['die_id']; ?>" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
                <h1 class="modal-title" id="myModalLabel">Edit Die</h1>
            </div>

            <!-- Modal Body -->
            <div class="modal-body">
                <p class="statusMsg"></p>
                <form role="form">
                    <?php
                    $sql = "SELECT * FROM tbl_dies WHERE die_id = '".$row['die_id']."';";
                    $result = mysqli_query($db, $sql) or die("database error:". mysqli_error($db));
                    $row = mysqli_fetch_assoc($result);
                    $die_id = $row['die_id'];

                    ?>
                    <div class="form-group">
                        <label for="editDie1ID1">Die ID (<?php echo $count; ?>)</label>
                        <input type="text" class="form-control" id="editDieID" name="editDieID" value="<?php echo $die_id; ?>""/>
                    </div>
                    <div class="form-group">
                        <label for="editDieDesc">Edit Die Description</label>
                        <input type="text" class="form-control" id="editDieDesc" name="editDieDesc" value="<?php echo $row["tbl_dies_desc"]; ?>"/>
                    </div>
                    <div class="form-group">
                        <label for="editCustomer">Edit Customer</label>
                        <select class="form-control" name="editCustomer" id="editCustomer" />
                        <option value="<?php echo $row["customer_id"]; ?>"><?php echo $row["customer_id"]; ?></option>
                        <?php
                        $queryShapes = "SELECT * FROM tbl_client_name ORDER BY Client_Name_DESC ASC";
                        $result = mysqli_query($db, $queryShapes);
                        if( ! $result ) {
                            echo mysql_error();
                            exit;
                        }
                        while ($row=mysqli_fetch_array($result)) {
                            echo '<option value="' . $row['Client_Name_DESC'] . '">' . $row['Client_Name_DESC'] . '</option>';
                        }
                        ?>
                        </select>

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

            <!-- Modal Footer -->
            <div class="modal-footer">
                <br><br>
                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="history.go(0)">Close</button>
                <button type="button" class="btn btn-primary submitBtn" onclick="submitEditDie()">UPDATE</button>
            </div>
        </div>
    </div>
</div>

我的查询：

<script>
    function submitEditDie(){
        var editDieID = $('#editDieID').val();
        var editDieDesc = $('#editDieDesc').val();
        //noinspection JSJQueryEfficiency
        var editCustomer = $('#editCustomer').val();

        if(editDieDesc.trim() == '' ){
            alert('Please enter your die description.');
            $('#editDieDesc').focus();
            return false;
        }else if(editCustomer.trim() == '' ){
            alert('Please select customer.');
            $('#editCustomer').focus();
            return false;
        }else{
            $.ajax({
                type:'POST',
                url:'submit_edit_die.php',
                data:'contactFormEdit=1&editDieDesc='+editDieDesc+'&editCustomer='+editCustomer+'&DieID='+editDieID,
                beforeSend: function () {
                    $('.submitBtn').attr("disabled","disabled");
                    $('.modal-body').css('opacity', '.5');
                },
                success:function(msg){
                    if(msg == 'ok'){
                        $('#editDieDesc').val('');
                        $('#editCustomer').val('');
                        $('#editDieID').val('');
                        $('.statusMsg').html('<span style="color:green;">Entry successfully edited! Please close the form.</p>');
                    }else{
                        $('.statusMsg').html('<span style="color:red;">Some problem occurred, please try again. </span>');
                    }
                    $('.submitBtn').removeAttr("disabled");
                    $('.modal-body').css('opacity', '');
                }
            });
        }
    }
</script>

我的 PHP：

<?php

if(isset($_POST['contactFormEdit']) && !empty($_POST['editDieDesc'])) {

    $editdiedesc   = $_POST['editDieDesc'];
    $editcustomer  = $_POST['editCustomer'];
    $editdieid = $_POST['DieID'];

    $link = mysqli_connect("localhost", "root", "", "db");

    if($link === false){
        die("ERROR: Could not connect. " . mysqli_connect_error());
    }

    $sql = "UPDATE tbl_dies SET `customer_id`='$editcustomer', `tbl_dies_added_date`=CURRENT_TIMESTAMP, `tbl_dies_desc`='$editdiedesc', `tbl_dies_added_by`='55' WHERE `die_id`='$editdieid'";
    if(mysqli_query($link, $sql)){
        $status = 'ok';
    } else{
        $status = 'err';
    }
    echo $status;die;

    mysqli_close($link);
}

?>

Answer 1

我匆忙错过了一些部分，让我们把它分解成正确的编码。

• id 是唯一的，永远不会有相同的两次
• 我们不希望数据与模态绑定数据，因此我们可以拥有一个 可重复使用。

不要循环打印模态，像这样添加 一个（没有 php）：

<div class="modal fade" id="modalFormEdit" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
                <span aria-hidden="true">&times;</span>
                <span class="sr-only">Close</span>
            </button>
            <h1 class="modal-title" id="myModalLabel">Edit Die</h1>
        </div>
        <!-- Modal Body -->
        <div class="modal-body">
            <p class="statusMsg"></p>
            <form role="form">
                <div class="form-group">
                    <label for="editDie1ID1">Die ID</label>
                    <input type="text" class="form-control" id="editDieID" name="editDieID" value=""/>
                </div>
                <div class="form-group">
                    <label for="editDieDesc">Edit Die Description</label>
                    <input type="text" class="form-control" id="editDieDesc" name="editDieDesc" value=""/>
                </div>
                <div class="form-group">
                    <label for="editCustomer">Edit Customer</label>
                    <select class="form-control" name="editCustomer" id="editCustomer" />
                </div>
            </form>
        </div>

        <!-- Modal Footer -->
        <div class="modal-footer">
            <br><br>
            <button type="button" class="btn btn-default" data-dismiss="modal" onclick="history.go(0)">Close</button>
            <button type="button" class="btn btn-primary submitBtn" onclick="submitEditDie()">UPDATE</button>
        </div>
    </div>
</div>

变化：

• 没有 PHP
• 没有多个 IDS
• 没有数据
• 独特

现在我们希望链接能够为我们提供所需的信息（老实说，最好只传递 id 并进行新的 ajax 调用以获取其他字段）：

<img data-toggle="modal" data-target="#modalFormEdit" data-dieid="<?php echo $row['die_id']; ?>" data-diedesc="<?php echo $row["tbl_dies_desc"]; ?>" data-diecustomer="<?php echo $row["customer_id"]; ?>" src="images/edit.png" height="20" width="20" border="0">

变化：

• 通过链接（id、infos）传递参数...

最后的更改是创建一个函数来加载我们的模式信息（+ 客户列表）

        <script type="text/javascript">

        // WE LOAD THE CUSTOMERS OPTIONS (Once is enough since there is no param)
        <?php
            $queryShapes = "SELECT * FROM tbl_client_name ORDER BY Client_Name_DESC ASC";
            $result = mysqli_query($db, $queryShapes);
            if( ! $result ) {
                echo mysql_error();
                 exit;
            }
            echo 'var myClientOptions=\''
            while ($row=mysqli_fetch_array($result)) {
                echo '<option value="' . $row['Client_Name_DESC'] . '">' . $row['Client_Name_DESC'] . '</option>';
            }
            echo '\';';
        ?>

$( document ).ready(function() {
    // EVERY TIME THIS MODAL POP WE LL LOAD THE RIGHT INFO
        $('#modalFormEdit').on('show.bs.modal', function (event) {
          var clickedImg = $(event.relatedTarget); // Button that triggered the modal
          var dieid = clickedImg.data('dieid'); // Extract info from data-* attributes
          var diedesc = clickedImg.data('diedesc');
          var diecustomer = clickedImg.data('diecustomer');
          // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
          // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
          var modal = $(this);
          modal.find('#editDieID').val(dieid);
          modal.find('#editDieDesc').val(diedesc);
          modal.find('#editCustomer').html('<option value="'+diecustomer+'">'+diecustomer+'</option>' + myClientOptions);
        });
 });       
        // REST OF YOUR JAVASCRIPT

我无法尝试，但你明白了。 如果您没有其他名为 editDieID 或 editDieDesc 或 editCustomer 的字段，您的 ajax 函数应该可以工作，或者尝试在您的搜索中更具体一点：var editDieID = $('#modalFormEdit #editDieID').val();