473,372 Members | 1,343 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,372 software developers and data experts.

Drop-down-list Client-side onchange stops Server-side SelectedIndexChanged event?

controlbox
I have recently inplemented some drop-down lists (combos) on a page where one is dynamically populated according to the selection of another using the microsoft ajax extensions. I had to set AutoPostBack = true, and enable viewstate in order for the serverside events to fire, but once this was done, all seemed well - so far so good...

Also, when the page form is submitted, the Javascript validateForm() function is executed to perform client-side validation of the form.

My problem is that now AutoPostBack is enabled, it's possible for the form to be submitted as a result of a combo click, and validateForm() is no longer being called.

So... to overcome this, I added the following in the 'Render()' of the drop-down control...

this.Attributes["onchange"] = "javascript:return validateForm();";

...now when I click on a drop-down, the whole form is validated client-side to avoid the form being submitted in an invalid state.

All this works, but my server-side event .. SelectedIndexChanged on the combo is no longer firing when validateForm() is definately returning true.

It's almost as if the addition of the onchange attribute is somehow intefering with what ajax is doing under the covers.

Does anyone know how to effectively mix client-side and server-side (ajaxed) events on a combo such that the client-side validation can be performed, and only if this returns true, would we then want the (ajaxed) server-side event to go ahead and fire? I only seem to be able to do one or the other at the moment.

Cheers
Simon.
Nov 22 '07 #1
7 22337
further investigation reveals that ajax is adding the following into the onchange attribute on the control...

setTimeout('__doPostBack(\'ctl00$phMain$ctlVessel\ ',\'\')', 0)

...so, if I have already added...

javascript:return validateForm();

...into the onchange attribute, we end up with...

javascript:return validateForm();setTimeout('__doPostBack(\'ctl00$ph Main$ctlVessel\',\'\')', 0)

...so I think the 'return' statement is stopping the setTimeout() from executing, so the server-side event doesn't fire.

ideally, I want to be able to end up with the following in the onchange attribute...

javascript:if (validateForm()) setTimeout('__doPostBack(\'ctl00$phMain$ctlVessel\ ',\'\')', 0);

...but !!!! ajax always seems to add the semi-colon first, so all I end up with is...

javascript:if (validateForm()) ; setTimeout('__doPostBack(\'ctl00$phMain$ctlVessel\ ',\'\')', 0)

...which equates to ... if validateForm() then do nothing, then perform the postback anyway!!

In summary... I think I need a way to manipulate the contents on the onchange attribute AFTER ajax has added it's setTimeout(), but I do not know a way to do this - any ideas anyone???
Nov 22 '07 #2
SOLVED !!

for those of you who are interested...

render your own client-side javascript into the onchange like so...

control.Attributes["onchange"] = "javascript:if (validateForm('autopostback')==false) return false;"

...then ajax will add on it's postback mechanism, so we end up with...

"javascript:if (validateForm()==false) return false;setTimeout(....blah blah"

...so the setTimeout() will never execute if the form is invalid, but will as long as validateForm() returns true - exactly what I wanted.

cheers
Simon.
Nov 22 '07 #3
andho
34
if you need to change and already assigned event handler and also retain the previous function the you can do something like this:
Expand|Select|Wrap|Line Numbers
  1. var combobox = document.getElementById("comboboxid");
  2. var oldFunc = combobox.onchange;
  3. if (typeof oldFunc == "function") {
  4. oldFunc();
  5. //your code here
  6. } else {
  7. //your code here
  8. }
and in your case maybe something like this:
Expand|Select|Wrap|Line Numbers
  1. var oldFunc = this.Attributes["onchange"];
  2. if (typeof oldFunc == "function") {
  3. if (validateForm()) {
  4. oldFunc();
  5. }
  6. } else {
  7. return validateForm();
  8. }
by the way im curious about what this AutoPostBack is about. What is the use of it. is it an ASP thing
Nov 22 '07 #4
Yes, the standard asp.net combo (drop-down) control has a AutoPostBack property. If this is set to true, changing the selected item in the combo causes a postback to the server and the SelectedIndexChanged event fires.

