douzhong6480
douzhong6480
2018-06-21 11:12

我无法编辑产品详细信息,因为模式框未显示

I am trying to add product details and then edit them. But the edit option doesn't come. It shows blank screen

var manageProductTable;

$(document).ready(function() {
    // top nav bar 
    $('#navProduct').addClass('active');
    // manage product data table
    manageProductTable = $('#manageProductTable').DataTable({
        'ajax': 'phpaction/fetchinventory.php',
        'order': []
    });

    // add product modal btn clicked
    $("#addProductModalBtn").unbind('click').bind('click', function() {
        // // product form reset
        $("#submitProductForm")[0].reset();     

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

        
        $("#submitProductForm").unbind('submit').bind('submit', function() {

            // form validation
            
            var productName = $("#productName").val();
            var quantity = $("#quantity").val();
            var rate = $("#rate").val();
            
    
            
            if(productName == "") {
                $("#productName").after('<p class="text-danger">Product Name field is required</p>');
                $('#productName').closest('.form-group').addClass('has-error');
            }   else {
                // remov error text field
                $("#productName").find('.text-danger').remove();
                // success out for form 
                $("#productName").closest('.form-group').addClass('has-success');       
            }   // /else

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

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

            

            if(productName && quantity && rate) {
                // submit loading button
                $("#createProductBtn").button('loading');

                var form = $(this);
                var formData = new FormData(this);

                $.ajax({
                    url : form.attr('action'),
                    type: form.attr('method'),
                    data: formData,
                    dataType: 'json',
                    cache: false,
                    contentType: false,
                    processData: false,
                    success:function(response) {

                        if(response.success == true) {
                            // submit loading button
                            $("#createProductBtn").button('reset');
                            
                            $("#submitProductForm")[0].reset();

                            $("html, body, div.modal, div.modal-content, div.modal-body").animate({scrollTop: '0'}, 100);
                                                                    
                            // shows a successful message after operation
                            $('#add-product-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>');

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

                  // reload the manage student table
                            manageProductTable.ajax.reload(null, true);

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

                        } // /if response.success
                        
                    } // /success function
                }); // /ajax function
            }    // /if validation is ok                    

            return false;
        }); // /submit product form

    }); // /add product modal btn clicked
    

    // remove product   

}); // document.ready fucntion


