Calling Clinet Function from Code Behind (Inside Ajax Update panel)

Hi,

Can anyone please provide information on how I can do this:

I have a GridView control inside an Ajax Update panel and have wired the Selected IndexChanged action to call a Client side Javascript function (ViewReceipt()). Unfortunately it doesn't seem to work except if I take the control outside the update panel.

Have posted my code below..

protected void rgvInv_SelectedIndexChanged(object sender, EventArgs e)
{
// Now execute the client-side stuff...
StringBuilder sbScript = new StringBuilder();
sbScript.Append("\n<script language=\"JavaScript\" type=\"text/javascript\">\n");
sbScript.Append("<!--\n");
sbScript.Append("ViewReceipt();\n");
sbScript.Append("// -->\n");
sbScript.Append("</script>\n");
this.RegisterStartupScript("ClientSideCall", sbScript.ToString());
}

Regards..

Peter.

Hi,

Found some posts on this and tried to add the recommended code but still getting a syntax error, hope someone can help out..

code behind:

protected void rgvInv_SelectedIndexChanged(object sender, EventArgs e)
{
// Now execute the client-side stuff...
StringBuilder sbScript = new StringBuilder();
sbScript.Append("\n<script language=\"JavaScript\" type=\"text/javascript\">\n");
sbScript.Append("<!--\n");
sbScript.Append("EditReceipt();\n");
sbScript.Append("// -->\n");
sbScript.Append("</script>\n");
//this.RegisterStartupScript("ClientSideCall", sbScript.ToString());
//ScriptManager.RegisterStartupScript(this.UpdatePanel1, this.GetType(), "ClientSideCall", sbScript.ToString(), true);
ScriptManager.RegisterStartupScript(this, this.GetType(), "ClientSideCall", sbScript.ToString(), true);

}

Javascript Function:

function EditReceipt()
{
var manager = GetRadWindowManager();
var rwEntry = manager.GetWindowByName("rwReceipt");
}

Regards..

Peter.

Hi Peter,

The problem with your code is that you should specify the last parameter to false in RegisterStartupScript method.

This parameter indicates that <script> tag will be added automatically to wrap the sbScript. Since you've done that manually, so false should be used.

Like this:

ScriptManager.RegisterStartupScript(this, this.GetType(), "ClientSideCall", sbScript.ToString(), false);

Hope this helps.

Hi Peter,

Give full definition of EditScript() function then only I can help to you.

Regards,

Aru

Raymond,

Thanks for the information, I have already implemented a work around by moving the grid outside of the update panel. I'm using a telerik grid which has inbuilt AJAX and there are some clientside events which can be hooked into that has given me the functionality I require, anyway thanks for the information I can use it else where later.

Regards..

Peter

Calling AJAX function

Hi, I wonder if there's a way to call an AJAX function via code behind page. That is, I have an asp tab control on my page, in which on pressing a tab I open a menu via AJAX code and ask user to enter password then I validate that password and want to select that tab if password is correct. Since my tab is asp control the AJAX code doesn't know that so I have to return the password to the code behind page but since I have to call such function through AJAX:

[Ajax.AjaxMethod(HttpSessionStateRequirement.ReadWrite)]
public void CheckRoomPsw(string psw)
{

...

}

I don't have access to Tab control because this returns null, so there's two options which I don't know how to perform:

1. call an AJAX control from CheckRoomPsw(string psw)

2. get an access to tab control in CheckRoomPsw(string psw)

Any idea is appreciated.

have you tried using the findControl function. it lets you access a conrol by referencing its location and using its ID. so if you had a bunch of controls on your form and wanted to get to one you could do.

form1.findControl("controlIDgoesHere");

if yours is inside of some ajax stuff it might be like

UpdatePanel1.findControl("myControlsID");

then you can just cast that to reference the object type

string value = ((TextBox)form1.findControl("txtUserName")).Text;

Actually, I've done that:

[Ajax.AjaxMethod(HttpSessionStateRequirement.ReadWrite)]
public void CheckRoomPsw(string psw)
{
JQD.TabStrip ts = (JQD.TabStrip)this.FindControl("TabStrip1");
ts.SelectTab(Global.tabPos);
}

but this returns null!!

I think it's because CheckRoomPsw() is an AJAX function

Perform the tab selection on the client-side callback. Return a boolean from the AJAX method after you check the password, if it is true perform the tab selection.

Also, it looks like you're using AJAX.NET, which is a completely separate product from ASP.NET AJAX, so you might want to see if they have a forum.

Have you had luck fixing your issue?

-Damien

Not yet!

I'm still looking for solution!

Have you tried doing the tab selection client-side?

I tried much to get access to the tab control from js code (client side) but since the tab control is an asp user control, it can't be known from js code.

