jquery

jQuery is a very powerful client-side JavaScript library for Web applications. It provides an lightweight, elegant way to quickly access and manipulate the HTML Document Object Model (DOM), to communicate with server-side web services, and to create animations in the browser without the need for heavier client side technologies.

Overview of jQuery

• Its History and Features
• General tips, gotchas, and best practices for ASP.NET Applications
  How can you use jQuery?

• To provide better user experiences and to create custom controls
• To ultimately write LESS code
  Sample Controls and Demos

• Custom Navigation Control
• jQuery DataTables
• jQueryValidation
   
  JavaScript has not always been easy or very fun to work with.

• A large issue with that comes from the various DOM specifications that different browsers used for HTML,  but not the JavaScript itself.
  For the most part, ASP.NET UI Controls help us to avoid working  extensively with the DOM and JavaScript.

• Example: Server-side PostBack events raised from changes in the state of the page controls.
   
  jQuery
  Write less. Do more.
  Quickly access, manipulate, and traverse HTML documents with a lot LESS effort.
  Microsoft is actively supporting it in MVC3 and the ASP.NET 4 jQuery Templating Engine.
   
   
   
   
   
  Key Features of jQuery
   
  CCS3 Selectors
  Typically you will access elements based on a class or an id,
   but there are also other psuedo-selectors available (:visible, :first, :input). Find all of them here: http://api.jquery.com/category/selectors/
  DOM Manipulation
  This is especially helpful if you need to hide and show elements or when you receive a response from an AJAX response payload.
  Animation
  Utilize a set of built-in jQuery animations or roll your own effects.
   
  AJAX Communication
  Simple HTTP communication interface with JSON and XML based web services.
  Plugins
  There are NUMEROUS open source plugins available for different needs. That being said, be careful what you use.
  Cross Browser Compatibility
  The jQuery codebase regardless of browser.
   
   
   
   
   
   
   
   
   
   
  Prerequisites for jQuery
   
  Get to know CSS and HTML
  If you are trying to animate things or to create your own UI controls, you should understand how CSS and HTML work.
  The biggest things you can learn are how to work with
   position, margin, padding, float, and display properly in HTML.
   
  Learn to love Firebug for Mozilla Firefox
  It is one of the best web developer tools available you don’t have to pay for.
  Learn to think in Sets and Events
  A selector returns a set of element that your jQuery code will operate over
  This will hide all of the H1 tags in your HTML page
   
  $(“h1”).css(“display”,”none”);
   
  Beware operating over LARGE sets, this can cause your browser to become unresponsive or you can even crash your browser.
   
  A elements of the DOM have events which you can subscribe to with event handlers
   
  $ (“a”).click(function(event){
                  alert (“You clicked a link!”);
  });
   
   
   
   
   
  Best Practices
   
  Managing State with AJAX
   
  Selectors for ASP.NET Controls
   
  Debugging Tips
   
   
  Managing State with AJAX
   
  Most tutorials and documentation will prescribe that you initialize all of your jQuery code in an event that handles to document.
   
  function initControls(){
                  //your init code here
  }
   
  $(document).ready(function(){
                   initControls();
  });
   
  However, this becomes a problem when you are using AJAX UpdatePanels, because the $(document).ready() will not fire after the call to the server has been completed.
   
  Any changes that the initControls() function made to the DOM within the UpdatePanel are erased. This includes any event handling you set up.
   
   
  So what is the solution to this problem?
  Sys.WebForms.PageRequestManager to the Rescue!
  This class manages partial-page rendering in ASP.NET pages.
  It comes with client-side events that you can subscribe to.
  var requestManager = Sys.WebForms.PageRequestManager.getInstance();
  function initControls(){
                  //your init code here
  }
  function endRequestHandler(sender, args){
                  initControls();
  }
  $(document).ready(function(){
                  requestManager.add_endRequest(endRequestHandler);
   
                  //still need to do the initial init
                  initControls();
  });
   
  Now we can deal with the UpdatePanel partial-page rendering and still have our jQuery.
   
  Managing State with AJAX
   
  The full list of PageRequestManager events with descriptions:
   

PageRequestManager Event	Description
initializeRequest	Raised before processing of the asynchronous request starts. You can use this event to cancel a postback.
beginRequest	Raised before processing of an asynchronous postback starts and the postback is sent to the server. You can use this event to set request headers or to begin an animation that indicates that the page is processing.
pageLoading	Raised after the response from the server to an asynchronous postback is received but before any content on the page is updated. You can use this event to provide a custom transition effect for updated content.
pageLoaded	Raised after all content on the page is refreshed, as a result of either a synchronous or an asynchronous postback. You can use this event to provide a custom transition effect for updated content.
endRequest	Raised after an asynchronous postback is finished and control has been returned to the browser. You can use this event to provide a notification to users or to log errors.

 

Selectors for ASP.NET Controls

If you need to grab an TextBox by its ID, you would undoubtedly think that this will work just fine:

                $(“#txtBox”)

• However, it might not always.
• The Problem: In ASP.NET, the INamingContainer appends identifiers to the controls so that it can uniquely reference a control.
• To get around this, you can use the following:
                  $("*[id$=‘txtBox']")

• This will look for all elements (*) with txtBox at the end of it.
• John Sheehan also some other solutions here: http://john-sheehan.com/blog/custom-jquery-selector-for-aspnet-webforms/
  Keep in mind, that this is not a good solution for controls in a Repeater, but you should be using a class to reference these controls anyways, since they are not unique.
   
  Debugging Tips
  jQuery errors aren’t always the easiest to spot. When a call error occurs, any jQuery and JavaScript below it will not run so that might be your best indicator.
  To debug your code, use Mozilla Firefox in combination with Firebug.

• Check to make sure all of the files are getting loaded properly.
• Make sure that you’re not loading libraries twice and that all libraries are loaded in the proper dependency order. jQuery should be your first JavaScript file.
• Make sure all plugins are in-synch with your chosen jQuery library code.
• Step through your code in Firebug and use the watch variables. Don’t step into your jQuery code very deeply, because the problem is most likely in your own code.
• Sometimes, an alert statement is just what you need to glean a better understanding.
   
  Custom Navigation Control
  jQuery DataTables
  jQuery Validation