Open Source | it's my blog !!!

how to add client side phone validation in CiviCRM

Filed in Open Source | Technology Leave a comment

Recently on CiviCRM irc and forum few people asked about adding client side validation for phone field. By default CiviCRM packages validate plugin, so this can be easily implemented with minor customization. Below is the example of validating US phone number on new contact form.

Index: templates/CRM/Contact/Form/Edit/Phone.tpl

===================================================================

— templates/CRM/Contact/Form/Edit/Phone.tpl (revision 37399)

+++ templates/CRM/Contact/Form/Edit/Phone.tpl (working copy)

@@ -39,10 +39,10 @@

</tr>

{/if}

<tr id=”Phone_Block_{$blockId}”>

- <td>{$form.phone.$blockId.phone.html}  {ts}ext.{/ts} {$form.phone.$blockId.phone_ext.html|crmReplace:class:four}   {$form.phone.$blockId.location_type_id.html}</td>

+ <td>{$form.phone.$blockId.phone.html|crmReplace:class:”phoneUS”}  {ts}ext.{/ts} {$form.phone.$blockId.phone_ext.html|crmReplace:class:four}   {$form.phone.$blockId.location_type_id.html}</td>

<td colspan=”2″>{$form.phone.$blockId.phone_type_id.html}</td>

<td align=”center” id=”Phone-Primary-html” {if $blockId eq 1}class=”hiddenElement”{/if}>{$form.phone.$blockId.is_primary.1.html}</td>

{if $blockId gt 1}

<td><a href=”#” title=”{ts}Delete Phone Block{/ts}” onClick=”removeBlock(‘Phone’,'{$blockId}’); return false;”>{ts}delete{/ts}</a></td>

{/if}

-</tr>

\ No newline at end of file

+</tr>

Index: packages/jquery/plugins/jquery.civicrm-validate.js

===================================================================

— packages/jquery/plugins/jquery.civicrm-validate.js (revision 37399)

+++ packages/jquery/plugins/jquery.civicrm-validate.js (working copy)

@@ -5,4 +5,13 @@

* To define phone validation for your site:

