Software Development Practices

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

2011-02-25T05:46:00.001-08:00

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 selection of a single row? Good question, as an example, you want to reserve the selection of a row to trigger another kind of event and use the checkbox multi-select to handle a different kind of event; in other words, when I select the row I want something entirely different to happen than when I select to check off the checkbox for that row.
Also the setSelection method of the jqGrid is a toggle and has no support for determining whether the checkbox has already been selected or not, So it will simply act as a switch - which it is designed to do - but with no way out of the box to only check off the box (as in not to de-select) rather than act like a switch.
Furthermore, the getGridParam('selrow') does not indicate if the row was selected or de-selected, which seems a bit strange and is the main reason for this blog post.

Solution:

How this will act:

When you check off a multi-select checkbox in the gird, and then commence to select another row by checking off that row's multi-select checkbox - I'm not talking there about clicking on the row but using the grid's multi-select checkbox - it will de-select the previous selection so that you are always left with only a single selection.
Furthermore, once you select or de-select a multi-select checkbox, fire off an event that will be determined by whether or not the row was selected or de-selected, not just merely clicked on. So if I de-select the row do one thing but when selecting it do another.

Implementation (this of course is only a partial code snippet):

            multiselect: true,

            multiboxonly: true,

            onSelectRow: function (rowId) {

                var gridSelRow = $(item).getGridParam('selrow');

                var s;

                s = $(item).getGridParam('selarrrow');

                if (!s || !s[0]) {

                    $(item).resetSelection();

                    $('#productLineDetails').fadeOut();

                    lastsel = null;

                    return;

                }

                var selected = $.inArray(rowId, s) != -1;

                if (selected) {

                    $('#productLineDetails').show();

                }

                else {

                    $('#productLineDetails').fadeOut();

                }



                if (rowId && rowId !== lastsel && selected) {

                    $(item).GridToForm(gridSelRow, '#productLineDetails');

                    if (lastsel) $(item).setSelection(lastsel, false);

                }

                lastsel = rowId;

            },

In the example code above:

The "item" property is the id of the jqGrid.
The following to settings ensure that the jqGrid will add the new column to select rows with a checkbox and also the not allow for the selection by clicking on the row but to force the user to have to click on the multi-select checkbox to select the row:

multiselect: true,

multiboxonly: true,
Unfortunately the var gridSelRow = $(item).getGridParam('selrow') function will only return the row the user clicked on or rather that the row's checkbox was clicked on and NOT whether or not it was selected nor de-selected, but it retrieves the row id, which is what we will need.
The following piece get's all rows that have been selected so far, as in have a checked off multi-select checkbox:

var s;

s = $(item).getGridParam('selarrrow');
Now determine if the checkbox the user just clicked on was selected or de-selected:
var selected = $.inArray(rowId, s) != -1;
If it was selected then show a container "#productLineDetails", if not hide that container away.
The following instruction populates a form with the grid data using the built-in GridToForm method (just mentioned here as an example) ONLY if the row has been selected and NOT de-selected but more importantly to de-select any other multi-select checkbox that may have been selected:

if (rowId && rowId !== lastsel && selected) {

                    $(item).GridToForm(gridSelRow, '#productLineDetails');

                    if (lastsel) $(item).setSelection(lastsel, false);

}

Menu widget - no jQuery nor Javascript required - pure CSS

2011-02-17T06:45:00.000-08:00

Goal:

Create a menu widget that does not require any javascript, extremely lightweight, very fast, soley based on CSS, compatible with FireFox and Chrome.
Issues:

May have some rendering issues in some versions of IE, sorry :-)
Instruments:

* css file
* html with specific menu format
* jQuery-ui library - optional if you want to use your own images/colors

Implementation Details:
HTML:

CSS:

/* =Menu
----------------------------------------------------------------------------------------- */
#header #header_Menubar
{
margin: 0;
padding: 0;
border: 0;
width: 100%;
height: 22px;
}

#header
{
background-color: #99cccc;
background-color: #aaccee;
background-color: #5BA3E0;
background-color: #006cb1;

}

/* Set menu bar background color */
#header #header_Menubar
{
background-attachment: scroll;
background-position: left center;
background-repeat: repeat-x;
}

/* Set main (horizontal) menu typology */
#header .linkList0
{
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande',
Verdana, Lucida, Geneva, Helvetica,
Arial, sans-serif;
font-weight: bold;
font-size: 1.085em;
font-size: 1em;
}

/* Set all ul properties */
#header .linkList0, #header .linkList0 ul
{
list-style: none;
margin: 0;
padding: 0;
list-style-position: outside;
}

/* Set all li properties */
#header .linkList0 > li
{
float: left;
position: relative;
font-size: 90%;
margin: 0 0 -1px;
width: 9.7em;
padding-right: 2em;
z-index: 100; /*IE7: Fix for IE7 hiding drop down list behind some other page elements */
}

/* Set all li properties */
#header .linkList01 > li
{
width: 190px;
}

#header .linkList0 .linkList01 li
{
margin-left: 0px;
}

/* Set all list background image properties */
/*#header .linkList0 li a
{
background-position: left center;
background-image: url( '../Content/Images/VerticalButtonBarGradientFade.png' );
background-repeat: repeat-x;
background-attachment: scroll;
}*/
/* Set all A ancor properties */
#header .linkList0 li a
{
display: block;
text-decoration: none;
line-height: 22px;
}

/* IE7: Fix for a bug in IE7 where the margins between list items is doubled - need to set height explicitly */
*+html #header .linkList0 ul li
{
height: auto;
margin-bottom: -.3em;
}

/* Menu: Set different borders for different nested level lists
-------------------------------------------------------------- */
#header .linkList0 > li a
{
border-left: 10px solid Transparent;
border-right: none;
}

#header .linkList0 > li a
{
border-left: 0px;
margin-left: 0px;
border-right: none;
}

#header .linkList0 .linkList01 > li a
{
border-left: 8px solid #336699;
border-right: none;
border: 1px solid Transparent;
-moz-border-radius: 5px 5px 5px 5px;
-moz-box-shadow: 3px 3px 4px #696969;
}

