Radinput manager incorrect behaviour

[Jon]

Please see the following link to reproduce the issue:

http://test.courseacademy.com/itil-training.aspx

if you select either 'download voucher' or 'make an enquiry' a panel is opened with a form on it.

There are some required fields shown which are validated via a radinputmanager, but if you click into the fields the empty message text does not disappear. If you trace it through using firebug, you see this error when it try's to do an ajax post back when first opening the panel.

An invalid or illegal string was specified
[Break On This Error] }l.insertRule(d[b]+"}",b+1); 

Here is the mark up of the page

    <div id="frm-voucher">
        <asp:HiddenField ID="OfferCourseName" runat="server" Value="ITIL Training Voucher" />
        <asp:RadioButton ID="optVoucher" class="optVoucher" OnCheckedChanged="EnquiryTypeChanged" AutoPostBack="True" GroupName="EnquiryType" Text="Download voucher" runat="server" />
        <asp:Panel ID="pnlVoucher" runat="server" Visible="false" CssClass="frm-voucher">
            <p>To download your voucher, please fill in your details below:</p>
            <div class="line">
                <label>Name <span class="req">*</span></label>
                <asp:TextBox ID="vchName" Width="400" ValidationGroup="vchFrm" runat="server"></asp:TextBox>
            </div>
            <div class="line">
                <label>Company  </label>
                <asp:TextBox ID="vchCompany" Width="400" ValidationGroup="vchFrm" runat="server"></asp:TextBox>
            </div>
            <div class="line">
                <label>Email <span class="req">*</span></label>
                <asp:TextBox ID="vchEmail" Width="400" ValidationGroup="vchFrm" runat="server"></asp:TextBox>
            </div>
            <div class="line">
                <label>Telephone <span class="req">*</span></label>
                <asp:TextBox ID="vchTelephone" Width="400" ValidationGroup="vchFrm" runat="server"></asp:TextBox>
            </div>
            <div class="line">
                <label>Enquiry details  </label>
                <asp:TextBox ID="vchEnquiry" Width="400" Height="70" TextMode="MultiLine" ValidationGroup="vchFrm" runat="server" ></asp:TextBox>
            </div>
            <div class="linebtn">
                <asp:ImageButton ID="vchBtnSubmit" ImageUrl="/images/btn-submit-yellow.gif" ValidationGroup="vchFrm" runat="server" />
                <p>Fields marked with <span class="req">*</span> are mandatory.</p>
            </div>
        </asp:Panel>
        <asp:Panel ID="pnlVoucherThanks" runat="server" Visible="false" CssClass="frm-voucher">
            <p>Thank you for downloading your voucher. It will be sent to you by email shortly.</p>
        </asp:Panel>
        <asp:RadioButton ID="optGeneral" class="optGeneral" OnCheckedChanged="EnquiryTypeChanged" AutoPostBack="True" GroupName="EnquiryType" Text="Make a general enquiry" runat="server" />
        <asp:Panel ID="pnlGeneral" runat="server" Visible="false" CssClass="frm-general">
            <p>To download your voucher, please fill in your details below:</p>
            <div class="line">
                <label>Name <span class="req">*</span></label>
                <asp:TextBox ID="genName" Width="400" ValidationGroup="genFrm" runat="server"></asp:TextBox>
            </div>
            <div class="line">
                <label>Company  </label>
                <asp:TextBox ID="genCompany" Width="400" ValidationGroup="genFrm" runat="server"></asp:TextBox>
            </div>
            <div class="line">
                <label>Email <span class="req">*</span></label>
                <asp:TextBox ID="genEmail" Width="400" ValidationGroup="genFrm" runat="server"></asp:TextBox>
            </div>
            <div class="line">
                <label>Telephone <span class="req">*</span></label>
                <asp:TextBox ID="genTelephone" Width="400" ValidationGroup="genFrm" runat="server"></asp:TextBox>
            </div>
            <div class="line">
                <label>Enquiry details  </label>
                <asp:TextBox ID="genEnquiry" Width="400" Height="70" TextMode="MultiLine" ValidationGroup="genFrm" runat="server" ></asp:TextBox>
            </div>
            <div class="linebtn">
                <asp:ImageButton ID="genBtnSubmit" ImageUrl="/images/btn-submit-yellow.gif" ValidationGroup="genFrm" runat="server" />
                <p>Fields marked with <span class="req">*</span> are mandatory.</p>
            </div>
        </asp:Panel>
        <asp:Panel ID="pnlGeneralThanks" runat="server" Visible="false" CssClass="frm-general">
            <p>Thank you for making your enquiry. We will reply to you shortly.</p>
        </asp:Panel>
    </div>
    <p>This rate applies to 5 day scheduled courses only and cannot be used in conjunction with other offers. All courses subject to availability.</p>
</div>

Heres the Radinput manager mark up