* jQuery.validator.addMethod(“crm_phone”, function(phone_number, element) { validation logic here }

*/

-

+(function() {

+ jQuery.validator.addMethod(“phoneUS”, function(phone_number, element) {

+ phone_number = phone_number.replace(/\s+/g, “”);

+ return this.optional(element) || phone_number.length > 9 &&

+ phone_number.match(/^(1-?)?($[2-9]\d{2}$|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);

+ }, “Please specify a valid phone number”);

+ jQuery.validator.addMethod(“postalcode”, function(postalcode, element) {

+ return this.optional(element) || postalcode.match(/(^\d{5}(-\d{4})?$)|(^[ABCEGHJKLMNPRSTVXYabceghjklmnpstvxy]{1}\d{1}[A-Za-z]{1} ?\d{1}[A-Za-z]{1}\d{1})$/);

+ }, “Please specify a valid 5 digit zip code.”);

+})();

I have tested this on CiviCRM v3.4 ( latest ). I hope this is helpful.

Originally posted on http://civicrm.org/blogs/kurund/how-implement-client-side-phone-validation

CiviCRM, javascript, jquery, validation

09Nov

Drupal Camp Mumbai 2011 – Day 1

Filed in Open Source | Technology Leave a comment

I had an excellent time with fellow drupalars at Drupal Camp Mumbai held at IIT, Powai. It feels great to put faces to irc nicknames and meet the people for real. This always amazes me .

I was bit late hence missed drupal song ( which I heard was fun ) but reached in time for keynote by Dries Buytaert, original creator and project lead for the Drupal. Dries spoke about early days of drupal and how it has evolved into one of the successful open source project. He also emphasized on having a strong community and then shared his thoughts on drupal’s future.

Jacob Singh’s “How to have an open relationship with software (and still get paid) – Free software in material world“, mainly focussed on how each one of us can benefit by being part of drupal community and in the process grow as a individual/company within drupal community. I really liked his presentation, especially self portraits :)

“Drupal Entities Unleashed – Create your own information architecture with Drupal” by Mukesh Agarwal was a good introduction to entities in drupal. He started with basic concepts and then went on to code level details.

“Drupal, Migrating to Drupal was never so easy“ by Piyuesh Kumar & Dipen Chaudhary demonstrated migration of ROR website into drupal using migrate module. They covered various features of migrate module and it’s integration with drush. It was a great mix of code and actual migration process. This was followed by a good Q& A session.

This kind of summarizes my day at DCM and looking forward for tomorrow’s code sprint. If you guys missed today, don’t miss tomorrow, there are some kool sessions scheduled along with code sprint.

c ya tomorrow

drupal, drupalcamp, Mumbai

23Oct

setup mac os x (lion) as development machine ( macports: apache + mysql + php + subversion )

Filed in Mac | Open Source | Technology Leave a comment

Here are the instructions to setup Mac OS X ( Lion ) for MAMP software development. Basically you will need apache, mysql, php, subversion and may be phpmyadmin. I am using macports which simplifies the installation process.

1. Install Xcode from apple’s Mac app store. It might take a while because mac app store is very slow/pathetic. ( so don’t blame your ISP )
In this time you can download other useful softwares. My recommendation:

IM: Adium
IRC: Colloguy,
Browser: Firefox (for development), Chrome (Browsing),
Flash Player
Skype
Textmate ( if don’t use vim or emacs )

2. Download macports from http://www.macports.org and follow the installation instructions.

3. Make sure port is updated to latest

sudo port selfupdate

4. Install the packages

sudo port install subversion apache2 mysql5-server php5 +pear +mysql5 php5-xdebug phpmyadmin

Similarly if you need any other software you can install it using macport. ( if it is available on macports )

5. Load ports so that services like apache and mysql start automatically event after restart.

sudo port load apache2
sudo port load mysql5

6. Go to your browser and type http://localhost it should display “It works”. If not then you can manually start apache and mysql.

sudo /opt/local/share/mysql5/mysql/mysql.server start

sudo /opt/local/apache2/bin/httpd -k start

Now you are all set, time to develop some kool stuff

apache, macosx lion, macport, mysql, PHP

22Oct

migrate/copy mysql databases from one machine to another

Filed in Mac | Open Source | Technology Leave a comment

I am currently on Mac OS X( Snow leopard ) and have installed mysql using macports. I wanted to copy my databases to another machine Mac OS X ( Lion ) to avoid creating new db’s from fresh. Here are the instructions for the same.

Important: Information about databases is stored in below folder

/opt/local/var/db/mysql5

So basically you need to copy this folder onto your new machine.

1. First backup existing mysql5 folder. ( this is assuming you have already installed mysql using macports )

2. Copy mysql folder to /opt/local/var/db/, for this you need be sudo user.

3. Change owner

chown -R _mysql:_mysql /opt/local/var/db/mysql5

4. Restart your computer ( I didn’t find the better way ) or may be try restarting mysql.

sudo /opt/local/share/mysql5/mysql/mysql.serve

5. When you copy databases, there is a good change that your INNODB engine might not work. So go to mysql terminal and fire

<mysql> show engines;

If it does not show INNODB or is disabled try following:

cd /opt/local/var/db/mysql5

mv ib_logfile0 ib_logfile0.bak

Basically move all ib_logfile* file to .bak files and then restart mysql server. Now go to mysql terminal and do show engines. INNODB should be enabled.

I think this instructions should work fine on any OS as long as you copy databases to correct location.

This saved me few hours and I hope it helps you too

copy, database, innodb, macports, migrate, mysql

31Jan

jQuery plugin to change the row color on hover

Filed in Open Source | Technology 6 Comments

For my project CivCRM, I wrote a simple jquery plugin to change the row color on mouse hover. It is generic enough and can be used in any project. Here is the implementation.

1. Create a plugin file: jquery.crmrowhighlighter.js

(function($){ $.fn.crmrowhighlighter = function(){

if ($(‘.crm-row-highlighter-processed’).length == 0){

$(‘.selector tr’).hover(function(){

$(this).addClass(‘crm-row-highlight’);

},function(){

$(this).removeClass(‘crm-row-highlight’);

});

$(‘.selector’).addClass(‘crm-row-highlighter-processed’);

};

};

})(jQuery);

2. Create css file: my.css

.crm-row-highlight {

background-color: #FFFFCC !important;

}

Usage:

<script type=”text/javascript” src=”jquery.js”></script>

<script type=”text/javascript” src=”jquery.crmrowhighlighter.js”></script>

<style type=”text/css”>@import url(“my.css”);</style>

<table class=”selector”>

<tr> Row 1: Hover to change the color</tr>

<tr> Row 2: Hover to change the color</tr>

</table>

<script type=”text/javascript”>

$( function(){

$().crmrowhighlighter( );

});

</script>

Note: You need to have table’s class = “selector”

That’s it, now when you hover the row color will change. Hope this helps.

CiviCRM, css, jquery

21Dec

Integrating IMCE Drupal module with CiviCRM CKEditor

Filed in Open Source | Technology 5 Comments

CiviCRM comes with CKEditor as a default wysiwyg editor. One of the missing feature has been ability to upload /browse existing files on the server using CKEditor. So after some investigation I figured out you can easily integrate IMCE drupal module for this purpose.

Here are the steps:
1. Install IMCE module: http://drupal.org/project/imce
2. Modify packages/ckeditor/config.js

Index: config.js
===================================================================
— config.js (revision 31357)
+++ config.js (working copy)
@@ -9,6 +9,10 @@
// config.language = ‘fr’;
//config.uiColor = ‘#AADC6E’;

3. Clear you browser cache
4. That’t it, now when you click on image icon you will get option to “Browse Server”, using which you can browse existing file or upload new files on the server.

By default you can browse / upload files only to files directory.

Sorry joomla people.. this will work only for drupal.

CiviCRM, ckeditor, drupal, file uploader

09Sep

Easiest way to sort a select element using Jquery

Filed in Open Source | Technology Leave a comment

If you are using jquery sorting a select element is quite easy. Check the below code.

$(“#select-id”).html( $(“#select-id option”).sort(function (a, b) {
return a.text == b.text ? 0 : a.text < b.text ? -1 : 1;
}));

