Showing posts with label updatepanels. Show all posts
Showing posts with label updatepanels. Show all posts

Wednesday, March 28, 2012

UpdateProgress not reacting to LinkButtons in MultiView and FormView

I have a Content Page with two UpdatePanels. The first one has a FormView inside it and second one has MultiView with several Views. In each of this views I have a GridView in it. I change the views by LinkButtons that are also in the same UpdatePanel.

My problem is that none of the PostBack events in the UpdatePanels seem to fire the UpdateProgress. However, if I add a third UpdatePanel with a Label and a Button whith the following code, it does react to the Button click.

ProtectedSub btnTest_Click(ByVal senderAsObject,ByVal eAs System.EventArgs)

System.Threading.Thread.Sleep(3000)

lblTest.Text = DateTime.Now.ToString()

EndSub

But it still won't react to the events in the other two panles. Am I doing something wrong? All help would be greatly appriciated.

Thank you.

One more thing:

I can also move the Label and the Button to one of the exisiting UpdatePanels and the Button Click event does fire the UpdateProgress correcctly.


I also have two DropDownLists in the FromView (located inside a UpdatePanel) with PostBack events. Shouldn't that trigger the UpdateProgess?

Anyone?Tongue Tied

Thank you.


I did some futher testing and noticed if I copy the following in the LinkButton Click Sub, the UpdateProgress shows for that 3 seconds:

System.Threading.Thread.Sleep(3000)

So basically it seems only to work when sleeping but not when doing actually something, like sorting data in the GridView.Huh?

Is there anyway to fire the UpdateProgress manually?


Found an interesting link that almost (but not quite) handels my problem:

http://smarx.com/posts/why-the-updateprogress-wont-display.aspx


I tryed to use UpdatePanelAnimationExtender instead and found out a strage thing. When using the following code clicking the button that does that sleep thing, everything works fine. But when I do any other action on the that UpdatePanel (click a LinkButton that chages the active View, sort data in the GridView) the OnUpdating animation (FadeOut) only begins and then stops for several seconds until the data is rendered and then the OnUpdated animation (FadeIn) runs entirely. Strange!Hmm

<cc1:UpdatePanelAnimationExtenderID="UpdatePanelAnimationExtender1"runat="server"TargetControlID="upnDataTabs">

<Animations>

<OnUpdating>

<FadeOutDuration="1"Fps="40"/>

</OnUpdating>

<OnUpdated>

<FadeInDuration=".5"Fps="20"/>

</OnUpdated>

</Animations>

</cc1:UpdatePanelAnimationExtender>

I seem to be talking to myself here... MUST TAKE MY MEDICAIONIndifferent

UpdateProgress Position in middle of screen

Hi,

I have various updatepanels on the same page. I want to have 1 updateprogress on the same page and depending on which updateprogress is updating that the updateprogress move to the middle of the updateprogress that is updating. The following code below allows me to position the updateprogress in the centre of the page but when the the page is scrolled down the updateprogress doesn't move its position appropriately.

Can anyone help?

I have inspected the values of the document.body.scrolltop and it is always at 0. How can change the position of the updateprogress when the user scrolls the page?

<

scriptlanguage="javascript"type="text/javascript">

function

adjustDivs(){var df=document.getElementById("updateprogressdiv");

df.style.position=

'absolute' ;

df.style.left =document.body.offsetWidth/2 + document.body.scrollLeft -150;

df.style.top = document.body.offsetHeight/2 + document.body.scrollTop -50;

}

window.onload=adjustDivs;

window.onresize=adjustDivs;

window.onscroll=adjustDivs;

</

script>

did you ever figure how to make the updateprogress display in the center of the page even when you scroll the page down

or does anybody have any other ides on how to make this happen


hello.

you can easilly do that with the AllwaysVisibleControlExtender available on the atlas toolkit.


Hi,

I've come up with some DHTML to always center the animated gif on your screen, AS WELL AS disable all elements by throwing a transparent IFRAME z-indexed to the top. Keep in mind that I have NOT tested this with other browsers, only in IE6. If anyone wants to cross-browser/cross-platform modify it, be my guest.

<atlas:UpdateProgressID="uppMain"runat="server">

<ProgressTemplate>

<iframeframeborder="0"src="about:blank"

