jQuery – Page 2 – Alex Arriaga

alex-arriaga November 6, 2013

How to know jQuery version using Firebug console

This is a little tip for today: sometimes, you don’t have access to know what version of jQuery is loaded in a website or web application, so you can use the Firebug console to know what version is actually loaded. Just, type one of the next lines and you will obtain that data.

Both major version version 1.x and version 2.x have a property called jQuery.fn.jquery, we could check it:

//  It returns something like: "1.9.1"
console.log(jQuery.fn.jquery);

1 2	// It returns something like: "1.9.1" console.log(jQuery.fn.jquery);

// Of course we know jQuery == $, then we can use next shorthand syntax
console.log($.fn.jquery);

1 2	// Of course we know jQuery == $, then we can use next shorthand syntax console.log($.fn.jquery);

Also, we can use an alternative syntax:

// Alternative syntax
console.log(jQuery().jquery);

// or shorthand method
console.log($().jquery);

// Alternative syntax

console.log(jQuery().jquery);

// or shorthand method

console.log($().jquery);

That’s it!

Be happy with your code!

alex-arriaga August 2, 2013

Regular expression to validate an HTML hexadecimal color in jQuery

jQuery, Web Development 1 Reply

Today, I would like to share a useful code that could help when you need to know if a color is correctly entered in an input field. So, here is an example of how to validate an HTML hexadecimal color by using a regular expression in JavaScript.

The regular expression to accomplish this task is:

^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$

1	^#([A-Fa-f0-9]{6}\|[A-Fa-f0-9]{3})$

Explanation:

^ – Represents the beginning of the string

# – Number symbol (to accept only colors starting with “#”, like “#33cc55”)

( – Indicates the beginning of the group

[A-Fa-f0-9]{6} – Accepts six characters: letters among A to F, a to f or digits.
| – An “OR” condition
[A-Fa-f0-9]{3} – Accepts three characters: letters among A to F, a to f or digits.

) – Indicates the end of the group

$ – Represents the end of the string

Now, for testing we need a little HTML like this:

<div class="testing">
	<input id="links_color" name="links_color" value="#445566" />
	<a id="validate" class="btn" href="#">Validate</a>
	<div id="errors_output"></div>
</div>

<a id="validate" class="btn" href="#">Validate</a>

</div>

And this code uses the regular expression in JavaScript:

	(function($){
		$(document).on('ready', function(){
			function checkRegexp ( o, regexp, n, errors_output ) {
				if ( !( regexp.test( o.val() ) ) ) {
					o.addClass( "ui-state-error" ); // Uses a jQuery UI class
					errors_output.html("Error: " + n);

					return false;
				} else {
					errors_output.html("Correct! ");
					return true;
				}
			}

			$("#validate").on('click',function(){
				var links_color = $("#links_color"),	// This read a DOM object (input)
				errors_output = $("#errors_output");

				var valid = checkRegexp(
						links_color,
						/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,
						"Enter valid colors like #42AB56",
						errors_output
						);
			});

		}); // ends document ready
	})(jQuery);

