フォーム編集モーダルアヤックス私はモーダルAJAX、編集フォームがポップアップすることができ、フォームの編集に問題があるが、データはまだこのようempty.code

Question

、 私のコントローラ：

public function edit() 
 
\t { 
 
\t \t $id=$this->uri->segment(3); 
 
\t \t 
 
\t \t 
 
\t \t $data=array(
 
\t \t 'project' => $this->m_inputactivity->get_project(), 
 
\t \t 'actype' => $this->m_inputactivity->get_actype(), 
 
\t \t 'detail' => $this->m_inputactivity->per_id($id), 
 
\t \t ' 
 
\t \t); 
 
\t \t 
 
\t \t 
 
\t \t $this->output 
 
       ->set_content_type('application/json') 
 
       ->set_output(json_encode($data)); 
 
\t }

私の見解：

<script type="text/javascript"> 
 
function edit(id) 
 
{ 
 
    
 
    $.ajax({ 
 
     url : "<?php echo site_url('input_activity/edit/')?>/" + id, 
 
     type: "GET", 
 
     dataType: "JSON", 
 
     success: function(data) 
 
     { 
 

 
      
 
\t \t \t 
 
      $("[name='actype']").val(data.actype); 
 
      $("[name='activity_name']").val(data.activity_name); 
 
\t \t \t $("[name='project']").val(data.project); 
 
      $("[name='portion']").val(data.portion); 
 
      $('#modal_form').modal('show'); // show bootstrap modal when complete loaded 
 
      
 

 
     }, 
 
     error: function (jqXHR, textStatus, errorThrown) 
 
     { 
 
      alert('Error get data from ajax'); 
 
     } 
 
    }); 
 
} 
 

 
function reload_table() 
 
{ 
 
    table.ajax.reload(null,false); //reload datatable ajax 
 
} 
 
</script>

<a href="javascript:void(0)" title="Edit" onclick="edit('<?php echo $row->activity_detail_id;?>')" class="btn btn-outline btn-circle btn-sm purple" > 
 
<i class="fa fa-edit"></i> Edit </a>

私のモーダルビュー：

<!-- begin pop update activity --> 
 
<div class="modal fade left" id="modal_form"> 
 
<div class="modal-dialog"> 
 
<div class="modal-content"> 
 
<div class="modal-header"> 
 
<h3 class="pull-left no-margin">Edit Activity</h3> 
 
<button type="button" class="close" data-dismiss="modal" title="Close"><span class="glyphicon glyphicon-remove"></span> 
 
</button> 
 
</div> 
 
<div class="modal-body"> 
 
<form class="form-horizontal" role="form" method="post" action="<?php echo base_url(); ?>input_activity/update"> 
 
<div class="form-group"> 
 
<label for="name" class="col-sm-3 control-label">Kategori:</label> 
 
<div class="col-sm-9"> 
 
<?php $attributes = 'class = "form-control" id = "actype"'; 
 
echo form_dropdown('actype',$actype,set_value('actype',$detail[0]->activity_type),$attributes);?> 
 
</div> 
 
</div> 
 
<div class="form-group"> 
 
<label for="activity" class="col-sm-3 control-label">Rincian Kegiatan: </label> 
 
<div class="col-sm-9"> 
 
<textarea class="form-control" rows="3" name="activity_name" required><?php echo $detail[0]->activity_name;?></textarea> 
 
</div> 
 
</div> 
 
<div class="form-group"> 
 
<label for="project" class="col-sm-3 control-label">Peruntukkan:</label> 
 
<div class="col-sm-9"> 
 
<?php $attributes = 'class = "form-control" id = "project"'; 
 
echo form_dropdown('project',$project,set_value('project',$detail[0]->project_id),$attributes);?> 
 
</div> 
 
</div> 
 
<div class="form-group"> 
 
<label for="portion" class="col-sm-3 control-label">Bobot:</label> 
 
<div class="col-sm-4"> 
 
<input class="form-control" name="portion" value="<?php echo $detail[0]->portion;?>" required> 
 
<input name="activity_detail_id" type="hidden" id="activity_detail_id" value="<?php echo $detail[0]->activity_detail_id;?>"> 
 
</div> 
 
</div> 
 
<div class="form-group"> 
 
<div class="col-md-offset-3 col-md-5"> 
 
<button type="submit" class="btn green"> 
 
<i class="fa fa-save"></i> Update</button> 
 
<button type="button" class="btn default" data-dismiss="modal">Cancel</button> 
 
</div> 
 
</div> 
 
</form> 
 
</div> 
 
<div class="modal-footer"> 
 
</div> 
 
</div> 
 
</div> 
 
</div>

私が正しくモーダルAJAXを作成する方法

編集ボタンのポップアップデータがまだ空にクリックしたときに、私は問題を抱えていますか？

Answer 1

コントローラが実際に正しいデータを返すと仮定すると、問題はフォーム入力のセレクタになる可能性があります。

これらのセレクタを使用して値を設定してください。

$("input[name='actype']").val(data.actype); 
$("input[name='activity_name']").val(data.activity_name); 
$("input[name='project']").val(data.project); 
$("input[name='portion']").val(data.portion); 

ビューhtmlは表示されません。しかし、それはあなたが表示するjavascriptを含む同じファイルにモーダルhtmlがあると仮定されます。本当ですか？