jQuery hasClassName prototypejs function: How to check if element has class with JQuery

To determine if an element has a class register with jQuery you can use the function .hasClass() which is shorter for .hasClassName() in prototypejs

if($('#target').hasClass('foo')){
  // Do something
}

// With Prototype js you would use...

if($('target').hasClassName('foo')){
  // Do something
}

jQuery add class to element: How to add a class to a div

Adding class or removing a css class from an element with jQuery or Prototypejs is very simple.

// With JQuery

$('#target').addClass('bar');

// With Prototypejs...

$('target').addClassName('bar');

// Removing a class with Jquery

$('#target').removeClass('bar');

// With Prototypejs...
$('target').removeClassName('bar');

Once again, jQuery has shorter function names which is awesome!

IE Javascript Error: object doesn't support this property or method

Error: Object doesn't support this property or method

I debug the DOM and noticed that none of the extended prototype functions provided by the prototype.js framework (http://prototypejs.org) were register with IE.

No problems with FF (as usual) and other browsers but IE was just not registering the extended functions. After some time debugging I concluded that the error was caused by multiple prototype versions. I didn't have multiple prototype.js files register but instead one of the chat software used in the site had it's own prototype functions that were conflicting with the prototype function $().

Removing the function $() from the chat software solve the problem.

The other solution was to register the prototype.js file at the end of the page so that I will override any other prototype functions registered.


Solution:
Check for multiple prototypes.

Javascript to show and hide input default text

Here is a script that I got from one of the sites I worked on.
It has come very handy and re-usable in other sites.

Just add the class 'default_value' to your Textbox or input controls <input class="'default_value' /> and that's it. When you click on the textbox the default text will disappear. If you don't enter any value on blur the default value will be displayed in the input again.

IE7 very picky with Javascript & Json: IE counts null objects.

I just came across with another debugging situation with javascript code in IE7.
IE7 takes in consideration null objects.

For example, below is a JSon array of objects.

var markers = [
{
'abbr': '1',
'latitude':33.029764,
'longitude':-97.090090,
 'dealer': {
    "companyName": "Armstrong Office Interiors","address1" : "3205 Dwyer St","city" : "Flower Mound","state" : "TX","website": "www.armstrongofficeconcepts.com","phone" : "469-568-6648", "address2": "", "zipCode": "75022" , "fax": "(469) 293-6602" , "email": "jarmstrong@armstrongoffice.com" , "dealerType": 1 , "distance": "3.0" , "showcase": "N" , "locationId": "19830" , "contactName": "Armstrong Office Interiors" , "gsa": "Y"}
,
 'wp':'n'
}];

In this case as you can see there is only 1 object.
If you do markers.length, you get a total of 1. And that's correct.

No lets say we add a comma "," to the end of the first object.

var markers = [
{
'abbr': '1',
'latitude':33.029764,
'longitude':-97.090090,
 'dealer': {
    "companyName": "Armstrong Office Interiors","address1" : "3205 Dwyer St","city" : "Flower Mound","state" : "TX","website": "www.armstrongofficeconcepts.com","phone" : "469-568-6648", "address2": "", "zipCode": "75022" , "fax": "(469) 293-6602" , "email": "jarmstrong@armstrongoffice.com" , "dealerType": 1 , "distance": "3.0" , "showcase": "N" , "locationId": "19830" , "contactName": "Armstrong Office Interiors" , "gsa": "Y"}
,
 'wp':'n'
}
, // Added extra comma here.
];

run markers.length again and now you will get a count of 2.
In firefox you will still get a count of 1.

Hide Submit button to prevent double click using JavaScript in .NET

Here is snippet of JavaScript to hide the submit button to prevent users from double-clicking on the button multiple times causing several server requests.

What I like to do is hide the submit button and show a message to notify the user that the action is in progress.

This is my front-end code. I have an image button that OnClick is submits an order.

<asp:ImageButton ID="btnPlaceOrder" runat="server" Visible="False" OnClick="btnPlaceOrder_Click" />
<div id="process_message" style="display:none;">
<p> Processing your order...</p>
</div>



The code-behind looks like this:


btnPlaceOrder.Attributes.Add("onclick", "this.disabled = true;this.hide(); $('process_message').show();" + ClientScript.GetPostBackEventReference(btnPlaceOrder, null) + ";");



JavaScript Validate Email using RegEx

Use the code below with an asp.net custom validator to check if an email is valid.
The code below check for a value if no value is provided then is not a valid email.

The pattern below will work with gmail's email address with "+" such as johnsmith+test@gmail.com

function ValidateEmail(sender, args)
{
   if(args.Value.trim().length > 0)
   {
       var ex = /^([a-zA-Z0-9_.+-])+@([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
       var re = new RegExp(ex );
       
       if(re.exec(args.Value))
       {
           args.IsValid = true;
       }
       else
       {
           args.IsValid = false;
       }
      
   }
   else
   {
       args.IsValid = false;
   }
}

Credit Card Expiration Date Validation -Javascript Function

function ValidateExpDate()

{

    var ccExpYear = 20 + $F('<%= txtCCExpirationYear.ClientID%>');

    var ccExpMonth = $F('<%= txtCCExpirationMonth.ClientID%>');

    

    var expDate=new Date();

    expDate.setFullYear(ccExpYear, ccExpMonth, 1);



    var today = new Date();



    if (expDate<today)

    {

        // Credit Card is expire

        return false;

    }

    else

    {

        // Credit is valid

        return true;

    }

}

String.Format() JavaScript equivalent to .NET

Here is a JavaScript function to format strings on the Client-Side as if you were using in the the .NET String.Format() method in your code-behind.

String.Format = function()
{


    // Check for arguments
    if( arguments.length == 0 ) return null;
    // Get the string which is the first argument
    var stringToFormat = arguments[0];
    for(var i=1; i < arguments.length;i++)
    {
        var replaceExpression = new RegExp('\\{' + (i-1) + '\\}','gm');
        // Replace argument
        stringToFormat = stringToFormat.replace(replaceExpression, arguments[i]);
    }

    // Return the formated string
    return stringToFormat;

}

Alternative you can used the JavaScript prototype framework 'Template' object to do string formatting using variable names instead of argument indexes.

See http://prototypejs.org/api/template for the Template object API.