function editProduct(productId = null) {

    if(productId) {
        $("#productId").remove();       
        // remove text-error 
        $(".text-danger").remove();
        // remove from-group error
        $(".form-group").removeClass('has-error').removeClass('has-success');
        // modal spinner
        $('.div-loading').removeClass('div-hide');
        // modal div
        $('.div-result').addClass('div-hide');

        $.ajax({
            url: 'phpaction/fetchselectedinventory.php',
            type: 'post',
            data: {productId: productId},
            dataType: 'json',
            success:function(response) {        
            // alert(response.product_image);
                // modal spinner
                $('.div-loading').addClass('div-hide');
                // modal div
                $('.div-result').removeClass('div-hide');                

                // $("#editProductImage").fileinput({
          //     overwriteInitial: true,
             //    maxFileSize: 2500,
             //    showClose: false,
             //    showCaption: false,
             //    browseLabel: '',
             //    removeLabel: '',
             //    browseIcon: '<i class="glyphicon glyphicon-folder-open"></i>',
             //    removeIcon: '<i class="glyphicon glyphicon-remove"></i>',
             //    removeTitle: 'Cancel or reset changes',
             //    elErrorContainer: '#kv-avatar-errors-1',
             //    msgErrorClass: 'alert alert-block alert-danger',
             //    defaultPreviewContent: '<img src="stock/'+response.product_image+'" alt="Profile Image" style="width:100%;">',
             //    layoutTemplates: {main2: '{preview} {remove} {browse}'},                                 
          //        allowedFileExtensions: ["jpg", "png", "gif", "JPG", "PNG", "GIF"]
                // });  

                // product id 
                $(".editProductFooter").append('<input type="hidden" name="productId" id="productId" value="'+response.product_id+'" />');                
                //$(".editProductPhotoFooter").append('<input type="hidden" name="productId" id="productId" value="'+response.product_id+'" />');             
                
                // product name
                $("#editProductName").val(response.productname);
                // rate
                $("#editRate").val(response.rate);
                // quantity
                $("#editQuantity").val(response.qty);

                // update the product data function
                $("#editProductForm").unbind('submit').bind('submit', function() {

                    // form validation
                    var productName = $("#editProductName").val();
                    var quantity = $("#editQuantity").val();
                    var rate = $("#editRate").val();

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

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

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

                    
                    if(productName && quantity && rate) {
                        // submit loading button
                        $("#editProductBtn").button('loading');

                        var form = $(this);
                        var formData = new FormData(this);

                        $.ajax({
                            url : form.attr('action'),
                            type: form.attr('method'),
                            data: formData,
                            dataType: 'json',
                            cache: false,
                            contentType: false,
                            processData: false,
                            success:function(response) {
                                console.log(response);
                                if(response.success == true) {
                                    // submit loading button
                                    $("#editProductBtn").button('reset');                                                                       

                                    $("html, body, div.modal, div.modal-content, div.modal-body").animate({scrollTop: '0'}, 100);
                                                                            
                                    // shows a successful message after operation
                                    $('#edit-product-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>');

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

                          // reload the manage student table
                                    manageProductTable.ajax.reload(null, true);

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

                                } // /if response.success
                                
                            } // /success function
                        }); // /ajax function
                    }    // /if validation is ok                    

                    return false;
                }); // update the product data function

                          // reload the manage student table
                                    /*manageProductTable.ajax.reload(null, true);

                                    $(".fileinput-remove-button").click();                                                              

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

                                } // /if response.success
                                
                            } // /success function
                        }); // /ajax function
                    }*/  // /if validation is ok 
                    {
                        // submit loading button
                        //$("#editProductImageBtn").button('loading');

                        var form = $(this);
                        var formData = new FormData(this);

                        $.ajax({
                            url : form.attr('action'),
                            type: form.attr('method'),
                            data: formData,
                            dataType: 'json',
                            cache: false,
                            contentType: false,
                            processData: false,
                            success:function(response) {
                                
                                if(response.success == true) {
                                    // submit loading button
                                    //$("#editProductImageBtn").button('reset');                                                                        

                                    $("html, body, div.modal, div.modal-content, div.modal-body").animate({scrollTop: '0'}, 100);
                                                                            
                                    // shows a successful message after operation
                                    /*$('#edit-productPhoto-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>');*/

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

                          // reload the manage student table
                                    manageProductTable.ajax.reload(null, true);

                                    //$(".fileinput-remove-button").click();

                                    /*$.ajax({
                                        url: 'php_action/fetchProductImageUrl.php?i='+productId,
                                        type: 'post',
                                        success:function(response) {
                                        $("#getProductImage").attr('src', response);        
                                        }
                                    });*/                                                                       

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

                                } // /if response.success
                                
                            } // /success function
                        }); // /ajax function
                    }                   

                    return false;
                //}); // /update the product image

            } // /success function
        }); // /ajax to fetch product image

                
    } else {
        alert('error please refresh the page');
    }
} // /edit product function

/*
// remove product 
function removeProduct(productId = null) {
    if(productId) {
        // remove product button clicked
        $("#removeProductBtn").unbind('click').bind('click', function() {
            // loading remove button
            $("#removeProductBtn").button('loading');
            $.ajax({
                url: 'phpaction/removeProduct.php',
                type: 'post',
                data: {productId: productId},
                dataType: 'json',
                success:function(response) {
                    // loading remove button
                    $("#removeProductBtn").button('reset');
                    if(response.success == true) {
                        // remove product modal
                        $("#removeProductModal").modal('hide');

                        // update the product table
                        manageProductTable.ajax.reload(null, false);

                        // remove success messages
                        $(".remove-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>');

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

                        // remove success messages
                        $(".removeProductMessages").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>');

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

                    } // /error
                } // /success function
            }); // /ajax fucntion to remove the product
            return false;
        }); // /remove product btn clicked
    } // /if productid
} // /remove product function
*/

