JavaScript – Page 2 – Alex Arriaga

alex-arriaga July 22, 2013

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

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:
JavaScript

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

Join me, have fun and learn!

Recent Posts

Day quote…

Recent Comments

Categories

Archives

Join me, have fun and learn!

Recent Posts

Archives

Recent Comments

Categories

What would you like to know about?

Tag Archives:JavaScript

Join me, have fun and learn!

Tag Cloud

Recent Posts

Recent Comments

Join me, have fun and learn!

Recent Posts

Day quote…

Recent Comments

Categories

Tag Cloud

Archives

Join me, have fun and learn!

Recent Posts

Archives

Tag Cloud

Recent Comments

Categories

Tag Archives:
JavaScript