Using X-editable for inline editing

X-editable allows you to create editable elements on your page. Includes both popup and inline modes. In this tutorial I’ll explain how to use X-editable with Nova Framework.

To get started head over to https://vitalets.github.io/x-editable/ and download the E-editable library I’ll be using the Bootstrap version. Next add the img, css and js assets to your template I like to put third party scripts in a folder called plugins so my path will be app/Templates/AdminLTE/Assets/plugins/bootstrap-editable then I’ll have the img, css and js folder.

Include the css and js into your layout file backend.php:

CSS:

Assets::css(template_url('plugins/bootstrap-editable/css/editable.css', 'AdminLTE'));

JS:

Assets::css(template_url('plugins/bootstrap-editable/js/editable.js', 'AdminLTE'));

I have a master scripts.js file where I put all my initalise jQuery code I have 2 classes for E-editable:

.edit for loading an X-editable instance.

$('.edit').editable();

.editdate for using jQuery’s datepicker with X-editable

$('.editdate').editable({
    format: 'yyyy-mm-dd',
    viewformat: 'dd-mm-yyyy',
    datepicker: {
        weekStart: 1
    }
});

X-editable usies ajax to send data, in order for this to work Nova request all post request send a csrfToken with the request to accomplish this with ajax you can setup this header call for ajax your jquery code:

$.ajaxSetup({
    headers: {
        'X-CSRF-Token': $('meta[name="csrfToken"]').attr('content')
    }
});

This will read a meta tag called csrfToken and grab it’s value and pass that with any ajax call. In order for this to work a meta tag needs adding to your template file in my case backend.php:

<meta name="csrfToken" content="<?=$csrfToken;?>">

This gives a csrfToken on all pages.

Then to use X-editable I make use of Date attributes in text links like this:

<a href='#' id='name' class='edit' data-type='text' data-pk='2' data-url='/contacts/updaterow' data-placement='top' data-title='Change Name'>Joe Bloggs</a>

the class .edit loads an instance of X-editable followed by these data atributes:

• data-type = set the type options are: text, texarea and select
• data-pk = set the primary key of the record
• data-url = set the url where to post to
• data-placement = set where the popup will appear
• daat-title = set the title for the popup

Here is a link I use for a Ticketing system:

<a href='#' id='subject' class='edit' data-type='text' data-pk='<?php echo $ticket->id;?>' data-url='<?=site_url('tickets/updaterow');?>' data-placement='top' data-title='Change Subject'><?php echo $ticket->subject;?></a>

In order for this to work it needs a route setting, in the above example the route is tickets/updaterow, within the route include auth and csrf to ensure the route only works for logged in users and is protected with cross site request forgery. 

Route::post('tickets/updaterow', array('before' => 'auth|csrf', 'uses' => 'Tickets@updaterow'));

Next in the controller create the updaterow method, this method will collect the form data. The post data sent will be name, value and pk.

Collect the post data, set local variables for easier use then get the record from the model and do an update.

public function updaterow()
{
    //collect all post data
    $input = Input::all();

    $name  = $input['name'];
    $value = $input['value'];
    $pk    = $input['pk'];

    //find record from $pk
    $ticket = Ticket::find($pk);

    //as long as the record exists then update it.
    if ($ticket != null) {
        $ticket->$name = $value;
        $ticket->save();
    }
}

With this implemented, it’s now easy to update records from a view using X-editable.