javascript, jquery

18Aug

CiviCRM iphone app ( pre alpha release )

Filed in Open Source | Technology 2 Comments

I have developed very basic iphone app for CiviCRM using Titanium framework.

Features

Allows users to “Search Contacts” from their remote CiviCRM database.
Add Individuals.
App uses CiviCRM REST interface so you can scale it according to your needs.

You can get the code from our public svn repository: http://svn.civicrm.org/tools/branches/v3.2/other/iphone_1.0/

Few screenshots:

Originally posted on http://civicrm.org/blogs/kurund/civicrm-iphone-app-pre-alpha-release

app, CiviCRM, iphone

14Jul

How to remove default title set by drupal

Filed in Open Source | Technology Leave a comment

You can implement a module and call below function

function modulename_preprocess_page(&$variables) {
unset($variables['title']);
}

This will unset default title, but there are 2 problems:
1. This hook is not called by all the themes. So you cannot entirely rely on this.
2. Some themes check if ‘title’ exits before showing breadcrumb. So if you unset title then your breadcrumb will also disappear.

So finally I came up with this hack.

drupal_set_title( ‘ ‘ );

Note that there is space between single quotes. This removes default title

drupal, drupal_set_title

19Feb

My notes: Upgrading CiviCRM v2.1 to CiviCRM v3.1 ( Drupal / Joomla )

Filed in Open Source | Technology Leave a comment

Recently we successfully upgraded one of our client CiviCRM install from v2.1 to v3.1.2. Over all I was pretty happy with the CiviCRM upgrade process considering client’s db was in bad shape. This client is one of the early adopters of CiviCRM, ( since v1.8 ) that made things bit worse.

