buy proscar online

Archive for the 'jQuery' category

Preventing Xss Attack in Client Side

Jun 05 2012 Published by under jQuery, Uncategorized

If users are allowed to enter html content via a textfield or any other UI element,Chances are that your application might be prone to XSS Attack. Let us see,How we can Prevent XSS Attack in Such Scenarios

1)Html Encode(a.k.a Html Escape) the content entered by the user in the text field.Following function will come in handy,if you are using jQuery

function htmlEncode(value){
return $(‘<div/>’).text(value).html();

Here,Value is set as innerText and encoded innerHtml is retrieved

2)While displaying the user entered content,then decode the encoded content.Following function will come in handy,if you are using jQuery

function htmlDecode(value){
return $(‘<div/>’).html(value).text();

Here,Value is set as innerHtml and the innerText is retrieved

P.S:The above functions have really worked well for me till now.

No responses yet

Debugging With FireBug

Dec 23 2011 Published by under jQuery

Following is my Presentation on jQuery,Presented to my Team

No responses yet

jQuery Introduction

Dec 12 2011 Published by under jQuery

No responses yet

jQuery’s $.animate() API ‘s drawbacks

Sep 18 2011 Published by under jQuery, Uncategorized

While working with jQuery animate() API, Following are the issues,I faced.

1) CSS ClassName cannot be added.


I feel this is a biggest draw back of the animate() api. because we need to add css properties in the following tricky way,instead of adding ClassName straight away


$(“#foo”).animate({  ”margin-left” : “40px”,  ”width” : “300px” }, 1000);


Use the following plugin,which goes by the name as Animate to Class plugin.


2)Limited CSS properties supported by $.animate() API.

Some CSS properties like “background-color,color..” cannot be used in this $.animate() API.


This is the biggest drawback,Even though it is mentioned in the documentation.Developers mostly like to animate background-color in 50% of the use cases.


Following is the plugin,goes by the name “color” plugin has to be included,If you plan to use animate API to animate background color.





No responses yet

Testing Javascript code Using Qunits (jQuery Testing Framework)

Jul 18 2011 Published by under jQuery

In My Personal Experience,If you develop a feature in Javascript, you must add Unit Test cases for your code.Having Unit Test Cases will really helpful in the following scenarios.

1)While Refactoring the code for improving the code
2)While Updating the code, To introduce an Enhancement

Comprehensively,If you are going to change your code,Unit test cases will really give you confidence,The changes added by you did not break the existing implementation.

In-Browser Testing:

Basically,In-Browser Testing Frameworks allows you to run your test cases by loading the html page in the browser.Following are some of the popular In-Browser testing frame works available


I prefer Qunit.js,because it is very easy to integrate (doesn’t need any dependencies) and most popularly used now.If you want to start writing Unit Test cases using Qunit.js.Here is my help for you.Please Follow these steps


Create an Html File and include the Qunit.js and Qunit.css ,Which will be used for running the test suites created via In-Browser Testing.


<script type=”text/javascript” src=””></script>
<script type=”text/javascript” src=””></script>
<h1 id=”qunit-header”>QUnit example</h1>
<h2 id=”qunit-banner”></h2>
<h2 id=”qunit-userAgent”></h2>
<div id=”qunit-fixture”>test markup, will be hidden</div>



Create javascript file, To write the unit test cases needed to test  javascript code. Include this file in your test html page .


If your javascript file name is dragdrop.js, then your new javascript test file will be dragdrop.test.js.Include both the dragdrop.js and dragdrop.test.js in the above said html file.



Create a module to test a Feature / Function.In Setup and Tear down methods initialize and destroy the variables needed for testing.


 module(“Module Name”,
setup logic should be written is done here,called before each test case (test() method)
this        — – refers to the module.
this.variableName   —  to  add a variable,which can be accessed inside the test case
Add Html elements,if needed for testing
clean up is done here, called after each test case execution (test()  method)
this.variableName = null  —  to remove the variables,added during the setup method
Remove Html elements added while setup



Create Test Cases,To test the javascript code using assertions


Test Case: Test Case Should be written after a module

test(“Name of the test case”,
1)call the function to be tested
2)assert the results



