CODEWITHSUNDEEP
phpcodeigniter
K.K. Smith
K.K. Smith

Reputation: 992

Trying to make an AJAX edit in place in Codeigniter .. failing

I'm on my first CI project and I'm trying to do basically an AJAX "edit in place".

I have a user profile page with a number of fields. Basically the user is looking at his own data, and I would like to give him the option to edit his info on a field by field basis. I have about 20 fields like so..

<div id="desc_short">
<div class="old_info"><p><?php echo $the_user->desc_short; ?></p></div>
<div class="edit_buttons">
    <button type="button" class="btn_edit">Edit Field</button>
    <button type="button" class="btn_submit">Submit Change</button>
    <button type="button" class="btn_cancel">Cancel</button>
</div>

The submit and cancel buttons start off with display:none. A click on the 'edit' button appends a form to the div with some hidden field info and "shows it in" along with 'submit' and 'cancel' buttons. SO now the user has a text field under the original info, and two new buttons.

$('.btn_edit').on('click', function(){
    var this_field_id = $(this).parent().parent().attr('id');
    var form_HTML = "<form action='edit_profile' method='post'><input type='text' class='new_info' name='new_info'/><input type='hidden' class='edit_field' name='edit_field' value='"+this_field_id+"'/></form>";
    $("#"+this_field_id).append(form_HTML).hide().show(500);
    $(this).siblings().fadeIn(1000);
});

So I am dynamically adding the form to the appropriate div, and giving it a hidden field with the name of the datafield that is being edited. I'm also showing the "submit" and "cancel" buttons (although notice that the submit button is not in the form element).

I'll leave out the "cancel button" function, but here is the submit button jquery. As you can see I am trying to submit the form by "remote control", triggering a submit event on the form long distance from the submit button. And then on the submit event, I preventDefault and then try to $.post the info to an AJAX controller..

$('.btn_submit').on('click', function(){
    var this_field_id = $(this).parent().parent().attr('id');
    var new_info =  $("#"+this_field_id+" .new_info").val();
    alert(this_button);
    $("#"+this_field_id+" form").trigger('submit');
    $("#"+this_field_id+" form").submit(function(e){
        e.preventDefault(); 
        alert(this_field_id); // alerting correctly
        $.post('../ajax/profileEdit', { edit_field: this_field_id , new_info: new_info },
            function(data){
                if(data = 'true')
                {
                    alert(data);   // <<<< alerts "true"
                }
                else
                {
                    alert("bad");
                }
            }
        );   
    });
});

Here is the ajax controller

public function profileEdit()
{
    $ID = $this->the_user->ID;
    $field = $this->input->post('edit_field');
    $new_info = $this->input->post('new_info');
    $this->load->model('Member_model');
    $result = $this->Member_model->edit_profile( $ID, $field, $new_info );
    echo $result;
}

And the model..

public function edit_profile($ID, $field, $new_info)
{
    $statement = "UPDATE users SET $field=$new_info WHERE UID=$ID"
    $query = $this->db->query($statement);
    return $query;
}

I am actually getting back "TRUE" back to Jquery to alert out .. but nothing is being edited. No change to the information. Frankly, I am surprised I'm even getting 'true' back (the whole remote submit thing .. I thought "no way this works").. but that makes it tough to see what is going wrong.

Ideas?

Upvotes: 0

Views: 1491

Answers (1)

Saff
Saff

Reputation: 563

Apart from the if(data = 'true) error, i don't see where the other error could be. When you alert data, what does it show you? Try this in the model;

public function edit_profile($ID, $field, $new_info)
{
  $data = array('field_table' => $field, 'new_info_table' => $new_info);
  return ($this->db->where('UID',$ID)->update('tabel_name',$data)) ? TRUE : FALSE; 
}

AND in 

public function profileEdit()
{
$ID = $this->the_user->ID;
$field = $this->input->post('edit_field');
$new_info = $this->input->post('new_info');
$this->load->model('Member_model');
if($this->Member_model->edit_profile( $ID, $field, $new_info )){
 echo 'success';
}else{
  echo 'error';
}
}

Then

$('.btn_submit').on('click', function(){
var this_field_id = $(this).parent().parent().attr('id');
var new_info =  $("#"+this_field_id+" .new_info").val();
alert(this_button);
$("#"+this_field_id+" form").trigger('submit');
$("#"+this_field_id+" form").submit(function(e){
    e.preventDefault(); 
    alert(this_field_id); // alerting correctly
    $.post('../ajax/profileEdit', { edit_field: this_field_id , new_info: new_info },
        function(data){
            if(data == 'success')
            {
                alert(data);   // <<<< alerts "true"
            }
            else if(data == 'error')
            {
                alert('Database error');
            }
            else{
                alert('');
            }
        }
    );   
});

});

Just wrote it on here, so i haven't tested it. But give it a try, at least you might be able to know where the error is coming from. If you still get the same error, try alert data before the if(data == 'sucess'), to see what the profile edit func is returning.

Upvotes: 1

Related Questions