Question

I have a Javascript function for my select box, but after I included runat=”server” to it, the script debugger highlights on this line below:

‘ for (i = 0; i < sourceTo.options.length; i++) { ‘ and says:

SCRIPT5007: Unable to get value of the property ‘length’: object is null or undefined

I included it because I wanted to loop through it in code behind and perform some other stuffs, please advice thanks!

Code:

    <select multiple size="8" style="width: 135px" runat="server" id="outletFromBox">
                                               <option value="JP">Jurong Point</option>
                                               <option value="IMM">IMM</option>
                                               <option value="Wisma">Wisma</option>                
                                           </select> 
                                       </td>

                                       <td align="center" valign="middle">
                                           <input type="button" class="ui-icon ui-icon-arrowthick-1-e ui-corner-all" style="width: 20px; height: 23px;" onClick=" javascript:move(('outletFromBox'),('outletToBox')); " 
                                                  value=""><br />
                                           <input type="button" class="ui-icon ui-icon-arrowthick-1-w ui-corner-all" style="width: 20px; height: 23px;" onClick=" javascript:move(('outletToBox'),('outletFromBox')); " 
                                                  value=""> 
                                       </td>
   <td style="padding-left: 4px"> 

                                   <select multiple size="8" style="width: 135px" runat="server" onBlur="selectAll(this, true, document.getElementById('<%=uilblDestinationQualOutlet.ClientID%>'))" id="outletToBox">
                                   </select> <span class="guide"></span>
                               </td></tr></table> 


                </div> 
            </asp:Panel>

Javascript:

function move(sourceFrom, sourceTo) {
            var arrFrom = new Array();
            var arrTo = new Array();
            var arrLU = new Array();
            var i;
            for (i = 0; i < sourceTo.options.length; i++) {
                arrLU[sourceTo.options[i].text] = sourceTo.options[i].value;
                arrTo[i] = sourceTo.options[i].text;
            }
            var fLength = 0;
            var tLength = arrTo.length;
            for (i = 0; i < sourceFrom.options.length; i++) {
                arrLU[sourceFrom.options[i].text] = sourceFrom.options[i].value;
                if (sourceFrom.options[i].selected && sourceFrom.options[i].value != "") {
                    arrTo[tLength] = sourceFrom.options[i].text;
                    tLength++;
                } else {
                    arrFrom[fLength] = sourceFrom.options[i].text;
                    fLength++;
                }
            }

            sourceFrom.length = 0;
            sourceTo.length = 0;

            var ii;
            for (ii = 0; ii < arrFrom.length; ii++) {
                var no = new Option();
                no.value = arrLU[arrFrom[ii]];
                no.text = arrFrom[ii];
                sourceFrom[ii] = no;
            }

            for (ii = 0; ii < arrTo.length; ii++) {
                var no = new Option();
                no.value = arrLU[arrTo[ii]];
                no.text = arrTo[ii];
                sourceTo[ii] = no;
            }

            (sourceTo).focus();

            if (sourceTo == (document.getElementById('outletFromBox'))) {
                (sourceFrom).focus();
            }
            if (sourceTo == (document.getElementById('QualMemTypeFromBox'))) {
                (sourceFrom).focus();
            }
            if (sourceTo == (document.getElementById('MemStatusFromBox'))) {
                (sourceFrom).focus();
            }
        }

Answer 1

when you add runat=”server” to any control the client id of the control changes.
I guess this is your problem, you should pass the client ids to the move function.