jQuery: Making AJAX Applications Crawlable

If you want a fast and responsive web app, then you are definitely using jQuery (or any other javascript libray) and ajax calls to keep the size of the page small and transfer only the data the user requested.

The problem that came along with this approach is that search engines can’t interact with your page the way a user does, and so, there is no way for a search engine to make the ajax call and get the content back from the server. Spiders just aren’t browsers and users! (Learn more about it here)

Continue reading

Client-Side filtering of a RadListBox for ASP.NET AJAX with jQuery

The well known “Write Less, Do More, JavaScript Library” can easily help you filter options of select tag. Problem is, that Telerik’s control produces a different set of tags as your drop down list:

<div id="rdSchem" class="RadListBox RadListBox_Default RadListBoxScrollable">
	<div class="rlbGroup rlbGroupRight">
		<ul class="rlbList">
			<li id="rdSchem_i0" class="rlbItem">
				<input type="checkbox" class="rlbCheck">
				<span class="rlbText">Option 1</span>
			</li>
			<li id="rdSchem_i1" class="rlbItem">
				<input type="checkbox" class="rlbCheck">
				<span class="rlbText">Option 2</span>
			</li>			
		</ul>
	</div>
	<input id="rdSchem_ClientState" name="rdSchem_ClientState" type="hidden" autocomplete="off" value="{&quot;isEnabled&quot;:true,&quot;logEntries&quot;:[],&quot;selectedIndices&quot;:[],&quot;checkedIndices&quot;:[],&quot;scrollPosition&quot;:0}">
</div>

Continue reading

jQuery: How to stop an animation and prevent multiple queued animations

There is a magic jQuery method for it, called stop(). When called, it immediately stops any active animation on matched elements.

For example the following

    $("...").animate({left: '+=100px'}, 2000).stop();//nothing happens, animation is queued

will queue the animation but it will not move. A second call for an animation on this object will move it first by 100px and then by whatever animation you choose:

    //Example 1    
    $("...").animate({left: '+=100px'}, 2000).stop();     //nothing happens, animation is queued
    $("...").delay(2000).animate({top: '+=200px'}, 2000); //moves to the right by 100 and then down by 200

This is the default behavior of “.stop()” but you can alter it with the help of two boolean arguments, clearQueue and jumpToEnd. Default values of these are false, meaning that when stop is called (either like “.stop()” or like “.stop(false, false)”), the object immediately stops any movement and the animation is queued, waiting for the next call:

Continue reading

jQuery: How to create a new plugin

Basic template:
The following template is a basic plugin. You can change the name “PluginName” to whatever you want, add or remove arguments and add of course your code!

//Map JQuery to the dollar sign (to avoid overrides)
(function( $ ){
    //Name and params
    $.fn.PluginName = function(a1, a2, ...) {
       ...
    };
})( jQuery );

//Usage
$("...").PluginName("arg1", "arg2", ...);

You can continue reading more information on plugin creation that include:

  • Use of ‘this’ keyword
  • Maintaining chainability
  • Default options/settings
  • Enforcing encapsulation
  • Binding and unbinding events

Continue reading