UpdatePanel and Wizard

I seem to be having the same problem. My code looks something like this:

<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />
<atlas:UpdatePanel ID="Client_Registration_Wizard_Update_Panel" runat="server" Mode="Always">
<ContentTemplate>
<asp:Wizard ID="Client_Registration_Wizard" runat="server" DisplaySideBar="false">
<WizardSteps>
<asp:WizardStep ID="Email_WizardStep" runat="server" StepType="Start">
...
</asp:WizardStep>
<asp:WizardStep ID="Contact_Info_WizardStep" runat="server" StepType="Finish">
...
</asp:WizardStep>
<asp:WizardStep ID="Confirmation_WizardStep" runat="server" StepType="Complete">
...
</asp:WizardStep>
</WizardSteps>
</asp:Wizard>
</ContentTemplate>
</atlas:UpdatePanel>

My wizard has three steps, as shown above. The problem is that I can click the Next button to go from the Start step to the Finish step, but once on the Finish step, none of my buttons on that step work, in particular, not the Previous or Finish buttons.

Is this a bug in Atlas or am I doing something wrong? What is the solution or workaround?
I have the same problem. Does anyone have solutions for this yet?

I just tried some simple wizards in UpdatePanels and they all worked. Have you tried out the April CTP that was released earlier this week?

Thanks,

Eilon

Those are my codes for client side. Let me know if you can see any problems. BTW, I have the April CTP.

<

atlas:ScriptManagerID="sm1"EnablePartialRendering="true"runat="server"/><atlas:UpdatePanelID="trade"Mode="conditional"runat="server"><ContentTemplate><asp:WizardID="Wizard1"runat="server"ActiveStepIndex="0"DisplaySideBar="False"OnFinishButtonClick="Wizard1_FinishButtonClick"OnNextButtonClick="Wizard1_NextButtonClick"><WizardSteps><asp:WizardSteprunat="server"StepType="Start"><tableborder="0"cellpadding="0"cellspacing="0"style="width: 299px; height: 130px"><tr><tdstyle="width: 100px; height: 40px"><asp:LabelID="Label1"runat="server"Text="Trade Type: "></asp:Label></td><tdstyle="width: 100px; height: 40px"><asp:DropDownListID="DropDownList1"runat="server"Width="93px"><asp:ListItemSelected="True">BUY</asp:ListItem><asp:ListItem>SELL</asp:ListItem></asp:DropDownList></td></tr><tr><tdstyle="width: 100px; height: 40px"><asp:CompareValidatorID="CompareValidator1"runat="server"ControlToValidate="txtShares"ErrorMessage="CompareValidator"Operator="DataTypeCheck"Type="Integer">*</asp:CompareValidator><asp:RequiredFieldValidatorID="RequiredFieldValidator2"runat="server"ControlToValidate="txtShares"ErrorMessage="Please enter share number.">*</asp:RequiredFieldValidator><asp:LabelID="Label2"runat="server"Text="Symbol:"></asp:Label></td><tdstyle="width: 100px; height: 40px"><asp:TextBoxID="txtSymbol"runat="server"MaxLength="5"Width="83px"></asp:TextBox></td></tr><tr><tdstyle="width: 100px; height: 40px"><asp:RequiredFieldValidatorID="RequiredFieldValidator1"runat="server"ControlToValidate="txtSymbol"ErrorMessage="Please enter stock symbol.">*</asp:RequiredFieldValidator><asp:RegularExpressionValidatorID="RegularExpressionValidator1"runat="server"ControlToValidate="txtSymbol"ErrorMessage="RegularExpressionValidator"ValidationExpression="^[a-zA-Z]{1,5}">*</asp:RegularExpressionValidator><asp:LabelID="Label3"runat="server"Text="Shares:"></asp:Label></td><tdstyle="width: 100px; height: 40px"><asp:TextBoxID="txtShares"runat="server"Width="83px"></asp:TextBox></td></tr><tr><tdcolspan="2">

*The transaction price will be based on Real-Time ECN quote. You will be able to

confirm the price after you click 'Proceed' button.