(I'm pretty new to asp.net development, javascript and ajax myself, so I'm not 100% sure what is happening under the covers, but possibly the javascript:setTimeout(....) call on the onchange client-side event is a result of AutoPostBack = true rather than ajax ??

Many thanks for the alternative solution. Might be overkill for this circumstance as I'm happy for the setTimeout(...) call to just be tacked on the end of whatever I put in the onchange attribute, but... I can see how usefull that technique would be in other areas - many thanks.

Si.


if you need to change and already assigned event handler and also retain the previous function the you can do something like this:
Expand|Select|Wrap|Line Numbers
  1. var combobox = document.getElementById("comboboxid");
  2. var oldFunc = combobox.onchange;
  3. if (typeof oldFunc == "function") {
  4. oldFunc();
  5. //your code here
  6. } else {
  7. //your code here
  8. }
and in your case maybe something like this:
Expand|Select|Wrap|Line Numbers
  1. var oldFunc = this.Attributes["onchange"];
  2. if (typeof oldFunc == "function") {
  3. if (validateForm()) {
  4. oldFunc();
  5. }
  6. } else {
  7. return validateForm();
  8. }
by the way im curious about what this AutoPostBack is about. What is the use of it. is it an ASP thing
Nov 23 '07 #5
Thanks so much Simon for this solution. I did come across the same problem as you did and tried the solution from the aspx page but of course, that didn't work and then I found your solution and tried it from the code-behind and ta-da...

Thank you so much,

Bhaskar Roy
May 13 '09 #6
Thanks for the solution! The problem I'm having now is that dropdown should stick to the original one selected, not the one i newly selected. Has anyone else ran into this problem?
Nov 17 '11 #7
This is what I came up with:

ASP.NET code-behind
Expand|Select|Wrap|Line Numbers
  1. ddl.ListBox.Attributes("onchange") = "if(ddl_OnChange('autopostback')==false) return false;"
JavaSript
Expand|Select|Wrap|Line Numbers
  1. var ddl = document.getElementById('<%= ddl.ClientID %>');
  2. var ddl = (ddl) ? ddl.selectedIndex : null;
  3.  
  4.  
  5. function ddl_OnChange(){
  6.     if(validateForm() == false){
  7.         if(ddl && ddlSelectedIndex != null) ddl.selectedIndex = ddlSelectedIndex;
  8.         return false;
  9.     }
  10. }
Nov 17 '11 #8

Sign in to post your reply or Sign up for a free account.

Similar topics

2
by: Ryan | last post by:
Just a quicky about temporarary tables. If using QA, when you create a temporary table, it gets dropped if you close the query. Otherwise you need to state 'DROP TABLE myTable' so that you can...
1
by: riehe | last post by:
Dear all I want to drop a node from a nodegroup. Can someone confirm if its enough to redistribute a node group with a partition map which doesn't include the node to be dropped? I can't see...
1
by: Ian Dobson | last post by:
Hi, I need to drop a schema from a database but it has 400 tables in it. Is there an easy way to do it other than drop table schema1.table1 drop table schema1.table2 etc.. to 400 and then drop...
10
by: BuddhaBuddy | last post by:
Platform is DB2/NT 7.2.9 The table was created like this: CREATE TABLE MYTEST ( MYTESTOID bigint not null primary key, FK_OTHEROID bigint not null references other, FK_ANOTHEROID bigint not...
0
by: Lauren Quantrell | last post by:
I'm trying to drop a file from Windows Explorer (or desktop, etc.) onto a field in Access2K and capture the full file path. I found an posting below that says this is possible but I cannot...
1
by: Torre Quinn | last post by:
Does anyone have any good sites or resources dealing with adding drag and drop functionality to a set of controls on a form? I'd like to try to get several examples of varied applications of drag...
0
by: ViRi | last post by:
I am currently experimenting a bit with AxMicrosoft.MediaPlayer.Intero­p.AxWindowsMediaPlayer and so far, most has gone well. Currently, i would like to add drag-and-drop functionality to the...
5
by: Markus | last post by:
I tried this: ALTER TABLE Dokumente DROP COLUMN docPrioID but I get this errormessage: DB2 SQL error: SQLCODE: -104, SQLSTATE: 42601, SQLERRMC: COLUMN;ABLE Dokumente DROP;CONSTRAINT
1
by: Darren | last post by:
I'm trying to create a file using drag and drop. I want to be able to select a listview item drag it to the shell and create a file. Each icon in the listview represents a blob in a database. When...
15
by: uwcssa | last post by:
I try to drop a table as: I got: During SQL processing it returned: SQL0478N The object type "TABLE" cannot be dropped because there is an object "sch.SQL070515104729271", of type "FUNCTION",...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.