为什么模态不能用 codeigniter jquery 和 bootstrap 完全关闭答案

【问题标题】：why the modal not close completely with codeigniter jquery and bootstrap为什么模态不能用 codeigniter jquery 和 bootstrap 完全关闭
【发布时间】：2016-09-08 14:57:20
【问题描述】：

请帮助我，使用 jquery 在 codeigniter 上编辑或更新（CRUD）时我的模式没有完全关闭，更新成功但显示为空白

这是我在表单上的提交按钮

<button onclick='update' data-toggle="modal" data-target="#myModals<?php echo $data->id ; ?>" class="btn btn-warning">edit</button>

这是我的更新模式

<!-- Modal -->
    <div id="myModals<?php echo $data->id ; ?>" class="modal fade" role="dialog">
      <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">edit</h4>
          </div>
          <div class="modal-body">
               <div class="form-group">
                  <label for="user">username:</label>
                  <input type="text" class="form-control" id="user<?php echo $data->id ; ?>" value="<?php echo $data->username ?>">
               </div>
                <div class="form-group">
                  <label for="pass">Password:</label>
                  <input type="text" class="form-control" id="pass<?php echo $data->id ; ?>" value="<?php echo $data->password ?>">
               </div>
              <button type="submit" onclick='update(<?= $data->id ;?>)' class="btn btn-success">update data</button>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

这是我的 jquery 脚本

function update(id){
var user = $("#user"+id).val();
var password = $("#pass"+id).val();


$.ajax({
    dataType: 'html',
    url: "<?= site_url('ajax/update'); ?>",
    type: "POST",
    data: "username="+user+"&password="+password+"&id="+id,
    }).done(function(data) {
      $("#myModals"+id).modal('hide');
      load(); 
    });

我的控制器是

public function update(){
$id= $this->input->post('id');
$data = array(
  'username' => $this->input->post('username'),
  'password' => $this->input->post('password')
);
$this->model_ajax->update_data('user', $data, $id);}

我的模态是

public function update_data($table, $data, $id){

$this->db->where('id',$id);
$this->db->update($table, $data);

}

【问题讨论】：

标签： javascript php jquery twitter-bootstrap codeigniter

【解决方案1】：

您需要将数据从控制器发送回您的脚本，然后更新 DOM。

在您的控制器中，例如：

public function update()
{
    $id= $this->input->post( 'id' );
    $data = array(
      'username' => $this->input->post( 'username' ),
      'password' => $this->input->post( 'password' )
    );
    $this->model_ajax->update_data( 'user', $data, $id );

    // return the updated data via json
    echo json_encode( $this->input->post() );
}

然后在你的 jQuery 中

function update(id){
    var user = $("#user"+id).val();
    var password = $("#pass"+id).val();


    $.ajax({
            dataType: 'html',
            url: "<?= site_url('ajax/update'); ?>",
            type: "POST",
            data: "username="+user+"&password="+password+"&id="+id,
        })
        .done(
            function( data ) {
                $( "#myModals" + data.id ).modal( 'hide' );
                load(); 
            }
        );
}

【讨论】：

【解决方案2】：

对于关闭模式，您可以尝试 $("#myModals"+id).modal('toggle');这将关闭模式。另外请确保 ajax 响应是正确的，并且您得到了预期的结果。

【讨论】：