JavaScript before Ajax request

3 posts, 1 answers
  1. Matt
    Matt avatar
    33 posts
    Member since:
    Nov 2010

    Posted 29 Nov 2010 Link to this post

    Hello,

    I've been using telerik/ajax for a couple of months, and I have recently hit a proplem with regards to displaying a loading panel. When the user click a button, I want to display a loading panel while the server process the data. However, I also want to run a javascript method before the post is made to the server. See my example:

     

     

     

    <head runat="server">
        <title></title>
        <script type="text/javascript">
            <!--
            function addItem()
            {
                var textBoxData = document.getElementById("txtData");
      
                if (textBoxData.value.length > 0)
                {
                    var listBoxData= document.getElementById("lsbSelectedData");
      
                    var newLength = listBoxData.length;
                    listBoxData[newLength] = document.createElement("option");
                    listBoxData[newLength].text = textBoxData.value;
                }
                else
                {
                    alert("Enter data");
                }
      
                textBoxData.value = "";
                textBoxData.focus();
      
                return false;
            }
      
            function submitData()
            {       
                var listBoxData = document.getElementById("lsbSelectedData");
                // Ensure that barcodes have been entered
                if (listBoxData.options.length > 0)
                {
                    // Store data in a hidden field as the contexts of a listbox
                    // do not get posted back to the server
                    var hiddenData = document.getElementById("hdnSelectedData");
      
                    var pipedData = "";
                    var index;
      
                    for (var index = 0; index < listBoxData.options.length; index++)
                    {
                        pipedData += listBoxData.options[index].text + "|";
                    }
      
                    hiddenData.value = pipedData;
                    return true;
                }
                else
                {
                    alert("Enter data");
                    var textBoxData = document.getElementById("txtData");
                    textBoxData.focus();
                    return false;
                }
            }
              
            // -->
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="ScriptManager1" runat="server" />
        <telerik:RadAjaxManager ID="AjaxManager" runat="server" DefaultLoadingPanelID="AjaxLoadingPanel">
            <AjaxSettings>    
                <%--<telerik:AjaxSetting AjaxControlID="btnOK" >
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="pnlDataEntry" LoadingPanelID="AjaxLoadingPanel" />
                        <telerik:AjaxUpdatedControl ControlID="lblResults"  />
                    </UpdatedControls>
                </telerik:AjaxSetting>--%>
            </AjaxSettings>
        </telerik:RadAjaxManager>
          
        <asp:Panel ID="pnlDataEntry" runat="server">
            <asp:TextBox ID="txtData" runat="server"></asp:TextBox>
               
            <asp:Button ID="btnAdd" runat="server" Text="Add" OnClientClick=" return addItem()" />
        </asp:Panel>
          
        <asp:ListBox ID="lsbSelectedData" runat="server" Width="300" Height="200"></asp:ListBox>    
        <asp:HiddenField ID="hdnSelectedData" runat="server" />
        <br />
        <asp:Button ID="btnOK" runat="server" Text="OK" onclick="btnOK_Click" OnClientClick="return submitData()"/>
          
        <%--<asp:Button ID="btnOK" runat="server" Text="OK" onclick="btnOK_Click"/>--%>
        <br />
        <asp:Label ID="lblResults" runat="server"></asp:Label>
          
        <telerik:RadAjaxLoadingPanel ID="AjaxLoadingPanel" runat="server" Height="75px" Width="75px"
            BackColor="WhiteSmoke" CssClass="loadingImage" HorizontalAlign="Center">
            <asp:Image ID="Image1" runat="server" AlternateText="Loading..." ImageUrl="loading5.gif" />
        </telerik:RadAjaxLoadingPanel>
          
        </form>
    </body>

    C# code:

    public partial class TestPage: System.Web.UI.Page 
    {
        protected void Page_Load(object sender, EventArgs e)
        {
      
        }
      
        protected void btnOK_Click(object sender, EventArgs e)
        {
            System.Threading.Thread.Sleep(2000);
      
            StringBuilder results = new StringBuilder();
      
            // Get the formatted data from the hidden field
            string pipedData = hdnSelectedData.Value;
      
            if (!string.IsNullOrEmpty(pipedData))
            {
                results.Append("Results:<BR />");
                string[] enteredData = pipedData.Remove(pipedData.Length - 1).Split('|');
      
                foreach (string data in enteredData)
                {
                    results.AppendFormat("{0}<BR />", data);
                }
            }
            else
            {
                results.Append("Results: Nothing entered!");
            }
      
            lblResults.Text = results.ToString();
        }
    }
    The code above works, but if you un-comment the in the Ajax manager to enable the loading panel, the btnOK_Click on the server is never called. If you remove the OnClientClick methods from the OK button the loading panel appears, but page does not work how it was designed!.

    I would like my javascript to run, the loading panel to appear, and the server to process the post back. Does anybody know what I'm doing wrong? P.S Our version of Telerik is Q2 2008.

    Many thanks,

    Matt

  2. Answer
    Cori
    Cori avatar
    562 posts
    Member since:
    Jul 2010

    Posted 29 Nov 2010 Link to this post

    Hello Matthew,

    You need to change the way you make the method call in the OnClientClick event. It should look something like this:

    <asp:Button ID="btnOK" runat="server" Text="OK" onclick="btnOK_Click" OnClientClick="if(!submitData()) return false;"/> 

    This is the help article that shows this technique:

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

    I hope that helps.
  3. Matt
    Matt avatar
    33 posts
    Member since:
    Nov 2010

    Posted 29 Nov 2010 Link to this post

    Cheers Cori,

    I should have done a search on 'OnClientClick'. So returning true breaks the Ajax request, but returning the default response works. Interesting...

    Thanks again,

    Matt
Back to Top