PHP Ajax inline edit textbox

Inline Edit MySQL table field using jQuery Ajax and PHP.

Step => 1 HTML and PHP code

<td class="task"><a class="inline_edit" data-feedback_id="<?=$row['id'];?>" href="javascript:void(0);"><?=$row['task_name'];?></a>
        <input type="text" data-data_id="<?=$row['id'];?>" data-fieldname="laci_task" value="<?=$row['task_name'];?>" class="t_inline_edit textbox display0" /> 
</td>

Step => 2 jQuery and Ajax code in .js file.

jQuery(document).ready(function(e) {
    /*****/
    /* Inline Edit save field 
    /****/
    jQuery('.t_inline_edit').bind('blur keypress',function(e){
    
    var $this = jQuery(this);
        
    if(e.keyCode === 13 || e.keyCode === 9 || e.type === 'blur'){
        
        var field_id = jQuery(this).data('data_id');
        
        // field_name to fiend table name
        var field_name = jQuery(this).data('fieldname');        
        var field_value = jQuery(this).val();
        
        // send data 
        var price_data = {
            'function_name':'inline_edit',
            'field_name':field_name, // field_name to fiend table name
            'field_where':field_id,    // field_where to set set sql condition        
            'field_value':field_value
        };
        
        
        jQuery.ajax({
            url: 'ajax-file/ajax.php',
            type: 'POST',
            dataType: "json",
            data: price_data,
            success: function(data){
                //called when successful                
                if(data['message'] == 'success'){
                    $this.closest('td').find('a').text(data['values']['field_value']).show();
                    $this.closest('td').find('input').hide();                    
                    
                }else{
                    //location.reload();
                }
            },
            error: function(e){
                //called when there is an error
                console.log(e.message);
            }            
        });            
    }
    });
});
Step => 3 call Ajax in PHP file using condition in PHP file.
    /****/
    /* Edit inline
    /****/
    if(isset($_POST['function_name']) && $_POST['function_name'] == 'inline_edit' )
    {
        
        if($_POST['field_name'] == 'laci_feedback'){
            $table_name = 'laci_task';
            $field_name = 'feedback';
            $field_where = 'id';
        }
        elseif($_POST['field_name'] == 'laci_task'){
            $table_name = 'laci_task';
            $field_name = 'task_name';
            $field_where = 'id';
        }
        else{
            $return = array('result' => 'Opps !! Geting some Error.');
            echo json_encode($return);
            die;
        }
        
        $sql = "UPDATE $table_name SET
            $field_name = '".$_POST['field_value']."'
            WHERE $field_where = ".$_POST['field_where']."";
            
        //echo $sql;
        $res = mysql_query($sql);
        
        
        $return_data = array(
            'message' => 'success',
            'values' => array(
                'field_value' => $_POST['field_value']                
            ),
        );
        $return = $return_data;        
    }
    

    echo json_encode($return);
    die;
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s