Fun with Ajax and Firefox.

Posted At : November 23, 2007 11:40 AM | Posted By : nolan
Related Categories: Programming,JavaScript

...and by "fun" I mean "WTF?!"

This code works just fine on Firefox 2.0.0.3 (on Windows XP):

pReq.open( "GET", strURL, true );

var pReq = createRequest();
pReq.open( "GET", strURL, false );
pReq.onreadystatechange = updateChildControls;
pReq.send( null );

pReq.open( "GET", strURL, true );

var pReq = createRequest();
pReq.open( "GET", strURL, false );
pReq.onreadystatechange = updateChildControls;
pReq.send( null );

pReq.open( "GET", strURL, true );

var pReq = createRequest();
pReq.open( "GET", strURL, false );
pReq.onreadystatechange = updateChildControls;
pReq.send( null );

pReq.open( "GET", strURL, true );

var pReq = createRequest();
pReq.open( "GET", strURL, false );
pReq.onreadystatechange = updateChildControls;
pReq.send( null );

pReq.open( "GET", strURL, true );

var pReq = createRequest();
pReq.open( "GET", strURL, false );
pReq.onreadystatechange = updateChildControls;
pReq.send( null );

// my function for creating an XmlHttpRequest object
pReq = createRequest();

pReq.open( "GET", strURL, true );
pReq.onreadystatechange = _updateDropDown;
pReq.send( null );

pReq.send();

// my function for creating an XmlHttpRequest object
pReq = createRequest();

pReq.open( "GET", strURL, false );
pReq.onreadystatechange = _updateDropDown;
pReq.send( );

// my function for creating an XmlHttpRequest object
pReq = createRequest();

pReq.open( "GET", strURL, true );
pReq.onreadystatechange = _updateDropDown;
pReq.send( null );

pReq.send();

// my function for creating an XmlHttpRequest object
pReq = createRequest();

pReq.open( "GET", strURL, false );
pReq.onreadystatechange = _updateDropDown;
pReq.send( );

// my function for creating an XmlHttpRequest object
pReq = createRequest();

pReq.open( "GET", strURL, true );
pReq.onreadystatechange = _updateDropDown;
pReq.send( null );

pReq.send();

// my function for creating an XmlHttpRequest object
pReq = createRequest();

pReq.open( "GET", strURL, false );
pReq.onreadystatechange = _updateDropDown;
pReq.send( );

<cfqueryparam cfsqltype="cf_sql_date" value="#trim(form.startDate)#" />

<cfif StructKeyExists( arguments, "iAge" )>
<cfif Len( Trim( arguments.iAge ) )>
<cfqueryparam cfsqltype="cf_sql_integer" value="#trim(form.iAge)#" maxlength="3" />
<cfelse>
NULL
</cfif>
</cfif>

<cfqueryparam cfsqltype="cf_sql_integer" value="#trim(form.iAge)#" maxlength="3" null="#yesNoFormat(NOT len(trim(form.iAge)))#" />

<table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
         <script>
             var dswfp = new Spry.Data.XMLDataSet( "/oasis/ajax_events/getRecordXmlSpry.cfm?strTableName=wafer_fab_process&stupid=0.967819147116", "root/row" );
         </script>

         <div spry:region="dswfp" id="wfp">
         <div class="loading" spry:state="loading"><p>Loading ...</p></div>
         <div class="ready" spry:state="ready">
         <table border="1">
         <tr>
         <th scope="col" spry:sort="WAFER_FAB_PROCESS_NAME">WFP Name</th>
         </tr>
         <tr spry:repeat="dswfp">
         <td>{dswfp::wafer_fab_process_name}</td>
         </tr>
         </table>
         </div>
         </div>
        </td>
    </tr>
</table>

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<script>
var dswfp = new Spry.Data.XMLDataSet( "/oasis/ajax_events/getRecordXmlSpry.cfm?strTableName=wafer_fab_process&stupid=0.967819147116", "root/row" );
</script>

