Wednesday, March 21, 2012

Writing Javascript at Runtime on Update

Ok, I can't seem to find a shred of working advice on this topic. But, here are the basics.

Button inside of an updatepanel. Partial rendering is turned on.

Button gets clicked. Ajax call is made to the server. How do I at this point write javascript to the client's box that will execute, such as an alert.

Can't use Response.Write. Can't use ClientScript.Register... since that requires a full postback, unless I'm missing something. So...I'm not really sure what my other options are, surely someone else has run across this already. If you have any insight please share it with me.

Use EVAL() function of Javascript. It can be used as following,

<SCRIPT language="Javascript">

function Popup()

{

ExecJavascript("alert('Hi All');");

}

function ExecJavascript(var jscript);

{

eval(jscript);

}

</SCRIPT>


Use ScriptManager.RegisterStartupScript. Here's a working example:

<%@. Page Language="C#" AutoEventWireup="true" EnableEventValidation="false" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> private void button_click(object sender, EventArgs e) { ScriptManager.RegisterStartupScript(up1, up1.GetType(), "myscript", "alert('Alert sent from server!')", true); }</script><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:UpdatePanel ID="up1" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:Button ID="button1" runat="server" Text="Click Me" OnClick="button_click" /> </ContentTemplate> </asp:UpdatePanel> </form></body></html>

hello.

or, if you don't need to return anything from the server, you can also hande the endrequest event of the client pagerequestmanager object which is available in all the pages that have updatepanels.

<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest( endRequest );

function endRequest( sender, e ) {
//put your code here.
}
</script


Perhaps I was not clear.

madesh, Your code is only from javascript to javascript. That isn't the issue.

Steve Marx, You don't have partial rendering enabled. You will find that enabling that will prevent your button from registering that script block because doing that requires a full post back.

Luis Abreu, I do need to send info back from the server.

Let me restate the problem. You're on the server, there isn't any javascript already on the client. You need to write some JS to the client, from a partial postback. ie, they just pressed the button, but it was through AJAX which means no script registering through the ClientScript object. So, during this partial post back, what are my options for sending a script block to the client?


Crap miss-read that Steve, I haven't tried it with the script manager, ill give that a shot when i get home. Why can't we edit posts?...


Excellent. Thanks Steve it worked. The trick is, you can't use Page as the control to register the script with. You have to use an existing control on the page, any will do. Even the update panel (up1). Thanks.

ZeroDegrez:

madesh, Your code is only from javascript to javascript. That isn't the issue.

Let me restate the problem. You're on the server, there isn't any javascript already on the client. You need to write some JS to the client, from a partial postback. ie, they just pressed the button, but it was through AJAX which means no script registering through the ClientScript object. So, during this partial post back, what are my options for sending a script block to the client?

As you stated that it is a AJAX call and Javascript gets generated on server side. EVAL can help you. Return your server generated Javascript to Client side as a string(Output of your AJAX call). Execute that Javascript on Client side using EVAL function.

This way you can execute the javascript returned by your AJAX call on client side.

<SCRIPT language="Javascript">

function AJAXcall()

{

var JScript={Put your AJAX call here};

ExecJScript(JScript);

}

function ExecJScript(var JScript)

{

eval(JScript);

}

</SCRIPT>

No comments:

Post a Comment