Few things you should remember before starting upgrade:

1. Backup your working CiviCRM database

If you have demo / test server try to upgrade it first rather than live. Always keep backup of your current working CiviCRM database so that you can revert back if needed.

2. Ensure Database Integrity

Never assume client’s database structure is correct, it might be upgraded and hence might be missing foreign key constraints etc, especially if it is been upgraded from CiviCRM v1.x. This might lead to more errors and will take more time to fix / result in more issues during upgrade process.

3. Understand upgrade errors

Try to figure out why you get errors during upgrade process rather than commenting sql or php code in CiviCRM.

4. Fix current database issues

If you get any sql errors during upgrade try to fix your current database. Most of the time database might have stale data.

So based on above, we followed these steps:

1. Backup CiviCRM database. I usually do it via command prompt.( you can also use phpmyadmin or any other database qui’s )

mysqldump -u DBUSER -p PASSWD DBNAME > civicrm_backup.mysql

2. We followed these steps to ensure database integrity before upgrade:

- Export only data from current CiviCRM database. Before exporting I would suggest you should empty cache tables in CiviCRM.

civicrm_cache, civicrm_group_contact_cache, civicrm_acl_cache, civicrm_acl_contact_cache

Then take database backup:

mysqldump5 -c -e -t -n -u DBUSER -p PASSWDS DBNAME > civicrm_only_data.mysql

- Drop current database

mysqladmin -f -u DBUSER -p $PASSWD drop DBNAME

- Create new database and import structure from sql/civicrm.mysql ( from your current install, so in this case creating structure for CiviCRM v2.1 )

mysqladmin -f -u DBUSER -p $PASSWD create DBNAME

mysql -u DBUSER -p PASSWD DBNAME < civicrm.mysql

- Now import data which you exported

mysql -u DBUSER -p PASSWD DBNAME < civicrm_only_data.mysql

After these steps make sure your CiviCRM is working without any errors.

Now you are ready for actual upgrade process

1. Upgrade CiviCRM v2.1 to latest 2.2.x release using following instructions:

http://wiki.civicrm.org/confluence/display/CRMDOC22/Upgrade+Drupal+Sites+to+2.2

2. Make sure everything is working fine. If yes than take database backup using instructions mentioned above. ( so that you have db to revert if next upgrade fails )

3. Upgrade CiviCRM v2.2.x to CiviCRM v3.1.x using these instructions:

http://wiki.civicrm.org/confluence/display/CRMDOC/Upgrade+Drupal+Sites+to+3.1

During this upgrade we got few sql errors:
- We got foreign key contraint failure error when following SQL was fired by CiviCRM

ALTER TABLE `civicrm_activity`

ADD CONSTRAINT `FK_civicrm_activity_source_contact_id` FOREIGN KEY (`source_contact_id`) REFERENCES `civicrm_contact` (`id`) ON DELETE SET NULL;

We got this error because civicrm_activity table in client’s db had wrong values. For few records “source_contact_id” value didn’t exist in civicrm_contact table. So we did source_contact_id = NULL for those activity records.

- Error

DB Error: constraint violation Database Error Code: Cannot add or update a child row: a foreign key constraint fails (`database_civicrm/civicrm_group_contact_cache`, CONSTRAINT `FK_civicrm_group_contact_cache_contact_id` FOREIGN KEY (`contact_id`) REFERENCES `civicrm_contact` (`id`) ON DELETE CASCADE), 1452

This was because civicrm_group_contact table had entries for contacts that didn’t exits in civicrm_contact table. So we deleted those entries from civicrm_group_contact table.

Note that after each failed step you should rollback to previous working copy / fixed copy.

I agree this process looks bit complicated but trust me it might help you to save lot of time in debugging upgrade errors and ensure smooth future upgrade. It took me around 3-4 hours for upgrading this install from CiviCRM v2.1 to CiviCRM v3.1

I hope this helps someone

CiviCRM, drupal, joomla, upgrade

Older Entries