<div spry:region="dswfp" id="wfp">
<div class="loading" spry:state="loading"><p>Loading ...</p></div>
<div class="ready" spry:state="ready">
<table border="1">
<tr>
<th scope="col" spry:sort="WAFER_FAB_PROCESS_NAME">WFP Name</th>
</tr>
<tr spry:repeat="dswfp">
<td>{dswfp::wafer_fab_process_name}</td>
</tr>
</table>
</div>
</div>
</table>

<cfexecute name="c:\windows\system32\tree.com" arguments="/?" timeout="20" variable="bar" />

<cfexecute name="c:\windows\system32\tree.com" arguments="/?" variable="bar" />

<cfdump var="#bar#" />

<cfqueryparam cfsqltype="cf_sql_date" value="#trim(form.startDate)#" />

<cfif StructKeyExists( arguments, "iAge" )>
<cfif Len( Trim( arguments.iAge ) )>
<cfqueryparam cfsqltype="cf_sql_integer" value="#trim(form.iAge)#" maxlength="3" />
<cfelse>
NULL
</cfif>
</cfif>

<cfqueryparam cfsqltype="cf_sql_integer" value="#trim(form.iAge)#" maxlength="3" null="#yesNoFormat(NOT len(trim(form.iAge)))#" />

<cfqueryparam cfsqltype="cf_sql_date" value="#trim(form.startDate)#" />

<cfif StructKeyExists( arguments, "iAge" )>
<cfif Len( Trim( arguments.iAge ) )>
<cfqueryparam cfsqltype="cf_sql_integer" value="#trim(form.iAge)#" maxlength="3" />
<cfelse>
NULL
</cfif>
</cfif>

<cfqueryparam cfsqltype="cf_sql_integer" value="#trim(form.iAge)#" maxlength="3" null="#yesNoFormat(NOT len(trim(form.iAge)))#" />

<table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
         <script>
             var dswfp = new Spry.Data.XMLDataSet( "/oasis/ajax_events/getRecordXmlSpry.cfm?strTableName=wafer_fab_process&stupid=0.967819147116", "root/row" );
         </script>

         <div spry:region="dswfp" id="wfp">
         <div class="loading" spry:state="loading"><p>Loading ...</p></div>
         <div class="ready" spry:state="ready">
         <table border="1">
         <tr>
         <th scope="col" spry:sort="WAFER_FAB_PROCESS_NAME">WFP Name</th>
         </tr>
         <tr spry:repeat="dswfp">
         <td>{dswfp::wafer_fab_process_name}</td>
         </tr>
         </table>
         </div>
         </div>
        </td>
    </tr>
</table>

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<script>
var dswfp = new Spry.Data.XMLDataSet( "/oasis/ajax_events/getRecordXmlSpry.cfm?strTableName=wafer_fab_process&stupid=0.967819147116", "root/row" );
</script>

<div spry:region="dswfp" id="wfp">
<div class="loading" spry:state="loading"><p>Loading ...</p></div>
<div class="ready" spry:state="ready">
<table border="1">
<tr>
<th scope="col" spry:sort="WAFER_FAB_PROCESS_NAME">WFP Name</th>
</tr>
<tr spry:repeat="dswfp">
<td>{dswfp::wafer_fab_process_name}</td>
</tr>
</table>
</div>
</div>
</table>

<table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
         <script>
             var dswfp = new Spry.Data.XMLDataSet( "/oasis/ajax_events/getRecordXmlSpry.cfm?strTableName=wafer_fab_process&stupid=0.967819147116", "root/row" );
         </script>

         <div spry:region="dswfp" id="wfp">
         <div class="loading" spry:state="loading"><p>Loading ...</p></div>
         <div class="ready" spry:state="ready">
         <table border="1">
         <tr>
         <th scope="col" spry:sort="WAFER_FAB_PROCESS_NAME">WFP Name</th>
         </tr>
         <tr spry:repeat="dswfp">
         <td>{dswfp::wafer_fab_process_name}</td>
         </tr>
         </table>
         </div>
         </div>
        </td>
    </tr>
</table>

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<script>
var dswfp = new Spry.Data.XMLDataSet( "/oasis/ajax_events/getRecordXmlSpry.cfm?strTableName=wafer_fab_process&stupid=0.967819147116", "root/row" );
</script>