</td></tr><tr><tdcolspan="2"style="height: 24px"><asp:LabelID="lblMessage"runat="server"ForeColor="Red"></asp:Label></td></tr></table></asp:WizardStep><asp:WizardSteprunat="server"StepType="Finish"><tableborder="0"cellpadding="0"cellspacing="0"style="width: 299px; height: 135px"><tr><tdstyle="width: 100px"> <asp:LabelID="Label11"runat="server"Text="Trade Type:"></asp:Label></td><tdstyle="width: 100px"><asp:LabelID="lblType"runat="server"></asp:Label></td></tr><tr><tdstyle="width: 100px"><asp:LabelID="Label5"runat="server"Text="Symbol:"></asp:Label></td><tdstyle="width: 100px"><asp:LabelID="lblSymbol"runat="server"></asp:Label></td></tr><tr><tdstyle="width: 100px"><asp:LabelID="Label6"runat="server"Text="Shares:"></asp:Label></td><tdstyle="width: 100px"><asp:LabelID="lblShares"runat="server"></asp:Label></td></tr><tr><tdstyle="width: 100px"><asp:LabelID="Label7"runat="server"Text="Market Price:"></asp:Label></td><tdstyle="width: 100px"><asp:LabelID="lblPrice"runat="server"></asp:Label></td></tr><tr><tdcolspan="2"><asp:LabelID="lblError"runat="server"ForeColor="Red"></asp:Label></td></tr></table></asp:WizardStep><asp:WizardSteprunat="server"StepType="Complete"><tableborder="0"cellpadding="0"cellspacing="0"style="width: 300px; height: 107px"><tr><tdstyle="width: 100px"></td></tr><tr><tdstyle="width: 100px">

Your order has been executed successfully.

</td></tr><tr><tdstyle="width: 100px"><asp:LinkButtonID="LinkButton1"runat="server"OnClick="LinkButton1_Click">Start A New Trade</asp:LinkButton></td></tr></table></asp:WizardStep></WizardSteps></asp:Wizard>

</ContentTemplate></atlas:UpdatePanel>

Hi, this appears to be a bug in the April CTP. We will investigate this for a future release.

Thanks,

Eilon

I've got another problem using updatepanels inside the wizard.

Each of the wizard steps is a user control in my case, so I load the user controls into the steps. If two of my usercontrols contain updatepanels then I get "Microsoft JScript runtime error: Object required"

somewhere in the Atlas JavaScript code when using the Atlas functionality in the steps:

function destroyTree(element, markupContext) {

if (element.nodeType == 1) { //error on this line

if (element.control) {

markupContext.removeObject(element.control);

element.control.dispose();

}

var children = element.children;

for (var i = children.length - 1; i >= 0; i--) {

var node = children[i];

destroyTree(node, markupContext);

element.removeChild(node);

}

}

}

I've tried moving the scriptmanager wherever it is possible: in the page containing the wizard, in the user controls. It won't happen if I have only one usercontrol/wizard step using updatepanels. So if anyone encountered similar problems or have ideas how to make it work-reply.

Hi Finch,

Is there any particular markup inside the UpdatePanel that might be confusing the JavaScript code? Could you show the rendered content of the UpdatePanel?

Thanks,

Eilon

OK, so in one of the user controls I'm using a gridview that is inside an updatepanel. The rendered content of the updatepanel is:

