Printable View
Hi,
I need to have a pop up so that the user can make their selection of items. The items is being store in a dataset and return to the parent page.
I have search online and mostly is showing how to do a pop up only rather than return the value to the parent page.
Does anyone has idea on this?
Hi, i have done my pop up sucessfully and my pop up can return the value to the parent page.
My problem is , after my first success pop up, if i click any button on the parent page, my pop up will not response.
My parent page javascript is as below
my parent coding is as belowCode:
<script language=javascript>
function popWin() {
window.open("frmGrp.aspx","aa","width=800,height=800").focus;
return false; }
</script>
My pop up javascript is as below.It will automatically close itself when the user click OK buttonCode:radSentTo.Items(1).Attributes.Add("onClick", "return popWin();")
my pop up coding is as belowCode:
<script language="javascript">
function mainValues(){
window.close();
}
Does anyone has anyidea on this??Code:
btnOK.Attributes.Add("onClick", "return mainValues();")
Hi,
If I understand correctly you are trying to populate a drop down list or a list box with data from the database which is returned by as a data set by a page called frmGrp.aspx. And you are trying to open this page by using window.open in javascript and get the returned dataset. This can be done very properly and elegantly by using an XML Http Request such that the javascript window opened cannot even be seen and your control will get populated. Tell me if this is what you are trying to do and I can help you out. I am not clear exactly what control radSentTo is from the information you have provided.
Warm Regards ,
sr_jay
Hi,Sr_Jay
(1)RadSenTo.items(1) is to have the pop up open.
(2)When this pop up open, user start to make the selection of the items that they are going to purchase.
(3)The user selection will be stored in a dataset.
(4).When user click ok on the pop up page, the pop up page will automatically close itself and the dataset is sent to the parent page list box.
Do you have any idea on doing this??
I have a solution here for you. I am first giving complete sample code. The web site I have created as a sample involves 2 web pages called Default.aspx and Default2.aspx. First I will give the html as well as code behind code for both the pages.
Html Code for Default.aspx
Here is the code behind for Default.aspx.csCode:<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title>Untitled Page</title>
<script type="text/ecmascript" language=javascript>
function popwindow()
{
var url = "Default2.aspx";
window.open(url,"mywindow","width=300,height=300").focus;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListBox ID="mydatalist" runat="server"></asp:ListBox>
<a runat="server" id="mya" href="javascript:popwindow();">Click on me</a>
</div>
</form>
</body>
</html>
Here is the html code for Default2.aspxCode:using System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (Session["DataSet"] != null)
{
DataSet ds = (DataSet)Session["DataSet"];
DataTable dt = ds.Tables[0];
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
ListItem l = new ListItem(dt.Rows[i]["Col1"].ToString(), dt.Rows[i]["Col2"].ToString());
mydatalist.Items.Add(l);
}
Session["DataSet"] = null;
}
else
mydatalist.Visible = false;
}
}
and finally here is the code behind for Default2.aspx.csCode:<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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 runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListBox ID="ListBox11" runat="server" SelectionMode="Multiple">
<asp:ListItem>Num1</asp:ListItem>
<asp:ListItem>Num2</asp:ListItem>
<asp:ListItem>Num3</asp:ListItem>
</asp:ListBox>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click1" Text="Button" />
</form>
</body>
</html>
You can open up an application with 2 pages Default.aspx and Default2.aspx and replace the code in those pages with the code given by me. You will have to set Default.aspx as your start up page. When you run the application you will first simply see a link saying "click on me". When you click on this link a pop up window will open up and it will show you a list box with three items named num1, num2 and num3. It is a multiselect listbox. Select any number of items in this listbox and then simply click on the button in that window. The child window will close. Now if you look at the parent window you will find a list box populated with just those items which you selected in the list box in the child window. Again if you click on the link in the parent again the pop up shows up and again you can select. This gets repeated as many times as necessary. I am using the Default.aspx as the parent and Default2.aspx as the child. Of course this is not the ideal solution you asked for but a dataset gets created in the child window and it does get passed on to the parent. I would very much like to know if this code can be adapted to suit your specific purpose and coding requirements.Code:using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click1(object sender, EventArgs e)
{
DataTable dt = new DataTable("MyTable");
dt.Columns.Add("Col1", System.Type.GetType("System.String"));
dt.Columns.Add("Col2", System.Type.GetType("System.String"));
for (int i = 0, j = 0; i < ListBox11.Items.Count; i++)
{
if (ListBox11.Items[i].Selected == true)
{
DataRow dr = dt.NewRow();
dt.Rows.Add(dr);
dt.Rows[j]["Col1"] = ListBox11.Items[i].Text;
dt.Rows[j]["Col2"] = ListBox11.Items[i].Value;
j++;
}
}
DataSet ds = new DataSet("MyDataset");
ds.Tables.Add(dt);
Session["DataSet"] = ds;
Response.ClearContent();
Response.Write("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\" ><html><head><script language=\"javascript\">window.opener.location.reload();window.close();</script></head></html>");
Response.Flush();
Response.Close();
}
}
Do let me know.
Warm Regards,
sr_jay
Hi, Hi,Sr_Jay
thank you very much.It really works and help me a lot.
However is it possible to pass the dataset from the pop up without refreshing the parent page and also have the dataset set content be loaded to the listbox? Is it possible to do so?because i find out that every time user open the pop up form, their selection before on the parent page is clear...
Hi,
Here is some code that actually saves your dataset and populates the data list in the parent window without a relaoad or a postback. Again there are 2 pages in the application called Default.aspx and Default2.aspx. I am giving the html code and the code behind for both Default.aspx and Default2.aspx. You can open an application and try it out.
Html Code for Default.aspx
Here is the code for Default.aspx.csCode:<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>Untitled Page</title>
<script type="text/ecmascript" language=javascript>
function popwindow()
{
var url = "Default2.aspx?id=" + "<%=mydatalist.ClientID%>";
window.open(url,"mywindow","width=300,height=300").focus;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListBox ID="mydatalist" runat="server"></asp:ListBox>
<a runat="server" id="mya" href="javascript:popwindow();">Click on me</a>
<asp:DataGrid ID="mydatagrid" runat="server"></asp:DataGrid>
<asp:Button ID="mybut" runat="server" OnClick="mybut_Click" style="z-index: 101; left: 95px; position: absolute; top: 285px" Text="Click on me for a postback and to see if you have a dataset with you now from the child page. The dataset will be seen in a datagrid if there is one." />
</div>
</form>
</body>
</html>
Now here is the html code for Default2.aspxCode:using System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
Session["DataSet"] = null;
else
{
if (Session["DataSet"] != null)
{
DataSet ds = (DataSet)Session["DataSet"];
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
mydatalist.Items.Add(new ListItem(ds.Tables[0].Rows[i]["Col1"].ToString(), ds.Tables[0].Rows[i]["Col2"].ToString()));
}
mydatagrid.DataSource = ds.Tables[0].DefaultView;
mydatagrid.DataBind();
}
}
}
protected void mybut_Click(object sender, EventArgs e)
{
}
}
And the code behind. Default2.aspx.csCode:<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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>Untitled Page</title>
</head>
<script language="javascript" type="text/javascript">
function populate_parent_combo(){
var mdat = self.location.search.substring(4);
if(self.opener && self.opener.document.getElementById(mdat)){
var parentselect = self.opener.document.getElementById(mdat);
for (var i = 0; i < parentselect.options.length; i++)
parentselect.options[i] = null;
parentselect.options.length = 0;
var ldat = "<%= ListBox1.ClientID %>";
if(document.getElementById(ldat))
{
var selecthere = document.getElementById(ldat)
for(var i = 0 ; i < selecthere.options.length ; i++){
if(selecthere.options[i].selected){
parentselect.options[parentselect.options.length] = new Option(selecthere.options[i].text, selecthere.options[i].value);
}
}
}
}
return true;
}
</script>
<body>
<form id="form1" runat="server">
<div>
<asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple">
<asp:ListItem>Num1</asp:ListItem>
<asp:ListItem>Num2</asp:ListItem>
<asp:ListItem>Num3</asp:ListItem>
</asp:ListBox>
<asp:Button ID="Button1" runat="server" OnClientClick="populate_parent_combo();" OnClick="Button1_Click1" Text="Button" />
</div>
</form>
</body>
</html>
You will have to set Default.aspx as your startup page. If you run the application you will see an empty data list and a link saying "Click on me" and a button with the textCode:using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click1(object sender, EventArgs e)
{
DataTable dt = new DataTable("MyTable");
dt.Columns.Add("Col1", System.Type.GetType("System.String"));
dt.Columns.Add("Col2", System.Type.GetType("System.String"));
for (int i = 0, j = 0; i < ListBox1.Items.Count; i++)
{
if (ListBox1.Items[i].Selected == true)
{
DataRow dr = dt.NewRow();
dt.Rows.Add(dr);
dt.Rows[j]["Col1"] = ListBox1.Items[i].Text;
dt.Rows[j]["Col2"] = ListBox1.Items[i].Value;
j++;
}
}
DataSet ds = new DataSet("MyDataset");
ds.Tables.Add(dt);
Session["DataSet"] = ds;
Response.ClearContent();
Response.Write("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\" ><html><head><script language=\"javascript\">window.close();</script></head></html>");
Response.Flush();
Response.Close();
}
}
"Click on me for a postback and to see if you have a dataset with you now from the child page. The dataset will be seen in a datagrid if there is one."
on it. Now if you click on the link a child window opens up as before and now you can select some elements from the datalist in the child window and close it by clicking on the button in the child window. The datalist in the parent window will get populated with the items you selected in the child window but there will be no reload or postback of the parent window. Now if you click on the button in the parent window the data in the dataset that got created in the child window will get displayed in a grid.
Quote:
Originally Posted by johnsonlim026
Hi, Sr_jay,
I have try your sample..
I have try few ways to work around on the sample that you provide me.
Is it possible to make the dataset data to be bring to the parent page without pressing the post back button on the parent page and without the parent page refresh. I have change the post back button that you show me as "My basket " button, it seems that my user cannot accept this idea. Is it to do so in asp.net ??
Hi,
I have another solution for you. See if this is okay with your user. You see the dataset is basically an asp.net type and there is no equivalent for it in javascript. So no matter what I do somewhere I have to compromise and I have to reach out to the server. There might definitely be some solution using Ajax and by trying to store the selected values in a database or something of that nature. I will definitely try the options out and let you know. Here I am giving below the code for the latest versions of Default.aspx and Default2.aspx after getting rid of the button in the parent page. But in this case I am again doing a postback but this time through javascript. Do take a look at this solution I am giving below because I think in my opinion this is the nearest I can get to what you need. To actually pass a dataset to another window without reaching out to the server, I require some more time. If you can give me some time I will try and see if I can possibly get an xml representation of the dataset and pass that to the parent window without reaching the server at all. Or alternately I can think up of some ajax solution or something of that kind. I give below the latest version of the code which I have created. You can take a look. If this is not acceptable I need a little time to think up of some way by which I can do what you actually want. You see it is a bit of a challenging task. Do definitely try out this solution. It is the nearest I can get to what you need at the moment.
Html Code for Default.aspx
Code behind for Default.aspx.csCode:<%@ Page Language="C#" EnableEventValidation="false" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>Untitled Page</title>
<script type="text/ecmascript" language=javascript>
function popwindow()
{
var url = "Default2.aspx?id=" + "<%=mydatalist.ClientID%>";
window.open(url,"mywindow","width=300,height=300").focus;
}
function UpdateGrid(){
__doPostBack("<%=mya.ClientID%>","");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListBox ID="mydatalist" runat="server"></asp:ListBox>
<a runat="server" id="mya" href="javascript:popwindow();">Click on me</a>
<asp:DataGrid ID="mydatagrid" runat="server" OnSelectedIndexChanged="mydatagrid_SelectedIndexChanged"></asp:DataGrid>
</div>
</form>
</body>
</html>
Html code for Default2.aspxCode:using System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
Session["DataSet"] = null;
DataTable dt = new DataTable();
dt.Columns.Add("Col1", System.Type.GetType("System.String"));
DataRow dr = dt.NewRow();
dt.Rows.Add(dr);
dt.Rows[0][0] = "No Items Selected";
mydatagrid.DataSource = dt.DefaultView;
mydatagrid.DataBind();
string s = ClientScript.GetPostBackClientHyperlink(mya, "");
}
else
{
string s = ClientScript.GetPostBackClientHyperlink(mya, "");
if (Session["DataSet"] != null)
{
DataSet ds = (DataSet)Session["DataSet"];
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
mydatalist.Items.Add(new ListItem(ds.Tables[0].Rows[i]["Col1"].ToString(), ds.Tables[0].Rows[i]["Col2"].ToString()));
}
mydatagrid.DataSource = ds.Tables[0].DefaultView;
mydatagrid.DataBind();
}
}
}
protected void mydatagrid_SelectedIndexChanged(object sender, EventArgs e)
{
}
protected void mya_Click(object sender, EventArgs e)
{
DataSet ds = (DataSet)Session["DataSet"];
mydatagrid.DataSource = ds.Tables[0].DefaultView;
mydatagrid.DataBind();
}
}
Code Behind for Default2.aspx.csCode:<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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>Untitled Page</title>
</head>
<script language="javascript" type="text/javascript">
function populate_parent_combo(){
var mdat = self.location.search.substring(4);
if(self.opener && self.opener.document.getElementById(mdat)){
var parentselect = self.opener.document.getElementById(mdat);
for (var i = 0; i < parentselect.options.length; i++)
parentselect.options[i] = null;
parentselect.options.length = 0;
var ldat = "<%= ListBox1.ClientID %>";
if(document.getElementById(ldat))
{
var selecthere = document.getElementById(ldat)
for(var i = 0 ; i < selecthere.options.length ; i++){
if(selecthere.options[i].selected){
parentselect.options[parentselect.options.length] = new Option(selecthere.options[i].text, selecthere.options[i].value);
}
}
}
}
return true;
}
</script>
<body>
<form id="form1" runat="server">
<div>
<asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple">
<asp:ListItem>Num1</asp:ListItem>
<asp:ListItem>Num2</asp:ListItem>
<asp:ListItem>Num3</asp:ListItem>
</asp:ListBox>
<asp:Button ID="Button1" runat="server" OnClientClick="populate_parent_combo();" OnClick="Button1_Click1" Text="Button" />
</div>
</form>
</body>
</html>
Mind you, I still am not saying what you are asking for is impossible. There definitely should be a way. If you can give me a little time I will come up with something.Code:using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click1(object sender, EventArgs e)
{
DataTable dt = new DataTable("MyTable");
dt.Columns.Add("Col1", System.Type.GetType("System.String"));
dt.Columns.Add("Col2", System.Type.GetType("System.String"));
for (int i = 0, j = 0; i < ListBox1.Items.Count; i++)
{
if (ListBox1.Items[i].Selected == true)
{
DataRow dr = dt.NewRow();
dt.Rows.Add(dr);
dt.Rows[j]["Col1"] = ListBox1.Items[i].Text;
dt.Rows[j]["Col2"] = ListBox1.Items[i].Value;
j++;
}
}
DataSet ds = new DataSet("MyDataset");
ds.Tables.Add(dt);
Session["DataSet"] = ds;
Response.ClearContent();
Response.Write("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\" ><html><head><script language=\"javascript\">window.opener.UpdateGrid();window.close();</script></head></html>");
Response.Flush();
Response.Close();
}
}
Quote:
Originally Posted by johnsonlim026
Hi,
I would also like to add one small message to my previous post. Note the following points.
1.The datalist in the parent page can be populated without refreshing the parent window.
2.Without the parent window refresh, a dataset containing the items chosen in the child window gets created and is available for any other page in your application. This also can be done without refreshing the parent window. That is because that dataset is stored in a session variable in the child window.
The above 2 tasks can be accomplished without a parent window refresh. Tha problem arises only when you want point no 3 which I give below.
3.If you want this dataset created in the child window to be seen in a datagrid in the parent window then I am not able to do it without postback. For that I need some time and will have to think of some other method.
That is it for now.
Warm Regards,
Hi Sr_jay ,
thank you very much for your efforts.Through your sample, i am able to to what i want.
By the way, i have few question to ask you :) (new to javascript):
(1). How do i start to learn javascript?
(2).Does the javascript debugable?
(3).How to know the library of javascript? There is no intelli sense for it..
Thank you again..
Hi johnsonlim026,
To answer your questions.
1. One good site where you can get a very good idea of javascript is https://developer.mozilla.org/En
2.The best way to debug javascript is to use the Mozilla firefox browser and to use and add-on in it called Firebug. That is a very good debugger. If you run your web pages in the firefox browser if there is a mistake in your javascript then it will tell you the exact line and what is wrong with it.
3. You will not come across intellisense for javascript anywhere. In Visual studio there is limited intellisense. But I do not think any editor provides a very proper intellisense.
Another thing you have to be cautious about while using javascript is different browsers will interpret it differently. Though not very different there will be some things which might work in firefox and not in IE. For sxample in IE appendChild simply does not work.
Hope this helps
Hi johnsonlim026,
Please do not forget to rate me.
Warm Regards
Hi Sr_jay ,
thanks for your help. Sure no problem.. :)