<div spry:region="dswfp" id="wfp">
<div class="loading" spry:state="loading"><p>Loading ...</p></div>
<div class="ready" spry:state="ready">
<table border="1">
<tr>
<th scope="col" spry:sort="WAFER_FAB_PROCESS_NAME">WFP Name</th>
</tr>
<tr spry:repeat="dswfp">
<td>{dswfp::wafer_fab_process_name}</td>
</tr>
</table>
</div>
</div>
</table>

<cfexecute name="c:\windows\system32\tree.com" arguments="/?" timeout="20" variable="bar" />

<cfexecute name="c:\windows\system32\tree.com" arguments="/?" variable="bar" />

<cfdump var="#bar#" />

<cfexecute name="c:\windows\system32\tree.com" arguments="/?" timeout="20" variable="bar" />

<cfexecute name="c:\windows\system32\tree.com" arguments="/?" variable="bar" />

<cfdump var="#bar#" />

<cfexecute name="c:\windows\system32\tree.com" arguments="/?" timeout="20" variable="bar" />

<cfexecute name="c:\windows\system32\tree.com" arguments="/?" variable="bar" />

<cfdump var="#bar#" />

<cfqueryparam cfsqltype="cf_sql_date" value="#trim(form.startDate)#" />

<cfif StructKeyExists( arguments, "iAge" )>
<cfif Len( Trim( arguments.iAge ) )>
<cfqueryparam cfsqltype="cf_sql_integer" value="#trim(form.iAge)#" maxlength="3" />
<cfelse>
NULL
</cfif>
</cfif>

<cfqueryparam cfsqltype="cf_sql_integer" value="#trim(form.iAge)#" maxlength="3" null="#yesNoFormat(NOT len(trim(form.iAge)))#" />

<table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
         <script>
             var dswfp = new Spry.Data.XMLDataSet( "/oasis/ajax_events/getRecordXmlSpry.cfm?strTableName=wafer_fab_process&stupid=0.967819147116", "root/row" );
         </script>

         <div spry:region="dswfp" id="wfp">
         <div class="loading" spry:state="loading"><p>Loading ...</p></div>
         <div class="ready" spry:state="ready">
         <table border="1">
         <tr>
         <th scope="col" spry:sort="WAFER_FAB_PROCESS_NAME">WFP Name</th>
         </tr>
         <tr spry:repeat="dswfp">
         <td>{dswfp::wafer_fab_process_name}</td>
         </tr>
         </table>
         </div>
         </div>
        </td>
    </tr>
</table>

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<script>
var dswfp = new Spry.Data.XMLDataSet( "/oasis/ajax_events/getRecordXmlSpry.cfm?strTableName=wafer_fab_process&stupid=0.967819147116", "root/row" );
</script>

<div spry:region="dswfp" id="wfp">
<div class="loading" spry:state="loading"><p>Loading ...</p></div>
<div class="ready" spry:state="ready">
<table border="1">
<tr>
<th scope="col" spry:sort="WAFER_FAB_PROCESS_NAME">WFP Name</th>
</tr>
<tr spry:repeat="dswfp">
<td>{dswfp::wafer_fab_process_name}</td>
</tr>
</table>
</div>
</div>
</table>

pReq.open( "GET", strURL, true );

var pReq = createRequest();
pReq.open( "GET", strURL, false );
pReq.onreadystatechange = updateChildControls;
pReq.send( null );

// my function for creating an XmlHttpRequest object
pReq = createRequest();

pReq.open( "GET", strURL, true );
pReq.onreadystatechange = _updateDropDown;
pReq.send( null );

pReq.send();

// my function for creating an XmlHttpRequest object
pReq = createRequest();

pReq.open( "GET", strURL, false );
pReq.onreadystatechange = _updateDropDown;
pReq.send( );

<cfqueryparam cfsqltype="cf_sql_date" value="#trim(form.startDate)#" />

<cfif StructKeyExists( arguments, "iAge" )>
<cfif Len( Trim( arguments.iAge ) )>
<cfqueryparam cfsqltype="cf_sql_integer" value="#trim(form.iAge)#" maxlength="3" />
<cfelse>
NULL
</cfif>
</cfif>