function clearForm(oForm) {
    // var frm_elements = oForm.elements;                                   
    // console.log(frm_elements);
    //  for(i=0;i<frm_elements.length;i++) {
    //      field_type = frm_elements[i].type.toLowerCase();                                    
    //      switch (field_type) {
    //      case "text":
    //      case "password":
    //      case "textarea":
    //      case "hidden":
    //      case "select-one":      
    //        frm_elements[i].value = "";
    //        break;
    //      case "radio":
    //      case "checkbox":        
    //        if (frm_elements[i].checked)
    //        {
    //            frm_elements[i].checked = false;
    //        }
    //        break;
    //      case "file": 
    //          if(frm_elements[i].options) {
    //              frm_elements[i].options= false;
    //          }
    //      default:
    //          break;
    //     } // /switch
    //  } // for
}
<?php require_once 'phpaction/db_connect.php' ?>
<?php require_once 'phpaction/checksystemlogin.php' ?>
<!DOCTYPE html>
<html>
<head>
    <title>Inventory</title>
    <link rel="stylesheet" href="assests/bootstrap/css/bootstrap.min.css">
    <!-- bootstrap theme-->
    <link rel="stylesheet" href="assests/bootstrap/css/bootstrap-theme.min.css">
    <!-- font awesome -->
    <link rel="stylesheet" href="assests/font-awesome/css/font-awesome.min.css">

     <!-- jquery -->
    <script src="assests/jquery/jquery.min.js"></script>
    <!-- jquery ui -->  
    <link rel="stylesheet" href="assests/jquery-ui/jquery-ui.min.css">
    <script src="assests/jquery-ui/jquery-ui.min.js"></script>

    <!-- bootstrap js -->
    <script src="assests/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="row">
        <div class="col-md-12">


            <ol class="breadcrumb">
              <li><a href="dashboard.php">Home</a></li>       
              <li class="active">Product</li>
            </ol>

            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="page-heading"> <i class="glyphicon glyphicon-edit"></i> Manage Product</div>
                </div> <!-- /panel-heading -->
                <div class="panel-body">

                    <div class="remove-messages"></div>

                    <div class="div-action pull pull-right" style="padding-bottom:20px;">
                        <button class="btn btn-default button1" data-toggle="modal" id="addProductModalBtn" data-target="#addProductModal"> <i class="glyphicon glyphicon-plus-sign"></i> Add Product </button>
                    </div> <!-- /div-action -->             
                    
                    <table class="table" id="manageProductTable">
                        <thead>
                            <tr>                          
                                <th>Product Name</th>
                                <th>Rate</th>                       
                                <th>Quantity</th>
                                <th style="width:15%;">Options</th>
                            </tr>
                        </thead>
                    </table>
                    <!-- /table -->
                </div> <!-- /panel-body -->
            </div> <!-- /panel -->      
        </div> <!-- /col-md-12 -->
    </div> <!-- /row -->


    <!-- add product -->
    <div class="modal fade" id="addProductModal" tabindex="-1" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">

            <form class="form-horizontal" id="submitProductForm" action="phpaction/addinventory.php" method="POST" enctype="multipart/form-data">
              <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-plus"></i> Add Product</h4>
              </div>

              <div class="modal-body" style="max-height:450px; overflow:auto;">

                <div id="add-product-messages"></div>
                <div class="form-group">
                    <label for="productName" class="col-sm-3 control-label">Product Name: </label>
                    <label class="col-sm-1 control-label">: </label>
                        <div class="col-sm-8">
                          <input type="text" class="form-control" id="productName" placeholder="Product Name" name="productName" autocomplete="off">
                        </div>
                </div> <!-- /form-group-->      

                <div class="form-group">
                    <label for="quantity" class="col-sm-3 control-label">Quantity: </label>
                    <label class="col-sm-1 control-label">: </label>
                        <div class="col-sm-8">
                          <input type="text" class="form-control" id="quantity" placeholder="Quantity" name="quantity" autocomplete="off">
                        </div>
                </div> <!-- /form-group-->               

                <div class="form-group">
                    <label for="rate" class="col-sm-3 control-label">Rate: </label>
                    <label class="col-sm-1 control-label">: </label>
                        <div class="col-sm-8">
                          <input type="text" class="form-control" id="rate" placeholder="Rate" name="rate" autocomplete="off">
                        </div>
                </div> <!-- /form-group-->                  

              <div class="modal-footer">
                <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-primary" id="createProductBtn" 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 categories -->


    <!-- edit categories brand -->
    <div class="modal fade" id="editProductModal" tabindex="-1" role="dialog">
      <div class="modal-dialog">
        <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"><i class="fa fa-edit"></i> Edit Product</h4>
              </div>
              <div class="modal-body" style="max-height:450px; overflow:auto;">

                <div class="div-loading">
                    <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                            <span class="sr-only">Loading...</span>
                </div>

                <div class="div-result">

                      <!-- Nav tabs -->
                      <ul class="nav nav-tabs" role="tablist">
                       
                        <li role="presentation"><a href="#productInfo" aria-controls="profile" role="tab" data-toggle="tab">Product Info</a></li>    
                      </ul>

                      <!-- Tab panes -->
                      <div class="tab-content">
                        <div role="tabpanel" class="tab-pane" id="productInfo">
                            <form class="form-horizontal" id="editProductForm" action="phpaction/editinventory.php" method="POST">                    
                            <br />

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

                            <div class="form-group">
                            <label for="editProductName" class="col-sm-3 control-label">Product Name: </label>
                            <label class="col-sm-1 control-label">: </label>
                                <div class="col-sm-8">
                                  <input type="text" class="form-control" id="editProductName" placeholder="Product Name" name="editProductName" autocomplete="off">
                                </div>
                        </div> <!-- /form-group-->      

                        <div class="form-group">
                            <label for="editQuantity" class="col-sm-3 control-label">Quantity: </label>
                            <label class="col-sm-1 control-label">: </label>
                                <div class="col-sm-8">
                                  <input type="text" class="form-control" id="editQuantity" placeholder="Quantity" name="editQuantity" autocomplete="off">
                                </div>
                        </div> <!-- /form-group-->               

                        <div class="form-group">
                            <label for="editRate" class="col-sm-3 control-label">Rate: </label>
                            <label class="col-sm-1 control-label">: </label>
                                <div class="col-sm-8">
                                  <input type="text" class="form-control" id="editRate" placeholder="Rate" name="editRate" autocomplete="off">
                                </div>
                        </div> <!-- /form-group-->                  

                               

                        <div class="modal-footer editProductFooter">
                            <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="editProductBtn" data-loading-text="Loading..."> <i class="glyphicon glyphicon-ok-sign"></i> Save Changes</button>
                          </div> <!-- /modal-footer -->                  
                        </form> <!-- /.form -->                     
                        </div>    
                        <!-- /product info -->
                      </div>

                    </div>
                
              </div> <!-- /modal-body -->
                      
            
        </div>
        <!-- /modal-content -->
      </div>
      <!-- /modal-dailog -->
    </div>
    <!-- /categories brand -->
    <!-- categories brand -->