#header .linkList0 .linkList01 .linkList001 > li a
{
border-left: 6px solid #336699;
border-right: none;
border: 1px solid Transparent;
-moz-border-radius: 5px 5px 5px 5px;
-moz-box-shadow: 3px 3px 4px #696969;
}

#header .linkList0 .linkList01 .linkList001 .linkList0001 > li a
{
border-left: 4px solid #336699;
border-right: none;
border: 1px solid Transparent;
-moz-border-radius: 5px 5px 5px 5px;
-moz-box-shadow: 3px 3px 4px #696969;
}

/* Link and Visited pseudo-class settings for all lists (ul) */
#header .linkList0 a:link, #header .linkList0 a:visited
{
display: block;
text-decoration: none;
padding-left: 1em;
}

/* Hide all the nested/sub menu items */
#header .linkList0 ul
{
display: none;
padding: 0;
position: absolute; /*Important: must not impede on other page elements when drop down opens up */
}

/* Hide all detail popups */
#header .detailPopup
{
display: none;
}

/* Set the typology of all sub-menu list items li */
/*#header .linkList0 ul li
{
background-color: #AACCEE;
background-position: left center;
background-image: url( '../Content/Images/VerticalButtonBarGradientFade.png' );
background-repeat: repeat-x;
background-attachment: scroll;
}*/

#header .linkList0 ul li.more
{
background: Transparent url('../Content/Images/ArrowRight.gif') no-repeat right center;
}

/* Header list's margin and padding for all list items */
#header .linkList0 ul li
{
margin: 0 0 0 1em;
padding: 0;
}

#header .linkList01 ul li
{
margin: 0;
padding: 0;
width: 189px;
}

/* Set margins for the third li sibling (Plan a Call) to display to the right of the parent menu
to avoid the sub-menu overlaying the menu items below */
#header .linkList0 li.more .linkList01 li.more > ul.linkList001
{
margin: -1.7em 0 0 13.2em; /*Important, must be careful, if tbe EM since gap increases too much bewteen nested lists the gap will make the nested-list collapse prematurely */
}

/* Set right hand arrow for list items with sub-menus (class-more) */
#header li.more
{
background: Transparent url('../Content/Images/ArrowRight.gif') no-repeat right center;
padding-right: 48px;
}

/* Menu: Dynamic Behavior of menu items (hover, visted, etc)
----------------------------------------------------------- */
#header .linkList0 li a:link, #header .linkList01 li a:link
{
display: block;
}

#header .linkList0 li a:visited, #header .linkList01 li a:visited
{
display: block;
}

#header .linkList0 > li:hover
{
}

#header .linkList01 > li:hover a
,#header .linkList001 > li:hover a
{
text-decoration: underline;
}

#header .linkList0 > li abbr:hover span.detailPopup
{
display: block;
position: absolute;
top: 1em;
left: 17em;
border: double 1px #696969;
border-style: outset;
width: 120%;
height: auto;
padding: 5px;
font-weight: 100;
}

#header .linkList0 > li:hover
,#header .linkList0 .linkList01 > li:hover
{
}

#header .linkList0 .linkList01 .linkList001 > li:hover
{
}

#header .linkList0 .linkList01 .linkList001 .linkList0001 > li:hover
{
}

/* Display the hidden sub menu when hovering over the parent ul's li */
#header .linkList0 li:hover > ul
{
display: block;
}

