I have been working this issue all day and have yet to get anywhere on it so I thought I would try my luck posting something here.
I have a web form users are suppose to complete and save in order to add new records to the database. There are five form fields that have validation controls assigned to them. The validation controls are displayed in a validation summary control. When the user opens an existing record and the form opens all of the form fields are rendered to the page and the validation works fine even inside the ajax update panel. The issue I have is when a new record is being added.
When a user opens the page to add a new record they only see three of the fields on the form. The user has to first select a value from a drop down control which fires are async-postback which in turn displays the rest of the form fields on the page. Just so I am clear the initial three controls displayed are all tied to a validation control. The remaining to controls that are suppose to be validated are part of the form that is hidden until the user selects a value in the first drop down control.
I am having an issue with the two controls that get rendered after the async-postback. The validation controls assigned to these form controls do not fire. After viewing the source code that is rendered to the browser I have determined that the validation controls are created but they cannot find the client-side code for the controls that are to be validated.
When the async-postback is fired from the drop down and the form is rendered to the client why does the client-side source code not show the now unhiddened form fields?
Like I said all the validation controls work when a user edits an existing record because all the fields are shown when the page loads. How do you get the client-side code updated after the async-postback?
I had a similar problem that I had also posted on the forums to get some answers, but I ended doing the research myself and figuring out a solution—take a look at the last post on the thread for a brief description of the problem and solution (http://forums.asp.net/t/1109901.aspx), if you have time.
One thing that I'll point out is the use of the UpdatePanel, and what is actually placed within UpdatePanels. On an Async. PostBack, the UpdatePanels that are configured to respond to an Async. PostBack for a specific trigger (i.e., onchange event of the drop down box) will have th content within them overwritten, updated, or what have you—either way, new HTML is put into the UpdatePanels. The problem here is that any JavaScript referring to HTML elements within one of these UpdatePanels no longer refer to the same HTML elements before the Async. PostBack. What I had to do in this situation is re-hook the JavaScript with thenew HTML elements within the UpdatePanels.
By reading the description of your page, this seems to be the case. The reason why the validators work on existing records is because all HTML elements are rendered at the same time as the initializing JavaScript attached to these elements. However, when creating a new record, the JavaScript is executed before the other two hidden fields are displayed, and hence the initializing JavaScript intended for these two fields are referring to null objects—that is if the hidden fields are not actually rendered in the HTML. When the user selects an item from the drop-down boxes, which fires the Async. PostBack, it is important to note that only the HTML within the UpdatePanels gets re-rendered, the rest of the page does not. Thus, the initializing JavaScript does not run again.
It may be worth your while to take a look at the ASP .NET AJAX Async. PostBack Page-Cycle listed here:http://ajax.asp.net/docs/overview/PageRequestManagerOverview.aspx. I found it to be very helpful. Also, take a look at how Partial Page Loading works to get a better understanding of the UpdatePanel idiom:http://ajax.asp.net/docs/overview/PartialPageRenderingOverview.aspx.
Hope this helps.
delta1186:
Like I said all the validation controls work when a user edits an existing record because all the fields are shown when the page loads. How do you get the client-side code updated after the async-postback?
Sorry, I did not read this question. I would take a look at the link I posted to the PageRequestManager (http://ajax.asp.net/docs/overview/PageRequestManagerOverview.aspx) which, again, explains the life cycle of async. Postbacks but also how the PageRequestManager object, provided by AJAX ASP .NET, can be used to execute custom JavaScript during the life-cycle events. What I did to re-hook my JavaScript with the new HTML elements in my UpdatePanels is I wrote a function that basically uses the JavaScript getElementById function to reassign the HTML element to the JavaScript variable.
My situation was a bit different than yours in which I wrote all the JavaScript for the functionality of my custom user control, so it was easy for me to "re-hook" things together. However, in your case, you're using ASP .NET server controls with ASP .NET AJAX, so I am not too sure how HTML elements are actually hooked into the JavaScript. The PageRequestManager is a good start though. Maybe do a bit of digging around on the MSDN websites and ASP .NET AJAX documentation for an initialize function, and reexecute that function during the endRequest event (http://ajax.asp.net/docs/ClientReference/Sys.WebForms/PageRequestManagerClass/PageRequestManagerEndRequestEvent.aspx) of the async. postback page cycle.
Good luck. Let me know how it goes.
Hi,
The validators are not compatible with UpdatePanel, please try to usethis version instead.
Hope this helps.
No comments:
Post a Comment