Question

我的bootstrap编辑模式没有得到它应该从数据库获取的两个值。它应该是获取Last Name和License Number Values并在我打开编辑模式时将其作为默认值。与其他四个相同。 Refer to this image...以下是代码..

的index.php

<!-- edit modal -->
<div class="modal fade" tabindex="-1" role="dialog" id="editMemberModal">
  <div class="modal-dialog" role="document">
    <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"><span class="glyphicon glyphicon-edit"></span> Edit Member</h4>
      </div>

    <form class="form-horizontal" action="php_action/update.php" method="POST" id="updateMemberForm">         

      <div class="modal-body">

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

          <div class="form-group"> 
            <label for="editName" class="col-sm-3 control-label">Name</label>
            <div class="col-sm-9"> 
              <input type="text" class="form-control" id="editName" name="editName" placeholder="Name">

            </div>
          </div>
          <div class="form-group">
            <label for="editLastName" class="col-sm-3 control-label">Last Name</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" id="editlName" name="editlName" placeholder="Last Name">
            </div>
          </div>
          <div class="form-group">
            <label for="editLicenseNumber" class="col-sm-3 control-label">License Number</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" id="editlNumber" name="editlNumber" placeholder="License Number">
            </div>
          </div>
          <div class="form-group">
            <label for="editAddress" class="col-sm-3 control-label">Address</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" id="editAddress" name="editAddress" placeholder="Address">
            </div>
          </div>
          <div class="form-group">
            <label for="editContact" class="col-sm-3 control-label">Contact</label>
            <div class="col-sm-9">
              <input type="text" class="form-control" id="editContact" name="editContact" placeholder="Contact">
            </div>
          </div>
          <div class="form-group">
            <label for="editActive" class="col-sm-3 control-label">Paid</label>
            <div class="col-sm-9">
              <select class="form-control" name="editActive" id="editActive">
                <option value="">~~SELECT~~</option>
                <option value="1">Yes</option>
                <option value="2">No</option>
              </select>
            </div>
          </div>    
      </div>
      <div class="modal-footer editMemberModal">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Save changes</button>
      </div>
      </form>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- /edit modal -->

getSelectedMember.php

$memberId = $_POST['member_id'];

$sql = "SELECT * FROM members WHERE id = $memberId";

$query = $connect->query($sql);

$result = $query->fetch_assoc();

$connect->close();

echo json_encode($result);

index.js

function editMember(id = null) {
if(id) {

    // remove the error 
    $(".form-group").removeClass('has-error').removeClass('has-success');
    $(".text-danger").remove();
    // empty the message div
    $(".edit-messages").html("");

    // remove the id
    $("#member_id").remove();

    // fetch the member data
    $.ajax({
        url: 'php_action/getSelectedMember.php',
        type: 'post',
        data: {member_id : id},
        dataType: 'json',
        success:function(response) {
            $("#editName").val(response.name);

            $("#editlName").val(response.lname);

            $("#editlNumber").val(response.lnumber);

            $("#editAddress").val(response.address);

            $("#editContact").val(response.contact);

            $("#editPaid").val(response.paid);  

            // mmeber id 
            $(".editMemberModal").append('<input type="hidden" name="member_id" id="member_id" value="'+response.id+'"/>');

            // here update the member data
            $("#updateMemberForm").unbind('submit').bind('submit', function() {
                // remove error messages
                $(".text-danger").remove();

                var form = $(this);

                // validation
                var editName = $("#editName").val();
                var editlName = $("#editlName").val();
                var editlNumber = $("#editlNumber").val();
                var editAddress = $("#editAddress").val();
                var editContact = $("#editContact").val();
                var editPaid = $("#editPaid").val();

                if(editName == "") {
                    $("#editName").closest('.form-group').addClass('has-error');
                    $("#editName").after('<p class="text-danger">The Name field is required</p>');
                } else {
                    $("#editName").closest('.form-group').removeClass('has-error');
                    $("#editName").closest('.form-group').addClass('has-success');              
                }

                if(editlName == "") {
                    $("#editlName").closest('.form-group').addClass('has-error');
                    $("#editlName").after('<p class="text-danger">The LastName field is required</p>');
                } else {
                    $("#editlName").closest('.form-group').removeClass('has-error');
                    $("#editlName").closest('.form-group').addClass('has-success');             
                }

                if(editlNumber == "") {
                    $("#editlNumber").closest('.form-group').addClass('has-error');
                    $("#editlNumber").after('<p class="text-danger">The License Number field is required</p>');
                } else {
                    $("#editlNumber").closest('.form-group').removeClass('has-error');
                    $("#editlNumber").closest('.form-group').addClass('has-success');               
                }

                if(editAddress == "") {
                    $("#editAddress").closest('.form-group').addClass('has-error');
                    $("#editAddress").after('<p class="text-danger">The Address field is required</p>');
                } else {
                    $("#editAddress").closest('.form-group').removeClass('has-error');
                    $("#editAddress").closest('.form-group').addClass('has-success');               
                }

                if(editContact == "") {
                    $("#editContact").closest('.form-group').addClass('has-error');
                    $("#editContact").after('<p class="text-danger">The Contact field is required</p>');
                } else {
                    $("#editContact").closest('.form-group').removeClass('has-error');
                    $("#editContact").closest('.form-group').addClass('has-success');               
                }

                if(editPaid == "") {
                    $("#editPaid").closest('.form-group').addClass('has-error');
                    $("#editPaid").after('<p class="text-danger">The Paid field is required</p>');
                } else {
                    $("#editPaid").closest('.form-group').removeClass('has-error');
                    $("#editPaid").closest('.form-group').addClass('has-success');              
                }

                if(editName && editlName && editlNumber && editAddress && editContact && editPaid) {
                    $.ajax({
                        url: form.attr('action'),
                        type: form.attr('method'),
                        data: form.serialize(),
                        dataType: 'json',
                        success:function(response) {
                            if(response.success == true) {
                                $(".edit-messages").html('<div class="alert alert-success alert-dismissible" role="alert">'+
                                  '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
                                  '<strong> <span class="glyphicon glyphicon-ok-sign"></span> </strong>'+response.messages+
                                '</div>');

                                // reload the datatables
                                manageMemberTable.ajax.reload(null, false);
                                // this function is built in function of datatables;

                                // remove the error 
                                $(".form-group").removeClass('has-success').removeClass('has-error');
                                $(".text-danger").remove();
                            } else {
                                $(".edit-messages").html('<div class="alert alert-warning alert-dismissible" role="alert">'+
                                  '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
                                  '<strong> <span class="glyphicon glyphicon-exclamation-sign"></span> </strong>'+response.messages+
                                '</div>')
                            }
                        } // /success
                    }); // /ajax
                } // /if

                return false;
            });

        } // /success
    }); // /fetch selected member info

bootstrap编辑模式没有获得价值

0 个答案: