How do I generate JavaScript during an AJAX callback (postback) and then execute it on the browser?

In summary:

I have an ASP.NET web page that causes an AJAX postback to the server. When this event handler runs (in the code behind) it will generate some JavaScript that I then want to run in the client. Not sure how to achieve this.

In Detail: I have an ASP.NET web page with multiple items displayed on the page.

As a "nice to have", I want to display either a green circle or a red cross next to each item (these differ depending upon each item). Since it isn't vital for the User to see these icons and also because it takes several seconds to work out which icon should be shown for each item, I want to perform this after the page has loaded, so in an AJAX callback.

My thought therefore 开发者_Go百科was this. When creating the page, I would create both icons next to each object and create them with the style of "hidden". I would also make a note of each one's client ID.

Then, when the callback occurs, I fetch the necessary data from the database and then create a JavaScript function that changes the display for each of the icons I want to show from "hidden" to "visible".

I thought I could achieve this using the ScriptManager object.

Here's a very trivial version of my server side code (C#)

void AjaxHandler(object sender, EventArgs e)
{
// call to database
string jscript = "alert('wibble');";
ScriptManager.RegisterStartupScript(this, this.GetType(), "uniqueKey", jscript);
}

Obviously, here I'm just trying to get an alert to fire after the postback has occurred...in real life I'd have my JavaScript function to change the display of all the icons I want to display.

When I run this, the serverside code runs and yet nothing happens in the server.

I have also tried:

ScriptManager.RegisterClientScriptBlock()
Page.RegisterStartupScript()
Page.RegisterClientScriptBlock()
Page.ClientScript.RegisterStartupScript()
Page.ClientScript.RegisterClientScriptBlock()

but none of them work....

FireFox shows the following JavaScript error:

Error: uncaught exception: [Exception... "Node cannot be inserted at the specified point in the hierarchy" code: "3" nsresult: "0x80530003 (NS_ERROR_DOM_HIERARCHY_REQUEST_ERR)" location: "http://localhost/MyWebSiteName/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_RadScriptManager1_TSM&compress=1&_TSM_CombinedScripts_=%3b%3bSystem.Web.Extensions%2c+Version%3d3.5.0.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d31bf3856ad364e35%3aen-US%3a3de828f0-5e0d-4c7d-a36b-56a9773c0def%3aea597d4b%3ab25378d2%3bTelerik.Web.UI%2c+Version%3d2009.3.1314.20%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3aec1048f9-7413-49ac-913a-b3b534cde186%3a16e4e7cd%3aed16cbdc%3a874f8ea2%3af7645509%3a24ee1bba%3a19620875%3a39040b5c%3af85f9819 Line: 1075"]

Does anyone know if what I am trying to do is even allowed?

If not - what's my alternative?

Thank you

Since your script doesn't have enclosing <script> tags, you need to use this form of RegisterStartupScript:

ScriptManager.RegisterStartupScript(this, this.GetType(), "uniqueKey", jscript, true);

You said your initial goal was:

The idea was that the page would load, data would be sent (AJAX) to the server. The server would then generate some JavaScript based upon this data and send that back to the page. That JavaScript would then run updating the page in a specific way.

Here's a way you can do that:

given:

<asp:ScriptManager runat="server" ID="scriptManager">
</asp:ScriptManager>
<script type="text/javascript">

    function endRequestHandler(sender, args) {
        var dataItems = args.get_dataItems();
        for(var key in dataItems){
            if(/^javascript:/.test(dataItems[key])){
                eval(dataItems[key].substring("javascript:".length));
            }
        }
    }
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);

</script>

<asp:UpdatePanel runat="server" ID="pnl">
    <ContentTemplate>
        <asp:Button runat="server" ID="btnClick" Text="Click me!" OnClick="btnClick_Click" />
    </ContentTemplate>
</asp:UpdatePanel>

You can create a click handler that does this:

protected void btnClick_Click(object sender, EventArgs e)
{
    ScriptManager.GetCurrent(Page).RegisterDataItem(this, "javascript:alert('hello world!');");
}

What's happening is during the postback, the page request manager is sent a data item your code-behind. That data-item happens to be a javascript command. After the postback, the client side script manager's endRequest handler is checking for data items. Normally you'd want to see who those items are for, which is apparent by the key of the item (it's the client ID of the control that is the target of the data being sent). In your case, you could load this up with the javascript that you want to fire, tell yourself that it's a javascript because it's prepended, then dynamically evaluate the script.

So in this example, clicking the "Click Me!" button will generate a Hello World prompt whose script was actually created by the code-behind during the postback.

You'll have to be very cautious with this approach until you're comfy - I'd avoid references to "this"...

Happy coding.

B

Okay

The idea was that the page would load, data would be sent (AJAX) to the server. The server would then generate some JavaScript based upon this data and send that back to the page. That JavaScript would then run updating the page in a specific way.

Couldn't get that to work....

I got around this in the following way:

When the page loads, data is sent (AJAX) to the server. This processes the data and serialises the results updating a hidden text element, which goes back to the browser. Meanwhile, I have a JavaScript timer on the page that runs a JavaScript function that was generated when the page first loads. This function looks at the hidden text element. If that element has text (the result of the postback) then it shuts down the timer, deserialises the data and then works out how to update the page.