<cfqueryparam cfsqltype="cf_sql_integer" value="#trim(form.iAge)#" maxlength="3" null="#yesNoFormat(NOT len(trim(form.iAge)))#" />

<cfexecute name="c:\windows\system32\tree.com" arguments="/?" timeout="20" variable="bar" />

<cfexecute name="c:\windows\system32\tree.com" arguments="/?" variable="bar" />

<cfdump var="#bar#" />

pReq.open( "GET", strURL, true );

var pReq = createRequest();
pReq.open( "GET", strURL, false );
pReq.onreadystatechange = updateChildControls;
pReq.send( null );

// my function for creating an XmlHttpRequest object
pReq = createRequest();

pReq.open( "GET", strURL, true );
pReq.onreadystatechange = _updateDropDown;
pReq.send( null );

pReq.send();

// my function for creating an XmlHttpRequest object
pReq = createRequest();

pReq.open( "GET", strURL, false );
pReq.onreadystatechange = _updateDropDown;
pReq.send( );

<cfqueryparam cfsqltype="cf_sql_date" value="#trim(form.startDate)#" />

<cfif StructKeyExists( arguments, "iAge" )>
<cfif Len( Trim( arguments.iAge ) )>
<cfqueryparam cfsqltype="cf_sql_integer" value="#trim(form.iAge)#" maxlength="3" />
<cfelse>
NULL
</cfif>
</cfif>

<cfqueryparam cfsqltype="cf_sql_integer" value="#trim(form.iAge)#" maxlength="3" null="#yesNoFormat(NOT len(trim(form.iAge)))#" />

<cfexecute name="c:\windows\system32\tree.com" arguments="/?" timeout="20" variable="bar" />

<cfexecute name="c:\windows\system32\tree.com" arguments="/?" variable="bar" />

<cfdump var="#bar#" />

<cfexecute name="c:\windows\system32\tree.com" arguments="/?" timeout="20" variable="bar" />

<cfexecute name="c:\windows\system32\tree.com" arguments="/?" variable="bar" />

<cfdump var="#bar#" />

pReq.open( "GET", strURL, true );

var pReq = createRequest();
pReq.open( "GET", strURL, false );
pReq.onreadystatechange = updateChildControls;
pReq.send( null );

pReq.open( "GET", strURL, true );

var pReq = createRequest();
pReq.open( "GET", strURL, false );
pReq.onreadystatechange = updateChildControls;
pReq.send( null );

// my function for creating an XmlHttpRequest object
pReq = createRequest();

pReq.open( "GET", strURL, true );
pReq.onreadystatechange = _updateDropDown;
pReq.send( null );

pReq.send();

// my function for creating an XmlHttpRequest object
pReq = createRequest();

pReq.open( "GET", strURL, false );
pReq.onreadystatechange = _updateDropDown;
pReq.send( );

<cfqueryparam cfsqltype="cf_sql_date" value="#trim(form.startDate)#" />

<cfif StructKeyExists( arguments, "iAge" )>
<cfif Len( Trim( arguments.iAge ) )>
<cfqueryparam cfsqltype="cf_sql_integer" value="#trim(form.iAge)#" maxlength="3" />
<cfelse>
NULL
</cfif>
</cfif>

<cfqueryparam cfsqltype="cf_sql_integer" value="#trim(form.iAge)#" maxlength="3" null="#yesNoFormat(NOT len(trim(form.iAge)))#" />

// my function for creating an XmlHttpRequest object
pReq = createRequest();

pReq.open( "GET", strURL, true );
pReq.onreadystatechange = _updateDropDown;
pReq.send( null );

pReq.send();

// my function for creating an XmlHttpRequest object
pReq = createRequest();

pReq.open( "GET", strURL, false );
pReq.onreadystatechange = _updateDropDown;
pReq.send( );

