This is a migrated thread and some comments may be shown as answers.

[Solved] Problems with javascript and ajax manager

2 Answers 160 Views

Ajax

This is a migrated thread and some comments may be shown as answers.

Bex asked on 01 Jun 2009, 10:43 AM

Hello!

I am trying to add a bit of javascript to a collegues page, to check if a user has previewed their order before they are allowed to submit it, but the ajax panel is causing me problems.

This is a very narrowed down test page I have created to try and work out whats happening:

    
            <body> 
        
                <form id="form1" runat="server">  
        
                <script type="text/javascript">  
        
                    function TextChanged() {  
        
                        var textChanged;  
        
                        textChanged = document.getElementById("textChangedField")  
        
                        textChanged.value = "1";  
        
                    }  
        
                    function Previewed() {  
        
                        var textChanged;  
        
                        textChanged = document.getElementById("textChangedField")  
        
                        textChanged.value = "0";  
        
                    }  
        
                    function CheckPreview() {  
        
                        var textChanged;  
        
                        textChanged = document.getElementById("textChangedField")  
        
                        if (textChanged.value == "1") {  
        
                            alert('You must preview your document before you can order it');  
        
                            return false;  
        
                        } else {  
        
                            return true;  
        
                        }  
        
                        return true;  
        
                    }  
        
                </script> 
        
                <asp:ScriptManager ID="ScriptManager1" runat="server">  
        
                </asp:ScriptManager> 
        
                <telerik:ReportViewer ID="ReportViewer1" runat="server">  
        
                    <Resources ProcessingReportMessage="Generating preview..." /> 
        
                </telerik:ReportViewer> 
        
                <input type="hidden" id="textChangedField" value="0" /> 
        
                <asp:TextBox ID="textbox" runat="server" onKeyUp="TextChanged()"></asp:TextBox> 
        
                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="textbox" 
        
                    ValidationGroup="Template" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator> 
        
                <asp:Button ID="PreviewButton" runat="server" Text="Preview" ValidationGroup="Template" 
        
                    CausesValidation="true" OnClick="ButtonRefresh_Click" OnClientClick="Previewed();" /> 
        
                <asp:Button ID="OrderButton" OnClientClick="return CheckPreview();" runat="server" 
        
                    Text="Order" ValidationGroup="Template" CausesValidation="true" OnClick="OrderButton_Click" /> 
        
                <asp:Label ID="LabelTotal" runat="server"></asp:Label> 
        
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableHistory="True">  
        
                    <AjaxSettings> 
        
                        <telerik:AjaxSetting AjaxControlID="PreviewButton">  
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="ReportViewer1" /> 
        
                            </UpdatedControls> 
        
                        </telerik:AjaxSetting> 
        
                        <telerik:AjaxSetting AjaxControlID="OrderButton">  
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="ReportViewer1" /> 
        
                            </UpdatedControls> 
        
                        </telerik:AjaxSetting> 
        
                    </AjaxSettings> 
        
                </telerik:RadAjaxManager> 
        
                </form> 
        
            </body>

There is a report viewer, a textbox and two buttons.
The javascript function "textchanged" sets a hidden field when the text is changed so when the user clicks the order button a alert box is popped up telling them to preview the report if they haven't already..

So far this all works..

There is also a required field validator on the textbox, which doesn't always show when you click the order button if the textbox is empty, but always shows when you click the preview button.
but the main problem occurs when the user has actually previewed the report, they click the order button, the javascript runs and returns true, but the orderbutton_click event in the code behind doesn't fire.

I know this is something to do with the ajax manager, because without it it all works, but we are using this as we want the report to update after each button click regardless of whether it validates or not.

Is this what is causing the problem? or is it a bug? What is the best way around this?

Thanks

bex

just incase you need to know, the reason the Javascript is in the body, is because on the main page, all this code is within a content panel.

2 Answers, 1 is accepted

answered on 01 Jun 2009, 12:49 PM

Hello Becky,

I suggest that you review the below articles for more information on RadAjax, Standard Validators and client confirmation.

http://www.telerik.com/help/aspnet-ajax/ajxcontrolsnotcompatible.html
http://www.telerik.com/help/aspnet-ajax/ajxconfirmation.html

Additionally, you can try modifying your page as below and see if this works for you:

    
            <form id="form1" runat="server">  
        
                    <script type="text/javascript">     
        
                    function TextChanged() {     
        
                        var textChanged;     
        
                        textChanged = document.getElementById("textChangedField")     
        
                        textChanged.value = "1";     
        
                    }     
        
                    function Previewed() {     
        
                        var textChanged;     
        
                        textChanged = document.getElementById("textChangedField")     
        
                        textChanged.value = "0";     
        
                    }     
        
                    function CheckPreview() {     
        
                        var textChanged;     
        
                        textChanged = document.getElementById("textChangedField")     
        
                        if (textChanged.value == "1") {     
        
                            alert('You must preview your document before you can order it');     
        
                            return false;     
        
                        } else {     
        
                            return true;     
        
                        }     
        
                        return true;     
        
                    }     
        
                    </script> 
        
                    <asp:ScriptManager ID="ScriptManager1" runat="server">  
        
                    </asp:ScriptManager> 
        
                    <telerik:ReportViewer ID="ReportViewer1" runat="server">  
        
                        <resources processingreportmessage="Generating preview..." /> 
        
                    </telerik:ReportViewer> 
        
                    <input type="hidden" id="textChangedField" value="0" /> 
        
                    <asp:Panel ID="Panel1" runat="server">  
        
                    <asp:TextBox ID="textbox" runat="server" onKeyUp="TextChanged()"></asp:TextBox> 
        
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="textbox" 
        
                        ValidationGroup="Template" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator> 
        
                    </asp:Panel> 
        
                    <asp:Button ID="PreviewButton" runat="server" Text="Preview" ValidationGroup="Template" 
        
                        CausesValidation="true"  OnClientClick="Previewed();" /> 
        
                    <asp:Button ID="OrderButton" OnClientClick="if(!CheckPreview()) return false;" runat="server" 
        
                        Text="Order" ValidationGroup="Template" CausesValidation="true" /> 
        
                    <asp:Label ID="LabelTotal" runat="server"></asp:Label> 
        
                    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnableHistory="True">  
        
                        <AjaxSettings> 
        
                            <telerik:AjaxSetting AjaxControlID="PreviewButton">  
        
                                <UpdatedControls> 
        
                                    <telerik:AjaxUpdatedControl ControlID="ReportViewer1" /> 
        
                                    <telerik:AjaxUpdatedControl ControlID="Panel1" /> 
        
                                </UpdatedControls> 
        
                            </telerik:AjaxSetting> 
        
                            <telerik:AjaxSetting AjaxControlID="OrderButton">  
        
                                <UpdatedControls> 
        
                                    <telerik:AjaxUpdatedControl ControlID="ReportViewer1" /> 
        
                                    <telerik:AjaxUpdatedControl ControlID="Panel1" /> 
        
                                </UpdatedControls> 
        
                            </telerik:AjaxSetting> 
        
                        </AjaxSettings> 
        
                    </telerik:RadAjaxManager> 
        
                </form>

Let me know if this helps.

Kind regards,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.