Click here to Skip to main content
15,879,613 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
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
Updated 4-Apr-12 14:32pm
v10

1 solution

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.
 
Share this answer
 
v2

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900