<telerik:RadInputManager ID="RadInputManager1" runat="server">
    <telerik:TextBoxSetting Validation-ValidationGroup="genFrm" BehaviorID="genTxtBxBhv" EmptyMessage="Required Field" Validation-IsRequired="true">
        <TargetControls>
            <telerik:TargetInput ControlID="genName" />
            <telerik:TargetInput ControlID="genEmail" />
            <telerik:TargetInput ControlID="genTelephone" />
        </TargetControls>
    </telerik:TextBoxSetting>
    <telerik:TextBoxSetting Validation-ValidationGroup="genFrm" BehaviorID="genTxtBxBhv2" Validation-IsRequired="false">
        <TargetControls>
            <telerik:TargetInput ControlID="genCompany" />
            <telerik:TargetInput ControlID="genEnquiry" />
        </TargetControls>
    </telerik:TextBoxSetting>

    <telerik:TextBoxSetting Validation-ValidationGroup="vchFrm" BehaviorID="vchTxtBxBhv" EmptyMessage="Required Field" Validation-IsRequired="true">
        <TargetControls>
            <telerik:TargetInput ControlID="vchName" />
            <telerik:TargetInput ControlID="vchEmail" />
            <telerik:TargetInput ControlID="vchTelephone" />
        </TargetControls>
    </telerik:TextBoxSetting>
    <telerik:TextBoxSetting Validation-ValidationGroup="vchFrm" BehaviorID="vchTxtBxBhv2" Validation-IsRequired="false">
        <TargetControls>
            <telerik:TargetInput ControlID="vchCompany" />
            <telerik:TargetInput ControlID="vchEnquiry" />
        </TargetControls>
    </telerik:TextBoxSetting>
</telerik:RadInputManager>

Heres the page load event as the script manager and ajax manager are all used on the master page above

Dim AjaxManager As RadAjaxManager = CType(Me.Master.FindControl("RadAjaxManager1"), RadAjaxManager)
        Dim RadAjaxLoadingPanel1 As RadAjaxLoadingPanel = CType(Me.Master.FindControl("RadAjaxLoadingPanel1"), RadAjaxLoadingPanel)

        AjaxManager.AjaxSettings.AddAjaxSetting(optVoucher, optGeneral)
        AjaxManager.AjaxSettings.AddAjaxSetting(optVoucher, pnlVoucher, RadAjaxLoadingPanel1)
        AjaxManager.AjaxSettings.AddAjaxSetting(optVoucher, pnlVoucherThanks)
        AjaxManager.AjaxSettings.AddAjaxSetting(optVoucher, pnlGeneral)
        AjaxManager.AjaxSettings.AddAjaxSetting(optVoucher, pnlGeneralThanks)

        AjaxManager.AjaxSettings.AddAjaxSetting(optGeneral, optVoucher)
        AjaxManager.AjaxSettings.AddAjaxSetting(optGeneral, pnlVoucher)
        AjaxManager.AjaxSettings.AddAjaxSetting(optGeneral, pnlVoucherThanks)
        AjaxManager.AjaxSettings.AddAjaxSetting(optGeneral, pnlGeneral, RadAjaxLoadingPanel1)
        AjaxManager.AjaxSettings.AddAjaxSetting(optGeneral, pnlGeneralThanks)

        AjaxManager.AjaxSettings.AddAjaxSetting(vchBtnSubmit, pnlVoucher)
        AjaxManager.AjaxSettings.AddAjaxSetting(vchBtnSubmit, pnlVoucherThanks, RadAjaxLoadingPanel1)

        AjaxManager.AjaxSettings.AddAjaxSetting(genBtnSubmit, pnlGeneral)
        AjaxManager.AjaxSettings.AddAjaxSetting(genBtnSubmit, pnlGeneralThanks, RadAjaxLoadingPanel1)

Any ideas or fixes please?

[Vasil]

Hello Jon,

I opened your side and it seems that you have solved the issue already since the error is not appearing when selecting "Download voucher" or "Make a general enquiry". Please confirm if you still have problems.

All the best,
Vasil
the Telerik team

[Jon]

Hi Vasil,

While we were waiting for a response from Telerik, we removed the required field text bug to get round the issue to show the client a working page.

We have since put it back as it was with the error so that you can check again and see the issue.

Please revisit the link.

Thanks

Jon.

[Vasil]

Hi Jon,

The JavaScript error happens when updating the head styles. And it happens because it tries to insert invalid CSS rule which is:

"img, div, { behavior: url("/js/iepngfix.htc") }"

Note that after the div there should not be comma to be valid, like:

"img, div { behavior: url("/js/iepngfix.htc") }"

Check and correct your CSS and the problem should be resolved.

Best wishes,
Vasil
the Telerik team

[Jon]

Hi Vasil,

We have changed it and its made no difference, also the block of code was in an IE 6 code block anyway.

Thanks

Jon.

[Vasil]

Hello Jon,

Can you confirm that the manager is in some of the updated panels?
I debugged your site and see that RadInputManager's initialize is not fired after the Ajax. So I believe that you don't update the manager. This is the reason that the settings of the newly showed inputs does not work.

You could also test with the latest version, since we did improved the RadInputManager to apply the settings after an Ajax even if the inputs or the manager are not in the update panels.

Regards,
Vasil
the Telerik team

[Jon]

The input manager is on the bottom of the page where the text boxes are

the ajax manger is on the master page above.

In the page load event you see in the code i have shown, we add a reference to the ajax manager on the master, and add the controls needed to the ajax manager.

so are you saying we need to add the input manager to the ajax manager?

 

[Vasil]

Hello Jon,

Yes you need to update the manager. Because if it is not updated it does not know that there are more controls shown on the page and it could not manage them.
Or use the latest version of the controls in which the manager performs some actions after the page load even if it is not updated.

Greetings,
Vasil
the Telerik team

[Jon]

thanks

Added the rad input manager to the Ajax manager and it worked

Thanks for the great support once again.