表单编辑模式Ajax

Question

i have problem with form edit modal ajax,edit form can pop up but data still empty.code like this, my controller:

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

my view:

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

           
            
            $("[name='actype']").val(data.actype);
            $("[name='activity_name']").val(data.activity_name);
            $("[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>

my modal view:

<!-- 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>

i have problem when i click edit button popup data still empty

how to create modal ajax correctly?

</div>

Answer 1

Assuming that the controller is actually returning the correct data the problem might be the selectors for the form inputs.

Try these selectors to set the values.

$("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);

You don't show the view html. But it is assumed that the modal html is in the same file that contains the javascript you show. True?