Archive for the ‘ Javascript ’ Category

Fillter arrays, objects by multiple values by using underscore JS

We can filter arrays, objects by multiple values by using underscore
Useful to filter array values, large objects, using only matching values of a particular field

in this example, the code filters only managers from the employees object
list of names are used to filters.

      
      var employees = [
         {
           id: 1,
           name: 'Kumar',
           designation:'Manager'
         },
         {
           id: 2,
           name: 'Mani',
           designation:'Engineer'
         },
         {
           id: 3,
           name: 'Akash',
           designation:'Manager'
         },
         {
         	id:4,
          name: 'Sruthi',
           designation:'Tester'
         }
      ];
      
      var managerNames =[ 'Kumar','Akash' ];
    
    var Managers = _.filter(employees, function(i) {
        return this.keys.indexOf(i.name) > -1;
    }, { "keys": managerNames });

console.log(Managers);

Link to JS Fiddle to see it in action

Fetch / Read all email addresses from a web page using JavaScript

Recently I was looking some consultants mails ids and found some sites, in which the list of job consultants’ mail ids were listed with their names, address and email ids. But it was a tedious job to go thru the websites, classified portals pages to copy each and every mail id and save it to Excel sheet for further reference/process.
So I came up with this small script, which can be run from the Firebug or Chrome console.
just copy and paste this snippet into the console and call the findEmails function.
Calling the script is very easy. call the script as findEmails(). Voila. Worked as a charm.


function findEmails(){
var StrObj = document.body.innerText; var separateEmailsBy = ", ";
var email = ""; // if no match, use this
var emailsArray = StrObj.match(/([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z0-9._-]+)/gi);
if (emailsArray) {
email = "";
for (var i = 0; i < emailsArray.length; i++) { if (i != 0) email += separateEmailsBy; email += emailsArray[i]; } } return email; }

you may need to tweak a little bit to make it work for all email address patterns.

Snippet to Dynamically add rows to a table

This code snippet will help you to add rows dynamically in a html table.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert Table Row using DOM</title>
<script language="javascript">
function addRow()
{
var tbody = document.getElementById("table1").getElementsByTagName("tbody")[0];
var row = document.createElement("TR");
var cell1 = document.createElement("TD");
var inp1 =? document.createElement("INPUT");
inp1.setAttribute("type","text");
inp1.setAttribute("value","New row");
cell1.appendChild(inp1);
var cell2 = document.createElement("TD");
cell2.innerHTML = "label3";
var cell3 = document.createElement("TD");
cell3.innerHTML = "label4";
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
tbody.appendChild(row);
//alert(row.innerHTML);
}
</script>
</head>
<body>
<tableid="table1">
<tbody>
<tr>
<td><inputtype=textvalue="Original Row"></td>
<td>label1</td>
<td> label2</td>
</tr>
</tbody>
</table>
<inputtype="button"value="Insert Row"onClick= "addRow();">
</body>
</html>

Most of the code is self explanatory, so am leaving it unexplained. If anybody needs help, post your questions, will help you.

Get computed Width of an HTML Element

This function will help you to get the computed width(actual width) of an HTML Element/Object. For example you may be using a div to show some contents inside that. But want to calculate the actual width of the div after loading the contents inside it. There comes this function to help you.
function getComputedWidth(theElt){
var browserName=navigator.appName;
if (browserName=="Microsoft Internet Explorer"){
var is_ie=true;
} else {
var is_ie=false;
}
if(is_ie){
tmphght = document.getElementById(theElt).offsetWidth;
}
else{
docObj = document.getElementById(theElt);
var tmphght1 = document.defaultView.getComputedStyle(docObj, "").getPropertyValue("width");
tmphght = tmphght1.split('px');
tmphght = tmphght[0];
}
return tmphght;
}
< div id="demo" onclick="alert(getComputedWidth('demo'));">hello there< /div>

To know the computed height of an element see here

Get computed Height of an HTML Element

This function will help you to get the computed height (actual height) of an HTML Element/Object. For example you may be using a div to show some contents inside that. But want to calculate the actual height of the div after loading the contents inside it. There comes this function to help you.


function getComputedHeight(theElt){
var browserName=navigator.appName;
if (browserName=="Microsoft Internet Explorer"){
var is_ie=true;
} else {
var is_ie=false;
}
if(is_ie){
tmphght = document.getElementById(theElt).offsetHeight;
}
else{
docObj = document.getElementById(theElt);
var tmphght1 = document.defaultView.getComputedStyle(docObj, "").getPropertyValue("height");
tmphght = tmphght1.split('px');
tmphght = tmphght[0];
}
return tmphght;
}

< div id=”demo” onclick=”alert(getComputedHeight(‘demo’));”> hello there< /div>
Thanks to Richard A who made the code complete to run as a demo.

To know the computed width of an element see here

Check if a firefox addon is installed or not

While trying to check if one of my firefox add-on is installed or not, I found that, Chrome resources can no longer be referenced from within <img>, <script>, or other elements contained in, or added to, content that was loaded from an untrusted source. This restriction applies to both elements defined by the untrusted source and to elements added by trusted extensions.

