Tough coding decisions we all have to make at one time or another

One thing is for certain it’s not a perfect world, and there are imperfect solutions out there that make for a perfect user experience if you know what I mean.

Recently, I’ve had to tackle some rather esoteric IE bugs that happen only on that platform. The error in question this time comes from the extjs package and not the browser so what you get in a production environment running ext-all.js in both 4.x and 3.4 is an error in the ext-all.js javascript file.

Of course, the first thing you want to do is switch to ext-all-debug.js and check what line throws the error. You find out that it happens right around line 2921 in the setStyle function. The code is below with one addition, a try … catch block that will alert the property that the error occurred on.

setStyle : function(prop, value){
            var tmp, style;
           // alert(value);
            if (typeof prop != 'object') {
                tmp = {};
                tmp[prop] = value;
                prop = tmp;
            }
            for (style in prop) {
                value = prop[style];
	try{
					 
	style == 'opacity' ?  this.setOpacity(value) : this.dom.style[chkCache(style)] = value;
	} catch(err){
	/*// alert(value);
	   for (x in prop){
		alert('error Thrown' + x + '  -- ' ); 
		}
	   alert(err.name + ' - ' + err.number + ' - ' + err.description );*/
		return true;
	  }
            }		
            return this;
        }

Given that the error occurred in the setStyle function my first inclination was to go back through every style, and bodyStyle config option in the app and make sure that the css was correct. Next I went ahead and looked at any padding config options and corrected anything that seemed amiss. I knew approximately where the error was occurring due to the loop below but that proved little help. Once again using firebug was out of the question as this only happened on IE8/9.