<!-- <div class="modal fade" tabindex="-1" role="dialog" id="removeProductModal">
      <div class="modal-dialog">
        <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"><i class="glyphicon glyphicon-trash"></i> Remove Product</h4>
          </div>
          <div class="modal-body">

            <div class="removeProductMessages"></div>

            <p>Do you really want to remove ?</p>
          </div>
          <div class="modal-footer removeProductFooter">
            <button type="button" class="btn btn-default" data-dismiss="modal"> <i class="glyphicon glyphicon-remove-sign"></i> Close</button>
            <button type="button" class="btn btn-primary" id="removeProductBtn" data-loading-text="Loading..."> <i class="glyphicon glyphicon-ok-sign"></i> Save changes</button>
          </div>
        </div>
-->

    <script src="custom/js/product.js"></script>
    <!-- file input -->
    <script src="assests/plugins/fileinput/js/plugins/canvas-to-blob.min.js'); ?>" type="text/javascript"></script>  
    <script src="assests/plugins/fileinput/js/plugins/sortable.min.js" type="text/javascript"></script> 
    <script src="assests/plugins/fileinput/js/plugins/purify.min.js" type="text/javascript"></script>
    <script src="assests/plugins/fileinput/js/fileinput.min.js"></script>   


    <!-- DataTables -->
    <script src="assests/plugins/datatables/jquery.dataTables.min.js"></script>

</body>
</html>

I am trying to make online inventory management system. when I click the edit option, the edit product modal does not show up. Instead a blank screen comes and then I can't access that. All the other php files are running but the modal does not show up.

</div>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答