breaking into the unknown…

jquery utilities class

Leave a comment

Recently, I need to remove trailing and leading white space from password if entered by user unknowingly . I have did it earlier but forget the name of the function. Well it is the trim function to do the work. But good thing is that, searching for it this time I come to know that, trim belong to jquery utilities class and it have a number of other helpful function within it. I decided to maintain this post and keep adding, the different function here, whenever I get chance to use them in my code. You can find the detail of this class here

=> trim()

Description: Remove leading and trailing spaces

The $.trim() function removes all newlines, spaces (including non-breaking spaces), and tabs from the beginning and end of the supplied string. If these white space characters occur in the middle of the string, they are preserved. detail available here


Let we have a form to reset password as below, with password and confirm_password input fields and a submit button

<form method="post" id="update-password">
  <input type="password" name="user[password]" id="user_password" />
  <input type="password" name="user[password_confirmation]" id="user_password_confirmation" />
  <input type="submit" value="Update" name="commit" class="btn btn-primary password_reset" />

Now, the jquery code is as below. On click of submit button, we will collect the password and confirm_password value, apply trim() function to it and reinsert the value again

      var password = $("#user_password").val().trim()
      var confirm_password = $("#user_password_confirmation").val().trim()

=> data()

This method allow you to add arbitrary data to any DOM element on fly or read the different data elements associated with a DOM element. The detail documentation is available here


.data(“key”, “value”) # will attach data attribute key set to value

.data(“key”) # will return data hold by key

Example 1: Reading data attribute from form input or anyother DOM element

Adding data element to form input. Let our password reset form need some additional functionality, say if the user has already change the password, he should not be allowed to change it again, also we need user id or email etc in our jquery validation when the submit button is click. So in this case we can pass these values to data attribute of our button or password input filed or any other DOM element within the form. let pass it to password input. So Now our form will look  like as below

<form method="post" id="update-password">
  <input type="password" name="user[password]" id="user_password" />
  <input type="password" name="user[password_confirmation]" id="user_password_confirmation" 
   data-reset_already="yes" data-user_id="235" date-email="" />
  <input type="submit" value="Update" name="commit" class="btn btn-primary password_reset" />

If you are from ruby background, you can add data attribut to input elemnt with ruby syntex as below. assuming that your user object contain all the value i,e email, password_status etc, the bold line above will look as below and will generate exactly same input as above bolded input

<%= f.password_field :password, 'data-already_reset' => @user.password_status, 
'data-user_id' =>, 'data-email' => %>

Now, you can retrieve all these data value in the jQuery code as below:

      var status = $("#user_password").data('reset_already') #like data attached to password
               input filed here you can attach it to any element like <div> <p> <tr> etc
      var user_id = $("#user_password").data('user_id')
      var email = $("#user_password").data('email')
      alert(status) # I have just alerted the value, you can use it in any of your logic

Example 2: Attaching data to DOM element.

In previous example, the data attribute is added to the input element and retrieved in our jQuery function. Here we will add data attribute to DOM element on fly from our jquery code. I have inspected the element to which the code below add the test data , but do not find it added there as we have added in example one i,e I do not find any data-test=”Yes”, but on retrieving and alerting the data(“test”) it return the correct value. May be it has to do something with below description of data method in jQuery documentation, which is not very clear to me.

The method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore free from memory leaks. jQuery ensures that the data is removed when DOM elements are removed via jQuery methods, and when the user leaves the page

   var getelemnt = $("#user_password");'test', "No")

=> each()

It is iterator method which it iterate over collection of object, Array or Hash in jQuery. detail is available here .

Example :

Below code iterate over all the checkbox within a page and alert its value name and checked status.

$("input:checkbox").each(function(){ # $(this) object represent current element of the loop
alert($(this).val()) # return value of the checkbox
alert($(this).attr('name')) # return name of the checkbox
alert($(this).is(':checked')) # return checked status of the checkbox

Author: arunyadav4u

over 7 years experience in web development with Ruby on Rails.Involved in all stage of development lifecycle : requirement gathering, planing, coding, deployment & Knowledge transfer. I can adept to any situation, mixup very easily with people & can be a great friend.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s