(function($){

$(document).on('ready', function(){

function checkRegexp ( o, regexp, n, errors_output ) {

if ( !( regexp.test( o.val() ) ) ) {

o.addClass( "ui-state-error" ); // Uses a jQuery UI class

errors_output.html("Error: " + n);

return false;

} else {

errors_output.html("Correct! ");

return true;

}

$("#validate").on('click',function(){

var links_color = $("#links_color"), // This read a DOM object (input)

errors_output = $("#errors_output");

var valid = checkRegexp(

links_color,

/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/,

"Enter valid colors like #42AB56",

errors_output

);

});

}); // ends document ready

})(jQuery);

If you prefer to test this code in a complete example you can download it! http://www.alex-arriaga.com/wp-content/uploads/files/compressed/demo-regex-example.zip

That’s it!

Be happy with your code!

—

Alex Arriaga

alex-arriaga July 22, 2013

Validating if a jQuery plugin exists before running code that use it

jQuery, Web Development No Reply

When we are creating plugins or simple code in jQuery and there is a single or many plugin dependences among them, a common task is to implement a mechanism to validate if a jQuery plugin exists before running “depending” code, for example if we have this code and we have not included jqprint (a nice plugin to print a fragment of an HTML document), then an error will appear indicating that jqprint function is undefined.

(function($) {
    $(document).ready(function() {
        $(".print-this-section").on('click', function(){
            $("#section-to-print").jqprint();
        });
    });
})(jQuery);

(function($) {

$(document).ready(function() {

$(".print-this-section").on('click', function(){

$("#section-to-print").jqprint();

});

})(jQuery);

So, in order to solve this “undefined” error we could add a little validation before running jqprint code.

(function($) {
    $(document).ready(function() {
 		if( jQuery().jqprint ){ // Verifying jqprint exists
	        $(".print-this-section").on('click', function(){
	            $("#section-to-print").jqprint();
	        });
		}
    });
})(jQuery);

(function($) {

$(document).ready(function() {

if( jQuery().jqprint ){ // Verifying jqprint exists

$(".print-this-section").on('click', function(){

$("#section-to-print").jqprint();

});

}

});

})(jQuery);

With this simple code, you would be able to avoid errors in your code when a plugin is not defined.

That’s it!

Be happy with your code!

—

Alex Arriaga

alex-arriaga July 17, 2013

How to set expiry date of a cookie (using jQuery Cookies plugin)

jQuery, Web Development 2 Replies

In a previous post I explained what is the process for Saving a complex JSON object in a cookie by using jQuery (demo included in PHP). Now, I would like to add some related information about how to set an expiry date of a cookie using the same plugin (jQuery Cookies).

First of all, it is important to know that an expire date is just a valid JavaScript Date Object, I mean, you will only need to create a date and then assign this to an array of options when you save your data in a cookie. Let me explain using a little example:

function setUserConfigInCookie(){
      var expireDate = new Date;
      expireDate.setDate(expireDate.getDate() + 7); // It expires in a week

      var options = {
        path: '/',
        expiresAt: expireDate
      }

      userConfig = {}; // This is a valid JSON object that you need to save in a cookie
      $.cookies.set( 'userConfig', userConfig, options);

      // console.log('Expires=' + expireDate.toGMTString());
    }

function setUserConfigInCookie(){

var expireDate = new Date;

expireDate.setDate(expireDate.getDate() + 7); // It expires in a week

var options = {

path: '/',

expiresAt: expireDate

}

userConfig = {}; // This is a valid JSON object that you need to save in a cookie

$.cookies.set( 'userConfig', userConfig, options);

// console.log('Expires=' + expireDate.toGMTString());

}

With this simple code we can save a cookie (complex JSON object) and set an expiry date (in this example the cookie is going to expire in a week). If you want to verify that all is working, you could search for your cookie in your favorite browser, for example next image uses Firefox to see this cookie:

That’s it at this moment.

Be happy with your code!

—

Alex Arriaga

alex-arriaga July 10, 2013

Saving a complex JSON object in a cookie by using jQuery (demo included in PHP)

jQuery, Web Development 8 Replies

Today, I spent almost three hours to test and implement a mechanism to save a complex JSON object and get it to render in a HTML output,, for this reason I would like to explain what was the ~~best~~ easiest way that I found for saving my object.

First, I would recommend you to be sure that your object is well-created, I mean, it is important that your JSON object is according to JavaScript Object Notation (you can visit this link to read more about: http://www.json.org/).

Second, I have used some compatible plugins with jQuery (I have tested this plugins using jQuery 1.8.2, this because in my project jQuery had already existed, also I have tested in jQuery 1.10.2), In a nutshell, we need the next JavaScript files:

Creating our complex JSON object

I have decided to use PHP to create our testing object (because most of developers have knowledge in this programming language).

// An array to simulate a complex JSON object
		$userSettings =  array(
			"personal_information" => array(
				"name" => "Alex",
				"last_name" => "Arriaga"
				),
			"extra_information" => array(
				"twitter" => "alex_arriaga_m",
				"facebook" => "alex.arriaga.m",
				"website" => "http://www.alex-arriaga.com/",
				"programming_languages" => array("HTML5", "CSS3", "JavaScript", "PHP", "Java", "C# .NET", "AWK", "LESS", "XML")
			)
		);

		// Creating the JSON object
		$jsonObject = json_encode($userSettings);

// An array to simulate a complex JSON object

$userSettings = array(

"personal_information" => array(

"name" => "Alex",

"last_name" => "Arriaga"

"extra_information" => array(

"twitter" => "alex_arriaga_m",

"facebook" => "alex.arriaga.m",

"website" => "http://www.alex-arriaga.com/",

"programming_languages" => array("HTML5", "CSS3", "JavaScript", "PHP", "Java", "C# .NET", "AWK", "LESS", "XML")

)

);

// Creating the JSON object

$jsonObject = json_encode($userSettings);

Saving and getting our complex JSON object

Now, we can create a simple JavaScript code to save our JSON object and get it later.

	(function($){
		$(document).on('ready', function(){
			//A cookie by the name 'userSettings' now exists with a serialized copy of $userSettings
			$.cookies.set( 'userSettings', <?php echo $jsonObject; ?> );

			//A variable named 'userSettings' now holds the unserialized object, it should be identical to the PHP variable 'userSettings'
			var userSettings = $.cookies.get( 'userSettings' );

			// Do something with the values read from cookie
			console.log(userSettings);
		});
	})(jQuery);

(function($){

$(document).on('ready', function(){

//A cookie by the name 'userSettings' now exists with a serialized copy of $userSettings

$.cookies.set( 'userSettings', <?php echo $jsonObject; ?> );

//A variable named 'userSettings' now holds the unserialized object, it should be identical to the PHP variable 'userSettings'

var userSettings = $.cookies.get( 'userSettings' );

// Do something with the values read from cookie

console.log(userSettings);

});

})(jQuery);

Verifying result

To see the saved object please use Firebug (in cookie tab). See next images like a demo of this.

Figure 1. Saving JSON object

Figure 2. Getting JSON object and verifying in Firebug console

It is possible to configure several parameters, but I think is better for you read them in the official github page of this plugin: https://code.google.com/p/cookies/

You can download this example code for testing more parameters or personalize according to your project. Download here.

That’s it. Be happy with your code!

—

Alex Arriaga

alex-arriaga June 28, 2013

The easiest way to check if an element exists with jQuery

jQuery, Web Development 1 Reply

When you need to know if an element exists in the DOM (Document Object Model), only uses this small code:

<script type="text/javascript">
(function($){
	$(document).on('ready', function(){
		if( $("element").length ){
			// Do something :)
		}
	});
})(jQuery);	
</script>

(function($){

$(document).on('ready', function(){

if( $("element").length ){

// Do something :)

}

});

})(jQuery);

</script>

The length property returns the number of elements that match with our selector. For example, imagine that you have the next HTML estructure:

<div class="parent">
	<ul>
		<li><a href="#">Some link</a></li>
	</ul>
	<div class="child"></div>
</div>

<ul>

</ul>

</div>

If you want to know if the element with class=”child” exists, just it is necessary to do:

<script type="text/javascript">
(function($){
	$(document).on('ready', function(){
		if( $(".child").length ){
			alert("Child exists");
		}
	});
})(jQuery);	
</script>

(function($){

$(document).on('ready', function(){

if( $(".child").length ){

alert("Child exists");

}

});

})(jQuery);

</script>

That’s all at this moment, be happy with your code!

—

Alex Arriaga

What would you like to know about?

Alex Arriaga

Tag Archives:
jQuery

How to know jQuery version using Firebug console

Regular expression to validate an HTML hexadecimal color in jQuery

Explanation:

Validating if a jQuery plugin exists before running code that use it

How to set expiry date of a cookie (using jQuery Cookies plugin)

Saving a complex JSON object in a cookie by using jQuery (demo included in PHP)

The easiest way to check if an element exists with jQuery

Join me, have fun and learn!

Recent Posts

Recent Comments

What would you like to know about?

Tag Archives:jQuery

Explanation:

Join me, have fun and learn!

Tag Cloud

Recent Posts

Recent Comments

Tag Archives:
jQuery