ajax method: updating updatepanel in content page from javascript _

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">

<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">

<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">

<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>

</tr>

</table>

</ContentTemplate>

<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">

</head>

<body>

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

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

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

<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">

<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>

</tr>

</table>

</ContentTemplate>

<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>

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

Saturday, March 24, 2012

updating updatepanel in content page from javascript __doPostBack method.

No comments:

Post a Comment

ajax method

Blog Archive

About Me