Use theOnClientActiveTabChangedproperty on the tab. Seehttp://asp.net/AJAX/Control-Toolkit/Live/Tabs/Tabs.aspx for more information.

-Damien

Thanks for your concern Domien!

However, I'm not using AJAX.net and don't know much about it and it's a bit risky to change my tab control now that I'm on the final steps of completing my project

IS there any other solution please

Calling a Webservice from within a javascript object - closure issue?

Hi,

I'm making a client side call to a web services but I need to wrap up the functionality that makes the call within another object. The code is below. The code worked fine before I wrapped it in the "ImageViewer" object but now when I try to call the Web Service Method it doesn't recognise the onComplete call back function and says "onComplete" undefined. (See the getImageIDs method). I suspect this is something to do with scope and/or closure but I've been unable to come up with a solution. What is the correct way to do this? Any help will be appreciated.

Type.registerNamespace(

"Raydius");

Raydius.ImageViewer =

function(ImageDivID, ImageListDivID){this.ImageDiv = $get(ImageDivID);this.ImageListDiv = $get(ImageListDivID);this.ImageIDs = [];this.Images = [];

}

Raydius.ImageViewer.prototype = {

getImageIDs:function(id){

// Call the WebService

RaydiusWS(id, onComplete);

},

onComplete:

function(results){

alert(results);

},

onTimeOut:

function(results){

alert(

"Timeout");

},

onError:

function(results){

alert(

"Error");

}

}

Raydius.ImageViewer.registerClass(

'Raydius.ImageViewer');function initImageViewer(){

var viewer =new Raydius.ImageViewer("ImageDiv","ImageListDiv");

viewer.getImageIDs(1);

}

See if my example here helps you:

http://forums.asp.net/thread/1574034.aspx

Thanks for the response. There was actually a daft error in my code that was stoppinmg it working both the other post you directed me to was helpful. The userContext param is very useful.

Thanks

Mat

Calling a simple Web Service from an ASPX page

Hi

I created a new Atlas web project, added a new web service and web page using the the code from the Simple.aspx and SimpleService.asmx.

Given I have identical code in the page and ws, I end up with 'Quickstart' is undefined error, on the following line of javascript:

requestSimpleService = Quickstart.Samples.SimpleService.EchoString(
document.getElementById('inputName').value, //params
OnComplete, //Complete event
OnTimeout //Timeout event
);

Any ideas?

It turns out in VS2005, when a new web service is created a code-behind is also created and placed into the App_Code directory. The problem I was getting was becuase the namespace reference was not the same as in the asmx.

Problem solved.

Great! Note that this behavior is optional, so if you prefer you can get the code inline in the asmx file (it's a checkbox on the add dialog).

David

Calling a JS function from server side

Hi,

I try to call a javascript function from the server side but it doesn't work, here my code :

1<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>23<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">45<html xmlns="http://www.w3.org/1999/xhtml" >6<head runat="server">7 <title>Test</title>8</head>9<body>10 <form id="form1" runat="server">1112 <atlas:ScriptManager ID="scriptManager1" runat="server" EnablePartialRendering="true"></atlas:ScriptManager>1314 <atlas:UpdatePanel ID="UpdatePanel1" runat="server">15 <ContentTemplate>1617 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />18 <asp:TextBox ID="TextBox2" runat="server" Text="test"></asp:TextBox><br />19 <asp:Button ID="Button1" runat="server" Text="Write" OnClick="Button1_Click" />20 <asp:Button ID="Button2" runat="server" Text="Clear" OnClick="Button2_Click" />2122 </ContentTemplate>23 <Triggers>24 <atlas:ControlEventTrigger ControlID="Button1" EventName="Click" />25 <atlas:ControlEventTrigger ControlID="Button2" EventName="Click" />26 <atlas:ControlValueTrigger ControlID="TextBox1" PropertyName="Text" />27 </Triggers>28 </atlas:UpdatePanel>2930 </form>31</body>32</html>33

And the code behind :

1using System;2using System.Data;3using System.Configuration;4using System.Collections;5using System.Web;6using System.Web.Security;7using System.Web.UI;8using System.Web.UI.WebControls;9using System.Web.UI.WebControls.WebParts;10using System.Web.UI.HtmlControls;1112public partialclass test : System.Web.UI.Page13{14protected void Page_Load(object sender, EventArgs e)15 {1617 }1819public void Button1_Click(object sender, EventArgs e)20 {21 TextBox1.Text ="Button clicked";22 }2324public void Button2_Click(object sender, EventArgs e)25 {26 TextBox1.Text ="";27 Response.Write("<script type=\"text/javascript\">alert('hello');</script>");28 }2930}31

When i click on the button 2, my alert function is not called and the textbox 1 is not cleaned.

How can i call the JS function ?

Take a look at this post:http://forums.asp.net/thread/1395511.aspx
thank you :)