Following is the sample code(Template), which will be useful for writing a testcase using Qunits


test(“Name”,function(){ equal(A,E,M); notEqual(A,E,M);

A — actual result
E — expected Result
M — Message

No responses yet

Use document.getElementById instead of $(‘#Id’)

Jul 12 2011 Published by under jQuery

Three years back,I used prototype.js extensively. In prototype.js ‘$’ is used instead of document.getElementById(“”).But In these three years,I moved from prototype to jQuery,due to its awesomeness. I will write a separate post about “Why I love jQuery than Prototype.js”.

When I started using jQuery,Due to my Prototype.js background, I used $(‘#id’) extensively.But when i looked at the source code of jQuery,I came to know that $(‘#id’) does two things

1)It parses the selector passed inside $(‘selector’)

2)Uses the document.getElementById(‘id’) , Native DOM API supported across all the browsers

This will be costly,Because it does the costly operation of the regex parsing to identify the selector,Before using document.getElementById(). So I suggest Javascript Programmars to use document.getElementById instead of $(‘#id’) , Please take a look at the performance test made at following link

Following are the Situations, where $(#id) API doesn’t return the element,where as document.getElementById(id) does return the element

1)If the Id contains spaces

$(‘#div id’) will not work (Even though having space in Id is not a preferred way, but if the id is generated dynamically based on some strings.this issue will arise.)

document.getElementById(div id) will return the element

2)Using remove() or any other jQuery API,if the $(”#id) does not return any element will cost you a lot.

$(‘#div id’).remove() will lead you to the drastic performance issues.

Instead Use :
var element = document.getElementById(div id);

Please do share, If you have faced few more issues with $(‘#id’)

No responses yet

jQuery.attr() Issues in jQuery 1.6

Jul 08 2011 Published by under jQuery

When I Upgraded my jQuery Version from  1.4.2 to 1.6 . Suddenly, My Custom implementation of  Table Row Reordering Via Drag n Drop Plugin , which was working before, started breaking. After a close Inspection into the issue.Issue is raised due to the API Change made by jQuery in version 1.6

Following is the big Change made by jQuery in 1.6.

jQuery introduced a method called jQuery.prop(). To segregate the API used for getting DOM properties of an element.Since ‘rowIndex’ is an table row property added by the DOM.jQuery.attr(‘rowIndex’) stopped returning the rowIndex Value.

To get the attributes value of an Html Element,Use the Following API


The above code is equivalent to


Following are Some of the attributes supported by the above jQuery API

1) src

2) href

3) customAttributes such as data-[customName]


To get the attribute property of an Element Provided by DOM,Use the Following API


The above code is equivalent to


Following are Some of the properties supported by the above jQuery API

1) rowIndex

2) checked


So Folks,Before Upgrading to any new Version of jQuery.Please Go through their Change Log.So that you can avoid the mistake i made.






No responses yet

Bind First jQuery plugin

Jul 08 2011 Published by under jQuery, Uncategorized

While working with my co developers,I had a Following Use case

1)An Inline On Click Event Handler is attached to a button,which is created from the back-end Java Code

 <input onclick=”executeInlineFunction()” type=”button” />

2)A CallBack Function,Which has to be executed before inline Callback function on click event of the button.


Following is the jQuery Plugin,Which helps you to add a function at the top of event handlers array

 $.fn.bindFirst = function(name, fn)
 this.bind(name, fn);    
 var handlers ='events')[name.split('.')[0]];     
 var handler = handlers.pop();     
 handlers.splice(0, 0, handler); 

Copy the above code and below is the example to use it.







When the onclick event is triggerred then the event handlers are executed in the stacked order.

Here is how i have solved the problem:

I added the existing inline onclick handler into the data events and added my “customFunction” using bindFirst plugin with the following code




$(button).attr(‘onclick’) = ”;

Please share your thoughts,if you have any other solution.

No responses yet