为什么编辑模式无法从数据库中获取(所选行的)数据?

时间:2018-11-15 07:56:39

标签: javascript php mysqli crud edit

这是我的brand.php文件 它刻画了品牌的编辑部分 所以在这一部分中,我们可能会看到事情的样子

    <!-- edit brand -->
    <div class="modal fade" id="editBrandModel" tabindex="-1" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">

            <form class="form-horizontal" id="editBrandForm" action="php_action/editBrand.php" method="POST">
              <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"><i class="fa fa-edit"></i> Edit Brand</h4>
              </div>
              <div class="modal-body">

                <div id="edit-brand-messages"></div>

                <div class="modal-loading div-hide" style="width:50px; margin:auto;padding-top:50px; padding-bottom:50px;">
                            <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                            <span class="sr-only">Loading...</span>
                        </div>

                  <div class="edit-brand-result">
                    <div class="form-group">
                        <label for="editBrandName" class="col-sm-3 control-label">Brand Name: </label>
                        <label class="col-sm-1 control-label">: </label>
                            <div class="col-sm-8">
                              <input type="text" class="form-control" id="editBrandName" placeholder="Brand Name" name="editBrandName" autocomplete="off">
                            </div>
                    </div> <!-- /form-group-->                      
                    <div class="form-group">
                        <label for="editBrandStatus" class="col-sm-3 control-label">Status: </label>
                        <label class="col-sm-1 control-label">: </label>
                            <div class="col-sm-8">
                              <select class="form-control" id="editBrandStatus" name="editBrandStatus">
                                <option value="">~~SELECT~~</option>
                                <option value="1">Available</option>
                                <option value="2">Not Available</option>
                              </select>
                            </div>
                    </div> <!-- /form-group-->  
                  </div>                    
                  <!-- /edit brand result -->

              </div> <!-- /modal-body -->

              <div class="modal-footer editBrandFooter">
                <button type="button" class="btn btn-default" data-dismiss="modal"> <i class="glyphicon glyphicon-remove-sign"></i> Close</button>

                <button type="submit" class="btn btn-success" id="editBrandBtn" data-loading-text="Loading..." autocomplete="off"> <i class="glyphicon glyphicon-ok-sign"></i> Save Changes</button>
              </div>
              <!-- /modal-footer -->
            </form>
             <!-- /.form -->
        </div>
        <!-- /modal-content -->
      </div>
      <!-- /modal-dailog -->
    </div>
    <!-- / add modal -->
    <!-- /edit brand -->

> --this one is the end part

这是获取部分,其中一旦单击行(示例行1)中的按钮,就会出现模态(可能会出现“编辑模态”),但事实是,一旦模态出现,假定的数据从行中获取不是在该模式上;-;

        <?php   

    require_once '../../includes/connection.php';

    $brandId = $_POST['brandId'];

    $sql = "SELECT brand_id, brand_name, brand_active, brand_status FROM brands WHERE brand_id = $brandId";
    $result = $connect->query($sql);

    if($result->num_rows > 0) { 
     $row = $result->fetch_array();
    } // if num_rows

    $connect->close();

    echo json_encode($row);
?>

现在是JScript部分 这一部分是填充部分(例如获取数据,现在刻画数据并填充输入框等。)

function editBrands(brandId = null) {
        if(brandId) {
            // remove hidden brand id text
            $('#brandId').remove();

            // remove the error 
            $('.text-danger').remove();
            // remove the form-error
            $('.form-group').removeClass('has-error').removeClass('has-success');

            // modal loading
            $('.modal-loading').removeClass('div-hide');
            // modal result
            $('.edit-brand-result').addClass('div-hide');
            // modal footer
            $('.editBrandFooter').addClass('div-hide');

            $.ajax({
                url: 'fetchSelectedBrand.php',
                type: 'post',
                data: {brandId : brandId},
                dataType: 'json',
                success:function(response) {
                    // modal loading
                    $('.modal-loading').addClass('div-hide');
                    // modal result
                    $('.edit-brand-result').removeClass('div-hide');
                    // modal footer
                    $('.editBrandFooter').removeClass('div-hide');

                    // setting the brand name value 
                    $('#editBrandName').val(response.brand_name);
                    // setting the brand status value
                    $('#editBrandStatus').val(response.brand_active);
                    // brand id 
                    $(".editBrandFooter").after('<input type="hidden" name="brandId" id="brandId" value="'+response.brand_id+'" />');

                    // update brand form 
                    $('#editBrandForm').unbind('submit').bind('submit', function() {

                        // remove the error text
                        $(".text-danger").remove();
                        // remove the form error
                        $('.form-group').removeClass('has-error').removeClass('has-success');           

                        var brandName = $('#editBrandName').val();
                        var brandStatus = $('#editBrandStatus').val();

                        if(brandName == "") {
                            $("#editBrandName").after('<p class="text-danger">Brand Name field is required</p>');
                            $('#editBrandName').closest('.form-group').addClass('has-error');
                        } else {
                            // remov error text field
                            $("#editBrandName").find('.text-danger').remove();
                            // success out for form 
                            $("#editBrandName").closest('.form-group').addClass('has-success');     
                        }

                        if(brandStatus == "") {
                            $("#editBrandStatus").after('<p class="text-danger">Brand Name field is required</p>');

                            $('#editBrandStatus').closest('.form-group').addClass('has-error');
                        } else {
                            // remove error text field
                            $("#editBrandStatus").find('.text-danger').remove();
                            // success out for form 
                            $("#editBrandStatus").closest('.form-group').addClass('has-success');       
                        }

                        if(brandName && brandStatus) {
                            var form = $(this);

                            // submit btn
                            $('#editBrandBtn').button('loading');

                            $.ajax({
                                url: form.attr('action'),
                                type: form.attr('method'),
                                data: form.serialize(),
                                dataType: 'json',
                                success:function(response) {

                                    if(response.success == true) {
                                        console.log(response);
                                        // submit btn
                                        $('#editBrandBtn').button('reset');

                                        // reload the manage member table 
                                        manageBrandTable.ajax.reload(null, false);                                                                          
                                        // remove the error text
                                        $(".text-danger").remove();
                                        // remove the form error
                                        $('.form-group').removeClass('has-error').removeClass('has-success');

                                $('#edit-brand-messages').html('<div class="alert alert-success">'+
                            '<button type="button" class="close" data-dismiss="alert">&times;</button>'+
                            '<strong><i class="glyphicon glyphicon-ok-sign"></i></strong> '+ response.messages +
                          '</div>');

                                $(".alert-success").delay(500).show(10, function() {
                                            $(this).delay(3000).hide(10, function() {
                                                $(this).remove();
                                            });
                                        }); // /.alert
                                    } // /if

                                }// /success
                            });  // /ajax                                               
                        } // /if

                        return false;
                    }); // /update brand form

                } // /success
            }); // ajax function

        } else {
            alert('error!! Refresh the page again');
        }
    } // /edit brands function

1 个答案:

答案 0 :(得分:0)

可以检查“网络”选项卡以查看服务器的结果吗?您可以通过查看结果来调试应用。

顺便说一句,您可能需要编辑两件事:

1 /如果brandId是整数,则需要通过intval($_POST['brandId'])从$ _GET获取它,以防止SQL注入。

2 /

if($result->num_rows > 0) { 
   $row = $result->fetch_array();
}
else {
   $row = array();
}

如果sql结果为空,您的代码需要返回空数组,以避免Undefined variable错误。