Tag: jQuery

How to merge Objects together in JavaScript

How to Merge Objects in JavaScript

Merging objects together in JavaScript isn’t very difficult although there’s quite a few different ways that it can be done.

Note, I’m not covering deep cloning for the sake of simplicity although this can be easily done through most of these different methods.

Continue reading

Using jQuery in Visualforce

jQuery is the most utilized JavaScript libraries and can be easily be integrated into any visualforce page regardless of whether it’s meant for your internal users or on a force.com site. jQuery is usually used for manipulating elements in the DOM, animation or even event handling. Usually I use it for doing some in page validation on form fields, so that we don’t have to post back to the server to find out if something is valid or not.

Before jQuery can be used in the visualforce page, it needs to be referenced. I recommend using the script hosted on a CDN by either jQuery or google or Microsoft. If you are interested in using googles, you can find it on the google developers site.

Here’s how to include it in the page (if using Google’s CDN):

<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js />;

If you decide to host jQuery yourself, you’ll need to do something like the following. Your value could be different, I’m assuming you’ve uploaded into a static resource called “scripts.zip” which has jQuery named as jQuery.js.

<apex:includeScript value="{!URLFOR($Resource.scripts, '/jQuery.js')}"  />

After including jQuery, we need to put jQuery in noconflict mode because Salesforce uses Prototype and references the $ sign. Usually I assign j$ to be used instead of simply typing jQuery instead of $.

<script>
j$ = jQuery.noConflict();		    
</script>

And now, whenever you want to use jQuery in the javascript in your visualforce page you will need to use j$ instead.

Here’s an example of how to do it:

j$(function() {

doSomething();

});

instead of:

$(function() {

doSomething();

}

Note: it’s best to avoid duplicating code in each page, so consider doing this in a custom visualforce component or using a visualforce master page.

And finally, always set an id or class on any element that you would want to reference in javascript. The engine that converts visualforce components into actual html mangles the ids quite a bit. It’s easiest to make use of the attribute ends with method because the managled ids contain special characters that need to be escaped.

Example Element:

<apex:inputText value="{!account.Name}" id="acc_Name" />

To reference the example element, you would then need to do the following:

j$('[id$=acc_Name]')

Hope this helps!

Disabling Caching on All AJAX in jQuery

It’s no secret that many of us that use javascript regularly love jQuery because it handles a lot of the cross browser issues and makes our lives so much easier.

The .ajax function makes use of caching by default, but we can override this by creating a function called .ajaxSetup and adding cache: false in the function.

$.ajaxSetup ({
    cache: false
});

You can of course take advantage of this and create even more verbose .ajax calls. 😉

Book Review: jQuery in Action

jQuery in Action, First Edition is written by Bear Bibeault and Yehuda Katz and is probably the simplest and easiest to understand programming book available. Target reader is somebody that already is using javascript in projects and is looking to push the limits of their web applications by using jQuery and many of it’s great plugins.

I found the book and its appendices to be extremely well written. I found the examples to be superbly written and extremely usable in my projects: there aren’t a lot of examples on basic things like selectors but there are a ton of great examples on much more advanced concepts. An additional feature that I found really helpful was the interactive lab exercises that begin around chapter two.

As a reference, which I don’t think was the primary intent, it would be difficult to use the book as some of the API is randomly spread throughout the book. The random spread does make the book a lot better though, because each chapter definitely builds well upon the previous chapter.

I completely recommend this book and can only imagine that the Second Edition improves upon the First Edition. I haven’t really found much negative about the book other than wishing the API wasn’t spread out so much, but the index is very good.

Setting Focus to 1st Text Field in jQuery

Setting focus to the 1st field in jQuery is actually really simple: there are some plugins that also can do it automatically on each reload of a form.

I usually just use the following code on any pages where there is a form.


<script type="text/javascript">
$(document).ready(function() {
$("input:text:visible:first").focus();
});
</script>

Hope this helps.

Unobtrusive JavaScript And Why it Matters

Many more senior web developers can remember throwing tags all over the contents of websites and using tables for the presentation of content: these practices are said to be intrusive and a maintenance nightmare especially when the font colour should be pink instead of black on a header.

Unobtrusive JavaScript is another best practice for later maintenance of the site. Unobtrusive JavaScript involves removing the behaviour layer from the structure and content. Instead of having JavaScript mixed throughout the content it is either placed into an external file or placed into the head of the document.

The major advantage of the Unobtrusive JavaScript is that it can also be used for progressive enhancement and other techniques for browsers that offer advanced DOM 2 support. All JavaScript frameworks that I am aware of actively encourage Unobtrusive JavaScript as do many CMS and frameworks.

There are of course some issues with unobtrusive JavaScript because it does take more lines of script and requires discipline, and the use of good coding patterns.

JavaScript And Site Performance

JavaScript and the respective frameworks have really began to gain traction over the last couple of years. I would argue that most of the JavaScript frameworks are excellent, and truly are great for the user experience and for the programmer experience.

Unfortunately, many of the JavaScript frameworks are quite large for a web page. jQuery, for example, minified is nearly 56KB. Personally, I wouldn’t use jQuery or another JavaScript framework for static pages that might only read an XML file or display a simple animation: frameworks really are elegant for web applications. The size of frameworks isn’t much of an issue for people on broadband (cable, dsl, etc), but now as web developers we are beginning to see iPODs, iPhones, Blackberries, and other smaller electronics beginning to view our websites where the size and download speed of the frameworks, and website markup can begin to create havoc.

First, we should move all of the JavaScript to the bottom of the body because each HTTP request for an external document will block the rendering of the HTML until downloading has completed. JavaScript according to the W3C can “appear any number of times in the HEAD or BODY of an HTML document.”

Web Developers should also minimize the number of HTTP requests by combining all of the JavaScript into one file, and all of the css into a single css file. The Yahoo developer blog contains some really helpful tips. Yahoo also provides an excellent plugin for Firefox/Firebug that provides some tips and debug-type of information.