<table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
         <script>
             var dswfp = new Spry.Data.XMLDataSet( "/oasis/ajax_events/getRecordXmlSpry.cfm?strTableName=wafer_fab_process&stupid=0.967819147116", "root/row" );
         </script>

         <div spry:region="dswfp" id="wfp">
         <div class="loading" spry:state="loading"><p>Loading ...</p></div>
         <div class="ready" spry:state="ready">
         <table border="1">
         <tr>
         <th scope="col" spry:sort="WAFER_FAB_PROCESS_NAME">WFP Name</th>
         </tr>
         <tr spry:repeat="dswfp">
         <td>{dswfp::wafer_fab_process_name}</td>
         </tr>
         </table>
         </div>
         </div>
        </td>
    </tr>
</table>

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<script>
var dswfp = new Spry.Data.XMLDataSet( "/oasis/ajax_events/getRecordXmlSpry.cfm?strTableName=wafer_fab_process&stupid=0.967819147116", "root/row" );
</script>

<div spry:region="dswfp" id="wfp">
<div class="loading" spry:state="loading"><p>Loading ...</p></div>
<div class="ready" spry:state="ready">
<table border="1">
<tr>
<th scope="col" spry:sort="WAFER_FAB_PROCESS_NAME">WFP Name</th>
</tr>
<tr spry:repeat="dswfp">
<td>{dswfp::wafer_fab_process_name}</td>
</tr>
</table>
</div>
</div>
</table>

<cfqueryparam cfsqltype="cf_sql_date" value="#trim(form.startDate)#" />

<cfif StructKeyExists( arguments, "iAge" )>
<cfif Len( Trim( arguments.iAge ) )>
<cfqueryparam cfsqltype="cf_sql_integer" value="#trim(form.iAge)#" maxlength="3" />
<cfelse>
NULL
</cfif>
</cfif>

<cfqueryparam cfsqltype="cf_sql_integer" value="#trim(form.iAge)#" maxlength="3" null="#yesNoFormat(NOT len(trim(form.iAge)))#" />

<table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
         <script>
             var dswfp = new Spry.Data.XMLDataSet( "/oasis/ajax_events/getRecordXmlSpry.cfm?strTableName=wafer_fab_process&stupid=0.967819147116", "root/row" );
         </script>

         <div spry:region="dswfp" id="wfp">
         <div class="loading" spry:state="loading"><p>Loading ...</p></div>
         <div class="ready" spry:state="ready">
         <table border="1">
         <tr>
         <th scope="col" spry:sort="WAFER_FAB_PROCESS_NAME">WFP Name</th>
         </tr>
         <tr spry:repeat="dswfp">
         <td>{dswfp::wafer_fab_process_name}</td>
         </tr>
         </table>
         </div>
         </div>
        </td>
    </tr>
</table>

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<script>
var dswfp = new Spry.Data.XMLDataSet( "/oasis/ajax_events/getRecordXmlSpry.cfm?strTableName=wafer_fab_process&stupid=0.967819147116", "root/row" );
</script>

<div spry:region="dswfp" id="wfp">
<div class="loading" spry:state="loading"><p>Loading ...</p></div>
<div class="ready" spry:state="ready">
<table border="1">
<tr>
<th scope="col" spry:sort="WAFER_FAB_PROCESS_NAME">WFP Name</th>
</tr>
<tr spry:repeat="dswfp">
<td>{dswfp::wafer_fab_process_name}</td>
</tr>
</table>
</div>
</div>
</table>

pReq.open( "GET", strURL, true );

var pReq = createRequest();
pReq.open( "GET", strURL, false );
pReq.onreadystatechange = updateChildControls;
pReq.send( null );

...updateChildControls() gets called just fine, and all is good.

Note, I deliberately called open() with the 3rd argument set to "false". It would take a while to explain, but this is actually creating the type of behavior in the UI that I'm hoping for, so this is intentionally a bit off from the norm (at least in most of my Ajax books).

However that same code does NOT run on Firefox 2.0.0.9 (on Windows XP), nor does it run on Firefox 2.0.0.6 on Ubuntu. No error messages on any of the machines. updateChildControls() simply never gets called!

I have to change it to this:

...which I find rather annoying.

Can anyone tell me WHY?! If we're not supposed to flip that 3rd argument to "false", then shouldn't it throw an exception? Give me a message in the Error Console? Something?

Maybe this is just what happens when trying to write code the day after Thanksgiving. Can I blame a chemical in the turkey? :)