Encountered an issue with editing a form using modal ajax, where the edit form pops up but the data remains empty. The code snippet for 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));
}For the view section:
<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><! -- 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">Category:</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">Activity Details: </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">Allocation:</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">Weight:</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>
</div>Issue arises when clicking the edit button and the popup data remains empty.
https://i.sstatic.net/wtqWg.jpg
Any guidance on creating the modal ajax correctly?