Javascript

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

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

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

Combine and compress javascript and css files in ASP.Net MVC

Goal: When loading js or css files, combine all the js files into one and all css files into one file respectively when rendering to improve on performance. Also compress if need be on the fly. In this example we use many css files and even more js files to organize the ASP.Net Mvc web app into manageable pieces. The reason for the separation is mainly because it gives the team the ability to work on different part of the web app by working on the affected css or js files. It also helps to decide...
  • 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

How to dynamically add Edit button to grid for editing row using the jqGrid formedit

Goal: Dynamically add an Edit button to an empty column that will NOT trigger an inline edit but rather a jqGrid formedit for the selected row using the modal dialog option. Problem: All examples in the Demo version include editing inline and adding buttons to a column that only does an inline edit and the Demo version's getRowdata does not perform as expected. I tried it an could not get it working and the getRowData did not work as specified. Solution: gridComplete: function() { var rows = $(item).jqGrid('getRowData');...
  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati

JSCompress fails to compress my js file - why?

Issue: You use the online compression utility jscompress.com to compress your js file but it fails with an error. Why this may be happening and how to fix it. Possible causes: Apparently not using open and closing curly brackets in an IF statement would cause this. Well turns out this is not the case. Look at the following example and see if you can figure out what the issue is :-) function SetupDeliveredVPRecontactNo... id) { var theData; $.ajax({ data: { deliveredVPId: id }, url: $('#ajaxGetDeliveredVPRecon...
  • Share This Post:
  • Share on Twitter
  • Share on Facebook
  • Share on Technorati

Full Javascript Archive

Twitter