JQuery Masking

SCENARIO

Grocerycrud provides excellent solution for building backends. In the backend, to have prominent, efficient functionality one of the requirement is to have masking on the fields. Example – a zipcode / telephone no, etc. By default the functionality ain’t provided with Grocerycrud library.

SOLUTION

To achieve the same, one needs to either alter the base library to add the function or create one’s own extension. We at this solution will work on altering the base library to provide the same solution. To reach to the desired solution, we are going to use the masked library found at the following url

Open the GroceryCrud library file, find the following in the code ..

protected $callback_after_upload = null;

……there below the codes — add the following

protected $field_mask = null;

Then u can find in for the following function ..

public function display_as($field_name,$display_as= null)

just before that or after – wherever you feel comfirtable, add the following

/**
*
* Sets mask to the given field
* @param string $field
* @param string $mask
*/
public function mask_field($field , $mask)
{
$this->field_mask[$field] = $mask;
return $this;
}

There you are now set to go with adding the mask to the fields you want.

Now post this…
Find the following….

protected function showAddForm()

……in here – add the following line

$data->masks            = $this->field_mask;

Do the same for showEditForm

Now our work in the Grocerycrud library is done. Now we need to alter the Add / Edit templates of the theme. Open them and add the masked input library.
(i had downloaded and set it in my local so i can refer it directly using the code below. You can place it at the desired location of yours and point it in your template).
Add the entry to the page (you can add the same in the area where the scripts are mentioned / referred to)

$this->set_js($this->default_theme_path.'/flexigrid/js/jquery.maskedinput.js');

Now in the end, there is a script section. Will like you to alter and replace the same.

This script will set the masks to all the fields that are set by the user. The changes mentioned above are the same for add.php / edit.php

Now, how do we use it? Simple..

$crud->mask_field('phone', "(999) 999-9999? x99999");