How would I show a different phone number for my company’s website, based on the current user location?

There are many different ways to solve this problem.
Let’s analyze few of them:

1) We can use the browser language settings, detected via JavaScript and then display a different phone number based on the user’s nation.

2) We could instead download one of the free ip to nation database mappings that there are on the net (or use one of the ip2country services), and code some server side script that will determine the user location.

3) Use Google JS API (that is a sort of ip2country webservice anyway…) to determine the user location, plus JavaScript.

I would say that number 1 is definitely too weak.
Number 2, if I have to maintain my own ip/country database it is going to be a nightmare over time, and I don’t think there are companies (or at least I’m not aware of them) big and reliable enough that can offer a proper ip2country free webservice.

I would definitely go for number 3 and as personal choice I would use jQuery as JavaScript library.

To gain further flexibility I would also add a dropdown where the default country value is the one that Google chooses as user’s position (if determined at all), and the user can interact with the dropdown if necessary, displaying a different phone number/country details.

The sample JavaScript/HTML code to be able to achieve this functionality is attached here (right click and save as).

NB: It is required a local copy of jQuery (saved as jquery.js)

If you use Microsoft Windows (with Outlook) or Mac OSX (with iCal) or just a basic browser with a GMail account and you use the calendar functionality, you would have realized, that every time you get invited or invite someone to an event, you get a basic email, that adds the recipient to the calendar event.

I had to write an invitation tool that was cross compatible between different platforms and integrated with SugarCRM for a customer of InsightfulCRM (Australian SugarCRM Gold Partner) where I work.

I started from some samples, and by reading the RFC of the protocol and the iCalendar Wikipedia entry.

According to the protocol RFC and the Wikipedia entry, the iCalendar and vCalendar seems really similar, so we can use the common items to create a meeting invite.

Let’s pick a basic sample so that we can run some tests on:

BEGIN:VCALENDAR
VERSION:2.0
CALSCALE:GREGORIAN
METHOD:REQUEST
BEGIN:VEVENT
DTSTART:20100616T080000Z
DTEND:20100616T090000Z
DTSTAMP:20100616T075116Z
ORGANIZER;CN=Enrico Simonetti:mailto:enrico@test.com
UID:12345678
ATTENDEE;PARTSTAT=NEEDS-ACTION;RSVP= TRUE;CN=Sample:mailto:sample@test.com
DESCRIPTION:Complete event on http://www.sample.com/get_event.php?id=12345678
LOCATION: Sydney
SEQUENCE:0
STATUS:CONFIRMED
SUMMARY:Test iCalendar
TRANSP:OPAQUE
END:VEVENT
END:VCALENDAR

Now, how do we send this event?
It is pretty simple.
We need a specific set of headers on the email, and the content of the email has to be the structured meeting code itself.
(No, it is not an attachment, also if you see an attached file!)

The headers are exactly as below:

$headers = "From: Enrico <enrico@test.com>\n";
$headers .= "MIME-Version: 1.0\n";
$headers .= "Content-Type: text/calendar; method=REQUEST;\n";
$headers .= '        charset="UTF-8"';
$headers .= "\n";
$headers .= "Content-Transfer-Encoding: 7bit";

NB: be REALLY careful with the spacing. Apparently calendars are really really fragile, and if you only remove a space, it will result on Outlook removing the buttons at the top of the email itself, where you can accept/reject the meeting, or/and even the attendees will disappear from the list!
It really caused me a lot of headache!

Now we can actually send the above calendar invite, as body of the email, structuring the meeting as per above sample, inside the content of $message variable.

$subject = "Meeting Subject";
$subject = html_entity_decode($subject, ENT_QUOTES, 'UTF-8');
mail("sample@test.com", $subject, $message, $headers);

Of course you will have to send an email for each attendee.

There you go, you just invited your attendee to meeting with id ’12345678′!

As simple as that!

Then as next step you have 2 choices, burn the cd or mount the iso file locally as below:

sudo mount -o loop ubuntu-9.10-alternate-i386.iso /media/cdrom0

