jQuery

jQuery articles, tips and snippets as well as jQuery related plug-ins and extension.

jQuery - upgrade from version 1.6.x to 1.7

Goal: Issues to consider when upgrading from jQuery version 1.6 to 1.7. This is a short list and may help identify the real issues you need to concern yourself with in stead of reading through all the release notesSummary of issues encountered during upgrade:As you prepare for upgrade to jQuery 1.7 from 1.6.x, this is a quick glimpse of all the issues that are relevant, not sure if it covers all but may be all you need to worry about.Use this method only for checking checkboxes and radio buttons:$("input:checked")h...
  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati

Knockout with ASP.Net MVC2 - HTML Extension Helpers for input controls

Goal: Defining Knockout-style input controls can be tedious and also may be something that you may find obtrusive, mixing your HTML with data bind syntax as well as binding your aspx, ascx files to Knockout. The goal is to make specifying Knockout specific HTML tags easy, seamless really, as well as being able to remove references to Knockout easily. Environment considerations: ASP.Net MVC2 or later Knockoutjs.js How to: public static class HtmlExtensions { public static string DataBoundCheckBox(this...
  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati

Knockoutjs - stringify to handling observables and custom events

Goal: Once you viewmodel has been built and populated with data, at some point it goal of it all is to persist the data to the database (or some other media). Regardless of where you want to save it, your client-side viewmodel needs to be converted to a JSON string and sent back to the server. Environment considerations: jQuery 1.4.3+ Knockoutjs version 1.1.2 How to: So let’s set the stage, you are using Knockoutjs and you have a viewmodel with some Knockout dependencies. You want to make sure it...
  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati

jQuery Templates, Data Link

I am sure you must have read Scott Guthrie’s blog post about jQuery support and officially supporting jQuery's templating, data linking and globalization, if not here it is: jQuery Templating Since we are an open source shop and use jQuery and jQuery plugins extensively to say the least, decided to look into the templating a bit and see what data linking is all about. For those not familiar with those terms here is the summary, plenty of material out there on what it is, but here is what i

  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati

jqGrid - customizing the multi-select option (restrict single selection and adding custom events)

Goal: Using the jgGrid to enable a selection of a checkbox for row selection - which is easy to set in the jqGrid - but also only allowing a single row to be selectable at a time while adding events based on whether the row was selected or de-selected. Environment: jQuery 1.4.4 jqGrid 3.4.4a Issue: The jqGrid does not support the option to restrict the multi-select to only allow for a single selection. You may ask, why bother with the multi-select checkbox function if you only want to allow for the...
  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati

jqGrid - dynamically load different drop down values for different rows depending on another column value

Goal: As we all know the jqGrid examples in the demo and the Wiki always refer to static values for drop down boxes. This of course is a personal preference but in dynamic design these values should be populated from the database/xml file, etc, ideally JSON formatted. Can you do this in jqGrid, yes, but with some custom coding which we will briefly show below (refer to some of my other blog entries for a more detailed discussion on this topic). What you CANNOT do in jqGrid, referring here up and...
  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati

Upgrade from Asp.Net MVC 1 to MVC 2 - how-to and issues with JsonRequestBehavior

Goal Upgrade your MVC 1 app to MVC 2 Issues You may get errors about your Json data being returned via a GET request violating security principles - we also address this here. This post is not intended to delve into why the Json GET request is or may be an issue, just how to resolve it as part of upgrading from MVC1 to 2. Solution First remove all references from your projects to the MVC 1 dll and replace it with the MVC 2 dll. Now update your web.config file in your web app root folder by simply...
  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati

jQuery 1.4.4 - issue with attr('selected', null)

Issue: The code below worked before under version jQuery 1.4.2 but when I upgraded to version 1.4.4 it no longer worked as expected - it did not unselect the list box item, only setting "selectd" worked: _handleClick: function(elem) { var self = this; var initElem = this.element; var checked = $(elem).attr('checked'); var myId = elem.attr('id').replace(ini... + '_chk_', ''); initElem.children('option[v... + myId + ']').attr('selected', function() { if (checked) { return 'selected';...
  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati

How to store arbitrary data in the DOM using jQuery

Goal: Storing arbitrary data inside the DOM Issue: Storing data : $('selector').attr('alt', 'my data'); Retrieving data: $('selector').attr('alt'); The ALT attribute is designed to be an alternative text description. For images the ALT text displays before the image is loaded. ALT is a required element for images and can only be used for image tags because its specific purpose is to describe images.So therefore, "alt" is an HTML attribute meant to give the tag meaning and not to store data. Also...
  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati

Seting select index in jQuery

$('#myselect option:eq(1)').attr('select... 'selected'); This will select the first option To deslect it do not use null ( as in attr('selected', null)) but rather use removeAttr as in $('#myselect option:eq(1)').removeAttr('
  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati

Full jQuery Archive

Twitter