CLID popup using Asterisk AGI and jquery

This post shows a plain CLID popup.

download the zipped files


Add the following code to /etc/asterisk/extensions_custom.conf

[custom-popupCLID]
exten => s,1,NoOp(CallerID is ${CALLERID(num)})
exten => s,n,set(cid=${CALLERID(num)})
exten => s,n,set(whois=${CURL(http://someurl/callers.php?callerid=${cid})})
exten => s,n,set(RES=${CURL(http://192.168.1.200/chpopup.php?cid=${cid}&cidn=${whois})})
exten => s,n,goto(ivr-9,s,1)  ;;;; Here you can pass the call to IVR
;exten => s,n,hangup

Here is the caller.php file from which we get the caller name (whois)

<?php
if(!isset($_GET['callerid'])){
 echo"NO POST DATA RECIEVED!!!";
}
else {
 //Get callerID via POST
 $callerid = $_GET['callerid'];
//    echo "Caller id is: $callerid";
 //Database parameters
 $database_name = "tbl_contacts";
 $server = "localhost";
 $username = "root";
 $password = "passworddb";
 //Connect to Database Server
 $connection = mysql_connect($server,$username,$password) or die(mysql_error());
 //Select Database
 mysql_select_db($database_name) or die (mysql_error());
 //Select CallerName from Guest table
 $table = 'contacts';
 $query = "SELECT concat_ws(' ',guests.firstname,guests.middlename,guests.lastname) as callerName
 FROM `{$table}`
 WHERE `phone` ='{$callerid}' OR `mobilephone`='{$callerid}' OR `skypeid`='{$callerid}'";
 //Echo the result.
 $result=  mysql_query($query) or die(mysql_error());
 if($row = mysql_fetch_array($result)){
//        echo "Caller Name is: ". $row['callerName'];
 $row['callerName'] = str_replace(' ','_',$row['callerName']);
 echo $row['callerName'];
 }//end while
 else echo "No_match_found";
}

?>

Finally, this is the PHP file where we use ajax + jquery on the client side to show popup.

<?
define("CID_TXT","/tmp/cid.txt");
$mtime = filemtime(CID_TXT);
if(isset($_POST['mtime'])){
 $post_mtime = strip_tags($_POST['mtime']);
 if($mtime != $post_mtime){
 $data = file_get_contents ("/tmp/cid.txt");
 $data=str_replace('_',' ',$data);
 echo "$data|$mtime";

 }
 else echo "NOT CHANGED";
 exit;
}
if(isset($_GET['cid'])){
 $fh = fopen(CID_TXT, 'w') or die("can't open file ");
 $stringData = $_GET['cid']."|".$_GET['cidn'];
 fwrite($fh, $stringData);
 echo "$stringData";
 fclose($fh);
 exit;
}

//else $mtime = $post_mtime;
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>POPUP Demo</title>
<link type="text/css" href="css/jquery-ui-1.8.11.custom.css" rel="stylesheet" />

 <!-- Our CSS stylesheet file -->
 <link rel="stylesheet" href="css/style.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script type="text/javascript" >
$(function(){
 var mtime = '<?global $mtime; echo $mtime?>';
 var timerId = 0;
 timerId = setInterval(function () {
 $.post(
 '<?=$_SERVER['PHP_SELF']?>',
 {'mtime':mtime},
 function(data){
 //var arr = [data];
 if (data != "NOT CHANGED"){
 $("#domach-2").html("Caller ID: "+arr[0]+"<br>Caller Name: "+arr[1]);
 arr[1].replace('_',' ');
 $("#domach-1").html("Caller ID: "+arr[0]+"<br>Caller Name: "+arr[1]);
 //alert(arr[0]+" - "+arr[1]);
 $('#domach-2').dialog("open");
 mtime = arr[2];
 }
 }
 );
 }, 1000);

 $( "#domach-2" ).dialog({
 autoOpen: false,
 show: "blind",
 hide: "explode",
 modal: true,
 position: ['right','bottom'],
 show: 'pulsate'
 });

});
</script>

</head>
<body>
 <div id="domach-1">Caller ID and Caller Name:</div>
 <div id="domach-2" title="Caller Detail">

 </div>
</body>

</html>

You may also like