Control ID Changed and GetElemntByID Return NUll

I have this code

<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<asp:TextBox ID="TxURL" runat="server"></asp:TextBox>
<asp:Button ID="Test" runat="server" Text="Button" OnClick="Test_Onclick" />
</ContentTemplate>
</asp:UpdatePanel>

I try to run this script

var TextControl= document.getElementByID("TxURL")

or

var TextControl = $get("TxURL")

but return value is NULL.

so How, to get Item in Client with the orignal Name. not the generated Name

Thanks.

U may be using Master Pages or UserControl thats why the client id of the control are not the same which u give to the control on the design time

try to run this script

var TextControl= document.getElementByID("<%= TxURL.ClientID %>")

or

var TextControl = $get("<%= TxURL.ClientID %>")

ConfirmButtonExtender and ModalPopupExtende "ScriptLoader is already loading scripts." Pro

I created the following GridView

<asp:UpdatePanel ID="ProductsListUpdatePanel" runat="server">
<ContentTemplate>
<asp:ObjectDataSource ID="ProductsObjectDataSource" runat="server" SelectMethod="GetAllProducts"
TypeName="ProductsDataSource"></asp:ObjectDataSource>
<asp:Panel ID="pnl_Confirm" runat="server" Style="display: none" CssClass="ModalPopup">
Are you sure?<br />
<br />
<asp:Button ID="btnOk" runat="server" Text="Usuń" />
<asp:Button ID="btnCancel" runat="server" Text="Anuluj" />
</asp:Panel>
<asp:GridView ID="ProductsGridView" runat="server" DataSourceID="ProductsObjectDataSource"
DataKeyNames="Id" AutoGenerateColumns="False" CssClass="Grid" OnRowDataBound="ProductsGridView_RowDataBound1"
OnRowCommand="ProductsGridView_RowCommand">
<Columns>
<asp:BoundField DataField="ProductPFK" HeaderText="ProductPFK" Visible="False" />
<asp:TemplateField ShowHeader="False">
<ItemTemplate>
<asp:ImageButton ID="EditImageButton" runat="server" CausesValidation="False" CommandName="Edit"
ImageUrl="~/CSS/Pictures/edit.GIF" Text="Edit" />
<asp:ImageButton ID="DeleteImageButton" runat="server" CausesValidation="False" CommandName="Delete"
ImageUrl="~/CSS/Pictures/delete.GIF" Text="Delete" />
<ajaxtoolkit:ConfirmButtonExtender ID="ext_confirm_Delete" runat="server" TargetControlID="DeleteImageButton"
DisplayModalPopupID="ext_Modal_Delete">
</ajaxtoolkit:ConfirmButtonExtender>
<ajaxtoolkit:ModalPopupExtender ID="ext_Modal_Delete" runat="server" TargetControlID="DeleteImageButton"
PopupControlID="pnl_Confirm" CancelControlID="btnCancel" BackgroundCssClass="ModalBackground"
OkControlID="btnOk">
</ajaxtoolkit:ModalPopupExtender>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:ImageButton ID="RollButton" runat="server" CausesValidation="False" CommandName="RollDown"
ImageUrl="~/CSS/Pictures/plus.GIF" Text="Button" CommandArgument='<%# Eval("Id") %>'
Visible="false" />
<asp:Label ID="ItemName" runat="server"><%# Eval("Name") %></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Operator" HeaderText="Agragacja" />
<asp:CheckBoxField DataField="OwnNeeds" HeaderText="W?asne potrzeby" />
</Columns>
<HeaderStyle CssClass="GridHeader" />
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>

When I click the RollButton new rows apears in the GridView. When the page is rendering, ConfirmButtonExtender and ModalPopupExtenderare loading I can still click some other buttons like DeleteImageButton button. Then I get the error:

Microsoft JScript runtime error: Sys.InvalidOperationException:
ScriptLoader.loadScripts cannot be called while the ScriptLoader is already
loading scripts.

What is the comprehensive sollution of this problem?

I tried to use the UpdateProgress control but I couldn't create such <div> and CSS that would cover the whole page (in IE6).

It also takes some time to render the whole ModalPanel for many rows. I belive that there is any method to do it faster.

Any solution is really welcome.

Hi W.kiermasz,

