在编辑时将数据从模态形式传递给jquery

时间:2017-10-25 07:55:26

标签: php jquery modal-dialog row edit

我正在尝试编辑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>

我的JQUERY:

<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);
}

?>

1 个答案:

答案 0 :(得分:0)

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

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

不要循环打印模态,像这样添加一个(没有php):

$this->db->select('bidding.tender_id, COUNT(*) AS count')->where('bidding.tender_id', $tender->id)->group_by('bidding.tender_id')->get('bidding')->result_array() ;

变更:

  • 没有PHP
  • 没有多个IDS
  • 无数据
  • 唯一

现在我们希望链接能够提供我们需要的东西(老实说,最好只传递id并进行新的ajax调用以获取其他字段):

<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>

变更:

  • 使用链接(id,infos)传递参数......

最后的更改是创建一个将加载我们的模态信息(+客户列表)的函数

<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">

我无法尝试,但你明白了。 如果您没有其他名为editDieID或editDieDesc或editCustomer的字段,那么您的ajax函数应该可以正常工作,或者尝试在搜索中更具体一些: <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