Then we can run the executable “cdromupgrade” inside the root of the cdrom:

sudo /cdrom/cdromupgrade &

and then follow the normal upgrade process through the interface.

On upgrade complete, if you use the Medibuntu repository, you will need to update the sources used and probably to update your software versions as well.
You can find below the commands that you need to run, as stated on Medibuntu website:

sudo wget http://www.medibuntu.org/sources.list.d/$(lsb_release -cs).list \
--output-document=/etc/apt/sources.list.d/medibuntu.list &&
sudo apt-get -q update &&
sudo apt-get --yes -q --allow-unauthenticated install medibuntu-keyring &&
sudo apt-get -q update

If it is a fresh Ubuntu install, you will probably want to install the commonly used packages (or you can find the complete list of Medibuntu packages for Karmic Koala here):

sudo apt-get install ubuntu-restricted-extras libdvdcss2 w32codecs skype

if it is just an upgrade, you can run:

sudo apt-get upgrade

and that will be working things out for you.

Happy upgrade!

There are some tutorials and documentation on SugarCRM Wiki website about it, but not really for Perl, that is the programming language I’ve chosen today.

I’m not a “rockstar” with Perl but let’s figure this out

First of all why Perl?
The main reason is: you get Perl with your Linux box, without mucking around too much, in any Linux distribution and doesn’t really need too much software around it. It is multi platform and it has his own package manager (CPAN) to install other components.
This is all that’s needed to get started!

So let’s start.

First of all, let’s define what exactly we want to achieve through SOAP.

1) We want Perl to log in to our SugarCRM instance.
2) We want to create a new Case in Sugar
3) We want to create a note with an attachment (file stored on the PC where the script is executed) linked to our new Case

The software I will write, will be running from command line, and to be safe, we will add another step before 1), to check the hostname where our SugarCRM resides is currently active, just by pinging it.

We will need to install some software that doesn’t really come out of the box.
Usually SOAP Lite is not installed by default, so we will need to run

perl -MCPAN -e 'install SOAP::Lite'

Now we can start the real coding.

Step 0, write a few lines to check if the host is alive (works only if executed by root):

#!/usr/bin/perl
use Net::Ping;
my $p = Net::Ping->new("icmp");
if ($p->ping('our.crm.com', 0.5))
{
  print 'Alive\n';
} else {
  print 'Dead\n';
}

Now we have to use the SugarCRM SOAP login function. It requires the username and the password passed in as parameters, and it returns the session id that we will use for other SOAP calls.

Let’s write the login part using the necessary libraries.

use SOAP::Lite;
use Data::Dumper;
# For encoding notes attachment content we will need this
use MIME::Base64;# Let's define some variables...
my $soap_domain = 'http://www.sugarcrm.com/sugarcrm';
my $soap_url = 'http://our.crm.com/soap.php';
my $sugarcrm_username = 'username';
# MD5 of the password
my $sugarcrm_md5_password = '5f4dcc3b5aa765d61d8327deb882cf99';# Instantiate SOAP
my $soap = SOAP::Lite->uri($soap_domain)->proxy($soap_url);# Hash with credentials
my $user_auth = {'user_name' => $sugarcrm_username, 'password' => $sugarcrm_md5_password};# Execute the login
my $result = $soap->login(SOAP::Data->value($user_auth));# We can eventually print out the result so that we understand the data structure for debug (yeah that's what I did all the time)
# print(Dumper($result->result));# And finally get the session id
my $session_id = $result->result->{'id'};# Now we can get the Sugar user id of the logged in user (always useful for assigning records to the right person)
$result = $soap->get_user_id(SOAP::Data->value($session_id));
my $sugarcrm_id = $result->result;

Now we have to complete point 2, creating the Case. For this we use the general purpose function ‘set_entry’.
We just need to pass the session id previously generated, the module name, and an array of name and values for each field we want to fill in.

