JavaScript code inside UpdatePanel

Question

Good. I have an UpdatePanel on an aspx page that contains one Placeholder.

Inside this placeholder, I add one of the user control elements depending on certain external conditions (this is the configuration page).

Each of these usercontrols has a javascript function bindUcEvents () that binds the various jQuery and javascript events to the buttons and validators inside the usercontrol.

The problem I am facing is that the usercontrol JavaScript code is not recognized. As a rule, javascript inside the update panel is executed when the updated panel is sent back, however, none of these codes can be found on the page (I tried to run the function manually through the firebug console, but it tells me that it cannot find this function).

Does anyone have any suggestions?

Greetings, Ed.

EDIT:

cut (but functional) example:

Markup:

<script src="/js/jquery-1.3.2.min.js"></script>
  <form id="form1" runat="server">
    <div>

    <asp:ScriptManager ID="Script" runat="server" />

    <asp:Button ID="Postback" runat="server" Text="Populate" OnClick="PopulatePlaceholder" />

    <asp:UpdatePanel ID="UpdateMe" runat="server">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Postback" EventName="Click" />
    </Triggers>
        <ContentTemplate>
            <asp:Literal ID="Code" runat="server" />
            <asp:PlaceHolder ID="PlaceMe" runat="server" />
        </ContentTemplate>
    </asp:UpdatePanel>
    </div>
 </form>

WITH#:

protected void PopulatePlaceholder(object sender, EventArgs e)
{
    Button button = new Button();
    button.ID = "Push";
    button.Text = "push";
    button.OnClientClick = "javascript:return false;";
    Code.Text = "<script type=\"text/javascript\"> function bindEvents() { $('#" + button.ClientID + "').click(function() { alert('hello'); }); }  bindEvents(); </script>";
    PlaceMe.Controls.Add(button);
}

You will see that the button does not display an alert message, even if the code is present on the page.

EDIT2:

Well, just to understand, production code is much more complicated than just one literal function, and contains a lot of

<%= Control.ClientID %>

, , , ( + ).

Answer 1

Literal ScriptManager script. , , .

window.document.getElementById('someId').innerHtml = "<script type=\"text/javascript\">alert('hey');</script>";

. :

protected void PopulatePlaceholder(object sender, EventArgs e)
{
    Button button = new Button();
    button.ID = "Push";

    button.Text = "push";
    button.OnClientClick = "return false;";


    string script = "function bindEvents() { $('#" + button.ClientID + "').click(function() { alert('hello'); }); }  bindEvents();";

  ScriptManager.RegisterClientScriptBlock(this.Page, typeof(SomeClass), Guid.NewGuid().ToString(), script, true);


  PlaceMe.Controls.Add(button);
} 

RegisterClientScriptBlock , .

Answer 2

js , ,

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(
    function(sender, args) {
        //update whatever here
    });

, , , , .

Answer 3

( Ajax) . script ajax-based-pageload ( ) - javascript , .

    <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Path="../lib/jquery-1.2.6.pack.js" />

( ). . .

Answer 4

, : http://api.jquery.com/live/

.bind() (, ), , / .

Or maybe give also .delegate () try - it cannot directly replace .bind () calls, but in most cases it is much faster.

Answer 5

Somehow it seems that your Code.Text is lost in translation somewhere - I don’t know the specifics, perhaps by design; anyway the following works:

    protected void PopulatePlaceholder(object sender, EventArgs e)
    {
        Button button = new Button();
        button.ID = "Push";
        button.Text = "push";
        button.OnClientClick = "javascript:return false;";
//        Code.Text = 
        PlaceMe.Controls.Add(button);
        PlaceMe.Controls.Add(new LiteralControl("<script type=\"text/javascript\"> function bindEvents() { $('#" + button.ClientID + "').click(function() { alert('hello'); }); }  bindEvents(); </script>"));
    }

Since you are already creating javascript code from the code, you can also add the control dynamically.