It is not an effiecient way to add AJAX Controls to each ItemTemplate. If you insist on your method, I suggest that you should use a div convered all the screen when page is loading. Meanwhile, add another javascript which will detect whether the last AJAX control is prepared or not by using typeof($find("AJAX Control's BehavavoirID")). If the last one prepared, hide the top div and show the GridView. Here is the sample which shows how to use only one ModalPopupExtender in a GridView.

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void Page_Load(object sender, EventArgs e) { //Attach a Javascript funtion to the LinkButton. LinkButton myLinkButton; for (int i = 0; i < GridView1.Rows.Count; i++) { myLinkButton = (LinkButton)GridView1.Rows[i].Cells[4].FindControl("LinkButton1"); myLinkButton.Attributes.Add("onclick", "shopModalPopup('" + GridView1.Rows[i].Cells[0].Text + "');return false;"); } } protected void SqlDataSource1_Selecting(object sender, SqlDataSourceSelectingEventArgs e) { string text = e.Command.CommandText.ToString(); }</script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title> <style> .modalBackground { background-color:Gray; filter:alpha(opacity=70); opacity:0.7; } .modalPopup { background-color:#FFD9D5; border-width:3px; border-style:solid; border-color:Gray; padding:3px; width:250px; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1"> <Columns> <asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" InsertVisible="False" ReadOnly="True" SortExpression="EmployeeID" ItemStyle-Width="0" /> <asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" /> <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" /> <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" /> <asp:TemplateField> <ItemTemplate> <asp:LinkButton ID="LinkButton1" runat="server">Click On Me</asp:LinkButton> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NORTHWNDConnectionString%>" SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Title] FROM [Employees]" onselecting="SqlDataSource1_Selecting"> </asp:SqlDataSource> <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Height="200px" Width="300px" style="display:none"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> EmployeeID:<asp:TextBox ID="tbEmployeeID" runat="server"></asp:TextBox> <br/> Reason:<asp:TextBox ID="tbReason" runat="server"></asp:TextBox> </ContentTemplate> </asp:UpdatePanel> <asp:Button ID="btnCancel" runat="server" Text="Cancel" /> </asp:Panel> <div style="display: none"> <asp:Button ID="Button1" runat="server" Text="Button" /></div> <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1" PopupControlID="Panel1" CancelControlID="btnCancel" BackgroundCssClass="modalBackground"> </ajaxToolkit:ModalPopupExtender> <script type="text/javascript" language="javascript">function shopModalPopup(employeeID){ //show the ModalPopupExtender $get("<%=tbEmployeeID.ClientID%>").value = employeeID; $get("<%=tbReason.ClientID%>").value =""; $find("<%=ModalPopupExtender1.ClientID%>").show(); } </script> </form></body></html>

I hope this help.

Best regards,

Jonathan

conditional UpdatePanel doesnt work

I have the following simple code:

"UpdatePanel2" runat="server" UpdateMode="Conditional"> "Label3" runat="server" Text="Label"> "Button2" runat="server" Text="Button" onclick="Button2_Click">code behind:protected void Button2_Click(object sender, EventArgs e) { Label3.Text ="waiting..."; UpdatePanel2.Update(); Thread.Sleep(5000); Label3.Text ="done"; UpdatePanel2.Update(); }

But it doesn't update the panel until the end. i.e. you don't get to see the "waiting..." text (in fact, you don't see it at all) and then a 5 second pause, then"done". Why doesn't this work? I followed the video and couldn't find a mistake.

Thanks,
Yoni

Because the code in server.

When the system sleeping for 5 second,the runned client html data couldn't send toou client.so you cann't see "waiting...".

When the code in Button2_Click runned out,the html data just send to client,so you can see "done".

And you could change the code to client code as javascript code.

I hope you can understand the reason.Because I'm Chinese.I write English not well.

heyyonidebest,

the onclick event is a server side event , means the Button2_Click method will run at the server so everything happen inside the method you won't see it

the only way to see the situation you are describing is by using client side code

EnigmaOX:

heyyonidebest,

the onclick event is a server side event , means the Button2_Click method will run at the server so everything happen inside the method you won't see it

the only way to see the situation you are describing is by using client side code

I see. I can't convert this to JS because of other reasons. Is there a way to bypass this? Perhaps instead of trying to update the update pannel, I can call another procedure that does it somehow, via JS or else server side script. Is there such a way?

Thanks,
Yoni

Yep , you can use the trigger inside the update panel , plus a timer control

I'm not sure what are u trying to do but you can use the button event to change the text

and to start the timer and using the timer tick event you can fire another method after couple of seconds.

EnigmaOX:

Yep , you can use the trigger inside the update panel , plus a timer control

I'm not sure what are u trying to do but you can use the button event to change the text

and to start the timer and using the timer tick event you can fire another method after couple of seconds.

I see. I tried to create a hidden field object and write the following ValueChanged event:

protectedvoid HiddenField1_ValueChanged(object sender,EventArgs e)
{
UpdatePanel2.Update();
}

I then tried to call the event like this:

protectedvoid Button2_Click(object sender,EventArgs e)
{
Label3.Text ="waiting...";
HiddenField1.ValueChanged +=newEventHandler(this.HiddenField1_ValueChanged);
Thread.Sleep(5000);
Label3.Text ="done";
}

but still it did not work. I set the trigger to:

<asp:AsyncPostBackTriggerControlID="HiddenField1"EventName="ValueChanged"/>

yet still nothing. What am I missing? I don't need a timer because the update isn't based on time. i.e. I want to decide when to update the update panel.

heyyonidebest ,

well you still doing the same mistake , you will change the text of the label twice in the server so you won't see the waiting message

the idea is to change the text once in every event , for example Label.Text = "waiting..."; in the button2 click event and then start the timer control with 5 seconds tick

in the tick event change the text of the label again like Label.Text = "done...";

<asp:Timer ID="Timer1" runat="server" OnTick="timer1_Tick" Interval="5000" >
</asp:Timer>

privatevoid timer1_Tick(object sender, System.EventArgs e)
{
Label1.Text = "done...";
Timer1.Enabled = false; // to stop the timer

}

and use the tick event also to update panel

<Triggers>
 <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
</Triggers>

Read more here : http://asp.net/AJAX/Documentation/Live/tutorials/TimerControlWithUpdatePanelsTutorial.aspx

Thanks,EnigmaOX.

But my code it more complicated that this small example. I have a few procedures that do stuff, and in the mean while I want to let the user know what the server is doing (plus so that I can debug). Thus, I can't see how a timer can help me. I can say one thing for sure - I need to let the user know what I doing - and during that time the server will be continuing it's work. Any other idea's how to refresh an update panel during while the server is working?

Yoni

sure , Ajax

you can do everything in ajax: webrequests , wcf services , registering postback scripts ect..

Well, how? the example I gave doen't work. can it be done w/o a timer?

Yoni

Take a look at doing it this way:http://encosia.com/2007/10/03/easy-incremental-status-updates-for-long-requests/

That's the sort of methodology you're going to need to consider. You can't provide incremental updates during a server call. Like a regular postback, a partial postback only outputs HTML once per round trip.

Better way you can use UpdateProgress Control

http://www.asp.net/ajax/documentation/live/overview/UpdateProgressOverview.aspx