Unable to retrieve ComboBox1 control via Javascript when NOT using MasterPage in aspx page

Hello
I have an c# asp.net webform which uses a master page. I have coded a simple example to prove that I can use  javascript to check for changes made to an AjaxControlToolkit ComboBox1. The example works perfectly and each time I select a new drop down item the selected item display in the textbox. Because it uses a master page  the javascript has to reference the ComboBox1 as 'MainContent_ComboBox1' and the TextBox1 as '#MainContent_TextBox1'.

Now I need to make this work without a master page. I modified the default.aspx to remove MasterPageFile="~/Site.Master"  and remove the "<asp:Content.." and added in <head> and <scriptmanager> and changed the javascript from 'MainContent_ComboBox1 to ComboBox1 and #MainContent_TextBox1 to #TextBox1 but the Javascript is returning Null for $find('ComboBox1_ComboBox1').add_propertyChanged(function (sender, event) {

I have tried ComboBox1, ComboBox1_ComboBox1, 'ComboBox1', 'ComboBox1_ComboBox1', "ComboBox1", "ComboBox1_ComboBox1" and other variations without success. I don't understand why I am unable to reference  ComboBox1 when there is no master page. Any advice would be welcome !!!

regards
Pat

Original default.aspx with Master Page (Working correctly)
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication13._Default" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="javascript2.js"></script>
       <div class="jumbotron">
       <h1>Test ComboBox</h1>
       <p>
            <cc1:ComboBox ID="ComboBox1" runat="server" AutoPostBack="false" OnSelectedIndexChanged="ComboBox1_SelectedIndexChanged">
            </cc1:ComboBox>
            <asp:TextBox ID="TextBox1" runat="server" BackColor="#CCFFCC" Width="530px" Height="21px">Please select a value from the dropdown box</asp:TextBox>
            <cc1:ComboBox ID="ComboBox2" runat="server" AutoPostBack="false" DropDownStyle="DropDownList" OnSelectedIndexChanged="ComboBox1_SelectedIndexChanged">
            </cc1:ComboBox>
            <p>
                <asp:Button ID="Button1" runat="server" Text="Next"  Width="188px" OnClick="Button1_Click" ForeColor="Green"/>
            </p>
                <p>
                <asp:Button ID="Button2" runat="server" Text="Button 2"  Width="188px" OnClick="Button2_Click"/>
            </p>
  </asp:Content>

Open in new window


Original java script (external javascript .js file) with Master Page (Working correctly)
$(document).ready(function () {
    $find('MainContent_ComboBox1').add_propertyChanged(function (sender, event) {
        console.log(event);
        console.log(sender);
        if (event.get_propertyName() == 'selectedIndex') {
            var newValue = sender.get_textBoxControl().value;
            $('#MainContent_TextBox1').val("You entered: " + newValue);
        }
    });
});

Open in new window


Modified default.aspx WITHOUT Master Page (Not Working )
<%@ Page Title="Home Page" Language="C#"  AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication20._Default" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<head runat="server">
 <title="xxx"></title>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="javascript2.js"></script>
    </head>

    <form id="form1" runat="server" >
     <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
       <h1>Test ComboBox</h1>

       <p>
            <cc1:ComboBox ID="ComboBox1" runat="server" AutoPostBack="false" OnSelectedIndexChanged="ComboBox1_SelectedIndexChanged">
            </cc1:ComboBox>
            <asp:TextBox ID="TextBox1" runat="server" BackColor="#CCFFCC" Width="530px" Height="21px">Please select a value from the dropdown box</asp:TextBox>
            <cc1:ComboBox ID="ComboBox2" runat="server" AutoPostBack="false" DropDownStyle="DropDownList" OnSelectedIndexChanged="ComboBox1_SelectedIndexChanged">
            </cc1:ComboBox>
            <p>
                <asp:Button ID="Button1" runat="server" Text="Next"  Width="188px" OnClick="Button1_Click" ForeColor="Green"/>
            </p>
                <p>
                <asp:Button ID="Button2" runat="server" Text="Button 2"  Width="188px" OnClick="Button2_Click"/>
            </p>
        </form>

Open in new window


Modified djavascript WITHOUT Master Page (Not Working )
$(document).ready(function () {
    $find('ComboBox1_ComboBox1').add_propertyChanged(function (sender, event) {
        console.log(event);
        console.log(sender);
        if (event.get_propertyName() == 'selectedIndex') {
            var newValue = sender.get_textBoxControl().value;
            $('#TextBox1').val("You entered: " + newValue);
        }
    });
});

Open in new window


View Page Source on modified Page (Not Working) to find control names
<head>
 <title="xxx"></title>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="javascript2.js"></script>
    <link href="/WebResource.axd?d=c8_VgmWcKiDW3UhZXW3fdoIDZ9PA1vFl6xd-I-doFr1-b5nIUnd2QB0hVFZfs05Yaet7FQtVYD1v82Bb3tmB6pi2u_hsazhM7fdFOoSoZsMoFhet1syXyzLonl0XYu8JD8mSWTgkHsQRaP7V3I5EPA2&amp;t=636555930634244069" type="text/css" rel="stylesheet" /><link href="/WebResource.axd?d=UT1Cj7SEzX8U-GEgOjD-q-uAvL1lhgJwhyoq55yRO8f994bH9Gts8yp6ytMieeH8QG6X7Gl6NbBYnmoVIPJVod06qYO9hCQNflvfGj0u0p2mbscQIs4D5BawDxSNlQmVG-5n140g3a_5wKRIhy31lA2&amp;t=636555930634244069" type="text/css" rel="stylesheet" /><title>
	Home Page
</title></head>

    <form method="post" action="./" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="HaaItpdn//nkbAfTP30RBjjl0F3E7ZoFv4R/o9giKofWEHCF9arv37g03YgSd6MIvYh0kpxW6k+drR6pPsOSYRWHnXy7kWPsjShE+ax/O4ExDsLpHgJ0munTWb6p662pGhlN5NQx2fwiWmatSrtfvpckf0i/pR285OK5sznRG6OdOe8Q8PMak6/RV+glWE8skL7TPLxK4pP/eUNgZOXZnrQ5xzwoTu+b8NiD4lmLlw9FS9+rkdv3x9scFp1qP1skbqlrtLtfTfPV2A3j6W9cjkXhPTFJA0zI0gmOrLzdDdVSWHgm/YYJdyszVUjaNtB5" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/WebResource.axd?d=pynGkmcFUV13He1Qd6_TZJq21wjd1aI3u0fP7i2J298r67whLwVKV9_BLKO71YaPOKI1fT20FzC0RXmnGRjE1g2&amp;t=636475834140000000" type="text/javascript"></script>


<script src="Scripts/WebForms/MsAjax/MicrosoftAjax.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>