copy this code atButton2_Click

public void Button2_Click(object sender, EventArgs e)
25 {
26 TextBox1.Text ="";
27 Page.ClientScript.RegisterStartupScript(typeof(Page), "OnLoad", "alert('hello');",true );
28 }

See more details athttp://forums.asp.net/thread/1403704.aspx

call webservce

Hi

i try to call a webservice when form load,but i can't

my code like

<form id="f" onload = "callService()>

<script language = "javascript">

function callServicce()

{..........}

</script>

</form>

please help me ??

thank you

You need to register your webservice using ScriptManager and ServiceReference.
Here are examples of the webservice and javascript code which calls the webservice. Method DoSearch is calling the webservice method

Webservice in (Webservice.asmx)

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService] //If this is not added, then it is not possible to generate javascript proxy.
public class MyWebService : System.Web.Services.WebService {

[WebMethod]
public string HelloWorld(string query)
{
string inputString = Server.HtmlEncode(query);
if (!String.IsNullOrEmpty(inputString))
{
return String.Format("Hello, you queried for {0}. The "
+ "current time is {1}", inputString, DateTime.Now);
}
else
{
return "The query string was null or empty";
}

}

}

JavaScript snippet:

<form id="Form1" runat="server">
<asp:ScriptManager runat="server" ID="scriptManager">
<Services>
<asp:ServiceReference path="~/WebService.asmx" />
</Services>
</asp:ScriptManager>
<div>
Search for
<input id="SearchKey" type="text" />
<input id="SearchButton" type="button" value="Search"
onclick="DoSearch()" />
</div>
</form>
<hr style="width: 300px" />
<div>
<span id="Results"></span>
</div>

<script type="text/javascript">

function DoSearch()
{
var SrchElem = document.getElementById("SearchKey");
MyWebService.HelloWorld(SrchElem.value, OnRequestComplete);
}

function OnRequestComplete(result)
{
var RsltElem = document.getElementById("Results");
RsltElem.innerHTML = result;
}

</script>

Hope this helps

thanks for your reply

but my question is how to call webservice on formload event ?

i already do what you show,but webservice could'n to be call on form load event

Ajax, your code looks fine. Perhaps you could post your entire script so we can debug further?
I think you could try ScriptManager1.RegisterClientScriptBlock method in Page_Load Event.

Call Modal Popup from Javascript

Is it possible to call the Modal Popup from the client side (javascript)? If so what is the code required to do this?Got my answer here: http://damianblog.com/2007/02/28/calling-extenders-from-js/

Hey Chris,

I wrote about this quite some time ago.

Heres a link

http://blogs.msdn.com/phaniraj/archive/2007/02/20/show-and-hide-modalpopupextender-from-javascript.aspx

Hope this helps

Call AJAX method from code behind page

Hi,I need to call an AJAX method from code behind page; is there any way to do that? if it can be done by calling a javascript function from code behind page, also helpsI'm coding in ASP C# .NETAny idea is appreciated

this code solved my problem:
string s = "<script type='text/javascript'>test();</script>";

ClientScript.RegisterStartupScript(Page.GetType(), "test", s);

while I have such function in my javascript code:

function test()
{
..
}

calendarextender: popupbuttonid

I am trying to call a function on my code behind page after a date has been selected from the calendar. I have tried using the popupbuttonid and the click event for that button and I have tried the text box textchanged event. Nothing seems to work. Does any one know how to do this?

Thanks in advance!

Hi dowens,

You should set the property OnClientDateSelectionChanged of the CalendarExtender.

As value, you should give it a function. But the function should be without brackets or an error will occur (not sure why)

Take a look at the following example:

<%@. Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %><%@. Register Assembly="System.Web.Extensions" Namespace="System.Web.UI" TagPrefix="asp" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head id="Head1" runat="server"> <title>Untitled Page</title> <script type="text/javascript"> function test() { alert('test'); } </script></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <img id="imgCalendar1" height="20" alt="Change From Date" src="Calendar.png" /> <cc1:CalendarExtender ID="CalendarExtender1" runat="server" PopupButtonID="imgCalendar1" TargetControlID="TextBox1"OnClientDateSelectionChanged="test"> </cc1:CalendarExtender> </div> </form></body></html>

I hope this helps!
Wim

MY BAD .......

The following example call's code behind: (the one in the button's click method on the serverside).