style="border:0px;position:absolute;z-index:9;left:0px;top:0px;width:expression(this.offsetParent.scrollWidth);height:expression(this.offsetParent.scrollHeight);filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=75, FinishOpacity=0, Style=0, StartX=0, FinishX=100, StartY=0, FinishY=100);"></iframe>

<divstyle="position:absolute;z-index:10;left:expression((this.offsetParent.clientWidth/2)-(this.clientWidth/2)+this.offsetParent.scrollLeft);top:expression((this.offsetParent.clientHeight/2)-(this.clientHeight/2)+this.offsetParent.scrollTop);">Please Wait...<br/><imgsrc="/_images/statusbar.gif"/></div>

</ProgressTemplate>

</atlas:UpdateProgress>


Works Perfect..Big Smile..Thanks for the code...

Okay... dude... that "left: expression((t..." line is absolute GENIUS!!! I had NO idea that you could do that! It even works in a stylesheet!

You are the MAN! Unless you're a girl, in which case you're... well, still the man! :D


Seriously, you guys couldn't have bumped this thread a couple hours ago? I just finished my own attempt at using UpdateProgress to disable page controls... and yours is better. :(

Umm,

I was under the impression that CSS "expression" is not standard. I know it works in IE, but does it work in Firefox. I know we've had problems before, because I don't think Firefox recognizes it. I could be wrong, though. You might want to cross-browser test it.


Hi guys/gals,

Tadmeister's introduction of Javascript within CSS was absolutely brilliant i thought also. So along with some help from another article on some Javascript i decided to do some customisation of my own. But instead of using an iframe (if anyone has a problem with it), I used a Panel for the overlay and another Panel within it for the "loading..." text. Here is a snippet in case anyone wants to try it out. I've tested it and it works nicely in Firefox2 & IE7, but IE6 gave me some problems with the vertical positioning. I used a hack for IE6, and anyone is welcome to improve on it!

<ajax:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<asp:Panel ID="Panel1" CssClass="overlay" runat="server">
<asp:Panel ID="Panel2" CssClass="loader" runat="server">
Loading...
</asp:Panel>
</asp:Panel>
</ProgressTemplate>
</ajax:UpdateProgress>

and the CSS for it:

.overlay {
position: fixed;
z-index: 99;
top: 0px;
left: 0px;
background-color: #FFFFFF;
width: 100%;
height: 100%;
filter: Alpha(Opacity=70);
opacity: 0.70;
-moz-opacity: 0.70;
}
* html .overlay {
position: absolute;
height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
width: expression(document.body.scrollWidth > document.body.offsetWidth ? document.body.scrollWidth : document.body.offsetWidth + 'px');
}
.loader {
z-index: 100;
position: fixed;
width: 120px;
margin-left: -60px;
top: 50%;
left: 50%;
}
* html .loader {
position: absolute;
margin-top: expression((document.body.scrollHeight / 4) + (0 - parseInt(this.offsetParent.clientHeight / 2) + (document.documentElement && document.documentElement.scrollTop || document.body.scrollTop)) + 'px');
}

Yea, I know...the margin-top expression for IE6 is not the best, but if someone can make it work properly, be my guest. Alternatively check out: www.codeproject.com/ajax/modalupdateprogress.asp for Ting Huang's custom ajax extender.

Cheers!
Shalan99


Is there a way to get this to cover only a div or something? I have some web parts that do updates, and would like it to be centered within those, but I can't get that to work.

Hi Sarvis,

There are ways to achieve this. Raj Kaimal has a great bunch of control/extenders...one of which does what u want it to do, minus centering it in the associated control itself. Check it out @.: http://weblogs.asp.net/rajbk/archive/2007/01/08/using-the-updateprogress-control-as-a-modal-overlay.aspx

Another way to do this jus came to mind, but let me test it out first before i post any code.


Cheers!


Thank you very much. Great post. Tadmeister


Hi Tadmeister,

I implemented above code it worked, but receiving CSS validation is not valid for property left/top. How do I avoid receiving these error in .aspx page.

Please help...


Thanks for that, works fine

UpdateProgress with AssociatedUpdatePanelID not showing