# Ok let's create the Case
$result = $soap->set_entry(
  SOAP::Data->value($session_id),
  SOAP::Data->value('Cases'),
  SOAP::Data->value(
  [
    {'name' => 'name', 'value' => 'Enrico Test'},
    {'name' => 'status', 'value' => 'Assigned'},
    {'name' => 'assigned_user_id', 'value' => $sugarcrm_id},
    {'name' => 'description', 'value' => 'Enrico Test'}
  ]
  )
);
my $case_id = $result->result->{'id'};

Now we retrieve the record just created to use the case_number property. We can use the get_entry function.
It needs the session, the module name, the case id and an array of fields we want back in the response.

$result = $soap->get_entry(
  SOAP::Data->value($session_id),
  SOAP::Data->value('Cases'),
  SOAP::Data->value($case_id),
  SOAP::Data->value(
    ['case_number']
  )
);# Hash, use ->{'key'}, array use ['0'] (Yeah this needed a bit of debugging before I got it right!)my $case_number = $result->result->{'entry_list'}['0']->{'name_value_list'}['0']->{'value'};

It’s time for the step 3. Create a function to easily store multiple files.

a) Create a Note with set_entry
b) Read the file
c) Create an attachment for the note just created with set_note_attachment (This function can only link a file to an existing note…)

Here is the code:

sub create_note($$$$$)
{
  my($soap_connection, $session_id, $filename, $display_filename, $case_id) = @_;
  # Check if the file exists
  if(-e $filename)
  {
    # Create note
    $result = $soap_connection->set_entry(
      SOAP::Data->value($session_id),
      SOAP::Data->value('Notes'),
      SOAP::Data->value(
      [
        {'name' => 'name', 'value' => $display_filename},
        {'name' => 'parent_id', 'value' => $case_id},
        {'name' => 'parent_type', 'value' => 'Cases'}
      ]
      )
    );
    $note_id = $result->result->{'id'};
    # Read our file
    open(DAT, $filename) || die("Could not open file!");
    @data=;
    close(DAT);
    # Convert array of lines to a string
    $data = join('', @data);
    # Attach the file (The content needs to be encoded in base 64)
    my $resp = $soap_connection->set_note_attachment(
      SOAP::Data->value($session_id),
      SOAP::Data->value(
        {
          'id' => $note_id,
          'file' => encode_base64($data),
          'filename' => $display_filename
        }
      )
    );
  }
}

Cool! Now we have completed all three pieces that we needed, and I’m sure that I’ve covered a bit of everything on how to integrate your Perl program with SugarCRM.

If you are interested on having a free trial SugarCRM system and purchasing it in Australia, you can always send me an email and/or go to InsightfulCRM website.

Thank you,

Enrico

In a few words, it allows you to execute scripts on an action (eg: a user calling an extension), that will interact with other systems (eg: retrieve information from a database and store other input data) and trigger other actions.

First of all, given that I’m more familiar with PHP than Perl, I looked around for libraries that can interact with my loved PHP.
You can get a lot of useful information at http://voip-info.org, being more specific at: http://www.voip-info.org/wiki/view/Asterisk+AGI
This will help you understand what can and cannot be done…

I used one of our company (Fonality Australia) trixbox Pro test systems for playing around with this.
What I was interested on, was specifically the FastAGI. Basically call remote agi scripts that communicate with your Asterisk system via tcp sockets (more info here).

This is interesting because it allows you to install software in your remote machine, without exposing your trixbox appliance to new software (even unsupported one).