<script src="Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=pVdHczR8HTv0TYtXLibFoMiTqkPQHZxDGKkk2jtHc3bD1jiCHfD3Q9zqGOh0s2S184GWcZIyQ-Ww0sKOd7Ob_cwNLXMddEor6PQvBcNrN5cJO-d5YFClYZqK8AjS_2oNjDVgl1TXTU8XToUQ1Z09lw2&amp;t=5e95cc64" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=VXG5HWKmJ5VfT6XbkUxKRkC8SYBMyMSiKGYECeO2xcIqB_FbwXW0QgY0JpudDTcsipO6wBDTX1IegGijNFB3pP2PfAgtSqq4F-Z83T3iO3LfTv9iJp5vV1eTA4UlJm8g0&amp;t=5e95cc64" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=-qISl4-OkT-7X02E4FisrzrfZBRp_tPFwTXjeTSan36RT5qQnB9zFi4j-i9bamVZnqfgKx7r83H7nDn_CrCpgKLU6s-PBlLvPLO1YTkuQh8lRk1ruT5eSd-J9xKoza720&amp;t=5e95cc64" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=LpGQnoKUSgO3ODsBUs8GfTwPrJ6pVgiHAih8HL5udKOmgyIrNzWXPPYynPZNNJr6CXzF63hh5Q5XAXgFvcA2FPHwAxXRXWgtyWQ-UK7qe3_qeOMYZAcXopGP_33fq-Og0&amp;t=5e95cc64" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=iC2sD0Al8A6ZX4AVmUco0RYoAtlgo5TBV6TFiWAd6LH5qk-aJqTJIsKhNqWCPQrxJ8SVlDX4x0GfZod1UTf4kqZwnOL0wecbIVKRly49Utj1pNQFu4dzMXh9TDqYSxAb0&amp;t=5e95cc64" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=q85rlLsZEVu9loex9kzISDVNv1qQjWFuEfriuQ80OLW-l5Aou2CDnohXRN_B8aJsD_NA187RErzxxV_ecpDFPOaptp6vO_mIIg06XEKcXzfpd9pWVzurwG6LvHVHs-XD0&amp;t=5e95cc64" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=9fVK6SOzqud8-CG5DRcWdckouF4OcEUL-01qekRpoKsyHvyFxKoc005-XRhB6WkaPW1G9qT49DFYdcP382_r3r9jGkIrLqO53QXEUljd7LkE8qkOKPK4BQKz10dAU7rk0&amp;t=5e95cc64" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=sjnc2GCx94Cxb1ZyngUXYubruiBO2ntiQSyVvuggsIXESLLS5iuEyNeLKJpfAlwm_IKL7jT1ovlJ5HGlFXwWBGpiO2A0Hn7iuWRR6A49puItPYXscpCpOfM58MkYRNFe0&amp;t=5e95cc64" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=y7O-5TXW_SlHOhGQigRN3pZdTma56JohwinprH6n-5BfmiXcHjLi31grDw025eSNLYLGZ3qvNEzl_4g9dO50xqdPnO2ig_Umqimq-MGmyci8WWHFfnL3hUSqBpy7Cd0U0&amp;t=5e95cc64" type="text/javascript"></script>
     <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', 'form1', [], [], [], 90, '');
//]]>
</script>

       <h1>Test ComboBox</h1>

       <p>
            <div id="ComboBox1" style="display:inline;">
	<table id="ComboBox1_ComboBox1_Table" class="ajax__combobox_inputcontainer" style="border-width:0px;border-style:None;display:inline;position:relative;top:5px;">
		<tr>
			<td class="ajax__combobox_textboxcontainer"><input name="ComboBox1$ComboBox1_TextBox" type="text" id="ComboBox1_ComboBox1_TextBox" autocomplete="off" /></td><td class="ajax__combobox_buttoncontainer"><button id="ComboBox1_ComboBox1_Button" tabindex="-1" type="button"></button></td>
		</tr>
	</table><ul id="ComboBox1_ComboBox1_OptionList" class="ajax__combobox_itemlist" style="display:none;visibility:hidden;">
		<li>test1</li><li>test2</li><li>test3</li>
	</ul><input type="hidden" name="ComboBox1$ComboBox1_HiddenField" id="ComboBox1_ComboBox1_HiddenField" value="0" />
</div>
            <input name="TextBox1" type="text" value="Please select a value from the dropdown box" id="TextBox1" style="background-color:#CCFFCC;height:21px;width:530px;" />
            <div id="ComboBox2" style="display:inline;">
	<table id="ComboBox2_ComboBox2_Table" class="ajax__combobox_inputcontainer" style="border-width:0px;border-style:None;display:inline;position:relative;top:5px;">
		<tr>
			<td class="ajax__combobox_textboxcontainer"><input name="ComboBox2$ComboBox2_TextBox" type="text" id="ComboBox2_ComboBox2_TextBox" autocomplete="off" /></td><td class="ajax__combobox_buttoncontainer"><button id="ComboBox2_ComboBox2_Button" tabindex="-1" type="button"></button></td>
		</tr>
	</table><input type="hidden" name="ComboBox2$ComboBox2_HiddenField" id="ComboBox2_ComboBox2_HiddenField" value="-1" />
</div>
            <p>
                <input type="submit" name="Button1" value="Next" id="Button1" style="color:Green;width:188px;" />
            </p>
                <p>
                <input type="submit" name="Button2" value="Button 2" id="Button2" style="width:188px;" />
            </p>
        
<div class="aspNetHidden">

	<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="CA0B0334" />
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="2clXZUv+XzBp3/H1iyUbfyUGabmvzsI2xiuXZsi+PKCPi1mv96d4wLhk5aP+FYh1b7I4dfPjL7K09CUSOMaGOuSmVK+eapK3YFkSwdb6Rc9rIRAbiPT2lUXy4Is8rg87N47wNzArHnw4NhHWjAqb5kXOR57R3W94hT85bNaAfY98dKFLvHBWcg9+GGWj5+jhXYD8y0s7yK45f98Ynj+6Iwyba1BF51lW/I2gZEr17s0LxXLgHFSY6KA+Ja+0y9zX" />
</div>

<script type="text/javascript">
//<![CDATA[
Sys.Application.add_init(function() {
    $create(Sys.Extended.UI.ComboBox, {"autoCompleteMode":0,"buttonControl":$get("ComboBox1_ComboBox1_Button"),"comboTableControl":$get("ComboBox1_ComboBox1_Table"),"dropDownStyle":1,"hiddenFieldControl":$get("ComboBox1_ComboBox1_HiddenField"),"optionListControl":$get("ComboBox1_ComboBox1_OptionList"),"textBoxControl":$get("ComboBox1_ComboBox1_TextBox")}, null, null, $get("ComboBox1"));
});
Sys.Application.add_init(function() {
    $create(Sys.Extended.UI.ComboBox, {"autoCompleteMode":0,"buttonControl":$get("ComboBox2_ComboBox2_Button"),"comboTableControl":$get("ComboBox2_ComboBox2_Table"),"dropDownStyle":0,"hiddenFieldControl":$get("ComboBox2_ComboBox2_HiddenField"),"optionListControl":$get("ComboBox2_ComboBox2_OptionList"),"selectedIndex":-1,"textBoxControl":$get("ComboBox2_ComboBox2_TextBox")}, null, null, $get("ComboBox2"));
});
//]]>
</script>
</form>

Open in new window

LVL 1
pclarke7Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Kelvin McDanielSr. DeveloperCommented:
The first thing you must understand is that there is no such thing as a “ComboBox”; rather, it is a collection of elements orchestrated together to give the appearance and effect of such a thing. I suspect what is happening is that whatever ties all that together in the MasterPage version is being left out of your modified version. There’s a couple of ways to handle this.

The shortest, most fulfilling way:
Write your own JavaScript code to handle the blur() event on the ComboBox1 UL element and push the value of ComboBox1_ComboBox1_HiddenField to TextBox1. If you write it generically enough you’ll be able to use it for both ComboBoxes.

The VERY long and frustrating way:
1. Set your element reference in the JavaScript back to ComboBox1_ComboBox1.

2. Revisit the original page and verify that your ScriptManager tag is supposed to be inside your Form element. It’s been a while for me but I don’t think it is.

3. While you’re there, get the original version’s fully-rendered source (by hitting “View Source” in the browser).

4. Compare the two to find the missing script reference. This will be difficult because of how many js references are generated by WebForms.