I have a page withe 2 updatepanels & 2 updateprogress, when I set the AssociatedUpdatePanelID for each updateprogress control, neither is displayed when its associated panel is updated but when I remove the AssociatedUpdatePanelID, they work. But I need to set it. What can I do?

Can you post your asp.net code?

<

tr><td align="right">Country</td><td><asp:DropDownListID="ddlCountry"runat="server"DataSourceID="CountriesDS"DataTextField="CountryName"DataValueField="CountryId"AutoPostBack="True"AppendDataBoundItems="True"><asp:ListItemValue="0">-- Select Country --</asp:ListItem></asp:DropDownList></td></tr><tr><tdalign="right">City</td><td><ajax:UpdatePanelID="CityPanel"runat="server"UpdateMode="Conditional"><ContentTemplate><asp:DropDownListID="ddlCity"runat="server"DataSourceID="CitiesDS"DataTextField="CityName"DataValueField="CityId"><asp:ListItemValue="0">-- Select City --</asp:ListItem></asp:DropDownList>

<

ajax:UpdateProgressID="CityLoading"runat="server"AssociatedUpdatePanelID="CityPanel"><ProgressTemplate><imgsrc="../images/spinner.gif"align="absmiddle"alt="Loading..."></ProgressTemplate></ajax:UpdateProgress></ContentTemplate><Triggers><ajax:AsyncPostBackTriggerControlID="ddlCountry"/></Triggers></ajax:UpdatePanel></td></tr>