/* Display the hidden sub menu when hovering over the parent ul's li */
#header .linkList0 .linkList01 li:hover > ul
{
display: block;
background: -moz-linear-gradient(top, #1E83CC, #619FCD);
/* Chrome, Safari:*/
background: -webkit-gradient(linear,
center top, center bottom, from(#1E83CC), to(#619FCD));

}

/* Display the hidden sub menu when hovering over the parent ul's li */
#header .linkList0 .linkList01 .linkList001 li:hover > ul
{
display: block;
}

/* Set right hand arrow for list items with sub-menus (class-more) on hover */
#header li.more:hover
{
}

Also some CSS for global settings that will affect this menu, you of course will have some other styling, but included it here so you can see how/why some css properties were set here:

/* Neutralize styling:
Elements we want to clean out entirely: */
html, body
{
margin: 0;
padding: 0;
font: 62.5%/120% Verdana, Arial, Helvetica, sans-serif;
}

/* Neutralize styling:
Elements with a vertical margin: */
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
margin: 0; /* most browsers set some default value that is not shared by all browsers */
padding: 0; /* some borowsers default padding, set to 0 for all */
}

/* Apply left margin:
Only to the few elements that need it: */
li, dd, blockquote {
margin-left: 1em;
}

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

2011-02-10T06:17:00.000-08:00

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 to version 3.8.x, is to load different drop down values for different rows in the jqGrid. Well, not without some trickery, which is what this discussion is about.

Issue:

Of course the issue is that jqGrid has been designed for high performance and thus I have no issue with them loading a reference to a single drop down values list for every column. This way if you have 500 rows or one, each row only refers to a single list for that particular column. Nice!
SO how easy would it be to simply traverse the grid once loaded on gridComplete or loadComplete and simply load the select tag's options from scratch, via Ajax, from memory variable, hard coded etc? Impossible! Since their is no embedded SELECT tag within each cell containing the drop down values (remember it only has a reference to that list in memory), all you will see when you inspect the cell prior to clicking on it, or even before and on beforeEditCell, is an empty .
When trying to load that list via a click event on that cell will temporarily load the list but jqGrid's last internal callback event will remove it and replace it with the old one, and you are back to square one.

Solution:

Yes, after spending a few hours on this found a solution to the problem that does not require any updates to jqGrid source code, thank GOD!
Before we get into the coding details, the solution here can of course be customized to suite your specific needs, this one loads the entire drop down list that would be needed across all rows once into global variable. I then parse this object that contains all the properties I need to filter the rows depending on which ones I want the user to see based off of another cell value in that row. This only happens when clicking the cell, so no performance penalty. You may of course to load it via Ajax when the user clicks the cell, but I found it more efficient to load the entire list as part of jqGrid's normal editoptions: { multiple: false, value: listingStatus } colModel options which again keeps only a reference to the single list, no duplication.
Lets get into the meat and potatoes of it.

        var acctId = $('#Id').val();



        var data = $.Ajax({ url:  $('#ajaxGetAllMaterialsTrackingLookupDataUrl').val(), data: { accountId:  acctId }, dataType: 'json', async: false, success: function(data,  result) { if (!result) alert('Failure to retrieve the Alert related  lookup data.'); } }).responseText;

        var lookupData = eval('(' + data + ')');



        var listingCategory = lookupData.ListingCategory;



        var catList = '{';

        $(lookupData.ListingCategory).each(function() {

            catList += this.Id + ':"' + this.Name + '",';

        });

        catList += '}';





        var lastsel;

        var ignoreAlert = true;

        $(item)

        .jqGrid({

            url: listURL,

            postData: '',

            datatype: "local",

            colNames: ['Id', 'Name', 'Commission

Rep',  'Business

Group', 'Order

Date', 'Edit', 'TBD',  'Month', 'Year', 'Week', 'Product', 'Product

Type',  'Online/

Magazine', 'Materials', 'Special

Placement', 'Logo', 'Image', 'Text', 'Contact

Info',  'Everthing

In', 'Category', 'Status'],

            colModel: [

                { name: 'Id', index: 'Id', hidden: true, hidedlg: true },

                { name: 'AccountName', index: 'AccountName', align: "left", resizable: true, search: true, width: 100 },

                { name: 'OnlineName', index: 'OnlineName', align: 'left', sortable: false, width: 80 },

                { name:  'ListingCategoryName', index: 'ListingCategoryName', width: 85,  editable: true, hidden: false, edittype: "select", editoptions: {  multiple: false, value: eval('(' + catList + ')') }, editrules: {  required: false }, formatoptions: { disabled: false} }



            ],

            jsonReader: {

                root: "List",

                page: "CurrentPage",

                total: "TotalPages",

                records: "TotalRecords",

                userdata: "Errors",

                repeatitems: false,

                id: "0"

            },

            rowNum: $rows,

            rowList: [10, 20, 50, 200, 500, 1000, 2000],

            imgpath: jQueryImageRoot,

            pager: $(item + 'Pager'),

            shrinkToFit: true,

            width: 1455,

            recordtext: 'Traffic lines',

            sortname: 'OrderDate',

            viewrecords: true,

            sortorder: "asc",

            altRows: true,

            cellEdit: true,

            cellsubmit: "remote",

            cellurl: editURL + '?rows=' + $rows + '&page=1',

            loadComplete: function() {



            },

            gridComplete: function() {



            },

            loadError: function(xhr, st, err) {



            },

            afterEditCell: function(rowid, cellname, value, iRow, iCol) {

                var select = $(item).find('td.edit-cell select');

                $(item).find('td.edit-cell select option').each(function() {

                    var option = $(this);

                    var optionId = $(this).val();

                    $(lookupData.ListingCategory).each(function() {

                        if (this.Id == optionId) {                           

                            if (this.OnlineName != $(item).getCell(rowid, 'OnlineName')) {

                                option.remove();

                                return false;

                            }

                        }

                    });

                });

            },

            search: true,

            searchdata: {},

            caption: "List of all Traffic lines",

            editurl: editURL + '?rows=' + $rows + '&page=1',

            hiddengrid: hideGrid

Here is the JSON data returned via the Ajax call during the jqGrid function call above (NOTE it must be { async: false}:

{"ListingCategory":[{"Id":29,"Name":"Document Imaging","OnlineName":"RF Globalnet"}   
,{"Id":1,"Name":"Ancillary Department","OnlineName":"Healthcare Technology Online"}

,{"Id":2,"Name":"Asset Tracking","OnlineName":"Healthcare Technology Online"}   
,{"Id":3,"Name":"Asset Tracking","OnlineName":"RF Globalnet"}   
,{"Id":4,"Name":"Asset Tracking","OnlineName":"ISMR"}   
,{"Id":5,"Name":"Document Imaging","OnlineName":"Healthcare Technology Online"} 
,{"Id":6,"Name":"Document Imaging","OnlineName":"RF Globalnet"}   
,{"Id":7,"Name":"EMR/EHR Software","OnlineName":"Healthcare Technology Online"}]}

I only need the Id and Name for the drop down list, but the third column in the JSON object is important, it is the only that I match up with the OnlineName in the jqGrid column, and then in the loop during afterEditCell simply remove the ones I don't want the user to see. That's it!

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

2010-12-30T14:09:00.000-08:00

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 changing references to assembly="System.Web.Mvc, Version 1.0.0.0 to Version 2.0.0.0, there are a couple of references in your config file, here are probably most of them you may have:

<compilation debug="true" defaultLanguage="c#">

        masterPageFile="~/Views/Masters/CRMTemplate.master" pageParserFilterType="System.Web.Mvc.ViewTypeParserFilter, System.Web.Mvc, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" pageBaseType="System.Web.Mvc.ViewPage, System.Web.Mvc, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"
            <controls>
                System.Web.Mvc, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" namespace="System.Web.Mvc" tagPrefix="mvc" />

userControlBaseType="System.Web.Mvc.ViewUserControl, System.Web.Mvc, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" validateRequest="False">

Secondly, if you return Json objects from an ajax call via the GET method you ahve several options to fix this depending on your situation:
1. The simplest, as in my case I did this for an internal web app, you may simply do:

return Json(myObject, JsonRequestBehavior.AllowGet);

2. In Mvc if you have a controller base you could wrap the Json method with:

        public new JsonResult Json(object data)
        {
            return Json(data, "application/json", JsonRequestBehavior.AllowGet);
        }

3. The most work would be to decorate your Actions with:

[AcceptVerbs(HttpVerbs.Get)]

4. Another tnat is also a lot of work that needs to be done to every ajax call returning Json is:

msg = $.ajax({ url: $('#ajaxGetSampleUrl').val(), dataType: 'json', type: 'POST', async: false, data: { name: theClass }, success: function(data, result) { if (!result) alert('Failure to retrieve the Sample Data.'); } }).responseText;

This should cover all the issues you may run into when upgrading. Let me kow if you run into any other ones.

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

2010-12-30T09:58:00.000-08:00

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(initElem.attr('id') + '_chk_', '');
            initElem.children('option[value=' + myId + ']').attr('selected', function() {
                if (checked) {
                    return 'selected';
                } else { return null; }
            });
            if ($.isFunction(self.options.onItemSelected)) {
                try {
                    self.options.onItemSelected(elem, initElem.children('option').get());
                } catch (ex) {
                    if (self.options.allowDebug)
                        alert('select function failed: ' + ex.Description);
                }
            }
        },

Solution:
Under jQuery 1.4.4 you need to explicitly remove the attribute as in "removeAttr('selected'):

        _handleClick: function(elem) {
            var self = this; var initElem = this.element;
            var checked = $(elem).is(':checked');
            var myId = elem.attr('id').replace(initElem.attr('id') + '_chk_', '');
            if (checked) {
                initElem.children('option[value=' + myId + ']').attr('selected', 'selected');
            } else {
                initElem.children('option[value=' + myId + ']').removeAttr('selected');
            }
            if ($.isFunction(self.options.onItemSelected)) {
                try {
                    self.options.onItemSelected(elem, initElem.children('option').get());
                } catch (ex) {
                    if (self.options.allowDebug)
                        alert('select function failed: ' + ex.Description);
                }
            }
        },

After restoring a SQL Server database from another server - get login fails

2010-12-14T07:55:00.001-08:00

Issue:

After you have restored a sql server database from another server, lets say from production to a Q/A environment, you get the "Login Fails" message for your service account.

Reason:

User logon information is stored in the syslogins table in the master database. By changing servers, or by altering this information by rebuilding or restoring an old version of the master database, the information may be different from when the user database dump was created. If logons do not exist for the users, they will receive an error indicating "Login failed" while attempting to log on to the server. If the user logons do exist, but the SUID values (for 6.x) or SID values (for 7.0) in master..syslogins and the sysusers table in the user database differ, the users may have different permissions than expected in the user database.

Solution:

Links a user entry in the sys.database_principals system catalog view in the current database to a SQL Server login of the same name. If a login with the same name does not exist, one will be created. Examine the result from the Auto_Fix statement to confirm that the correct link is in fact made. Avoid using Auto_Fix in security-sensitive situations.

When you use Auto_Fix, you must specify user and password if the login does not already exist, otherwise you must specify user but password will be ignored. login must be NULL. user must be a valid user in the current database. The login cannot have another user mapped to it.
execute the following stored procedure, in this example the login user name is "MyUser"
exec sp_change_users_login 'Auto_Fix', 'MyUser'

NOTE:
sp_change_users_login cannot be used with a SQL Server login created from a Windows principal or with a user created by using CREATE USER WITHOUT LOGIN.After restoring a SQL Server database from another server - get login fails

Maximum request length exceeded.

2010-12-02T13:48:00.000-08:00

Issue:
The file upload size on your machine or web app is too small. The default file upload size for IIS is 4096K. The file size the user is trying to add can be retrieved (using the ELMAH log here) by looking at the Content-Length header property:

HTTP_CONNECTION:keep-alive HTTP_KEEP_ALIVE:115 HTTP_CONTENT_LENGTH:6414851

In this example it is just over 6Mb

Solution:
You can add/update the HttpRuntime property in the machine or web config files, depending on at what level you want to set the size. For web-server level, impacting all web-apps running on that machine specify the following in the node of the machine.config file to allow less than 1Mb:

<system.web>

<httpRuntime maxRequestLength="1000" />

If you want to set it, bigger, smaller or block at the web-app level you can specify it by adding the property above to the web.config file of that web app and it will only affect that web app.

For example I would like to maintain the default 4096K size limitation on my server except for the accounting web app and therefore set the accounting web-sites virtual directory web-config file to handle 8Mb file uploads:

<system.web>

<httpRuntime maxRequestLength="8192" />

Resetting/Restoring the Windows PATH

2010-12-02T05:31:00.000-08:00

Problem:

For some reason you lost your Windows PATH settings and want to restore the previous version:

Solution:

First of you may reset it to the original setting to:

Windows XP: C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;{plus program paths}
Windows 7: C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;{plus program paths}

Alternatively you could look for some previous version of the path in the registry. In Windows 7 you would look for "Path" name under Computer\HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Control\Session Manager\Environment. If you do not see the previous version of what you would expect, continue down the list "ControlSet002", "..03", etc. The current version will be under Computer\HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\....

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

2010-11-30T10:14:00.000-08:00

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 at a very granular level which css or js files to load and cache in the browser and which ones are very unique and/or specific and/or large so as to load only when really needed. For example I have an extremely large contract page with about 4000 lines of jQuery to handle a spreadsheet like functionality. It is not used often and used only by certain sales reps. Do not want to load this file as part of the generic/global js file since it would be wasted space for most part. This file is loaded on the fly when needed. How that is done is another story :-) Since my app is a CRM app, it has many screens that have unique css styling requirements and so in some situations the css file should only be loaded when needed. The reasons are really not that important in the context of this blog, just want to show you how to do this in ASP.Net Mvc if and when the need arises.

System Requirements:

.Net 2+

ASP.Net Mvc v1+

Solution:

In your Master file head section

<link rel="stylesheet" type="text/css" href="<%=Url.RouteUrl(new {controller = "Scripts", Action = "GetAllCss"})%>" /> <script type="text/javascript" src="<%=Url.RouteUrl(new {controller = "Scripts", Action = "GetAllScripts"})%>"></script>

In the Mvc ScriptController controller:

public static IPathMapper ServerPathMapper { get; set; }

protected static bool Enable; protected static bool EnableHtmlCompression; protected static bool EnableHtmlMinification; protected static bool EnableProfiler; protected static bool EnableScriptCompression; protected static bool EnableScriptMinification; protected string Css = "css"; protected string Js = "js";

[OutputCacheAttribute(CacheProfile = "Scripts")] public FileResult GetAllScripts() { StringBuilder sb = LoadjQueryScripts(); sb.Append(LoadCRMScripts()); return StreamText(sb.ToString(), Js); }

[OutputCacheAttribute(CacheProfile = "CRMScripts")] public static StringBuilder LoadjQueryScripts() { string min = ""; if (ScriptOptimizerConfig.EnableMinimizedFileLoad) min = "Min/"; var sb = new StringBuilder(CombineLikeDirectoryFiles(String.Format("~/Scripts/jquery/Base/{0}", min), FileType.js)); //var sb = new StringBuilder(CombineLikeDirectoryFiles(String.Format("~/Scripts/jquery/Plugins/{0}", min), FileType.js)); sb.Append(CombineLikeDirectoryFiles(String.Format("~/Scripts/jquery/Plugins/{0}", min), FileType.js)); sb.Append(CombineLikeDirectoryFiles(String.Format("~/Scripts/jquery/Plugins/jquery.grid/{0}", min), FileType.js)); sb.Append(CombineLikeDirectoryFiles(String.Format("~/Scripts/jquery/Plugins/jquery.datepick/{0}", min), FileType.js)); sb.Append(CombineLikeDirectoryFiles(String.Format("~/Scripts/jquery/Plugins/jquery.flot/{0}", min), FileType.js)); return sb; } [OutputCacheAttribute(CacheProfile = "CRMScripts")] public static StringBuilder LoadCRMScripts() { string pathForCRMScripts = GetPathForCRMScripts(); if (ScriptOptimizerConfig.EnableMinimizedFileLoad) { string newPathForCRM = pathForCRMScripts + "Min/"; if (Directory.Exists(ServerMapPath(newPathForCRM))) pathForCRMScripts = newPathForCRM; } var sb = new StringBuilder(GetFile(pathForCRMScripts, "CRMScripting.js")); sb.Append(GetFile(pathForCRMScripts, "CRMScriptingAccount.js")); sb.Append(GetFile(pathForCRMScripts, "CRMScriptingContact.js")); sb.Append(GetFile(pathForCRMScripts, "CRMScriptingCallSheet.js")); return sb; }

public FileStreamResult StreamText(string inputText, IEquatable<string> name) { if (name.Equals(Js) && ScriptOptimizerConfig.Enable && ScriptOptimizerConfig.EnableScriptMinification) inputText = new JavaScriptCompressor(inputText, false).Compress(); if (name.Equals(Css) && ScriptOptimizerConfig.Enable && ScriptOptimizerConfig.EnableCssMinification) inputText = CssCompressor.Compress(inputText, 0, CssCompressionType.MichaelAshRegexEnhancements); var m = new MemoryStream(Encoding.Default.GetBytes(inputText)); return File(m, name.Equals(Css) ? "text/css" : "text/javascript"); } public static string CombineLikeDirectoryFiles(string directory, FileType typeOfFile) { string combinedFiles = string.Empty; string extension = null; switch (typeOfFile) { case FileType.js: extension = "js"; if (ScriptOptimizerConfig.EnableMinimizedFileLoad) { string newPath = string.Format("{0}{1}", directory, directory.EndsWith("/") ? "Min" : "/Min"); if (Directory.Exists(ServerMapPath(newPath))) directory = newPath; } break; case FileType.css: extension = "css"; break; } if(extension == null) return null; if (GetFiles(directory, extension) != null) { foreach (FileInfo file in GetFiles(directory, extension)) { using (var s = new StreamReader(file.FullName)) combinedFiles += s.ReadToEnd(); } } return combinedFiles; } public static string GetFile(string pathForCRMScripts, string file) { if (ServerPathMapper != null) { string fullFilePath = ServerPathMapper.MapPath(pathForCRMScripts) + file; if (!System.IO.File.Exists(fullFilePath)) return null; using (var s = new StreamReader(fullFilePath)) return s.ReadToEnd(); } return null; } public static IList<FileInfo> GetFiles(string serverPath, string extention) { string path = ServerMapPath(serverPath); if (!Directory.Exists(path)) return null; IList<FileInfo> files = new List<FileInfo>(); string[] fileNames = Directory.GetFiles(path, "*." + extention, SearchOption.TopDirectoryOnly); foreach (string name in fileNames) files.Add(new FileInfo(name)); return files; } public static string ServerMapPath(string serverPath) { if (!serverPath.StartsWith("~/")) { if (serverPath.StartsWith("/")) serverPath = "~" + serverPath; else serverPath = "~/" + serverPath; } if (ServerPathMapper != null) { string path = ServerPathMapper.MapPath(serverPath); if (!path.EndsWith("/")) path = path + "/"; return path; } return null; }

public static string GetPathForCRMScripts() { return "~/Scripts/CRM/"; }

public interface IPathMapper { string MapPath(string relativePath); string MapPath(); }

The IPathMapper is injected via the ScriptController's constructor via IoC with Castle Windsor's windsor.boo config file:

Component "pathMapper", IPathMapper, Vert.CRM.UI.Mechanics.ServerPathMapper

public class ServerPathMapper : IPathMapper { private readonly string _relativePath; public ServerPathMapper() { } public ServerPathMapper(string relativePath) { _relativePath = relativePath; } #region Implementation of IPathMapper public string MapPath(string relativePath) { return HttpContext.Current.Server.MapPath(relativePath); } public string MapPath() { if (_relativePath != null) if (HttpContext.Current != null) return HttpContext.Current.Server.MapPath(_relativePath); return null; } #endregion }

The static properties to enable profiler, compression, minification is set by using the ScriptOptimizerSection class which inherits from ConfigurationSection:

public class ScriptOptimizerSection : ConfigurationSection { [ConfigurationProperty("enable", IsRequired = true)] public bool Enable { get { return (bool)this["enable"]; } set { this["enable"] = value; } } [ConfigurationProperty("enableProfiler", IsRequired = true)] public bool EnableProfiler { get { return (bool)this["enableProfiler"]; } set { this["enableProfiler"] = value; } } [ConfigurationProperty("enableScriptCompression", IsRequired = true)] public bool EnableScriptCompression { get { return (bool)this["enableScriptCompression"]; } set { this["enableScriptCompression"] = value; } } [ConfigurationProperty("enableHtmlCompression", IsRequired = true)] public bool EnableHtmlCompression { get { return (bool)this["enableHtmlCompression"]; } set { this["enableHtmlCompression"] = value; } } [ConfigurationProperty("enableScriptMinification", IsRequired = true)] public bool EnableScriptMinification { get { return (bool)this["enableScriptMinification"]; } set { this["enableScriptMinification"] = value; } } [ConfigurationProperty("enableHtmlMinification", IsRequired = true)] public bool EnableHtmlMinification { get { return (bool)this["enableHtmlMinification"]; } set { this["enableHtmlMinification"] = value; } } [ConfigurationProperty("enableCssMinification", IsRequired = true)] public bool EnableCssMinification { get { return (bool)this["enableCssMinification"]; } set { this["enableCssMinification"] = value; } } [ConfigurationProperty("enableMinimizedFileLoad", IsRequired = true)] public bool EnableMinimizedFileLoad { get { return (bool)this["enableMinimizedFileLoad"]; } set { this["enableMinimizedFileLoad"] = value; } } } public class ScriptOptimizerConfig { protected static bool enable; protected static bool enableProfiler; protected static bool enableScriptCompression; protected static bool enableHtmlCompression; protected static bool enableScriptMinification; protected static bool enableHtmlMinification; protected static bool enableCssMinification; protected static bool enableMinimizedFileLoad; /// <summary> /// /// </summary> static ScriptOptimizerConfig() { ScriptOptimizerSection section; section = (ScriptOptimizerSection)ConfigurationManager.GetSection("OptimizeClientSide"); if (section != null) { enable = section.Enable; enableProfiler = section.EnableProfiler; enableScriptCompression = section.EnableScriptCompression; enableHtmlCompression = section.EnableHtmlCompression; enableScriptMinification = section.EnableScriptMinification; enableHtmlMinification = section.EnableHtmlMinification; enableCssMinification = section.EnableCssMinification; enableMinimizedFileLoad = section.EnableMinimizedFileLoad; } } /// <summary> /// /// </summary> public static bool Enable { get { return enable; } } /// <summary> /// /// </summary> public static bool EnableProfiler { get { return enableProfiler; } } /// <summary> /// /// </summary> public static bool EnableScriptCompression { get { return enableScriptCompression; } } /// <summary> /// /// </summary> public static bool EnableHtmlCompression { get { return enableHtmlCompression; } } /// <summary> /// /// </summary> public static bool EnableScriptMinification { get { return enableScriptMinification; } } /// <summary> /// /// </summary> public static bool EnableMinimizedFileLoad { get { return enableMinimizedFileLoad; } } /// <summary> /// /// </summary> public static bool EnableHtmlMinification { get { return enableHtmlMinification; } } public static bool EnableCssMinification { get { return enableCssMinification; } } }

The web.config file settings for optimization settings:

<configuration> <configSections> <sectionGroup name="elmah"> <section name="errorLog" type="Elmah.ErrorLogSectionHandler,Elmah" /> </sectionGroup> <section name="OptimizeClientSide" type="Vert.CRM.Core.Utility.ScriptOptimizerSection, Vert.CRM.Core" /> ....

<OptimizeClientSide enable="false" enableScriptCompression="false" enableHtmlCompression="false" enableScriptMinification="false" enableMinimizedFileLoad="true" enableHtmlMinification="false" enableCssMinification="false" enableProfiler="false"> </OptimizeClientSide>

Loading CSS stylesheet for ascx ASP.Net user control

2010-11-24T07:28:00.000-08:00

Goal:

For performance reasons you want to load a piece of CSS only for the ascx file to which it applies. You do not want to embed the style as you cannot do this in ASP.Net ascx user controls. ASP.Net will render the style tag as HTML text.

Solution:

Some folks use the Page.Header.Controls.Add to add the stylesheet link in the ascx page or in the code behind. Not needed, you may specify a "link" tag in the ascx file, not need to specify "head" tag or anything else, just the link tag itself:

<link rel="Stylesheet" media="screen" type="text/css" href="<%=ResolveUrl("~/Content/StyleSheets/Screen/Global/CssCRMUITrafficLine.css") %>" />

The benefits are significant in that it is only loaded when needed. Personally I also prefix all my css selectors with the unique ID of the ascx container (i.e. I give the outer most div of my ascx page a unique name - usually that of the ascx file name) so that when I nest the ascx file into any other file the nested dynamically loaded CSS to not affect anything else outside of its scope. Also, since the stylesheet is linked it is cached on the user's browser once it has been loaded.

How to store arbitrary data in the DOM using jQuery

2010-11-24T06:25:00.000-08:00

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 if you want to store the same data for different DOM objects than the data is duplicated for every DOM property found in the selector

The solution:

Storing data   : $('selector').data('key', 'my data');                  $('selector').data('key', function() { do something } );
Retrieving data: $('selector').data('key');

The data is not stored in the DOM, it is stored jQuery's reference to that object, so for each target found by the selector only a reference is stored and the data is stored once and referenced as many times as needed.

Images do not appear on my SSR report

2010-11-22T09:51:00.000-08:00

Problem:

You dynamically (or not) set the URL for the image you want to display in an SSRS report but it does not display the image (red x).

The reason:

SSRS access the images folder with anonymous access which is be default not allowed in IIS7 (not sure about IIS6 and prior versions).

The solution:

Make sure anonymous access is allowed to that images folder where the image resides that you are referencing via URL in SSRS Report. Also make sure that anonymous access is set to ENABLED in IIS for that same folder. If you set the security on the folder for anonymous to read only you will not have issues with someone deleting your images.

Setting select option index in jQuery

2010-11-03T06:44:00.001-07:00

$('#myselect option:eq(1)').attr('selected', 'selected');

This will select the first option

jQuery - Get the text value of a single value selected from a drop down box

2010-10-12T12:05:00.000-07:00

Goal:

Get the text value of a single option selected from a drop down box

Solution:

You have a drop down box called ALaCarteDiscount

$('#ALaCarteDiscount option:selected').text()

Large Cichlids

2010-07-20T14:23:00.000-07:00

List of large Cichlids like Oscars, Jack Dempsey and the Electric Blue Jack Dempsey:

Large Cichlids

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

2010-06-28T14:26:00.000-07:00

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');
for (var i = 0; i < rows[0].rows.length; i++) {
var row = rows[0].rows[i];
var idx = row.id;
if (!$(row).hasClass('jqgrow') && !$(row).hasClass('alt'))
continue;
var be = "";
$(item).setRowData(idx, { act: be });
$('#editAddress' + idx).click(function() {
$(item).editGridRow($(this).parent().parent('tr').attr('id'));
});
}
},

item = that is a variable that contains the id of my grid.

This is for editing an address so change the "editAddress" id prefix for your needs or create a generic function that will handle all of this:

gridComplete: function() {
SetupJqGridEditDeleteButtons(item);
},

function SetupJqGridEditDeleteButtons(item) {
var rows = $(item).jqGrid('getRowData');
for (var i = 0; i < rows[0].rows.length; i++) {
var row = rows[0].rows[i];
var idx = row.id;
if (!$(row).hasClass('jqgrow') && !$(row).hasClass('alt'))
continue;
var be = "";
$(item).setRowData(idx, { act: be });
$('#editItem' + idx).click(function() {
$(item).editGridRow($(this).parent().parent('tr').attr('id'));
});
}
}

TDD - Red-Light-Green_Light:: A critical view

2010-06-14T13:21:00.000-07:00

Subject: The concept of red-light-green-light for TDD/BDD style testing has been around since the dawn of time (well almost). Having written thousands of tests using this approach I find myself questioning the validity of the principle

The issue:

False positive or a valid test strategy that can be trusted?

A critical view:

I agree that the red-green-light concept has some validity, but who has ever written 2000 tests for a system that goes through a ton of chnages due to the organic nature fo the application and does not have to change, delete or restructure their existing tests? If you asnwer to the latter question is" "Yes I had a situation(s) where I had to refactor my code and it caused me to have to rewrite/change/delete my existing tests", read on, else press CTRL+ALT+Del :-)

Once a test has been written, failed the test (red light), and then you comlpete your code and now get the green light for the last test, the test for that functionality is now in green light mode. It can never return to red light again as long as the test exists, even if the test itself is not changed, and only the code it tests is changed to fail the test. Why you ask? because the reason for the initial red-light when you created the test is not guaranteed to have triggered the initial red-light result for the same reasons it is now failing after a code change has been made.

Furthermore, when the same test is changed to compile correctly in case of a compile-breaking code change, the green-light once again has been invalidated. Why? Because there is no guarantee that the test code fix is in the same green-light state as it was when it first ran successfully.

To make matters worse, if you fix a compile-breaking test without going through the red-light-green-light test process, your test fix is essentially useless and very dangerous as it now provides you with a false-positive at best. Thinking your code has passed all tests and that it works correctly is far worse than not having any tests at all, well at least for that part of the system that the test-code represents.

What to do?

My recommendation is to delete the tests affected, and re-create them from scratch. I have to agree. Hard to do and justify if it has a significant impact on project deadlines.

What do you think?

jQuery - check/uncheck a checkbox

2010-04-30T09:34:00.000-07:00

$('#PrimaryContacts').unbind().change(function() {
if ($('#PrimaryContacts option:selected').val() == 0) {
$('#filterPrimaryContact').removeAttr('checked').trigger('click');
}
else {
$('#filterPrimaryContact').trigger('click');
}

});

Also, in the example above, triggering the checkbox does not change the checkbox value. As depicted above, based on a dropdown box changing and no contact being selected from the drop down box, automatically uncheck the checkbox and trigger it in invoke any event handlers on the checkbox.

jscompress fails to compress my js file and errors out - why?

2010-03-22T05:12:00.000-07:00

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 SetupDeliveredVPRecontactNotes($item, id) {
var theData;

$.ajax({
data: { deliveredVPId: id },
url: $('#ajaxGetDeliveredVPRecontactNotesUrl').val(),
type: "GET",
async: false,
dataType: "html",
success: function(data, result) {
$item.empty();
var input = '' + data + ''; $item.append('input'); theData = data; }, error: function(XMLHttpRequest, textStatus, errorThrown) { $item.empty(); alert("An error occurred: The operation to retrieve the DeliveredVP's Recontact Notes has failed"); } }); //ajax return theData; }

  
 Solution:
 The issue is the closing textarea tab, concatenate it as 
''
 will fix the issue



How to check off a checkbox using jQuery
2010-03-15T11:56:00.001-07:00
$('#someCheckbox').attr('checked','true')


How to find out if you are runnig on a 64-bit Processor
2010-02-09T07:43:00.000-08:00
Goal:

Find out if you are runing on a 64-bit processor
Answer:

Go to the command prompt (type cmd int the Start -> Search box)

type the follownig command: set | find "PRECESSOR_ARCHITECTURE"

If you get ADM64 back (or something similar with 64 in it) you are running on a 64-bit processor, and would be able to install and run for example Windows 7's 64 bit OS. If you get something like x86 you are running on the older 32-bit architecture.


Restructuring ASP.Net MVC app
2009-12-30T05:56:00.001-08:00
So the issue is, you have a very large ASP.Net MVC app with many controllers and actions and don't know (or do) on how to restructure it for better maintenance.

This article contains some thoughts around what my experiences were with building a large scale app with 10K+ lines of jQuery and 266 Actions dispersed over 98 Controllers.

In the beginning:

Yes God created .... no I created a relatively small scale Mvc app based on a very limited set of requirements, more like a XP experience or learn as you go. The user community did not know what they wanted and the prototype was based on a missed conception of what the business' core day-to-day focus was (of course we did not know this at the time). There were only a few controllers and they were small.

Then we discovered the jQuery Grid by Tony Tomov (awesome free plug-in) which supports a ton of ajax features, so we decided to use it for all of our lists and also for a lot of CRUD functions. This very quickly expanded the controllers to a very large size. At this time I decided to not split the controllers as it might introduce bugs. For example an Account has a New, Update, Delete, Create and Edit action, and now it has a List and CUD action (2 actions) added for each grid. Since the Account page has 9 tabs with 13 grids it now has an added 26 actions on that single AccountController controller and then some for other ajax type functions.

So then very quickly, as the customers saw the app, new requirements were added and the controllers grew even bigger.

The decision then came as to what to do and how to refactor the code. I ran this past a colleague of mine to find out what he thinks: Large controller with all the logically related actions together (yes all 39 actions at some point) or to split them into smaller but many different controllers? It seemed that keeping it all in one controller was a good decision since when you need to fix something on the account page with all the tabs with grids on them you know you need to go to the AccountController controller, right!? However, what if the requirements change and these grids need to be also displayed in other places, that's right, like on the Contact's maintenance page that has the same tabs as the Account page (only filtered by the contact for that account). Now I have a duplicate set of actions that perform essentially an identical function to those on the Account's controller. That is when it became clear that the controllers' actions should not be arranged according to how the screens look like but to adhere to the SRP.

Lets look at an example. The Account has a list of Calls, Contacts, Contracts and Lessons Learned. Even though these are tabs on the account's page, they need to be self contained. So this is how they were disseminated and re-arranged to adhere to SRP:

AccountController: New, Create, Edit, Update, Delete, List actions
CallController: New, Create, Edit, Update, Delete, List actions
ContactController: New, Create, Edit, Update, Delete, List actions
ContractController: New, Create, Edit, Update, Delete, List actions
LLController: New, Create, Edit, Update, Delete, List actions

The AccountController had a very large constructor since we used IoC Castle Windsor to inject the Repository (DAO type functions) into the constructor; to support all the DAO functions for calls, contacts, contracts and lessons learned. Now the constructor of each controller is very small and only cares about the Repositories it needs. In addition, to mention one example, the Calls tab on the account and contact screens now share the same action defined on another controller specifically to support the jqGrid functions for calls, the CallGridController with its 2 (yes only 2) actions ListCallsForjqGrid() and SaveCallForjqGrid(), rather than duplicating it. Now another developer knows that no matter where the jqGrid is displayed for calls, they can always find it on the CallGridController.

These are just some of the benefits of creating smaller controllers. Feel free to comment and share your ideas and experiences.


How to set the windows path in Windows 7
2009-10-21T04:55:00.001-07:00
                       
                                    
                                                                                                    How to set the path in Windows 7.
                         Goal:
                         Setting the windows command path in Windows 7
                         Additional information:
                         Modifying the path statement will enable an MS-DOS window opened in Microsoft Windows as well as older programs to locate files that may be required to run the program.
                         In the old MS-DOS environment we used the PATH= command, located in the autoexec.bat file. Additional information about the MS-DOS path command that is still usable in Windows 2000 and Windows XP can be found on our path command page, additional information about the MS-DOS command can be found on our set command page.
                         See our dictionary path definition for additional information about this term and related definitions.
                         Answer:
                         The path is now managed by Windows 7 and not the autoexec.bat or autoexec.nt files. To change the system environment variables, follow the below steps. 
                         From the desktop, right-click My Computer and click Properties.
In the System Properties window, click on the Advanced tab.
In the Advanced section, click the Environment Variables button. 
Finally, in the Environment Variables window (as shown below), highlight the Path variable in the Systems Variable section and click the Edit button. Add or modify the path lines with the paths you wish the computer to access. Each different directory is separated with a semicolon as shown below.
                           
                            C:\Program Files;C:\Winnt;C:\Winnt\System32
                         
                                              
                 
             
                      
     
 


Do I have a 64-bit or 32-bit CPU (Processor)?
2009-10-09T11:00:00.000-07:00
How to check what kind of processor you have (CPU) and what operating system can I run on it?

An X64 has a 64 bit microprocessor, whereas an X86, derived from the old 8086 PC, has a 32 bit microprocessor. A 32 bit machine and/or OS (operating system) is limited to about 3.55GB of memory, and an X64 is limited to about 17,179,869,184 gigabytes, 17,179,869 terabytes, or about 16 exabytes of RAM. Also a 32-bit OS cannot run an 64-bit OS.

So, how to check your CPU:

Since you cannot run WIndows7-64x on a 32-bit machine lets look at windows 7.  From the Start icon on the toolbar select Control Panel. Look for Hardware and SOund and select View devices and printers. Double-click yur computer (will be labeled with your machine name). A Properties window pops-up with two tabs, select the Hardware tab. Look for a name starting with ACPI, with Type of Computer. If it says ACPI x64-based PC you know you have a 64-bit machine, CONGRATULATIONS! You can now install a 64-bit OS like Vista-64 or Windows7-64 and run any of your old software as the new 64-bit OS "knows" (is compatible) how to run the 32-bit apps.

What about memory? 

If you want to install more than 4GB or RAM you will need to have a 64-bit CPU and also run a 64-bit OS otherwise you are wasting your money.


How to stop and prompt user when closing browser
2009-09-21T15:05:00.000-07:00
Scenario: 

For some reason you want to stop the user from closing the browser window or from redirecting away from the current page, based on some condition.

The solution:

 window.onbeforeunload = function(event) {
           return true;
       }

This will prompt you for input (like the JavaScript confirm pop-up menu). There is no way to override the text though.

Some concerns:
This works great but it may not be what you want all the time, as no matter if you click a hyperlink, hit submit, etc will prompt the user. So here is an example where only when any input value on the screen has changed, I want to prompt the user only then and also only if the user decides to redirect from the page. It should not prompt the user when I try and save/delete or update the page:

var dataUpdated = false;

$(document).ready(function() {
   SetupChangeEventOnAllInputElementsAndSetGlobalFlag();
})

function SetupChangeEventOnAllInputElementsAndSetGlobalFlag() {
   $(':input').change(function() {
       dataUpdated = true;

       window.onbeforeunload = function(evt) {

           var e = e || window.event;

           // For IE and Firefox
           if (e) {
               if (DetermineSubmit(evt) == true)
                   return;
               else
                   e.returnValue = 'You have not saved your changes - OK to ignore or Cancel to remain on this page?';
           }
           else {
               // For Safari
               if (DetermineSubmit(evt) == true)
                   return
               else
                   return 'You have not saved your changes - OK to ignore or Cancel to remain on this page?';
           }
       }

   });

}

//Determine if the original event is a submit button/control that triggered the window unload
function DetermineSubmit(evt) {
   if ($(evt.explicitOriginalTarget).is(':submit')) {
       return true;
   }
 
   return false;
}