5. If that doesn’t yield an answer easily enough, put a “debugger;” line in that original script that correctly handles ComboBox1 and run the page normally (you’ll need your browser’s Developer Tools turned on if you’re not debugging with IE). When it hits that line in the script take a look at the Stack Trace and see if you can figure out which script that code is executing from; that might help point you in the right direction. Once you find it and add the missing reference to your modified version you should be good to go.
pclarke7Author Commented:
Hi Kelvin,
thank you for your comments. I would love to go down the "shortest, must fulfilling way" but unfortunately my Javascript skills are not sufficient. So that leaves me with the "very long and frustrating way". So I set my Javascript element reference back to ComboBox1_ComboBox1 and confirmed that the ScriptManager has to be declared within the <form> tag. I also put a number of extra statement in the Javascript to try and tease out the correct element name (eg var combo1 = document.getElementById("<%= ComboBox1_ComboBox1.ClientID %>" , var combo2 = document.getElementById("<%= ComboBox1.ClientID %>"))

$(document).ready(function () {
    alert("In Javascript function 012");
    var combo1 = document.getElementById("<%= ComboBox1_ComboBox1.ClientID %>");
    var combo2 = document.getElementById('<%= ComboBox1_ComboBox1.ClientID %>');
    var combo3 = document.getElementById("<%= #ComboBox1_ComboBox1.ClientID %>");
    var combo4 = document.getElementById('<%= #ComboBox1_ComboBox1.ClientID %>');
    var combo5 = document.getElementById("<%= $ComboBox1_ComboBox1.ClientID %>");
    var combo6 = document.getElementById('<%= $ComboBox1_ComboBox1.ClientID %>');
    var combo7 = document.getElementById("<%= ComboBox1.ClientID %>");
    var combo8 = document.getElementById('<%= ComboBox1.ClientID %>');
    var combo9 = document.getElementById("<%= #ComboBox1.ClientID %>");
    var combo10 = document.getElementById('<%= #ComboBox1.ClientID %>');
    var combo11 = document.getElementById("<%= $ComboBox1.ClientID %>");
    var combo12 = document.getElementById('<%= $ComboBox1.ClientID %>');
    var combo13 = document.getElementById('<%=ComboBox1.ClientID%>_ComboBox1');
    var combo14 = document.getElementById('<%=ComboBox1_ComboBox1.ClientID%>');
    var combo15 = document.getElementById('<%=ComboBox1.ClientID%>');
    var combo16 = document.getElementById('<%=#ComboBox1.ClientID%>');
   
    $find("ComboBox1_ComboBox1").add_propertyChanged(function (sender, event) {
        console.log(event);
        console.log(sender);
        alert("Found control");
        if (event.get_propertyName() == 'selectedIndex') {
            var newValue = sender.get_textBoxControl().value;
            $('#TextBox1').val("You entered: " + newValue);
        }
    });
});

Open in new window


I then ran the updated version without the master page and used F12 to stop at the Javascript $find statement:  ALL 16 values (combo1 - combo16) were NULL. I wasn't sure how to view the stack or even what to look for.

I then Viewed the page source of the code that was not working and compared it to original Working version but nothing jumps out.

Non Working version source code
<head>
 <title="xxx"></title>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="javascript2.js"></script>
    <link href="/WebResource.axd?d=c8_VgmWcKiDW3UhZXW3fdoIDZ9PA1vFl6xd-I-doFr1-b5nIUnd2QB0hVFZfs05Yaet7FQtVYD1v82Bb3tmB6pi2u_hsazhM7fdFOoSoZsMoFhet1syXyzLonl0XYu8JD8mSWTgkHsQRaP7V3I5EPA2&amp;t=636555930634244069" type="text/css" rel="stylesheet" /><link href="/WebResource.axd?d=UT1Cj7SEzX8U-GEgOjD-q-uAvL1lhgJwhyoq55yRO8f994bH9Gts8yp6ytMieeH8QG6X7Gl6NbBYnmoVIPJVod06qYO9hCQNflvfGj0u0p2mbscQIs4D5BawDxSNlQmVG-5n140g3a_5wKRIhy31lA2&amp;t=636555930634244069" type="text/css" rel="stylesheet" /><title>
	Home Page
</title></head>
<body>
    <form method="post" action="./" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="uX85vuyiAtvE39qpdMHrGQrKRUBahAj6q0FQ6a9MV9uT+1X+BXzn/F/t6YUaMn1Q8tcc7nDbFWTB0x+ICvHMDzhtfQhZ5Ig7VF2IVEp6fEdJz56UnSdmo2gLUrhSytJX67EtMsrk2GmnHEU8apmNRU+PjtEAbAED03hpKBsP0/j0Z30Xv3yBarQfVujy2Prti6AqvETacTy842GWBldKYe8sSlfenYd+AuucyF5cTrwbqdzLAfZsyBYZYNOSQKysJcq40aP3ksKN/JWjefUnCt2mBDI7nfADUDpGZSXbGeY6EI9IiU3sh6qCajLODOts" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>


<script src="/WebResource.axd?d=pynGkmcFUV13He1Qd6_TZJq21wjd1aI3u0fP7i2J298r67whLwVKV9_BLKO71YaPOKI1fT20FzC0RXmnGRjE1g2&amp;t=636475834140000000" type="text/javascript"></script>


<script src="Scripts/WebForms/MsAjax/MicrosoftAjax.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>

<script src="Scripts/WebForms/MsAjax/MicrosoftAjaxWebForms.js" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=pVdHczR8HTv0TYtXLibFoMiTqkPQHZxDGKkk2jtHc3bD1jiCHfD3Q9zqGOh0s2S184GWcZIyQ-Ww0sKOd7Ob_cwNLXMddEor6PQvBcNrN5cJO-d5YFClYZqK8AjS_2oNjDVgl1TXTU8XToUQ1Z09lw2&amp;t=5e95cc64" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=VXG5HWKmJ5VfT6XbkUxKRkC8SYBMyMSiKGYECeO2xcIqB_FbwXW0QgY0JpudDTcsipO6wBDTX1IegGijNFB3pP2PfAgtSqq4F-Z83T3iO3LfTv9iJp5vV1eTA4UlJm8g0&amp;t=5e95cc64" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=-qISl4-OkT-7X02E4FisrzrfZBRp_tPFwTXjeTSan36RT5qQnB9zFi4j-i9bamVZnqfgKx7r83H7nDn_CrCpgKLU6s-PBlLvPLO1YTkuQh8lRk1ruT5eSd-J9xKoza720&amp;t=5e95cc64" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=LpGQnoKUSgO3ODsBUs8GfTwPrJ6pVgiHAih8HL5udKOmgyIrNzWXPPYynPZNNJr6CXzF63hh5Q5XAXgFvcA2FPHwAxXRXWgtyWQ-UK7qe3_qeOMYZAcXopGP_33fq-Og0&amp;t=5e95cc64" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=iC2sD0Al8A6ZX4AVmUco0RYoAtlgo5TBV6TFiWAd6LH5qk-aJqTJIsKhNqWCPQrxJ8SVlDX4x0GfZod1UTf4kqZwnOL0wecbIVKRly49Utj1pNQFu4dzMXh9TDqYSxAb0&amp;t=5e95cc64" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=q85rlLsZEVu9loex9kzISDVNv1qQjWFuEfriuQ80OLW-l5Aou2CDnohXRN_B8aJsD_NA187RErzxxV_ecpDFPOaptp6vO_mIIg06XEKcXzfpd9pWVzurwG6LvHVHs-XD0&amp;t=5e95cc64" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=9fVK6SOzqud8-CG5DRcWdckouF4OcEUL-01qekRpoKsyHvyFxKoc005-XRhB6WkaPW1G9qT49DFYdcP382_r3r9jGkIrLqO53QXEUljd7LkE8qkOKPK4BQKz10dAU7rk0&amp;t=5e95cc64" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=sjnc2GCx94Cxb1ZyngUXYubruiBO2ntiQSyVvuggsIXESLLS5iuEyNeLKJpfAlwm_IKL7jT1ovlJ5HGlFXwWBGpiO2A0Hn7iuWRR6A49puItPYXscpCpOfM58MkYRNFe0&amp;t=5e95cc64" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=y7O-5TXW_SlHOhGQigRN3pZdTma56JohwinprH6n-5BfmiXcHjLi31grDw025eSNLYLGZ3qvNEzl_4g9dO50xqdPnO2ig_Umqimq-MGmyci8WWHFfnL3hUSqBpy7Cd0U0&amp;t=5e95cc64" type="text/javascript"></script>
     <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ScriptManager1', 'form1', [], [], [], 90, '');
//]]>
</script>

       <h1>Test ComboBox</h1>

       <p>
            <div id="ComboBox1" style="display:inline;">
	<table id="ComboBox1_ComboBox1_Table" class="ajax__combobox_inputcontainer" style="border-width:0px;border-style:None;display:inline;position:relative;top:5px;">
		<tr>
			<td class="ajax__combobox_textboxcontainer"><input name="ComboBox1$ComboBox1_TextBox" type="text" value="test3" id="ComboBox1_ComboBox1_TextBox" autocomplete="off" /></td><td class="ajax__combobox_buttoncontainer"><button id="ComboBox1_ComboBox1_Button" tabindex="-1" type="button"></button></td>
		</tr>
	</table><ul id="ComboBox1_ComboBox1_OptionList" class="ajax__combobox_itemlist" style="display:none;visibility:hidden;">
		<li>test1</li><li>test2</li><li>test3</li>
	</ul><input type="hidden" name="ComboBox1$ComboBox1_HiddenField" id="ComboBox1_ComboBox1_HiddenField" value="2" />
</div>
            <input name="TextBox1" type="text" value="Please select a value from the dropdown box" id="TextBox1" style="background-color:#CCFFCC;height:21px;width:530px;" />
            <div id="ComboBox2" style="display:inline;">
	<table id="ComboBox2_ComboBox2_Table" class="ajax__combobox_inputcontainer" style="border-width:0px;border-style:None;display:inline;position:relative;top:5px;">
		<tr>
			<td class="ajax__combobox_textboxcontainer"><input name="ComboBox2$ComboBox2_TextBox" type="text" id="ComboBox2_ComboBox2_TextBox" autocomplete="off" /></td><td class="ajax__combobox_buttoncontainer"><button id="ComboBox2_ComboBox2_Button" tabindex="-1" type="button"></button></td>
		</tr>
	</table><input type="hidden" name="ComboBox2$ComboBox2_HiddenField" id="ComboBox2_ComboBox2_HiddenField" value="-1" />
</div>
            <p>
                <input type="submit" name="Button1" value="Next" id="Button1" style="color:Green;width:188px;" />
            </p>
                <p>
                <input type="submit" name="Button2" value="Button 2" id="Button2" style="width:188px;" />
            </p>
        
<div class="aspNetHidden">

	<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="CA0B0334" />
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="PcuAA2XFdvOg4wCWQrL4AZX9PRfDSf1jm5cOek1dXvh5no3fXGSsTSYrZpzrgCQOPithXk3YKGD99cPXtbYtqJUE+KP3JLFeUpHtBhEYbk3vLSEd4cinDcfX+wD/cHD4YV0CzlmsnFMS6rCbetjw+YHjbFXl8ASgPW1mKBvn25ES8YmZjtdfrW2sL8QNy0Nsd/cN9Rkna/0rGPZC67bDJ3GAT+ckIVcHmuV26tAJt3xpBb/ekEeco4n6xhoxTDhs" />
</div>

<script type="text/javascript">
//<![CDATA[
Sys.Application.add_init(function() {
    $create(Sys.Extended.UI.ComboBox, {"autoCompleteMode":0,"buttonControl":$get("ComboBox1_ComboBox1_Button"),"comboTableControl":$get("ComboBox1_ComboBox1_Table"),"dropDownStyle":1,"hiddenFieldControl":$get("ComboBox1_ComboBox1_HiddenField"),"optionListControl":$get("ComboBox1_ComboBox1_OptionList"),"selectedIndex":2,"textBoxControl":$get("ComboBox1_ComboBox1_TextBox")}, null, null, $get("ComboBox1"));
});
Sys.Application.add_init(function() {
    $create(Sys.Extended.UI.ComboBox, {"autoCompleteMode":0,"buttonControl":$get("ComboBox2_ComboBox2_Button"),"comboTableControl":$get("ComboBox2_ComboBox2_Table"),"dropDownStyle":0,"hiddenFieldControl":$get("ComboBox2_ComboBox2_HiddenField"),"optionListControl":$get("ComboBox2_ComboBox2_OptionList"),"selectedIndex":-1,"textBoxControl":$get("ComboBox2_ComboBox2_TextBox")}, null, null, $get("ComboBox2"));
});
//]]>
</script>
</form>

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome","requestId":"8e188147cc3f4585ad40bef3f73c41b4"}
</script>
<script type="text/javascript" src="http://localhost:1749/5bb0deaf13a747d689fc06b1333e0d18/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>

Open in new window



Original Working version source code

<!DOCTYPE html>

<html lang="en">
<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>
	Home Page - My ASP.NET Application
</title><script src="/Scripts/modernizr-2.6.2.js"></script>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/Site.css" rel="stylesheet"/>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /><link href="/WebResource.axd?d=c8_VgmWcKiDW3UhZXW3fdoIDZ9PA1vFl6xd-I-doFr1-b5nIUnd2QB0hVFZfs05Yaet7FQtVYD1v82Bb3tmB6pi2u_hsazhM7fdFOoSoZsMoFhet1syXyzLonl0XYu8JD8mSWTgkHsQRaP7V3I5EPA2&amp;t=635757808977990525" type="text/css" rel="stylesheet" /><link href="/WebResource.axd?d=UT1Cj7SEzX8U-GEgOjD-q-uAvL1lhgJwhyoq55yRO8f994bH9Gts8yp6ytMieeH8QG6X7Gl6NbBYnmoVIPJVod06qYO9hCQNflvfGj0u0p2mbscQIs4D5BawDxSNlQmVG-5n140g3a_5wKRIhy31lA2&amp;t=635757808977990525" type="text/css" rel="stylesheet" /></head>
<body>
    <form method="post" action="./Default" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="CmiSNyngFUZqrsOYC0QwVud5S/CKjnlBnrSzRUp1xnNvnbTPvsU2DXWeHuI2FQ94OJ+HkISpTT61J2AYfQ+jBA8KFMVxpe+EypNnAmDa0BQFZsgCOqxhoeGa2suzU9tuhyKc7yZaTVJ5key/ODBv1FaFtj80zzhH9Qv6CMUJVtopCl4McXYMsG8NqL+iRH81TzyBil19DFEm7hYBa4Ld4nDZdEKfLI+lrVhu5Sl2RzJYECClvq/RLzwmVSSCbxMXxFEUUmWj6J7Bg+P8fKYGOHvqJ1tgq7I7rVjke9PaG322ZrXnTTsclsbOSN71HlgeOqriWtTZ0ooNfZh3UxVtNG07RHDD9J4cQUoLPlBlgi3yn5v0qprE+WRDNoMEjzW9TfkLOArLh9zBrca5WNC0oaP6xl5j5MjXVdhiyU/s4qedfM39t2pba64lsxxgqlZ+JcJgi85gyzQ3bK1mAUgNnw==" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
    theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>



<script src="/bundles/MsAjaxJs?v=c42ygB2U07n37m_Sfa8ZbLGVu4Rr2gsBo7MvUEnJeZ81" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>

<script src="Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="Scripts/bootstrap.js" type="text/javascript"></script>
<script src="Scripts/respond.js" type="text/javascript"></script>
<script src="/bundles/WebFormsJs?v=AAyiAYwMfvmwjNSBfIMrBAqfU5exDukMVhrRuZ-PDU01" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=pVdHczR8HTv0TYtXLibFoMiTqkPQHZxDGKkk2jtHc3bD1jiCHfD3Q9zqGOh0s2S184GWcZIyQ-Ww0sKOd7Ob_cwNLXMddEor6PQvBcNrN5cJO-d5YFClYZqK8AjS_2oNjDVgl1TXTU8XToUQ1Z09lw2&amp;t=18058a3b" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=VXG5HWKmJ5VfT6XbkUxKRkC8SYBMyMSiKGYECeO2xcIqB_FbwXW0QgY0JpudDTcsipO6wBDTX1IegGijNFB3pP2PfAgtSqq4F-Z83T3iO3LfTv9iJp5vV1eTA4UlJm8g0&amp;t=18058a3b" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=iC2sD0Al8A6ZX4AVmUco0RYoAtlgo5TBV6TFiWAd6LH5qk-aJqTJIsKhNqWCPQrxJ8SVlDX4x0GfZod1UTf4kqZwnOL0wecbIVKRly49Utj1pNQFu4dzMXh9TDqYSxAb0&amp;t=18058a3b" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=-qISl4-OkT-7X02E4FisrzrfZBRp_tPFwTXjeTSan36RT5qQnB9zFi4j-i9bamVZnqfgKx7r83H7nDn_CrCpgKLU6s-PBlLvPLO1YTkuQh8lRk1ruT5eSd-J9xKoza720&amp;t=18058a3b" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=LpGQnoKUSgO3ODsBUs8GfTwPrJ6pVgiHAih8HL5udKOmgyIrNzWXPPYynPZNNJr6CXzF63hh5Q5XAXgFvcA2FPHwAxXRXWgtyWQ-UK7qe3_qeOMYZAcXopGP_33fq-Og0&amp;t=18058a3b" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=q85rlLsZEVu9loex9kzISDVNv1qQjWFuEfriuQ80OLW-l5Aou2CDnohXRN_B8aJsD_NA187RErzxxV_ecpDFPOaptp6vO_mIIg06XEKcXzfpd9pWVzurwG6LvHVHs-XD0&amp;t=18058a3b" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=9fVK6SOzqud8-CG5DRcWdckouF4OcEUL-01qekRpoKsyHvyFxKoc005-XRhB6WkaPW1G9qT49DFYdcP382_r3r9jGkIrLqO53QXEUljd7LkE8qkOKPK4BQKz10dAU7rk0&amp;t=18058a3b" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=sjnc2GCx94Cxb1ZyngUXYubruiBO2ntiQSyVvuggsIXESLLS5iuEyNeLKJpfAlwm_IKL7jT1ovlJ5HGlFXwWBGpiO2A0Hn7iuWRR6A49puItPYXscpCpOfM58MkYRNFe0&amp;t=18058a3b" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=y7O-5TXW_SlHOhGQigRN3pZdTma56JohwinprH6n-5BfmiXcHjLi31grDw025eSNLYLGZ3qvNEzl_4g9dO50xqdPnO2ig_Umqimq-MGmyci8WWHFfnL3hUSqBpy7Cd0U0&amp;t=18058a3b" type="text/javascript"></script>
        <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ctl08', 'ctl01', [], [], [], 90, 'ctl00');
//]]>
</script>


        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="./" class="navbar-brand">Application name</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="./">Home</a></li>
                        <li><a href="About">About</a></li>
                        <li><a href="Contact">Contact</a></li>
                    </ul>
                    
                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="Account/Register">Register</a></li>
                                <li><a href="Account/Login">Log in</a></li>
                            </ul>
                        
                </div>
            </div>
        </div>
        <div class="container body-content">
            
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="javascript2.js"></script>
       <div class="jumbotron">
       <h1>Test ComboBox</h1>
       <p>
            <div id="MainContent_ComboBox1" style="display:inline;">
	<table id="MainContent_ComboBox1_ComboBox1_Table" class="ajax__combobox_inputcontainer" style="border-width:0px;border-style:None;display:inline;position:relative;top:5px;">
		<tr>
			<td class="ajax__combobox_textboxcontainer"><input name="ctl00$MainContent$ComboBox1$ComboBox1_TextBox" type="text" id="MainContent_ComboBox1_ComboBox1_TextBox" autocomplete="off" /></td><td class="ajax__combobox_buttoncontainer"><button id="MainContent_ComboBox1_ComboBox1_Button" type="button"></button></td>
		</tr>
	</table><ul id="MainContent_ComboBox1_ComboBox1_OptionList" class="ajax__combobox_itemlist" style="display:none;visibility:hidden;">
		<li>test1</li><li>test2</li><li>test3</li>
	</ul><input type="hidden" name="ctl00$MainContent$ComboBox1$ComboBox1_HiddenField" id="MainContent_ComboBox1_ComboBox1_HiddenField" value="0" />
</div>
            <input name="ctl00$MainContent$TextBox1" type="text" value="Please select a value from the dropdown box" id="MainContent_TextBox1" style="background-color:#CCFFCC;height:21px;width:530px;" />
            <div id="MainContent_ComboBox2" style="display:inline;">
	<table id="MainContent_ComboBox2_ComboBox2_Table" class="ajax__combobox_inputcontainer" style="border-width:0px;border-style:None;display:inline;position:relative;top:5px;">
		<tr>
			<td class="ajax__combobox_textboxcontainer"><input name="ctl00$MainContent$ComboBox2$ComboBox2_TextBox" type="text" id="MainContent_ComboBox2_ComboBox2_TextBox" autocomplete="off" /></td><td class="ajax__combobox_buttoncontainer"><button id="MainContent_ComboBox2_ComboBox2_Button" type="button"></button></td>
		</tr>
	</table><input type="hidden" name="ctl00$MainContent$ComboBox2$ComboBox2_HiddenField" id="MainContent_ComboBox2_ComboBox2_HiddenField" value="-1" />
</div>
            <p>
                <input type="submit" name="ctl00$MainContent$Button1" value="Next" id="MainContent_Button1" style="color:Green;width:188px;" />
            </p>
                <p>
                <input type="submit" name="ctl00$MainContent$Button2" value="Button 2" id="MainContent_Button2" style="width:188px;" />
            </p>
  
            <hr />
            <footer>
                <p>&copy; 2018 - My ASP.NET Application</p>
            </footer>
        </div>
    
<div class="aspNetHidden">

	<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="CA0B0334" />
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="mOa5xgvpnrVkzTkUrbDWKESnenG7pDPcE/z0WkcKq40MMPqvjUiTB/zVmgZ2sq/avZfw4h0xJUTjnXimUfNM0wXBml9Nv3jPRywW0vARzq12RNuzohenIYu4Gqm+NLer8LtT9ayAC82DkfeIp4tD89KciWafc17WGS4x//TpTnzUdJYLnYe9UW+lwypMfSvSwktit5CI9iMVlbyj/laHjZl9TY/G9bKVR6hM4iaAQWjFQyJWlup9+6yB9ARCumTb" />
</div>

<script type="text/javascript">
//<![CDATA[
Sys.Application.add_init(function() {
    $create(Sys.Extended.UI.ComboBox, {"autoCompleteMode":0,"buttonControl":$get("MainContent_ComboBox1_ComboBox1_Button"),"comboTableControl":$get("MainContent_ComboBox1_ComboBox1_Table"),"dropDownStyle":1,"hiddenFieldControl":$get("MainContent_ComboBox1_ComboBox1_HiddenField"),"optionListControl":$get("MainContent_ComboBox1_ComboBox1_OptionList"),"textBoxControl":$get("MainContent_ComboBox1_ComboBox1_TextBox")}, null, null, $get("MainContent_ComboBox1"));
});
Sys.Application.add_init(function() {
    $create(Sys.Extended.UI.ComboBox, {"autoCompleteMode":0,"buttonControl":$get("MainContent_ComboBox2_ComboBox2_Button"),"comboTableControl":$get("MainContent_ComboBox2_ComboBox2_Table"),"dropDownStyle":0,"hiddenFieldControl":$get("MainContent_ComboBox2_ComboBox2_HiddenField"),"optionListControl":$get("MainContent_ComboBox2_ComboBox2_OptionList"),"selectedIndex":-1,"textBoxControl":$get("MainContent_ComboBox2_ComboBox2_TextBox")}, null, null, $get("MainContent_ComboBox2"));
});
//]]>
</script>
</form>

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome","requestId":"1cc733288df848e981067812e14c0637"}
</script>
<script type="text/javascript" src="http://localhost:2505/fe9a85811cf147b59638ef70465284b7/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

Open in new window



I then took both sources and searched for occurrences of ComboBox1 in each. There were 26 lines in each referencing ComboBox1. I placed Orig with Modified side by side as follows to compare Original references with Modified references to ComboBox1. ORIG01=Original line 1. MOD01=Modified Line 1

ORIG01<div id="MainContent_ComboBox1" style="display:inline;">
MOD01<div id="ComboBox1" style="display:inline;">

ORIG02<table id="MainContent_ComboBox1_ComboBox1_Table" class="ajax__combobox_inputcontainer" style="border-width:0px;border-style:None;display:inline;position:relative;top:5px;">
MOD02<table id="ComboBox1_ComboBox1_Table" class="ajax__combobox_inputcontainer" style="border-width:0px;border-style:None;display:inline;position:relative;top:5px;">

ORIG03<table id="MainContent_ComboBox1_ComboBox1_Table" class="ajax__combobox_inputcontainer" style="border-width:0px;border-style:None;display:inline;position:relative;top:5px;">
MOD03<table id="ComboBox1_ComboBox1_Table" class="ajax__combobox_inputcontainer" style="border-width:0px;border-style:None;display:inline;position:relative;top:5px;">

ORIG04<td class="ajax__combobox_textboxcontainer"><input name="ctl00$MainContent$ComboBox1$ComboBox1_TextBox" type="text" id="MainContent_ComboBox1_ComboBox1_TextBox" autocomplete="off" /></td><td class="ajax__combobox_buttoncontainer"><button id="MainContent_ComboBox1_ComboBox1_Button" type="button"></button></td>
MOD04<td class="ajax__combobox_textboxcontainer"><input name="ComboBox1$ComboBox1_TextBox" type="text" value="test3" id="ComboBox1_ComboBox1_TextBox" autocomplete="off" /></td><td class="ajax__combobox_buttoncontainer"><button id="ComboBox1_ComboBox1_Button" tabindex="-1" type="button"></button></td>

ORIG05<td class="ajax__combobox_textboxcontainer"><input name="ctl00$MainContent$ComboBox1$ComboBox1_TextBox" type="text" id="MainContent_ComboBox1_ComboBox1_TextBox" autocomplete="off" /></td><td class="ajax__combobox_buttoncontainer"><button id="MainContent_ComboBox1_ComboBox1_Button" type="button"></button></td>
MOD05<td class="ajax__combobox_textboxcontainer"><input name="ComboBox1$ComboBox1_TextBox" type="text" value="test3" id="ComboBox1_ComboBox1_TextBox" autocomplete="off" /></td><td class="ajax__combobox_buttoncontainer"><button id="ComboBox1_ComboBox1_Button" tabindex="-1" type="button"></button></td>

ORIG06<td class="ajax__combobox_textboxcontainer"><input name="ctl00$MainContent$ComboBox1$ComboBox1_TextBox" type="text" id="MainContent_ComboBox1_ComboBox1_TextBox" autocomplete="off" /></td><td class="ajax__combobox_buttoncontainer"><button id="MainContent_ComboBox1_ComboBox1_Button" type="button"></button></td>
MOD06<td class="ajax__combobox_textboxcontainer"><input name="ComboBox1$ComboBox1_TextBox" type="text" value="test3" id="ComboBox1_ComboBox1_TextBox" autocomplete="off" /></td><td class="ajax__combobox_buttoncontainer"><button id="ComboBox1_ComboBox1_Button" tabindex="-1" type="button"></button></td>

ORIG07<td class="ajax__combobox_textboxcontainer"><input name="ctl00$MainContent$ComboBox1$ComboBox1_TextBox" type="text" id="MainContent_ComboBox1_ComboBox1_TextBox" autocomplete="off" /></td><td class="ajax__combobox_buttoncontainer"><button id="MainContent_ComboBox1_ComboBox1_Button" type="button"></button></td>
MOD07<td class="ajax__combobox_textboxcontainer"><input name="ComboBox1$ComboBox1_TextBox" type="text" value="test3" id="ComboBox1_ComboBox1_TextBox" autocomplete="off" /></td><td class="ajax__combobox_buttoncontainer"><button id="ComboBox1_ComboBox1_Button" tabindex="-1" type="button"></button></td>

ORIG08<td class="ajax__combobox_textboxcontainer"><input name="ctl00$MainContent$ComboBox1$ComboBox1_TextBox" type="text" id="MainContent_ComboBox1_ComboBox1_TextBox" autocomplete="off" /></td><td class="ajax__combobox_buttoncontainer"><button id="MainContent_ComboBox1_ComboBox1_Button" type="button"></button></td>
MOD08<td class="ajax__combobox_textboxcontainer"><input name="ComboBox1$ComboBox1_TextBox" type="text" value="test3" id="ComboBox1_ComboBox1_TextBox" autocomplete="off" /></td><td class="ajax__combobox_buttoncontainer"><button id="ComboBox1_ComboBox1_Button" tabindex="-1" type="button"></button></td>

ORIG09<td class="ajax__combobox_textboxcontainer"><input name="ctl00$MainContent$ComboBox1$ComboBox1_TextBox" type="text" id="MainContent_ComboBox1_ComboBox1_TextBox" autocomplete="off" /></td><td class="ajax__combobox_buttoncontainer"><button id="MainContent_ComboBox1_ComboBox1_Button" type="button"></button></td>
MOD09<td class="ajax__combobox_textboxcontainer"><input name="ComboBox1$ComboBox1_TextBox" type="text" value="test3" id="ComboBox1_ComboBox1_TextBox" autocomplete="off" /></td><td class="ajax__combobox_buttoncontainer"><button id="ComboBox1_ComboBox1_Button" tabindex="-1" type="button"></button></td>

ORIG10</table><ul id="MainContent_ComboBox1_ComboBox1_OptionList" class="ajax__combobox_itemlist" style="display:none;visibility:hidden;">
MOD10</table><ul id="ComboBox1_ComboBox1_OptionList" class="ajax__combobox_itemlist" style="display:none;visibility:hidden;">

ORIG11</table><ul id="MainContent_ComboBox1_ComboBox1_OptionList" class="ajax__combobox_itemlist" style="display:none;visibility:hidden;">
MOD11</table><ul id="ComboBox1_ComboBox1_OptionList" class="ajax__combobox_itemlist" style="display:none;visibility:hidden;">

ORIG12</ul><input type="hidden" name="ctl00$MainContent$ComboBox1$ComboBox1_HiddenField" id="MainContent_ComboBox1_ComboBox1_HiddenField" value="0" />
MOD12</ul><input type="hidden" name="ComboBox1$ComboBox1_HiddenField" id="ComboBox1_ComboBox1_HiddenField" value="2" />

ORIG13</ul><input type="hidden" name="ctl00$MainContent$ComboBox1$ComboBox1_HiddenField" id="MainContent_ComboBox1_ComboBox1_HiddenField" value="0" />
MOD13</ul><input type="hidden" name="ComboBox1$ComboBox1_HiddenField" id="ComboBox1_ComboBox1_HiddenField" value="2" />

ORIG14</ul><input type="hidden" name="ctl00$MainContent$ComboBox1$ComboBox1_HiddenField" id="MainContent_ComboBox1_ComboBox1_HiddenField" value="0" />
MOD14</ul><input type="hidden" name="ComboBox1$ComboBox1_HiddenField" id="ComboBox1_ComboBox1_HiddenField" value="2" />

ORIG15</ul><input type="hidden" name="ctl00$MainContent$ComboBox1$ComboBox1_HiddenField" id="MainContent_ComboBox1_ComboBox1_HiddenField" value="0" />
MOD15</ul><input type="hidden" name="ComboBox1$ComboBox1_HiddenField" id="ComboBox1_ComboBox1_HiddenField" value="2" />

ORIG16$create(Sys.Extended.UI.ComboBox, {"autoCompleteMode":0,"buttonControl":$get("MainContent_ComboBox1_ComboBox1_Button"),"comboTableControl":$get("MainContent_ComboBox1_ComboBox1_Table"),"dropDownStyle":1,"hiddenFieldControl":$get("MainContent_ComboBox1_ComboBox1_HiddenField"),"optionListControl":$get("MainContent_ComboBox1_ComboBox1_OptionList"),"textBoxControl":$get("MainContent_ComboBox1_ComboBox1_TextBox")}, null, null, $get("MainContent_ComboBox1"));
MOD16$create(Sys.Extended.UI.ComboBox, {"autoCompleteMode":0,"buttonControl":$get("ComboBox1_ComboBox1_Button"),"comboTableControl":$get("ComboBox1_ComboBox1_Table"),"dropDownStyle":1,"hiddenFieldControl":$get("ComboBox1_ComboBox1_HiddenField"),"optionListControl":$get("ComboBox1_ComboBox1_OptionList"),"selectedIndex":2,"textBoxControl":$get("ComboBox1_ComboBox1_TextBox")}, null, null, $get("ComboBox1"));

ORIG17$create(Sys.Extended.UI.ComboBox, {"autoCompleteMode":0,"buttonControl":$get("MainContent_ComboBox1_ComboBox1_Button"),"comboTableControl":$get("MainContent_ComboBox1_ComboBox1_Table"),"dropDownStyle":1,"hiddenFieldControl":$get("MainContent_ComboBox1_ComboBox1_HiddenField"),"optionListControl":$get("MainContent_ComboBox1_ComboBox1_OptionList"),"textBoxControl":$get("MainContent_ComboBox1_ComboBox1_TextBox")}, null, null, $get("MainContent_ComboBox1"));
MOD17$create(Sys.Extended.UI.ComboBox, {"autoCompleteMode":0,"buttonControl":$get("ComboBox1_ComboBox1_Button"),"comboTableControl":$get("ComboBox1_ComboBox1_Table"),"dropDownStyle":1,"hiddenFieldControl":$get("ComboBox1_ComboBox1_HiddenField"),"optionListControl":$get("ComboBox1_ComboBox1_OptionList"),"selectedIndex":2,"textBoxControl":$get("ComboBox1_ComboBox1_TextBox")}, null, null, $get("ComboBox1"));

ORIG18$create(Sys.Extended.UI.ComboBox, {"autoCompleteMode":0,"buttonControl":$get("MainContent_ComboBox1_ComboBox1_Button"),"comboTableControl":$get("MainContent_ComboBox1_ComboBox1_Table"),"dropDownStyle":1,"hiddenFieldControl":$get("MainContent_ComboBox1_ComboBox1_HiddenField"),"optionListControl":$get("MainContent_ComboBox1_ComboBox1_OptionList"),"textBoxControl":$get("MainContent_ComboBox1_ComboBox1_TextBox")}, null, null, $get("MainContent_ComboBox1"));
MOD18$create(Sys.Extended.UI.ComboBox, {"autoCompleteMode":0,"buttonControl":$get("ComboBox1_ComboBox1_Button"),"comboTableControl":$get("ComboBox1_ComboBox1_Table"),"dropDownStyle":1,"hiddenFieldControl":$get("ComboBox1_ComboBox1_HiddenField"),"optionListControl":$get("ComboBox1_ComboBox1_OptionList"),"selectedIndex":2,"textBoxControl":$get("ComboBox1_ComboBox1_TextBox")}, null, null, $get("ComboBox1"));

ORIG19$create(Sys.Extended.UI.ComboBox, {"autoCompleteMode":0,"buttonControl":$get("MainContent_ComboBox1_ComboBox1_Button"),"comboTableControl":$get("MainContent_ComboBox1_ComboBox1_Table"),"dropDownStyle":1,"hiddenFieldControl":$get("MainContent_ComboBox1_ComboBox1_HiddenField"),"optionListControl":$get("MainContent_ComboBox1_ComboBox1_OptionList"),"textBoxControl":$get("MainContent_ComboBox1_ComboBox1_TextBox")}, null, null, $get("MainContent_ComboBox1"));
MOD19$create(Sys.Extended.UI.ComboBox, {"autoCompleteMode":0,"buttonControl":$get("ComboBox1_ComboBox1_Button"),"comboTableControl":$get("ComboBox1_ComboBox1_Table"),"dropDownStyle":1,"hiddenFieldControl":$get("ComboBox1_ComboBox1_HiddenField"),"optionListControl":$get("ComboBox1_ComboBox1_OptionList"),"selectedIndex":2,"textBoxControl":$get("ComboBox1_ComboBox1_TextBox")}, null, null, $get("ComboBox1"));

ORIG20$create(Sys.Extended.UI.ComboBox, {"autoCompleteMode":0,"buttonControl":$get("MainContent_ComboBox1_ComboBox1_Button"),"comboTableControl":$get("MainContent_ComboBox1_ComboBox1_Table"),"dropDownStyle":1,"hiddenFieldControl":$get("MainContent_ComboBox1_ComboBox1_HiddenField"),"optionListControl":$get("MainContent_ComboBox1_ComboBox1_OptionList"),"textBoxControl":$get("MainContent_ComboBox1_ComboBox1_TextBox")}, null, null, $get("MainContent_ComboBox1"));
MOD20$create(Sys.Extended.UI.ComboBox, {"autoCompleteMode":0,"buttonControl":$get("ComboBox1_ComboBox1_Button"),"comboTableControl":$get("ComboBox1_ComboBox1_Table"),"dropDownStyle":1,"hiddenFieldControl":$get("ComboBox1_ComboBox1_HiddenField"),"optionListControl":$get("ComboBox1_ComboBox1_OptionList"),"selectedIndex":2,"textBoxControl":$get("ComboBox1_ComboBox1_TextBox")}, null, null, $get("ComboBox1"));

ORIG21$create(Sys.Extended.UI.ComboBox, {"autoCompleteMode":0,"buttonControl":$get("MainContent_ComboBox1_ComboBox1_Button"),"comboTableControl":$get("MainContent_ComboBox1_ComboBox1_Table"),"dropDownStyle":1,"hiddenFieldControl":$get("MainContent_ComboBox1_ComboBox1_HiddenField"),"optionListControl":$get("MainContent_ComboBox1_ComboBox1_OptionList"),"textBoxControl":$get("MainContent_ComboBox1_ComboBox1_TextBox")}, null, null, $get("MainContent_ComboBox1"));
MOD21$create(Sys.Extended.UI.ComboBox, {"autoCompleteMode":0,"buttonControl":$get("ComboBox1_ComboBox1_Button"),"comboTableControl":$get("ComboBox1_ComboBox1_Table"),"dropDownStyle":1,"hiddenFieldControl":$get("ComboBox1_ComboBox1_HiddenField"),"optionListControl":$get("ComboBox1_ComboBox1_OptionList"),"selectedIndex":2,"textBoxControl":$get("ComboBox1_ComboBox1_TextBox")}, null, null, $get("ComboBox1"));

ORIG22$create(Sys.Extended.UI.ComboBox, {"autoCompleteMode":0,"buttonControl":$get("MainContent_ComboBox1_ComboBox1_Button"),"comboTableControl":$get("MainContent_ComboBox1_ComboBox1_Table"),"dropDownStyle":1,"hiddenFieldControl":$get("MainContent_ComboBox1_ComboBox1_HiddenField"),"optionListControl":$get("MainContent_ComboBox1_ComboBox1_OptionList"),"textBoxControl":$get("MainContent_ComboBox1_ComboBox1_TextBox")}, null, null, $get("MainContent_ComboBox1"));
MOD22$create(Sys.Extended.UI.ComboBox, {"autoCompleteMode":0,"buttonControl":$get("ComboBox1_ComboBox1_Button"),"comboTableControl":$get("ComboBox1_ComboBox1_Table"),"dropDownStyle":1,"hiddenFieldControl":$get("ComboBox1_ComboBox1_HiddenField"),"optionListControl":$get("ComboBox1_ComboBox1_OptionList"),"selectedIndex":2,"textBoxControl":$get("ComboBox1_ComboBox1_TextBox")}, null, null, $get("ComboBox1"));

ORIG23$create(Sys.Extended.UI.ComboBox, {"autoCompleteMode":0,"buttonControl":$get("MainContent_ComboBox1_ComboBox1_Button"),"comboTableControl":$get("MainContent_ComboBox1_ComboBox1_Table"),"dropDownStyle":1,"hiddenFieldControl":$get("MainContent_ComboBox1_ComboBox1_HiddenField"),"optionListControl":$get("MainContent_ComboBox1_ComboBox1_OptionList"),"textBoxControl":$get("MainContent_ComboBox1_ComboBox1_TextBox")}, null, null, $get("MainContent_ComboBox1"));
MOD23$create(Sys.Extended.UI.ComboBox, {"autoCompleteMode":0,"buttonControl":$get("ComboBox1_ComboBox1_Button"),"comboTableControl":$get("ComboBox1_ComboBox1_Table"),"dropDownStyle":1,"hiddenFieldControl":$get("ComboBox1_ComboBox1_HiddenField"),"optionListControl":$get("ComboBox1_ComboBox1_OptionList"),"selectedIndex":2,"textBoxControl":$get("ComboBox1_ComboBox1_TextBox")}, null, null, $get("ComboBox1"));

ORIG24$create(Sys.Extended.UI.ComboBox, {"autoCompleteMode":0,"buttonControl":$get("MainContent_ComboBox1_ComboBox1_Button"),"comboTableControl":$get("MainContent_ComboBox1_ComboBox1_Table"),"dropDownStyle":1,"hiddenFieldControl":$get("MainContent_ComboBox1_ComboBox1_HiddenField"),"optionListControl":$get("MainContent_ComboBox1_ComboBox1_OptionList"),"textBoxControl":$get("MainContent_ComboBox1_ComboBox1_TextBox")}, null, null, $get("MainContent_ComboBox1"));
MOD24$create(Sys.Extended.UI.ComboBox, {"autoCompleteMode":0,"buttonControl":$get("ComboBox1_ComboBox1_Button"),"comboTableControl":$get("ComboBox1_ComboBox1_Table"),"dropDownStyle":1,"hiddenFieldControl":$get("ComboBox1_ComboBox1_HiddenField"),"optionListControl":$get("ComboBox1_ComboBox1_OptionList"),"selectedIndex":2,"textBoxControl":$get("ComboBox1_ComboBox1_TextBox")}, null, null, $get("ComboBox1"));

ORIG25$create(Sys.Extended.UI.ComboBox, {"autoCompleteMode":0,"buttonControl":$get("MainContent_ComboBox1_ComboBox1_Button"),"comboTableControl":$get("MainContent_ComboBox1_ComboBox1_Table"),"dropDownStyle":1,"hiddenFieldControl":$get("MainContent_ComboBox1_ComboBox1_HiddenField"),"optionListControl":$get("MainContent_ComboBox1_ComboBox1_OptionList"),"textBoxControl":$get("MainContent_ComboBox1_ComboBox1_TextBox")}, null, null, $get("MainContent_ComboBox1"));
MOD25$create(Sys.Extended.UI.ComboBox, {"autoCompleteMode":0,"buttonControl":$get("ComboBox1_ComboBox1_Button"),"comboTableControl":$get("ComboBox1_ComboBox1_Table"),"dropDownStyle":1,"hiddenFieldControl":$get("ComboBox1_ComboBox1_HiddenField"),"optionListControl":$get("ComboBox1_ComboBox1_OptionList"),"selectedIndex":2,"textBoxControl":$get("ComboBox1_ComboBox1_TextBox")}, null, null, $get("ComboBox1"));

ORIG26$create(Sys.Extended.UI.ComboBox, {"autoCompleteMode":0,"buttonControl":$get("MainContent_ComboBox1_ComboBox1_Button"),"comboTableControl":$get("MainContent_ComboBox1_ComboBox1_Table"),"dropDownStyle":1,"hiddenFieldControl":$get("MainContent_ComboBox1_ComboBox1_HiddenField"),"optionListControl":$get("MainContent_ComboBox1_ComboBox1_OptionList"),"textBoxControl":$get("MainContent_ComboBox1_ComboBox1_TextBox")}, null, null, $get("MainContent_ComboBox1"));
MOD26$create(Sys.Extended.UI.ComboBox, {"autoCompleteMode":0,"buttonControl":$get("ComboBox1_ComboBox1_Button"),"comboTableControl":$get("ComboBox1_ComboBox1_Table"),"dropDownStyle":1,"hiddenFieldControl":$get("ComboBox1_ComboBox1_HiddenField"),"optionListControl":$get("ComboBox1_ComboBox1_OptionList"),"selectedIndex":2,"textBoxControl":$get("ComboBox1_ComboBox1_TextBox")}, null, null, $get("ComboBox1"));

Open in new window



As far as I can see all 26 lines from Original and modified containing ComboBox1 are the same with the exception of the naming convention. Not sure where to go from here ?

regards
Pat
Kelvin McDanielSr. DeveloperCommented:
Understood. What is the objective of these changes? That may help us figure out what we need to be working towards.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

pclarke7Author Commented:
Hi Kelvin,

Background
I have an existing C# WCF self service portal which uses a ComboBoxs on the client side. The page with the ComboBox has had the master page turned off (for various reasons). I need to be able to check , Clientside, what the user is selecting from the ComboBox and drive some addition logic based on specific selections.  When I put in the logic it did not work therefore I set up the 2 examples (orig & modified) to test the logic outside of the service. Once I get the modified version working I will then move it back into the application.

Objective
The objective is to be able to select one item from the dropdown list of the ComboBox and ,ClientSide ,to retrieve the selected item and move its value to a textbox which would state: "You have selected value 'xxxxxx' "   Or  "xxxxxx is not a valid selection".  This logic need to work where the aspx page does not declare a master page file.

I had assumed that if the Orig example was working OK with a master page defined then it should be easy enough to get it working without a master page. But this assumption was wrong !!!

regards
Pat
pclarke7Author Commented:
unfortunately I was unable to get an answer to this issue through "Ask a Question" and in order to resolve and move on I posted the question in "Gigs" and paid 70 Euro for the answer. Whilst I am happy to get the answer I was looking for , it concerns me that more and more answers are not as forthcoming as they used to be or should be ,because , it would seem that many experts are now holding out to be paid for their knowledge. It kind of changes the whole concept of experts exchange. Obviously this is just my opinion and it is not something that can be stated as fact. My thanks to Kelvin for taking the time to try and resolve this issue. For anyone looking to resolve the same issue I have posted the solution below.

regards
Pat

The problem is the Document Ready event is fired even before your AjaxControlToolkit "combobox" is created. So you would have to wait for the control to be created. For this you could use pageLoad event of AjaxControlToolkit only.


function pageLoad(sender, args) {
        debugger;
        $find('<%= ComboBox1.ClientID %>').add_propertyChanged(function (sender, event) {
            debugger;
            console.log(event);
            console.log(sender);
            if (event.get_propertyName() == 'selectedIndex') {
                var newValue = sender.get_textBoxControl().value;
                $('#TextBox1').val("You entered: " + newValue);
            }
        });
    }

 Changing to the PageLoad function resolved the issue.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Kelvin McDanielSr. DeveloperCommented:
@pclarke7 I was forced to step away from just about everything pretty much everything on the evening of 3/4 until today (3/19). Glad you were able to get an answer in the meantime... and my apologies that you ended up having to pay for it. That certainly wouldn't have been my choice, nor was it why all of a sudden I was "silent". I too agree that folks seem to be less willing to assist without getting paid. I wish things were different.

Anyway, cheers and good luck!
Kelvin McDanielSr. DeveloperCommented:
The asker used a different route and got an answer their own question.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.