Before firefox 3 we were able to check if a firefox add-on is installed or not as following.
using an image tag to load an image in the firefox add-on.
Once loaded trigger the onload event to verify the add-on is loaded.
For example,
< img src=”chrome://youraddonname/content/skin/images/anyimagefilename” width=”0″ height=”0″ onload=”function call here()” style=”visibility:hidden” >;

But this stopped working after firefox 3 and later versions due to security restrictions.
And the extensions won’t interact with the web page in any way.

Read the rest of this entry »

Disable Text Selection in a web page

Here is a sample code snippet, which can be used to disable the text selection in a web page.

But selecting text inside input fields, such as Textarea, textbox and Select (combo) box is not restricted.

//get the browser name,version details
function agent(v) { return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); }

//variables to hold the browser names, and versions
var is_ie = false;
var is_ff15 = false;
var is_ff20 = false;
var is_ff30 = false;
if(agent('msie'))
    is_ie = true;
else if(agent('firefox/3.0.0'))
    is_ff30 = true;
else if(agent('firefox/2.0.0'))
    is_ff20 = true;
else if(agent('firefox/1.5'))
    is_ff20 = true;

/* This is the function which Disables Text Selection in the Document*/
function selstart(e){
    //if not ie and !not ie then return
    if (!agent('msie') && !(!agent('msie')))
        return;

    var selobj=(!agent('msie'))? e.target : event.srcElement
    var topelement=(!agent('msie'))? "HTML" : "BODY"

    if(agent('msie')){
        if ( selobj.tagName!=topelement &&
                (selobj.tagName=='SELECT' ||
                selobj.tagName=='TEXTAREA' ||
                selobj.tagName=='INPUT')
              ){
                  selobj.select();
                  return true;
              }
        else
            return false;
    }else{
        document.body.style.MozUserSelect='none';
        document.body.style.userSelect='none';
    }

}
document.onselectstart=selstart;

This function uses another function named agent to get the browser agent name, whether the user’s browser is Firefox or IE or others. And some global variables for storing browser names and versions.

Whenever a select text event (onselectstart) is fired, the function selstart is executed and the text selection inside the web page is restricted. The function will return true to disable text selection.

Javascript function to Validate IP Address (IPv4)

In one of my current project ( Front end for an ISM Device ), I’ve to validate IP Addresses using JavaScript.

And wrote this function fnValidateIPAddress

The function takes an IP Address as input string and returns either true if the input string is a valid IP Address or false if not. This function checks for the Class C IP Addresses only. This function can be changed further to validate different IP Classes.

Read the rest of this entry »

Log Javascript Errors Part 2

So far we have seen how to trap the javascript errors in Part 1. Now we have
the data. We will see now, how to send data to the server using AJAX.

Send Data to Server

ajaxCtrl(
    function(){
        return true;
    },"ajxerrorLogger.php",theData
);

The remote file is “ajxerrorLogger.php”.

I?ve used PHP for this.
Instead you can use ASP, JSP also.

This is used to receive the
data sent from the JavaScript error handling function. That’s it.
Our JavaScript errors are now sent to the server silently.

What Next? In the server side, we have to code the “ajxerrorLogger.php”

Receive Data and Write into a File

if($_POST && $_POST['file']!=''){
    $filename = "./errlogs.txt";
    $fh = fopen($filename,"a+");

    //the content is in the form
    //Date    File    LineNo    Error Message
    //(tab delimited)
    $fcontent = date("d/m/Y h:i:s", mktime())."\t".
    $_POST['file']."\t".$_POST['line']."\t".$_POST['err']."\r\n";
    if (is_writable($filename)) {
        if (fwrite($fh, $fcontent) === FALSE) {
        }
        fclose($fh);
    }

}

$fh = fopen($filename,"a+");

 Read the rest of this entry »

Log JavaScript Errors – Part 1

Introduction

Recently in one of my projects, I’m informed by my QA team
that, in some pages they?re experiencing crashes, or some pages not functioning
properly after sometime.

Our team looked for options where there can be a code
generating errors. And the feedback I got, from the QA team was not helpful to
reproduce the error. But there is no doubt to look for areas only in JavaScript
coding, and not other than JavaScript coding.

Normally while releasing a project, what I would do is, just
escape/bypass the JavaScript errors. That means, whenever there is a JavaScript
error, it will not be reported to the user and they are suppressed.

Background

Following is the function, we can normally use to suppress the JavaScript errors.

var isDebugging = true;
function ErrorSetting(msg, file_loc, line_no) {
    var e_msg=msg;
    var e_file=file_loc;
    var e_line=line_no;
    var error_d = "Error in file: " + file_loc +
                          "\nline number:" + line_no +
                           "\nMessage:" + msg;
    if(isDebugging)
        alert("Error Found !!!\n--------------\n"+error_d);

     return true;
}
window.onerror = ErrorSetting;

window.onerror = ErrorSetting; this line will call the ‘ErrorSetting’
function, whenever there is a JavaScript error. And the function will return
true. So the user will not get JavaScript
error notifications and won’t be
annoyed. Read the rest of this entry »

Feedback Form