javascript - 通过ajax成功函数设置为模态设置的值时不显示

Question

我有一个显示组名称等的表格和一个显示成员列表的模式。当我单击特定的组名称时，会显示模式。我在 ajax 的成功函数内设置了模式的值，但它没有显示任何内容。我还尝试执行 alert(response)在ajax的success函数里面但是alert没有出现。

这是我的代码:对于 HTML 表格:

<div class="row table-responsive">
  <table class="table table-bordered table-striped table-condensed" id="r_data"> 
    <thead class="header">
      <tr class="well">
        <th style="font-size: 14px;">
            Group Name
        </th>
        <th style="font-size: 14px;">
            Leader's Name
        </th>
      </tr>
    </thead>
    <tbody>
      <?php if($result != NULL){?>
        <?php foreach($result as $row){?>
        <tr>
            <td data-toggle="modal" href="#viewMember" data-id="<?php echo $row->reservedID;?>">
                <?php echo $row->groupName;?>
            </td>
            <td>
                <?php echo $row->l_name.", ".$row->f_name." ".$row->m_name;?>
            </td>
        </tr>
        <?php }?>
      <?php }?>
    </tbody>
  </table>

这是模态:

<div class="container" >
   <div class="row">
    <div class="modal fade" id="viewMember" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-md">
            <div class="modal-content"><!--CONTENT-->
                <div class="form-horizontal"><!--Horizontal-->
                    <div class="modal-header"><!--HEADER-->
                        <button class="btn btn-primary close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 id="header"></h4> 
                    </div><!--END of HEADER-->
                    <div class="modal-body"><!--BODY-->
                        <div class="welll">
                          <table class="table table-bordered table-striped table-condensed table-responsive" id="records_table">
                            <thead class="header">
                                <tr class="well">
                                  <th>
                                    Member's Name
                                  </th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>
                          </table>
                        </div>
                    </div><!--End of BODY-->
                </div><!--END of Horizontal-->
            </div><!--END of CONTENT-->
        </div>
    </div>
  </div>
</div>

JS:

$('.viewMember').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    var id = button.data('id')
    $.ajax({
        url: "<?php echo base_url('admin/group/getMember')?>",
        type: 'POST',
        data: { 'groupID': id},
        dataType: 'JSON',
        success: function(result){
            //alert("hi");
            $('.modal-body #header').text(result[0].fname);
        }

    });
});

Controller :

public function getMember(){
    $data = array();
    $id = $_REQUEST['groupID'];
    $this->load->model('group_model');
    $data = $this->group_model->getAllMember($id);

    echo json_encode($data); 
}

Answer 1

首先，我没有看到与此代码匹配的 html 元素 $('.modal-body #header') 。所以现在，我对显示输出方面的问题感到困惑。我假设您想在标题 <h4 id="header"></h4> 中显示。如果是，则更改 success block 中的 jquery 代码，如下所示:

$('.modal-header').find('#header').html(result[0].fname);

如果您显示要显示输出的位置，则可以轻松进行 jquery 选择。