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

JavaScript before Ajax request

2 Answers 159 Views

Ajax

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

Matt asked on 29 Nov 2010, 12:49 PM

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 Answers, 1 is accepted

Accepted