First of all I’ve installed the phpagi library (that can be found on sourceforge at http://phpagi.sourceforge.net/) and had a look at the code.
The server side part (so the one that the trixbox system will call in the next steps) will execute as a deamon with the aid of xinetd on your linux box.
In my case xinetd wasn’t installed, and in a Debian flavoured linux distribution you can easily install it with “sudo apt-get install xinetd”, and of course you can get more info about xinetd at http://xinetd.org.

You can get more info on how all the the super server system is structured in the wikipedia inetd page here

Of course you have to make sure you have a working command line php server on your linux box (for Debian flavour: sudo apt-get install php5-cli) and test it running a command line script (php -f file.php).

As a first step of the installation of the library you need to unzip it somewhere in your linux box and that path will be from now on _PHP_LIBRARY_PATH
You need to list the server port inside the services list (/etc/services). So at the bottom add the line “fastagi 4573/tcp”.
And then to add a config entry inside /etc/xinetd.d/fastagi.
For testing I’ve entered as follows:

service fastagi
{
  socket_type = stream
  user = test
  group = test
  server = _PHP_LIBRARY_PATH/phpagi-fastagi.php
  wait = no
  protocol = tcp
  disable = no
}

After restarting xinetd, our server side is ready to go and will accept requests from external IPs.
Just for being safe, I would ssh on a remote machine and see if we can telnet into the port of our FastAGI server and see if the server is listening (telnet IP_ADDRESS 4573).
All good? Let’s go.

Now we create a sample agi script. I will write the php file at _PHP_LIBRARY_PATH/sample.php
with just this as a content:

<?php
$fastagi->verbose('cool, the FastAGI server has been called!');
?>

Now we go inside our nice little trixbox menu interface and we add an agi script entry on the trixbox call menu with this syntax: agi://agi_server_ip_address/sample.php and save.

We can now ssh inside our trixbox box (or whatever asterisk based system you have) and access the asterisk cli interface with “asterisk -r” and enable the agi debugging with “agi debug”.

Now you can try to call your trixbox, and when you will reach the right menu steps you are calling the AGI script with… you will see the command sent from the php library to your Asterisk system!

Now you can have a play with the library and easily extend your phone system with new fancy features!
Using the instance of the AGI object $fastagi you can call any method of the phpagi library, listed and explained in here

You can do a lot of other fancy stuff with AGI, like communicating via soap with other systems, accessing data, saving data, recording messages, playing messages, read and play DTMF tones, even read new messages with text to speech libraries and the other way around!

I guess there is no limit to the possibility it can give to your phone system!

See you next!

Basically the idea was to see a dynamic html table underneath every country/city text field, that suggests the possible values the user is typing.

Everything is generated appending child elements through javascript and removing them when needed.

As usual no problems with Firefox, but I had to battle a lot to understand the problem with Internet Explorer.

Basically the code was correctly appended inside the right element, but wasn’t visible using IE!

I could for example alert the innerHTML of the newly created table, but still couldn’t see it on the browser output.

The code I was using was:


// creating table
var mytable = document.createElement('table');
mytable.setAttribute('id','this_table_id');
mytable.className = 'my_class';
 
// creating row
var tr = document.createElement('tr');
tr.className = 'new_row';
tr.onclick = function() { do_something(); }
 
// creating td
var td = document.createElement('td');
td.innerHTML = "My Td Content";
// adding the td inside the row
tr.appendChild(td);
 
// adding the row inside the table
mytable.appendChild(tr)
 
var body = document.getElementById('my_page_body');
// adding the new table inside the page body
body.appendChild(mytable);
 


After few tests and headaches, I had a quick look at MSDN website and noticed that a lot of examples had the “tbody” tag in each generated table, why? Let’s try…

It worked! Internet Explorer needs the “tbody” tag for a table created through javascript to be visible! Crazy stuff.

The working code will look like:


// creating table
var mytable = document.createElement('table');
mytable.setAttribute('id','this_table_id');
mytable.className = 'my_class';
 
// creating tbody tag
var tbody = document.createElement('tbody');
 
// creating row
var tr = document.createElement('tr');
tr.className = 'new_row';
tr.onclick = function() { do_something(); }
 
// creating td
var td = document.createElement('td');
td.innerHTML = "My Td Content";
 
// adding the td inside the row
tr.appendChild(td);
 
// adding the row inside the tbody
tbody.appendChild(tr);
 
// adding the tbody inside the table
mytable.appendChild(tbody)
var body = document.getElementById('my_page_body');
 
// adding the new table inside the page body
body.appendChild(mytable);
 


Yes, I agree that the tag tbody is part of the w3c standard, but on HTML 4.01 W3C standards it is stated the following:

The TBODY start tag is always required except when the table contains only one table body and no table head or foot sections. The TBODY end tag may always be safely omitted.
 

What does it mean? I didn’t need the tbody, and IE forced me to use it! It CAN’T be safely omitted

Another thumb down for IE.

I’m a web developer and what does a web developer do? He tries to make a website work almost everywhere!

Everywhere? According to w3schools browsers stats, the sum of the users of the 2 browsers is about 90% of the whole users, so yeah, everywhere.

Here is the problem: we generally love Firefox, we really do, because there are so many tools for make your life of debugging a website heaps easier than what it would be with other browsers.

A couple of examples? Of course Firebug and the Web Developer addons!
That’s why we generally start with Firefox to build a website, then we check it on Internet Explorer… and bam! Nothing works also if you write code/javascript following every single W3C standard.

So from that point on, developing will be more like crying blood tears to understand a common way to make things work in both the 2 main browsers user by the “internet population”.

But let’s not get into this, there would be too much to talk about, and it would be only a personal view anyway.

Let’s talk about the battle I had to win today…

Objective

I just had to do some pretty basic stuff with checkboxes.

Basically the webpage had a some content (that I couldn’t modify server side) and I had to add some events through javascript on some checkboxes, to be able to display/hide some parts inside the webpage, on check/uncheck action.

I had to obtain the same feature of a normal “onclick” like this:

<div id='myid' onclick='alert("you clicked me!")' />

… dynamically.

Events… what about them?

How everyone knows, Internet Explorer uses its own weird way of handling events… and yeah who says that I am right? W3C standards of course!
(and anyway I’m carrying Firefox’s flag, so there we go )

Anyway going back to the point, everyone knows that there are two
types of event handling:

1) Firefox (W3C compatible):