Now you’ve reached the point where you decide to do the unthinkable, change the ext-all file itself to add a throw – catch around the style equals statement. Why?

  • In my case this was the last app to run 3.4 so modifying this would not impact any of the other apps that were running.
  • I had researched the extjs forums and all indications were that this was a bug in this version and since updates for 3.4 are probably not going to happen I had to act fast to resolve this issue.
  • Now onto a new challenge finding the needle in the haystack that is the minified extjs javascript file!
    I have a screen shot that shows the code after it has been changed below for your reference. To find the point where you have to change the code fire up your IDE and search for the following line:

    	G=="opacity"?this.setOpacity(H):this.dom.style[v(G)]=H
     

    Replace it with this:

    try{G=="opacity"?this.setOpacity(H):this.dom.style[v(G)]=H}catch(err){return true}}return this} 
    

    Here’s the code around it for reference:

    There are errors, damned errors and then there are the IE 80020101 errors.

    These are the errors that follow the well laid out numerical error coding convention put in place right around the time the 2600 was the hot gaming machine. You can rest assured that somewhere in a nondescript office building someone knows the meaning of 80020101, for the seasoned programmers out there it’s almost as elusive as the hit album 0u812, remember the mystery, the assumptions, the summer of 88. If you haven’t seen it or can’t get your hands on IE8 here is what you are in for.

    This error occurs in ext applications when you make an ajax request and the data that comes back is not exactly in the format that IE is looking for. In every case I have run into the code performs perfectly in Chrome and Firefox, so the development tools available in those environments will do little to help you out of this one.

    As you can imagine that leaves a lot of possibilities so here are some things to look for when troubleshooting this particular error.

    Are you loading external pages into your extjs panel? Not sure, take a look at your code for something like the following which is loading an external page into a panel:

    Ext.getCmp('some_panel').load({
    	url: '/some_external_page_with_code.cfm',
    	text:'Loading...',
    	scripts:true
    });
    

    In my instance, I noticed that the page in question contained a print page script that I picked from the internet that will pop up the print dialog, the code being below:

    <script language=" javascript">
    <!--//
      function printpage() {
      window.print();
      }
      //-->
    </script> 
    

    Now I don’t know why the

    <!--//

    was inserted into the script, but I do know that IE8 did not like the

    <!--// 

    or a coldfusion comment tag

    <!---

    that was further down in the page. Once these comments were removed from the page that extjs was loading the error disappeared.

    Now since this error is so generic it’s very likely that this was just luck, and there are other syntax mistakes in data that’s coming into your app via ajax calls that will throw this exception. If you run down any code that causes this in addition to comments in Ajax data returns then please post them here so there will be a central point for those looking for help.

    Another tool to help with error detection ( or how I was able to see my cold fusion errors without using firebug )

    Full disclosure: I was doing some maintenance work on an application that someone else coded and then yet another person maintained and ran across the following code that popped up the famous purple cold fusion errors that occur when dealing with Ajax calls from the server. The only way that I was seeing the errors before was to inspect the html tab of firebug when one of the calls failed.

    This function must be placed before Ext.onReady(function(){ .

    error_responseText = function(error_trigger, responseText){	
    	error_window = window.open("", "error_responseText", "height=700, width=1000,toolbar=no,scrollbars=yes,menubar=no");
    	error_window.document.write("<TITLE>error_responseText</TITLE>");
    	error_window.document.write(error_trigger);
    	error_window.document.write("<br><br>", responseText);
    };
    

    Now to hook up the error display you will need to add an exception listener to your store and call the function above. The code to perform this is as follows:

    exception: function(obj, type, action, opt, response, arg ){
    error_responseText('store_name_here', response.responseText);
    }
    

    The result, all of that HTML that is sent back when you get a cold fusion error is rendered in a popup window under the store name that called the broken code. One caveat, if you do not close the window after looking at an error message then the following error will not be displayed.

    What’s the difference between UNION and UNION ALL

    I recently ran into a situation where I had to provide a summary of items ordered in a table and needed to union the products table in order to get all of the lines that also contained a zero as I had a requirement to show a summary of all the quantities ordered as well as line for each product on the products table that did not have any orders in the orders table yet.

    Let’s try to solve this using the tables below, and in turn learn a little about the differences between UNION and UNION ALL:

    Products

    id product description
    1 ajax clean anything
    2 glo-brite mopping solution
    3 steel wool scrub anything
    4 soap plain and good

    Orders

    fk_product_id total
    1 200
    2 300
    1 200
    1 50

    Query

    The query below

    Select orders.total AS ordered,products.product
    FROM orders INNER JOIN products ON orders.fk_product_id = products.ID
    UNION
    SELECT        '0' AS ordered, product
    FROM            products AS products_1
    

    Returns

    ordered product
    0 ajax
    0 glo-brite
    0 soap
    0 steel wool
    200 ajax
    300 glo-brite
    50 ajax

     

    Notice that all of the orders for ajax did not get returned in the query. Since we used union it discarded the duplicates in this instance. Now let’s see what happens when we replace UNION with UNION ALL in the query.

    ordered product
    200 ajax
    300 glo-brite
    200 ajax
    50 ajax
    0 ajax
    0 glo-brite
    0 steel wool
    0 soap

    When using all we tell the query to get every record from both queries without removing the duplicates as you can see in the results displayed above. This is important because if we were to finish the query to the specifications in the requirement in the first paragraph we would expand the query to get the totals using the SQL below, which would result in a missing order count of 200 for ajax when using UNION inside our inner query.

    SELECT SUM(ordered) as orders, product
    FROM(
    Select orders.total AS ordered,products.product
    FROM orders INNER JOIN products ON orders.fk_product_id = products.ID
    UNION ALL
    SELECT        '0' AS ordered, product
    FROM            products AS products_1) as source_table
    Group by product
    
    orders product
    450 ajax
    300 glo-brite
    0 soap
    0 steel wool

    What’s up with SOPA

    With all of the controversy in the past few weeks, and backpedaling from congress about SOPA I thought it might be interesting to take a look at some resources that outline just what this bill was, who supported the bill, and where the money came from, because if you know one thing about DC it’s that they can stop a bill today redress it attach it to something else maybe change the name and slide it through before you know what’s happening.

    First, here’s the bill H.R. 3261 known as SOPA, and here’s the bill known as PIPA S.968.IS.

    Here’s the money trail: http://www.opencongress.org/bill/112-h3261/money.