I took over a project (ASP.Net AJAX, JSON) where I have a page that loads a large select (combo box) list of 1,430 entries and loads without issue on our main (landing) search page.
Issue: I get the following error in MicrosoftAjaxTemplates.debug.js when loading a page where we edit or insert. The difference between the search page and edit page is that there is ajax data binding involved.
Microsoft JScript runtime error: and no other information.
in function Sys$UI$Template$compile() on the line:
element._msajaxtemplate = [this.instantiateIn = new Function("_containerElement", "$dataItem", "$index", "_referenceNode", "$parentContext", "_instanceId", code), nestedTemplates];
Here is a portion of the element inner html (removed most options; however, there are 1,430 options):
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> /select> ... 1,429 options...
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, with 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 in javascript; 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: "'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.
Debugging 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.
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.
The end solution was to not pre-load all the data into the drop down list; however, to load the data on demand. If the user pressed the "A" key, all the data that started with "A" would load the list and there were no errors.
