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:
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
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(); } }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 Answers, 1 is accepted
0
Accepted
Cori
Top achievements
Rank 2
Rank 2
answered on 29 Nov 2010, 02:07 PM
Hello Matthew,
You need to change the way you make the method call in the OnClientClick event. It should look something like this:
This is the help article that shows this technique:
http://www.telerik.com/help/aspnet-ajax/ajxconfirmation.html
I hope that helps.
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.
0
Matt
Top achievements
Rank 1
Rank 1
answered on 29 Nov 2010, 03:09 PM
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
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