myDomElement.addEventListener('eventType', function()
  {
    /* some stuff here */
  }, bool
);


2) IE:


myDomElement.attachEvent('theirEventType', function()
  {
    /* some stuff here */
  }
);


…and until here all good…

So a basic “browser detecting” would be something like:


if(window.addEventListener)
{
  /* My W3C Friends */
}
else
{
  /* Evil Browsers */
}


Then I’ve added my dirty little code on it… to attach events on the 2 browsers…


if(window.addEventListener)
{
   myElement.addEventListener('click', function()
     {
       checkboxChange(this, my_array_of_fields);
     }, false
   );
}
else
{
   myElement.attachEvent('onclick', function()
     {
       checkboxChange(this, my_array_of_fields);
     }
   );
}


As said before… I have a look at the result on Firefox… and all works fine… then I move to IE… and THUNDERSTORMS!
The above code (OF COURSE) doesn’t work!

Why? WHY???
After digging for a while I’ve figured out that the name of the object “this” passed to the function

checkboxChange(...)

was not the name of the object I was passing.
I couldn’t even get the right element through the ID, because of another problem there is with IE!

document.getElementById('myId')

IE gets confused, if you have the name of an element, equal to the id of another element and that (not my choice) was the case.
So there we go, we have to find another solution!

Solutions? Workarounds?

Of course the easiest way (and also browser indipendent) is… to use a library that someone “maybe smarter than you” wrote already

For example:

YAHOO one


YAHOO.util.Event.addListener(myElement, 'click', function()
   {
     checkboxChange(this, my_array_of_fields);
   }
);


or my favorite one MooTools


myElement.addEvent('click', function()
   {
     checkboxChange(this, my_array_of_fields);
   }
);


Figuring out that there weren’t other “onclick” events in the page for the element I was applying events on, I’ve decided to don’t use any external javascript library for this project.
I’ve used instead an anonymous function associated to the onclick event listener of my element as below:


myElement.onclick = function ()
{
  checkboxChange(this, my_array_of_fields);
}


This… just for IE of course

For Firefox instead I’m still using the addEventListener!

Hopefully I’ve been helpful to someone with this article

See ya next!