<div id="CWizard_wizard_ctl03_UpdatePanel1"> <div> <table cellspacing="0" cellpadding="4" border="0" id="CWizard_wizard_ctl03_gridViewProjects" style="color: #333333; width: 800px; border-collapse: collapse;"> <tr style="color: White; background-color: #507CD1; font-weight: bold;"> <th scope="col">  </th> <th scope="col"> Project</th> <th scope="col"> Position Held</th> <th scope="col"> Country</th> <th scope="col"> Start Date</th> <th scope="col">  </th> <th scope="col"> End Date</th> <th scope="col">  </th> <th scope="col"> Description</th> <th scope="col"> Donor</th> <th scope="col"> NCSC Project</th> <th scope="col">  </th> </tr> <tr style="background-color: #EFF3FB;"> <td> <input type="image" name="CWizard$wizard$ctl03$gridViewProjects$ctl02$imageButtonEdit" id="CWizard_wizard_ctl03_gridViewProjects_ctl02_imageButtonEdit" title="Edit" src="App_Pics/Edit.gif" alt="Edit" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("CWizard$wizard$ctl03$gridViewProjects$ctl02$imageButtonEdit", "", true, "", "", false, false))" style="border-width: 0px;" /> </td> <td> <span id="CWizard_wizard_ctl03_gridViewProjects_ctl02_Label1">NCSC</span> </td> <td> <span id="CWizard_wizard_ctl03_gridViewProjects_ctl02_Label2">HR Officer</span> </td> <td> <span id="CWizard_wizard_ctl03_gridViewProjects_ctl02_Label3">Denmark</span> </td> <td> <span id="CWizard_wizard_ctl03_gridViewProjects_ctl02_Label4" style="display: inline-block; width: 39px;">January</span> </td> <td> <span id="CWizard_wizard_ctl03_gridViewProjects_ctl02_Label5">2002</span> </td> <td> <span id="CWizard_wizard_ctl03_gridViewProjects_ctl02_Label6">February</span> </td> <td> <span id="CWizard_wizard_ctl03_gridViewProjects_ctl02_Label7">2003</span> </td> <td> <span id="CWizard_wizard_ctl03_gridViewProjects_ctl02_Label8">NCSC description.</span> </td> <td> <span id="CWizard_wizard_ctl03_gridViewProjects_ctl02_Label9">N/A</span> </td> <td> <span disabled="disabled"> <input id="CWizard_wizard_ctl03_gridViewProjects_ctl02_CheckBox1" type="checkbox" name="CWizard$wizard$ctl03$gridViewProjects$ctl02$CheckBox1" checked="checked" disabled="disabled" /></span> </td> <td> <input type="image" name="CWizard$wizard$ctl03$gridViewProjects$ctl02$imageButtonDelete" id="CWizard_wizard_ctl03_gridViewProjects_ctl02_imageButtonDelete" title="Delete" src="App_Pics/Delete.gif" alt="Delete" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("CWizard$wizard$ctl03$gridViewProjects$ctl02$imageButtonDelete", "", true, "", "", false, false))" style="border-width: 0px;" /> </td> </tr> </table> </div> <table style="width: 799px"> <tr> <td style="width: 800px; text-align: center"> </td> </tr> </table> <br /> <input type="submit" name="CWizard$wizard$ctl03$buttonAdd" value=" Add " onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("CWizard$wizard$ctl03$buttonAdd", "", true, "", "", false, false))" id="CWizard_wizard_ctl03_buttonAdd" /><br /> <br /> </div>

Hope that's what you asked for. Btw, I've tried the wizard with Netscape 8.1, based on Firefox and I dont get any error but the wizard buttons and the Atlas fuctionality doesnt work at all. That is probably what the guys were writing about above.

As a footnote to this question, I am also having issues using UpdatePanel with ANY ASP.NET 2.0 control that utilizes command bubbling under certain circumstances (one known circumstance is inside a web part where the web part manager AND the web part are inside the content template and the control is on a dynamically loaded user control--loaded using LoadControl()).

While I actually have gotten this to work in some cases, there are some cases where it just will not, and the only difference in code is that I used Atlas Toolkit controls along with it, which should not have anything to do with anything.

The most frustrating part is that, without source code for Atlas UpdatePanel, it has been almost impossible to debug, because when I debug on the server to see if the content generated is proper one of two things occur:

1. Absolutely everything looks fine, but the rendering never makes it to the client for some reason, or,

2. The command never makes it into the event handler for some reason (as if the command is getting eaten by something not inside the UpdatePanel or just disappearing).

I am almost to the point of using .NET Reflector to produce my own version of the Atlas source, so I can get the whole picture.

Any suggestions?

Would anyone at Microsoft be willing to post the source code to Atlas JUST for debugging purposes?
Have you tried setting Mode="Conditional" on all of your updatepanels?

http://forums.asp.net/thread/1268686.aspx

Thanks, that worked!

I've tried setting the mode to conditional on all updatepanels for sure, but probably missed one updatepanel that was set to always or something like that.

So guys if you're using many updatepanels that reference the same scriptmanager (in controls like the wizard or multiview),set mode to conditional on all updatepanels.

My application was having similar problems with wizards inside update panels (the nav buttons didn't function in firefox and IE gave an "unknown error"). Some wizards would work while others didn't. The problem turned out to be my page Title(s). The titile (declared in the page directive) contained an ampersand '&' on some pages and that caused a java error. Prior to Atlas this didn't cause a problem but after adding the scriptmanager it started. Finally I checked the java console in Firefox and bingo!, an error message detailing the line and "not well formed". I tried using the & syntax, but that didn't work either so now I just spell it out and all is well.

Some HTML entities don't work too well in the Atlas CTPs, depending on where they are. Try replacing the named entity with an explicit Unicode value, such as & for &

There are several references online with these charts:

http://www.evolt.org/article/A_Simple_Character_Entity_Chart/17/21234/index.html

Thanks,

Eilon