Ajax bound select (combo box) error (or list is empty depending on browser)

Question

1.00/5 (1 vote)

See more:

I took over a project where I have a page that loads a large select (combo box) list of 1,430 entries and loads without issue on our main page. We are using Pretty Photo[^] as a modal display for inserting and modifying data. (I removed the pretty photo and the issue persisted 4/4/12)

Original Issue

I get the following error in MicrosoftAjaxTemplates.debug.js

Microsoft JScript runtime error:

and no other information.

in function Sys$UI$Template$compile() on the line:

JavaScript

element._msajaxtemplate = [this._instantiateIn = new Function("__containerElement", "$dataItem", "$index", "__referenceNode", "$parentContext", "__instanceId", code), nestedTemplates];

Here is what the element inner html contains (removed most options; however, there are 1,430 options):

JavaScript

<tr><td>Barcode</td><td><input style="width: 100px;" id="txt_Barcode_dcaccc6c-bbd9-4887-b86d-50615fc119d4" onchange="UpdateObserver('Barcode', this.value);" title="Barcode" name="Barcode" maxLength="15" size="100px" type="text" sys:value="{{formatText(Barcode,'')}}" firstfield="true" fieldbinding="Barcode" inputmask=""></td></tr><tr><td>First Name</td><td><input style="width: 200px;" id="txt_EntryFirstName_5eaeb03b-10b1-4477-a0f4-f8981afa1efe" onchange="UpdateObserver('EntryFirstName', this.value);" title="First Name" name="EntryFirstName" maxLength="25" size="200px" type="text" sys:value="{{formatText(EntryFirstName,'')}}" fieldbinding="EntryFirstName" inputmask=""></td></tr><tr><td>Middle Name</td><td><input style="width: 200px;" id="txt_EntryMiddleName_18c90a69-9d7d-4620-8516-b1f820232191" onchange="UpdateObserver('EntryMiddleName', this.value);" title="Middle Name" name="EntryMiddleName" maxLength="25" size="200px" type="text" sys:value="{{formatText(EntryMiddleName,'')}}" fieldbinding="EntryMiddleName" inputmask=""></td></tr><tr><td>Last Name</td><td><input style="width: 200px;" id="txt_EntryLastName_56251525-20ff-4068-adf4-91ba9177dc0c" onchange="UpdateObserver('EntryLastName', this.value);" title="Last Name" name="EntryLastName" maxLength="25" size="200px" type="text" sys:value="{{formatText(EntryLastName,'')}}" fieldbinding="EntryLastName" inputmask=""></td></tr><tr><td>Entry Date</td><td><input style="width: 100px;" id="txt_EntryDate_bf74bc1a-9980-408d-a722-9b51a91fb45b" onchange="UpdateObserver('EntryDate', this.value);" class="date" title="Entry Date" name="EntryDate" maxLength="10" size="100px" type="text" sys:value="{{formatDate(EntryDate,'MM/dd/yyyy')}}" fieldbinding="EntryDate" inputmask="" datefield="true"></td></tr><tr><td>Company</td><td><select style="width: 500px;" id="ddl_1_CompanyID_53f3ff5f-3070-4473-b8d9-e4055e29e0e9"  önchange="UpdateObserver('CompanyID', this.value);" class="queryfield" title="Company" fieldbinding="CompanyID" LoadOnDemand="false" sys:value="{{CompanyID}}" width="500px" showcode="False" descfield="CompanyDescription" codefield="CompanyID" queryid="1" lookupid="1" sys:attach="dataview"><option value="0">(None)</option><option value="6">2ROAM, INC.</option><option value="5">3DSP CORPORATION</option><option value="1437">3M (Sirva)</option><option value="1218">57 STARS LLC</option><option value="1328">69 SLAM</option><option value="901">7 SOFTWARE</option><option value="838">ABGENT INC.</option><option value="7">ACADIA PHARMACEUTICALS, INC.</option><option value="1148">ACCELRYS SOFTWARE INC</option><option value="1123">ACCELRYS SOFTWARE, INC.</option><option value="520">ACCELRYS, INC.</option><option value="517">ACCOUNTMATE SOFTWARE CORPORATION</option><option value="549">ACELO SEMICONDUCTORS, INC.</option><option value="8">ACON LABORATORIES, INC.</option><option value="597">ACOUSTIC TECHNOLOGIES, INC.</option><option value="1390">ACTEL CORPORATION</option><option value="726">ACTIONABLE INTELLIGENCE TECHNOLOGIES, INC.</option><option value="9">ACTIVX BIOSCIENCES, INC.</option><option value="467">ADAC LABORATORIES</option><option value="897">ADC WIRELESS</option><option value="10">ADCOM INFORMATION SERVICES, INC.</option><option value="1290">ADEPT MANAGEMENT</option><option value="924">Advanced Cardiovascular Systems</option><option value="679">ADVANCED MICRO DEVICES, INC.</option><option value="2">ZUCOTTO WIRELESS, INC.</option></select></td></tr>

If I paste the entire HTML into jsfiddle.net[^] the select list (combo box) renders with all options listed (no error).

I thought that the data used to build the select list was the culprit so I employed a binary sort approach where I deleted half the data and the error went away. I tested the other half and no error; but, will all 1,430 options I get the error.

Attempted Workaround
The next approach was to load the data onfocus of the select list (combo box). On the main page, no problem... control has focus the list populates. On the PrettyPhoto pages no error; however, the list is empty. Using Fiddler2[^] I see the JSON data being passed back and I can put a break point where the binding happens; however, the select list (combo box) is empty.

I've run into other issues with PrettyPhoto and read the following that helped me solve my date picker issue:

Quote:
'prettyPhoto' create a new DOM everytime it is triggered, so the 'focus' event that datepicker is bounded to, does not exist on the DOM element in your lightbox

[Source]

I sense this same issue has to do with the select list not loading. Just not sure how to fix this.

I've been banging my head on this issue for some time now, any suggestion or tip to lead me in the right direction will be much appreciated.

Update 4/2/2012
The issue does not seem to present itself in Chrome; however, in FireFox and IE 9 the issue exists.

Update 4/4/2012
Removed the usage of pretty photo and the issue persisted (this issue seems to be the binding and the amount of data).
In IE 9 (or 8) I get the original issue.
In FireFox and Chrome... all is well.

Thanks!

Posted 27-Mar-12 7:17am

Pete _BSC

Updated 4-Apr-12 14:32pm

v10

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Pete _BSC · Accepted Answer · 2012-08-20T17:55:00

I finally developed a workaround for this issue. I was never able to solve the original issue.

JavaScript

$(document).ready(function () {

//only apply to controls that have LoanOnDemand=true attribute
$('select[LoadOnDemand=true]').live('keydown', (function(event) {
   LoadOnDemandLookups(String.fromCharCode(event.keyCode), this.id);
   return false;
}));

}

LoadOnDemandLookups would then make an AJAX call to get all data that started with an alpha/numeric character and populate the list. Instead of live binding used JQuery to load the select options:

JavaScript

//snip
var combo = $('#' + controlID);

if(combo.prop) {
  var options = combo.prop('options');
}
else {
  var options = combo.attr('options');
}

$('option', combo).remove();
$.each(result.d.dt.rows, function () {
    options[options.length] = new Option(this.CompanyDescription, this.CompanyID);
});
//snip

result.d.dt.rows is a DataTable returned from a Web Service Method.

When the select list has focus and the user presses "T" all the entries that start with "T" populate the select list.

Using JQuery .live allows it to work in the PrettyPhoto frame.