Solved

DropDownList onchange causes other controls to lose values

Posted on 2010-09-12
15
911 Views
Last Modified: 2012-05-10
I have  page with a datalist that contains two dropdownlists and several textbox controls. The two dropdownlists contain the same items but in different order. When the user selects an item in one dropdown, it also selects the same item in the other dropdown.

If I don't have the onchange event for the second dropdown, submitting the page will correctly validate the dropdownlists and textboxes which are all required fields. But with the second dropdown's onchange event, the dropdowns return to their initial unselected state and the textboxes are again empty.


The dropdowns have the following client side events:

ddlA.Attributes.("onchange") ="javascript: return changeDropDownA(this);"

Open in new window


ddlB.Attributes.("onchange") ="javascript: return synchDropDowns(this, '" & e.Item.FindControl("ddlA").ClientID & "');"

Open in new window


where the javascript functions are defined as follows:

  function changeDropDownA(e) {
    // other code to show / hide other visual elements on page goes here

    var eDropDownB = document.getElementById(e.id.replace(/ddlA/,'ddlB'));
    synchDropDown(e, eDropDownB);

    // more code to show / hide other visual elements on page goes here
  }

  function synchDropDown(src, ddl) {
    src = (typeof src == 'string') ? document.getElementById(src) : src;
    ddl = (typeof ddl == 'string') ? document.getElementById(ddl) : ddl;

    if (src && ddl) {
      ddl.value = src.value;
    }

    return true;
  }

Open in new window


If I change the second dropdown's onchange event to a simple "alert('changed');", the page posts back normally and the lists and textboxes keep their values. But if I add the synchDropDown event, they lose their values on postback.

I'm not sure how my code is preventing the datalist from preserving the control's values on postback.

Thanks in advance.
0
Comment
Question by:ZekeLA
  • 7
  • 5
  • 2
  • +1
15 Comments
 
LVL 10

Expert Comment

by:Espavo
ID: 33656936
Are your original values being set in a "If not IsPostback then... end if" on Page-Load?
That is something that I've found to cause this... (Not checking to see if the page is being posted-back when populating controls on-load)
Espavo
0
 
LVL 41

Expert Comment

by:guru_sami
ID: 33657242
seems like somehow your Datalist is is databound upon postback.
As mentioned by Espavo you need to wrap your DataList databinding in if like:
if(!Page.IsPostBack){
//Databind datalist
}

OR share your code.
0
 
LVL 1

Author Comment

by:ZekeLA
ID: 33657255
No. The datalist and the controls have their viewstate enabled. The datalist is not rebound on postback. The datalist does have some controls which are dynamically loaded.

When I step through the page with and without the onchange function, the Datalist's ItemCreated event is hit in both cases. If attach the onchange event, the values are lost. If I don't, all is as expected.
0
 
LVL 1

Author Comment

by:ZekeLA
ID: 33657269
The problem with sharing the code is twofold. It's confidential so I'd have to get permission to share it. And if I can share it, I would have to share several thousand lines plus many other files in the project. I'll see if I can create a test page that reproduces the error but that may take a few days.
0
 
LVL 10

Expert Comment

by:Espavo
ID: 33657654
At what stage are your dynamically loaded controls being populated... are you 100% sure that it isn't the postback that's resetting the values?
0
 
LVL 1

Author Comment

by:ZekeLA
ID: 33658033
If I change the onchange assignment for ddlB from

ddlB.Attributes.("onchange") ="javascript: return synchDropDowns(this, '" & e.Item.FindControl("ddlA").ClientID & "');"

to

ddlB.Attributes.("onchange") ="javascript: alert('changed');"

the values remain. In both cases, I'm posting the page using a linkbutton outside of the DataList. In the latter case, the text values are what I entered. In the former case (with the onchange event), the values have been reset. Using Firefox's Error Console, there aren't any errors reported.
0
 
LVL 10

Expert Comment

by:Espavo
ID: 33659648
In the 1st case, what does synchDropDowns do? (Does it cause a PostBack?)
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 1

Author Comment

by:ZekeLA
ID: 33659857
It sets the target dropdown's value to the source's dropdown value.
0
 
LVL 10

Expert Comment

by:Espavo
ID: 33659920
Does it do this using JavaScript? (Client side)
Or does this happen on the server?
0
 
LVL 4

Expert Comment

by:MichaelMH
ID: 33661554
There is no way to loose the values of other controls from your page unless you are performing a postback. Or if you a have function which when your event is triggered on the client side it does the cleaning. In case of poastback enable the viewstate (check this property value) of your controls and be sure you are not binding them with an empty datasource.
0
 
LVL 1

Author Comment

by:ZekeLA
ID: 33662557
I am posting back the page. But not from javascript. The postback comes from the linkbutton. The values are lost / maintained on postback depending on whether or not I have the javascript function in place. With this function assigned to it, the values are lost. With an alert('my message') assigned to it, the values are maintained.

I haven't yet tried a trace or reflector which are my next courses of action.
0
 
LVL 1

Author Comment

by:ZekeLA
ID: 33662627
I'm not able to compare behavior with and without Trace enabled. With the bad javascript function attached to the control, I get the following error:

System.Web.HttpException: Multiple controls with the same ID 'ctl00' were found. Trace requires that controls have unique IDs.

Does that suggest anything?
0
 
LVL 4

Assisted Solution

by:MichaelMH
MichaelMH earned 500 total points
ID: 33662765
Well, it does, but I can't describe it to you in details since this would require to see the entire code.
Somehow you are duplicating the controls using javascript, you either cloning the DOM nodes (html elements) which contain your controls or you are assigning same ID to multiple elements from you page.
0
 
LVL 10

Expert Comment

by:Espavo
ID: 33664008
I'd put "If Not IsPostback Then" around all parts of your code where you are passing values to your controls, and see what happens...
0
 
LVL 1

Accepted Solution

by:
ZekeLA earned 0 total points
ID: 33799707
I redesigned the page to only use a single dropdown.
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now