Hi, I have the same problem. The probem is with Triggers collection of UpdatePanel. It doesn`t work together with UpdateProgress.

Put that DropDownList inside UpdatePanel control and it will work.


Thanks it worked

Monday, March 26, 2012

Updating a UpdatePanel from another form?

This may be a silly question, but since I'm a total newbie I have to ask.

If I have say 5 different UpdatePanels on a form and if I from the same form open another form (window.open('anotherform.aspx...')) for data entry is it possible to update one of the UpdatePanels on the main form? Or, to the triggers all have to be situated at the same form as the UpdatePanel?

Any help is apreciated!

Instead of window.open and design a new page for popup, you can design using modalpopupextender and you can refresh any panels from the same page.

Updating an UpdatePanel only when certain item is clicked in Datalist

I have 2 UpdatePanels each with a Datalist in them. Here is my code:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DataList2" />
</Triggers>
<ContentTemplate>
<asp:DataList ID="DataList1" runat="server" DataSourceID="Ods1"BorderStyle="Solid" GridLines="Both" RepeatDirection="Horizontal">
<ItemTemplate>
<asp:ImageButton ID="ThumbImage1" runat="server"ImageUrl='<imagepath...>' />
</ItemTemplate>
</asp:DataList>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<asp:DataList ID="DataList2" runat="server" RepeatColumns="4"DataSourceID="Ods2" BorderStyle="Solid" GridLines="Both"RepeatDirection="Horizontal" OnItemCommand="DataList2_ItemCommand"CellPadding="5">
<ItemTemplate>
<asp:ImageButton ID="ThumbImage2" runat="server"ImageUrl='<imagepath...>' CommandName="ThumbImage"CommandArgument='<passing the id...>' />
<br />
<asp:ImageButton ID="DeleteImage" runat="server"ImageUrl="images/delete.gif" CommandName="DeleteImage"CommandArgument='<passing the id...>' />
</ItemTemplate>
</asp:DataList>
</ContentTemplate>
</asp:UpdatePanel>

and the code in DataList2_ItemCommand is as follows:

protected void DataList2_ItemCommand(object source, DataListCommandEventArgs e)
{
if (e.CommandName == "DeleteImage")
{
//code to delete the image from database

...
this.DataList2.DataBind();
this.UpdatePanel2.Update();
}
else if (e.CommandName == "ThumbImage2")
{
//code to add the thumb image to the table attached to datalist1.
...
...
this.Datalist1.DataBind();
this.UpdatePanel1.Update();
}
}

As you can see in the above code, I want to update the UpdatePanel1 only when the imagebutton "ThumbImage2" is clicked and NOT when the imagebutton "DeleteImage" is clicked in Datalist2. But because Datalist2 is the cause of the AsyncPostBackTrigger for UpdatePanel1, it is updated when either one of the imagebuttons are clicked. Is there a way to change this?

Please help.

You don't want to set the datalist as the trigger, you want to set the individual ImageButtons as the triggers. Remove the triggers from UpdatePanel1, as well as the UpdateMode="Conditional".

<asp:UpdatePanelID="UpdatePanel1"runat="server">
<ContentTemplate>
...
</ContentTemplate>
</asp:UpdatePanel>

Then in the DataList2_ItemDatabound event, add the following:

ProtectedSub DataList2_ItemDataBound(ByVal senderAsObject,ByVal eAs System.Web.UI.WebControls.DataListItemEventArgs)Handles DataList2.ItemDataBound
Dim ibtnAs ImageButton =CType(e.Item.FindControl("ThumbImage2"), ImageButton)
Dim trggrAsNew AsyncPostBackTrigger
trggr.ControlID = ibtn.ClientID
trggr.EventName ="Click"
UpdatePanel1.Triggers.Add(trggr)
EndSub


In the ItemCommand event, I am executing some server side code for the imagebutton that was clicked in that specific row of datalist based on its id (which I retrieve using e.CommandArgument).

If I use the approach that you mentioned above, how do i retrieve the database id of the image clicked?

Thanks


DataList2.DataKeys.Item(e.Item.ItemIndex)


The solution you suggested works like a charm. I removed the datalist as the trigger & added the imagebutton as trigger in ItemDataBound event. Also, I still execute the server side code in ItemCommand event based on the which button clicked & everything works fine.

Thanks a ton.

updating form updatepanel to updatepanel or one to many updatepanel

Hi all,

i have two updatepanels.

<updA>

<uc1 ..ascx> [...Reload this control or updating this panel ]

</updA>

<updB>

<uc2 ..ascx> [...onclick event ]

</updB>

i hope you anyone can solve this..

thanks

pkay

I am not sure what is your question. Can you please clarify? Thanks


When an updatePanel is updated, all the other updatePanels on the page also are updated.

This means that both <updA> and <updB> will be updated if you update one of them.

To avoid this, you can play with the "updateMode" updatePanel's property. This property is set to "always" by default but you can change it to "conditionnal" and then choose by yourself when your update panel has to be updated.


Hope it helps


hi kalahaine,

i got it. thanks for solution.

pkay


No problemSmile

Do not forget to mark your topic as answered.


hi all,

This is an updatepanel updating to other updatepanel: here my correct solution :

--updatepanel one

<asp:UpdatePanelrunat="server"ID="AAAupdatepanel"UpdateMode="Conditional">

<ContentTemplate>

<asp:UpdateProgressID="UpdateProgress2"runat="server"AssociatedUpdatePanelID="AAAupdatepanel">

<ProgressTemplate>

<imgsrc="images/loading-gif-sample-2.gif"alt=""/>

Loading .....

</ProgressTemplate>

</asp:UpdateProgress>

<uc3:AAAControlID="AAAControl1"runat="server"/>

</ContentTemplate>

</asp:UpdatePanel>

--updatepanel two

<asp:UpdatePanelrunat="server"ID="BBBupdatepanel"UpdateMode="Conditional">

<ContentTemplate>

<asp:UpdateProgressID="UpdateProgress2"runat="server"AssociatedUpdatePanelID="BBBupdatepanel">

<ProgressTemplate>

<imgsrc="images/loading-gif-sample-2.gif"alt=""/>

Loading .....

</ProgressTemplate>

</asp:UpdateProgress>

<uc3:BBBControlID="BBBControl1"runat="server"/>

</ContentTemplate>

</asp:UpdatePanel>

--updatepanel three

<asp:UpdatePanelrunat="server"ID="CCCupdatepanel"UpdateMode="Conditional">

<ContentTemplate>

<asp:UpdateProgressID="UpdateProgress2"runat="server"AssociatedUpdatePanelID="CCCupdatepanel">

<ProgressTemplate>

<imgsrc="images/loading-gif-sample-2.gif"alt=""/>

Loading .....

</ProgressTemplate>

</asp:UpdateProgress>

<asp:ButtonID="Button1"runat="server"Text="Button"/>

</ContentTemplate>

</asp:UpdatePanel>

-------here is code behind--------

ProtectedSub Button1_Click1(ByVal senderAsObject,ByVal eAs System.EventArgs)Handles Button1.Click

Me.AAAupdatepanel.Update()

Me.BBBupdatepanel.Update()

EndSub

Saturday, March 24, 2012

updating updatepanel in content page from javascript __doPostBack method.

Hi all,

Please help me on this issue..i have tried/looked every where but no solutions yet...I have two updatepanels, one in master page and another in content page.Then from master page i opening a modal window and after some calculation , i want to refresh/update my updatepanel in the content page.Now i have placed a hidden button inside the content page and made it as a trigger for the updatepanel in content page.I am able to call the click event of the hidden button and execute the code that i have written in the server side.But my problem is that my updatepanel in the content page is not getting updated with the changes..

thanks in advance

Have you tried UpdatePanel.Update() in code behind??


Try it like this:http://encosia.com/index.php/2007/07/13/easily-refresh-an-updatepanel-using-javascript/

Hi,

Actually to refresh my update panel on the parent page from popup widow , i'm using hidden button method.Let me explain it with example:

Here is my master page code

<%@.MasterLanguage="C#"AutoEventWireup="true"CodeFile="Menu.master.cs"Inherits="Menu" %><!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title>New Page</title>

<scripttype="text/javascript"language="javascript">

function CallFunction()

{

var obj =new Object();

obj.First = window;

window.showModalDialog('Forms.aspx', obj,'status:no; dialogHeight:155px;dialogWidth:510px; help:no; scroll:no; menubar:no; resizable:no')

}

</script>

</head>

<body>

<formid="form1"runat="server">

<asp:ScriptManagerID="Scriptmanager1"runat="server"></asp:ScriptManager>

<asp:UpdatePanelID="updMaster"UpdateMode="Conditional"runat="server">

<ContentTemplate>

<div>

<tableborder="2"cellpadding="0"style="background-color: #ff3300; width: 345px;" cellspacing="0">

<tr>

<tdalign="center"style="width: 164px; height: 26px;">

<inputtype="button"id="btn"name="btn"onserverclick="btn_Click"value="Click"runat="server"/>

</td>

<tdalign="center"style="height: 26px">

<asp:ButtonID="btnNew"Text='New'BackColor="#FFC080"OnClick="btnNew_Click"BorderColor="#FFC0C0"runat="server"Width="62px"/>

</td>

</tr>

</table>

</div>

<asp:contentplaceholderid="ContentPlaceHolder1"runat="server">

</asp:contentplaceholder>

</ContentTemplate>

</asp:UpdatePanel>

</form>

</body>

</html>

I have two buttons on it.Then onserverclick event of first butto i.e, btn i'm opening a modalwindow. Here is the code for that


protected void btn_Click(object sender, EventArgs e)
{
StringBuilder sb = new StringBuilder();

sb.Append("<script language='");
sb.Append("JavaScript'>");
sb.Append("\n");
sb.Append("var obj = new Object();");
sb.Append("\n");
sb.Append("obj.First = window;");
sb.Append("\n");
sb.Append("obj.Second = 'Content3.aspx';");
sb.Append("\n");
sb.Append("window.showModalDialog('Forms.aspx', obj, 'status:no; dialogHeight:155px;dialogWidth:510px; help:no; scroll:no; menubar:no; resizable:no');");
sb.Append("\n");
sb.Append("</");
sb.Append("script>");
ScriptManager.RegisterStartupScript(this, this.GetType(), "PopUp", sb.ToString(), false);

}

Then here is my content page code:I've one textbox and one hidden button

<%@.PageLanguage="C#"MasterPageFile="~/Menu.master"AutoEventWireup="true"CodeFile="Content3.aspx.cs"Inherits="Content3"Title="Untitled Page" %>

<asp:ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server">

<scripttype="text/javascript">

function test()

{

var invisibleButton = document.getElementById('<%= btnNo.ClientID %>');

__doPostBack(invisibleButton.name,'');

}

</script>

<asp:ButtonID="btnNo"OnClick="btnNo_Click"runat="server"style="display:none;"/>

<asp:UpdatePanelID="updContent"UpdateMode="Conditional"ChildrenAsTriggers="false"runat="server">

<ContentTemplate>

<tablewidth="340px"border="2"cellpadding="0"cellspacing="0">

<tr>

<td>

<asp:TextBoxid="txt1"runat="server"></asp:TextBox>

<td>

<asp:TextBoxid="txt2"runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<td></td>

</tr>

</table>

</ContentTemplate>

<Triggers>

<asp:AsyncPostBackTriggerControlID="btnNo"EventName="Click"/>

</Triggers>

</asp:UpdatePanel>

</asp:Content>

Then afterthis from the modal window i'm calling the parent pages javascript function i.e, test();

which i've defined in the content page.And also on the click event of the hidden button i'm basically upadting the text box.Here are the codes for both content page and modal window.

protectedvoid btnNo_Click(object sender,EventArgs e)

{

this.txt2.Text ="From Modal Window";

}

for modal window to call parents page function

var oMyObject;

var firstArg;

var secondArg;

oMyObject = window.dialogArguments;

firstArg = oMyObject.First;

//secondArg = oMyObject.Second;

function PassData()

{

firstArg.test(); //function defined in the content page.

window.close();

}

Now this calling the hidden button click event but the text box thta is in the content page updatepanel it is not getting updated.More ever i've found one more thing i.re if i open the modal window directly from master page i.e using javascript this whole functionality works perfectly and the text box in the content page is getting updated.But i want open the modal window through server side only using ScriptManager.RegisterStartScript method...So is there anything tht i'm doing wrong...

please help me on this issue.....

thanks in advance

sarthaks


Hi,

I'm a little bit confused with your sample, and I wasn't able to show the modal dialog.

Can you post a sample that can fully reproduce your logic?


Hi ,

For my sample application i have created three pages.

1.Menu.Master (master page)

2.Contet.aspx(Content Page in which i have added my master page i.e Menu.Master)

3.Form.aspx(To display it as a modal dialog box.)

Page Design For My master page:

<%@.MasterLanguage="C#"AutoEventWireup="true"CodeFile="Menu.master.cs"Inherits="Menu" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title>Menu</title>

</head>

<body>

<formid="form1"runat="server">

<asp:ScriptManagerID="Scriptmanager1"runat="server"></asp:ScriptManager>

<asp:UpdatePanelID="updMaster"UpdateMode="Conditional"runat="server">

<ContentTemplate>

<div>

<tableborder="2"cellpadding="0"style="background-color: #ff3300; width: 345px;"cellspacing="0">

<tr>

<tdalign="center"style="width: 164px; height: 26px;">

<inputtype="button"id="btn"name="btn"onserverclick="btn_Click"value="Click"runat="server"/>

</td>

</tr>

</table>

</div>

</ContentTemplate>

</asp:UpdatePanel>

<asp:contentplaceholderid="ContentPlaceHolder1"runat="server"></asp:contentplaceholder>

</form>

</body>

</html>

In my master page i have placed one input button.And on itsonserverclick event i am opening up the modal dialog box i.e, Form.aspx

Here is the server side code for the button

protectedvoid btn_Click(object sender,EventArgs e)

{

StringBuilder sb =newStringBuilder();

sb.Append("<script type='text/javascript' language='");

sb.Append("JavaScript'>");sb.Append("\n");

/************************************************/

sb.Append("var obj = new Object();");

sb.Append("\n");sb.Append("obj.FirstArg = window ;");

/* The above three lines is used to pass the reference of the parent window to the modal window. Using which i can call any javascript function of parent window from my modal dialog window*/

sb.Append("\n");

sb.Append("window.showModalDialog('Forms.aspx',obj, 'status:no; dialogHeight:155px;dialogWidth:510px; help:no; scroll:no; menubar:no; resizable:no');");

sb.Append("\n");

sb.Append("</");sb.Append("script>");

ScriptManager.RegisterStartupScript(btn,Type.GetType("System.String"),"PopUp", sb.ToString(),false);

}

Page Design For for modal dialog window.

<%@.PageLanguage="C#"AutoEventWireup="true"CodeFile="Forms.aspx.cs"Inherits="Pages_Forms" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title>Forms</title>

<scripttype="text/javascript"language="javascript">

var oMyObject;var firstArg;

oMyObject = window.dialogArguments;

firstArg = oMyObject.FirstArg; /* To retrieve any data from the parent window.*/

function PassData()

{

firstArg.test();

window.close();

}

</script>

</head>

<body>

<formid="form1"runat="server">

<div>

<tablecellpadding="0"cellspacing="0"border='1'>

<tr>

<tdstyle="width:600px;"align='center'>

<tablewidth="500px"cellspacing="2"cellpadding='0'border='0'>

<trstyle="height:10px;">

<tdstyle="width: 126px"> </td>

</tr>

<trstyle="height: 10px">

<tdstyle="text-align: center; width: 721px;">

<spanstyle="font-size: 11pt; color: #ffffff; font-family: Arial">

Do you want to save the changes you have made? </span></td>

</tr>

<trstyle="height: 10px">

<tdstyle="width: 126px; text-align: center"></td>

<tdstyle="width: 721px; text-align: center">

<inputid="btnNo"type="button"value="Yes"name="Yes"style="width:58px;"onclick="PassData();"runat="server"/>

<inputid="btnCancel"type="button"value="Cancel"onclick="window.close();"name="Cancel"runat="server"/>

</td>

</tr>

</table>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

I have two buttons on my form page Yes and Cancel .Onclick of Yes i am calling a javascript function which is there in my parent page( in this case i have wriitten the function in my content page.Function name is test();).

page design for my content page.

<%@.PageLanguage="C#"MasterPageFile="~/Menu.master"AutoEventWireup="true"CodeFile="Content3.aspx.cs"Inherits="Content3"Title="Untitled Page" %>

<asp:ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server">

<scripttype="text/javascript">

function test()

{

var invisibleButton = document.getElementById('<%= btnNo.ClientID %>');

__doPostBack(invisibleButton.name,'');

}

</script>

<asp:ButtonID="btnNo"OnClick="btnNo_Click"runat="server"style="display:none;"/>

<asp:UpdatePanelID="updContent"UpdateMode="Conditional"ChildrenAsTriggers="false"runat="server">

<ContentTemplate>

<tablewidth="340px"border="2"cellpadding="0"cellspacing="0">

<tr>

<td>

<asp:TextBoxid="txt1"runat="server"></asp:TextBox>

<td>

<asp:TextBoxid="txt2"runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<td></td>

</tr>

</table>

</ContentTemplate>

<Triggers>

<asp:AsyncPostBackTriggerControlID="btnNo"EventName="Click"/>

</Triggers>

</asp:UpdatePanel>

</asp:Content>

In my content page i have update panel and inside that i have placed a text box.I have also hidden button that is declared as a trigger for the update panel..From modal window i am calling the __doPostBack method using this hidden button.Then onclick event of the hidden button i have written this code

protected void btnNo_Click(object sender,EventArgs e)

{

this.txt2.Text ="From Modal Window";

}

My problem is that this text box is not getiing updated.

Hope the above sample helps you

thanks.

sarthak


Please try this:

master:

<%@. Master 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 btn_Click(object sender, EventArgs e) { StringBuilder sb = new StringBuilder(); sb.Append("<script type='text/javascript' language='"); sb.Append("JavaScript'>"); sb.Append("\n"); /************************************************/ sb.Append("var obj = new Object();"); sb.Append("\n"); sb.Append("obj.FirstArg = window;"); /* The above three lines is used to pass the reference of the parent window to the modal window. Using which i can call any javascript function of parent window from my modal dialog window*/ sb.Append("\n"); sb.Append("window.showModalDialog('Forms.aspx', obj, 'status:no; dialogHeight:155px;dialogWidth:510px; help:no; scroll:no; menubar:no; resizable:no');"); sb.Append("\n"); sb.Append("</"); sb.Append("script>"); ScriptManager.RegisterStartupScript(btn, Type.GetType("System.String"), "PopUp", sb.ToString(), false); }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head id="Head1" runat="server"><title>Menu</title></head><body><form id="form1" runat="server"><asp:ScriptManager ID="Scriptmanager1" runat="server"></asp:ScriptManager><asp:UpdatePanel ID="updMaster" UpdateMode="Conditional" runat="server"><ContentTemplate><div><table border="2" cellpadding="0" style="background-color: #ff3300; width: 345px;" cellspacing="0" ><tr><td align="center" style="width: 164px; height: 26px;"><input type="button" id="btn" name="btn" onserverclick="btn_Click" value="Click" runat="server" /> </td></tr></table></div></ContentTemplate></asp:UpdatePanel><asp:contentplaceholder id="ContentPlaceHolder1" runat="server"></asp:contentplaceholder></form></body></html>
 
Content: 
 
<%@. Page Language="C#" MasterPageFile="~/Menu.master" Title="Untitled Page" %><script runat="server"> protected void btnNo_Click(object sender, EventArgs e) { this.txt2.Text = "From Modal Window"; }</script><asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"><asp:Button ID="btnNo" OnClick="btnNo_Click" runat="server" style="display:none;"/><asp:UpdatePanel ID="updContent" UpdateMode="Conditional" ChildrenAsTriggers="false" runat="server"><ContentTemplate><table width="340px" border="2" cellpadding="0" cellspacing="0"><tr><td><asp:TextBox id="txt1" runat="server" ></asp:TextBox><td><asp:TextBox id="txt2" runat="server" ></asp:TextBox></td></tr><tr><td></td></tr></table></ContentTemplate></asp:UpdatePanel><script type="text/javascript" >function test(){ window.setTimeout("__doPostBack(invisibleButton.name,'')", 0);}var invisibleButton = document.getElementById('<%= btnNo.ClientID%>');</script></asp:Content>
  Popup:
  
<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head id="Head1" runat="server"><title>Forms</title><script type="text/javascript" language="javascript">function PassData(){//window.setTimeout(window.dialogArguments.FirstArg.test(), 500;window.close();}</script></head><body><form id="form1" runat="server"><div><table cellpadding="0" cellspacing="0" border='1' ><tr><td style="width:600px;" align='center' ><table width="500px" cellspacing="2" cellpadding='0' border='0'><tr style="height:10px;"><td style="width: 126px"> </td></tr><tr style="height: 10px"><td style="text-align: center; width: 721px;"><span style="font-size: 11pt; color: #ffffff; font-family: Arial">Do you want to save the changes you have made? </span></td></tr> <tr style="height: 10px"><td style="width: 126px; text-align: center"></td><td style="width: 721px; text-align: center"> <input id="btnNo" type="button" value="Yes" name="Yes" style="width:58px;" onclick="PassData();" runat="server" /> <input id="btnCancel" type="button" value="Cancel" onclick="window.close();" name="Cancel" runat="server" /></td></tr></table></td></tr></table></div></form></body></html>

Hi

Now it is working perfectly.My update panel in the content page is getting updated with the changes.But one thing i would like to know what was wrong with my earlier sample application.In your case i found that all the code i.e for master and content are on the htm design part (inline coding )and while calling the javascript function from popup you have used window.setInterval, and more ever in the content page you have written the javascript function at the end of the update panel , is this making all the differences ??

please clear my doubt on this..

thanks

sarthak


Sarthak,

I get an exception if I call the method directly, so I use a window.setTimeout to defer the invoking.

And it doesn't make any difference if the code is inlined in html or not.


Hello Wen,

what is the exception that u r getting if u call the function directlly.If i don't use window.setinterval i'm not getting any exception, but no data is getting populated.How ever if i use taht it is working perfectly

again thanks a lot for clearing my doubts.

thanks

sarthak

Wednesday, March 21, 2012

Urgent | PopupControlExtender

Hi,

I have two UpdatePanels on my web page. and i also have a PopupControl Extender on my page. To simplify UpdatePanel1 has a linkbutton and UpdatePanel2(is inside a panel named "popup") has a label. and PopUpControlExtender is like this.

<cc1:PopupControlExtenderID="PopupControlExtender1"TargetControlID="LnkButton1"PopupControlID="popup"runat="server"></cc1:PopupControlExtender>

I want to show this label as popup when one clicks on LnkButton1. But it gives the following error "An extender can't be in a different UpdatePanel than the control it extends".

How can i achieve the above mentioned?

Thanks

Hi

I had a similar problem with an ModalPopup that was outside of the UpdatePanel that contained my TargetControlID and PopupControlID. What I did is I added the ModalPopup to the update panel.

I guess you could try nesting your UpdatePanel2 into UpdatePanel1.



hi,

Thanks a lot..I moved popUpControlExtender inside panel where my tagetcontrolId also lies, and this worked!!!

thanks a lot