<%@. Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %><%@. Register Assembly="System.Web.Extensions" Namespace="System.Web.UI" TagPrefix="asp" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head id="Head1" runat="server"> <title>Untitled Page</title> <script type="text/javascript"> function test() { var serverButton = document.getElementById('Button1'); serverButton.click(); serverButton = null; } </script> <style type="text/css"> .hide { visibility:hidden; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <img id="imgCalendar1" height="20" alt="Change From Date" src="Calendar.png" /> <cc1:CalendarExtender ID="CalendarExtender1" runat="server" PopupButtonID="imgCalendar1" TargetControlID="TextBox1" OnClientDateSelectionChanged="test"> </cc1:CalendarExtender> <asp:Button ID="Button1" runat="server" Text="Button" CssClass="hide" /> </div> </form></body></html>

Kind regards,
Wim

deblemewim,

I tried your suggestion and it still won't work. Here is the code for the script function and the calendar extender. If you notice the PopupButtonID is the same button that I am trying to call the click event for. I thought this might be the problem so I removed it and it still doesn't work.

function test()
{
var serverButton = document.getElementById('btnEDate');
serverButton.click();
serverButton =null;
}

<cc1:CalendarExtenderID="ceEdate"runat="server"
TargetControlID="txtEDate"
PopupButtonID="btnEDate"
CssClass="MyCalendar"
OnClientDateSelectionChanged="test">
</cc1:CalendarExtender>

Hi dowens,

Well, I don't see your whole code, but I think the your code is not working because your PopupButtonID is a Button (imagebutton, inputbutton, ordinary asp button, ...).

I don't think that is possible!!

When you look at the ajax toolkit examples, they also use either the control (textbox) itself to let the calendar popup, OR they use an image (<img id="myImage" ... ).

So that is the setup you have to go for!!

Is your calendar poping up? Is is that what isn't working?

In my example, I use an image, so the calendar gets poped up. Then, I've set the property OnClientDateSelectionChanged to trigger a javascript function whenever the date changes in the TargetControlID .

When that happens, the javascript locates an ordinary asp:button on the page (which I have hidden), and it triggers it's click event. That way I get code-behind.

If this still doesn't answer your questions, please let me know what exactly you are willing to achieve.

Kind regards,
Wim

Wim,

I think I may have found the issue. The function "test" is not finding the button. Even if I don't hide the button it still doesn't find it. I think the issue may be that I am using a masterpage. I tried your code on a test page and it works fine. The only difference I can find is the master page. I have placed the function in the <head> of the masterpage and I have also tried it on the content page. Neither one works.

Hi dowens,

Sorry for my late reply...

I did some research (since masterpages are quite new to me ...) and I found the following:http://forums.asp.net/t/1031073.aspx (xplaining about how to call javascript from a masterpage).

Now my example should work!

So, on my content page I have the following:

<%@. Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" title="Untitled Page" %><%@. Register Assembly="System.Web.Extensions" Namespace="System.Web.UI" TagPrefix="asp" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <script type="text/javascript"> function test() {var serverButton = document.getElementById("<%= Button1.ClientID%>"); serverButton.click(); serverButton = null; } </script> <br /> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <img id="imgCalendar1" height="20" alt="Change From Date" src="Calendar.png" /> <cc1:CalendarExtender ID="CalendarExtender1" runat="server" PopupButtonID="imgCalendar1" TargetControlID="TextBox1" OnClientDateSelectionChanged="test"> </cc1:CalendarExtender> <asp:Button ID="Button1" runat="server" Text="Button" CssClass="hide" /></asp:Content>

The script is now in the content page, but I guess it should also be possible to place it somewhere else or just use a link to it (haven't tested that ..)

Hope this helps!
Wim

Wim,

It works great!! Thanks for your help.

Dale

CalendarExtender not shows days of month

I have a CalendarExtender in my page and the days are not showed, only the current month. My code is:

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><asp:ImageButton runat="Server" ID="ImageButton1" ImageUrl="~/App_Themes/Fruits/Images/Calendar_scheduleHS.png" AlternateText="Click to show calendar" /><ajaxToolkit:CalendarExtender ID="calendarButtonExtender" runat="server" TargetControlID="TextBox1" CssClass="MyCalendar" Format="dd/mm/yyyy" PopupButtonID="ImageButton1" PopupPosition="BottomRight"></ajaxToolkit:CalendarExtender>

I am not sure but try using dd/MM/yyyy as the format, as mm denotes minutes.

I have changed the format but the problem remains. I believe that the problem is due to style sheet because I am using an asp.net starter kit and I have had other problems with ajax controls. Their behaviour is different like AJAX samples.

Any idea?

Hi Cabezas,

How about create a new page and only put the necessary parts to the page? If it doesn't work, please check yourweb.config settings. Also, I suggest that you should change your timezone and have a test.

Best regards,

Jonathan