id of $.find control is undefined

Question

I'm trying to generate a control dynamicaly and after change another control. For example i have a button and a label, i want to change label's text using AJAX/JS/etc, without post/get queries. So i'm writing a code like this:

        foreach (var pair in FailedMonitorings)
        {
            var server = (ServerEnum)pair.Key;
            var tabPanel = new TabPanel { HeaderText = server.GetDescription() };
            var updatePanel = new UpdatePanel();
            var upChilds = updatePanel.ContentTemplateContainer.Controls;
            var label = new Label { Text = "Hello from UP-" + tabPanel.HeaderText, ID = "lbl" + tabPanel.HeaderText};
            upChilds.Add(label);
            const string command = @"var ctrl = $.find(""{0}""); alert(ctrl.id); return false;";
            var button = new Button {Text = "Button"};
            upChilds.Add(button);

            tabPanel.Controls.Add(updatePanel);


            tbcErrors.Tabs.Add(tabPanel);
            button.OnClientClick = string.Format(command, label.ClientID);
        }

so generated html here:

for a start i just want to create a messagebox with id of control, but even this simple code doesn't work. Question is: why? And how to solve it?

---

Added: ctrl is not null

when command is

const string command = @"var ctrl = $.find(""{0}""); alert(((ctrl != null).toString() + ' ') + ctrl.id); return false;";

result is true undefined

Answer 1

I think it should be const string command = @"var ctrl = $('#{0}')[0]; ctrl.innerText = 'Updated!'; return false;";

Why I say this is in jquery to select an element with an id you would use the same convention as a css selector which means you need to prefix the id with a '#' so $('#elementid') will select for a DOM element like <label id="elementid" /> what I would do is

    foreach (var pair in FailedMonitorings)
    {
        var server = (ServerEnum)pair.Key;
        var tabPanel = new TabPanel { HeaderText = server.GetDescription() };
        var updatePanel = new UpdatePanel();
        var upChilds = updatePanel.ContentTemplateContainer.Controls;
        var label = new Label { Text = "Hello from UP-" + tabPanel.HeaderText, ID = "lbl" + tabPanel.HeaderText};
        upChilds.Add(label);
        const string command = @"updateText('{0}')";
        var button = new Button {Text = "Button"};
        upChilds.Add(button);

        tabPanel.Controls.Add(updatePanel);


        tbcErrors.Tabs.Add(tabPanel);
        button.OnClientClick = string.Format(command, label.ClientID);
    }

then in html

<script type="text/javascript">
function updateText(id){
    var ctrl = $('#' + id);
    ctrl.text('Updated text');
    return false;
}
</script>

I prefer that the button call an updateText function as a posed to rendering all the code inline to the client. It makes the code easier to maintain without having to recompile server side. If you need to work with a dom element then you could use var ctrl = $('#' + id)[0]; this would return the first dom element found for the jquery selection once you have it then you can set the innerText to a value ctrl.innerText = 'Updated!'; . I didn't do that in my answer because I just wanted to show how it could be done purely from jquery.

The code const string command = @"var ctrl = $.find(""{0}""); alert(((ctrl != null).toString() + ' ') + ctrl.id); return false;";

will not work firstly because your jquery selector var ctrl = $.find(""{0}""); will not select the correct control on the client. It would probably render script something like

<button onclick="var ctrl = $.find("Ctrl$Label1");alert(((ctrl != null).toString() + ' ') + ctrl.id); return false;" />

which means that ctrl would not be null but an empty array as there is no dom element like Ctrl$Label1 and since arrays don't have a property of id, it would be undefined. what you are after is a '#' in front of the clientId. The second reason this still will return undefined is that even if you do have a valid selector. Is that the JQuery object returned doesn't have a property of id so you will still see undefined. So finally to get both the id and get the correct selector it would look like

const string command = @"var ctrl = $('#{0}')[0]; alert(ctrl.id); return false;

or if you need to set the text it would look like

const string command =@ "var ctrl = $('#{0}')[0]; ctrl.innerText = 'Updated!; return false;