We Keep Coding

Gridview in parent page is not refreshing after closing child page - ASP.NET WEB APP

I have a parent page and it contains a gridview and an aspx button. when user clicks on this button a child page will popup as modal. After inserting data from child page it should close and refresh the parent page. As a result gridview on parent page should show the inserted data. But using below code gridview is not refreshing.
Parent.aspx Page:
if (!IsPostBack)
{
string sqlquery=""//query here
SqlDataAdapter da = null;
da = new SqlDataAdapter(sqlquery);
DataTable dt = new DataTable();
da.Fill(dt);
dt.AcceptChanges();
gv_dept.DataSource = null;
gv_dept.DataSource = dt;
gv_dept.DataBind();
update_gv.Update();
}
<a href="#" id="toolbar_day2" onclick="create();">
Add New</a>
<div align="center">
<asp:UpdatePanel ID="update_gv" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView ID="gv_dept" runat="server" AutoGenerateColumns="False"
GridLines="Both" DataKeyNames="dept_id">
<Columns>
<asp:BoundField DataField="dept_name" HeaderText="Name" />
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
JS:
function create(start, end, resource) {
createModal().showUrl('Child.aspx');
}
function createModal() {
var modal = new DayPilot.Modal();
modal.closed = function () {
if (this.result && this.result.refresh) {
dp_day.commandCallBack("refresh", { message: this.result.message });
dp_week.commandCallBack("refresh", { message: this.result.message });
dp_month.commandCallBack("refresh", { message: this.result.message });
}
dp_day.clearSelection();
dp_week.clearSelection();
dp_month.clearSelection();
};
return modal;
}
DayPilot.Modal = function() {
// default values
this.autoStretch = true; // height will be increased automatically to avoid scrollbar, until this.maxHeight is reached
this.autoStretchFirstLoadOnly = false;
this.border = "10px solid #008080";
this.corners = 'Rounded';
this.className = null;
this.dragDrop = true;
this.height = 650; // see also autoStretch
this.maxHeight = null; // if not set, it will stretch until the bottom space is equal to this.top
this.opacity = 30;
this.scrollWithPage = true; // modal window will scroll with the page
this.top = 3;
this.useIframe = true; // only for showHtml()
this.width = 880;
this.zIndex = null;
}
Child.aspx Page:
protected async void ButtonOK_Click(object sender, EventArgs e)
{
//Inserting data here.
Hashtable ht = new Hashtable();
ht["refresh"] = "yes";
ht["message"] = "Created.";
Modal.Close(this, ht);
Page.ClientScript.RegisterStartupScript(this.GetType(), "RefreshParentPage", "<script language='javascript'>RefreshParentPage();</script>");
}
function RefreshParentPage() {
window.location.href="Parent.aspx";
}
When putting breakpoints on gridview binding, the datatable reflects the newly inserted rows. But gridview is not refreshing with it.

Ok here how we can do this.
the BIG WHOPPER issue is we don't really know what kind of dialog you are popping.
And I count about what, 150 DIFFERENT dialog utilities we can go and grab?
But, lets use one of the more popular ones. (jQuery.UI). Since we all use jQuery rather often, might as well add the jQuery.UI to your application.
However, ANY KIND of dialog system will work.
So, lets assume we have a Grid, say like this:
<asp:GridView ID="MyGrid" runat="server" CssClass="table table-hover"
DataKeyNames="ID" AutoGenerateColumns="false" >
<Columns>
<asp:BoundField DataField="FirstName" HeaderText="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="Last Name" />
<asp:BoundField DataField="HotelName" HeaderText="Hotel Name" />
<asp:BoundField DataField="City" HeaderText="City" />
<asp:BoundField DataField="Province" HeaderText="Province" />
<asp:CheckBoxField DataField="Active" HeaderText="Active" />
</Columns>
</asp:GridView>
<br />
<asp:Button ID="cmdAdd" runat="server" Text="Add Hotel" OnClientClick="popadd();return false;"/>
And our code behind to load this grid:
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack == false)
{
LoadGrid();
}
}
public void LoadGrid()
{
using (SqlCommand cmdSQL = new SqlCommand("SELECT * From tblHotels ORDER by HotelName",
new SqlConnection(Properties.Settings.Default.TEST3)))
{
// now load grid
cmdSQL.Connection.Open();
MyGrid.DataSource = cmdSQL.ExecuteReader();
MyGrid.DataBind();
}
}
Ok, the above, we now have this:
And note the above plain jane button - add hotels.
We like most dialog systems, now have to add our "add hotel" markup.
A simple div, with some text boxes, and of course a add or cancel button.
So, I have this simple markup:
<div id="mypop" style="display:none">
<br />
<div style="text-align:right">
<p>Hotel Name:<asp:TextBox ID="txtHotel" runat="server"></asp:TextBox></p>
<p>First Name:<asp:TextBox ID="txtFirst" runat="server"></asp:TextBox></p>
<p>Last Name:<asp:TextBox ID="txtLast" runat="server"></asp:TextBox></p>
<p>City:<asp:TextBox ID="txtCity" runat="server"></asp:TextBox></p>
<p>Province:<asp:TextBox ID="txtProvince" runat="server"></asp:TextBox></p>
<p>Is Active:<asp:CheckBox ID="chkActive" runat="server"></asp:CheckBox></p>
<p>
<asp:Button ID="cmdAddOk" runat="server" Text="Ok-add" OnClick="cmdAddOk_Click" />
<asp:Button ID="cmdCancel" runat="server" Text="Cancel" Style="margin-left:25px"
OnClientClick="MyClose();return false"/>
</p>
</div>
</div>
(note how display = none - the dialog (jQuery.UI) will turn on the display of this dialog for us.
And now our JS code for the pop button.
<script>
function popadd() {
var mydiv = $('#mypop')
mydiv.dialog({
autoOpen: false, modal: true, title: 'Add Hotel', width: '400px',
position: { my: 'top', at: 'top+150' },
closeText: ''
});
// Open the dialog
mydiv.parent().appendTo($("form:first"))
mydiv.dialog('open')
}
function MyClose() {
var mydiv = $('#mypop')
mydiv.dialog('close')
}
</script>
And now we simple write some code to add a row to the data table. There are a gazillion ways to do this, but I often actually use a data row, since it saves me a HUGE WACK OF SQL and parameters - this approach can be a real time saver.
And it feels like MS Access or old FoxPro days - easy code to write!!!
So, in the dialog, we have two buttons. the cancel button just closes the dialog.
but the cmdAdd, that is again plane jane code behind, and looks like this:
protected void cmdAddOk_Click(object sender, EventArgs e)
{
using (SqlCommand cmdSQL = new SqlCommand("SELECT * FROM tblHotels WHERE ID = 0",
new SqlConnection(Properties.Settings.Default.TEST3)))
{
cmdSQL.Connection.Open();
DataTable rst = new DataTable();
rst.Load(cmdSQL.ExecuteReader());
SqlDataAdapter dUpdate = new SqlDataAdapter(cmdSQL);
SqlCommandBuilder sUpdate = new SqlCommandBuilder(dUpdate);
DataRow OneRow = rst.NewRow();
OneRow["FirstName"] = txtFirst.Text;
OneRow["LastName"] = txtLast.Text;
OneRow["HotelName"] = txtHotel.Text;
OneRow["City"] = txtCity.Text;
OneRow["Province"] = txtProvince.Text;
OneRow["Active"] = chkActive.Checked;
rst.Rows.Add(OneRow);
dUpdate.Update(rst);
// now refresh grid to show new row
LoadGrid();
}
}
So the final result looks like this:
And if I ok to add, then we get this:
So some suggestions here:
You do NOT need to post large amounts of HTML, but you REALLY NEED TO SHARE how you popping up that dialog - just plain silly to make the readers here have to guess.
And you needed to show your button add code and code behind to add the row.
Again, no need for HUGE WHACKS of code, but at least make a half baked effort here.
However, the above is one of 10,000 ways of doing this, and I choose to use jQuery.UI for this, and as noted, I have no idea which of the 10,000 possible choices and options you are or were using to pop your prompt dialog, since you failed to share that with us.
Now, I am zero upset here - but I MOST certainly am giving you a big push on how to ask better questions here.
The above should give you at least a working design pattern that you can use for popping a dialog, and then prompting the user, adding the row, and THEN VERY important is to re-load the grid to show that row just added.
There are some great ideas in the above - and you can use them for years to come. Good luck!
Edit:
Ok, the new example is the pop page is a DIFFERNT page.
So we have a page called AddHotelPop.aspx.
It looks like this:
<form id="form1" runat="server">
<div>
<br />
<div style="text-align:right">
<p>Hotel Name:<asp:TextBox ID="txtHotel" runat="server"></asp:TextBox></p>
<p>First Name:<asp:TextBox ID="txtFirst" runat="server"></asp:TextBox></p>
<p>Last Name:<asp:TextBox ID="txtLast" runat="server"></asp:TextBox></p>
<p>City:<asp:TextBox ID="txtCity" runat="server"></asp:TextBox></p>
<p>Province:<asp:TextBox ID="txtProvince" runat="server"></asp:TextBox></p>
<p>Is Active:<asp:CheckBox ID="chkActive" runat="server"></asp:CheckBox></p>
<p>
<asp:Button ID="cmdAddOk" runat="server" Text="Ok-add" OnClick="cmdAddOk_Click" />
<asp:Button ID="cmdCancel" runat="server" Text="Cancel" Style="margin-left:25px"
OnClientClick="MyClose();return false"/>
</p>
</div>
</div>
</form>
Note how we have the cancel button when clicked will actually call the js code to dismiss the dialog - but the js code to close still remains on the calling page.
Now this works, because the add code in this 2nd page JUMPS BACK to our original page. So the Add button on that 2nd page looks like this:
protected void cmdAddOk_Click(object sender, EventArgs e)
{
using (SqlCommand cmdSQL = new SqlCommand("SELECT * FROM tblHotels WHERE ID = 0",
new SqlConnection(Properties.Settings.Default.TEST3)))
{
cmdSQL.Connection.Open();
DataTable rst = new DataTable();
rst.Load(cmdSQL.ExecuteReader());
SqlDataAdapter dUpdate = new SqlDataAdapter(cmdSQL);
SqlCommandBuilder sUpdate = new SqlCommandBuilder(dUpdate);
DataRow OneRow = rst.NewRow();
OneRow["FirstName"] = txtFirst.Text;
OneRow["LastName"] = txtLast.Text;
OneRow["HotelName"] = txtHotel.Text;
OneRow["City"] = txtCity.Text;
OneRow["Province"] = txtProvince.Text;
OneRow["Active"] = chkActive.Checked;
rst.Rows.Add(OneRow);
dUpdate.Update(rst);
Response.Redirect("GridViewFun.aspx");
}
}
So now our first page? It just loads the grid - code is same as before.
But, now our pop code and markup is this:
<asp:Button ID="cmdAdd" runat="server" Text="Add Hotel" OnClientClick="popadd();return false;"/>
</div>
<div id="mypop" style="display:none">
</div>
<script>
function popadd() {
var mydiv = $('#mypop')
mydiv.dialog({
autoOpen: false, modal: true, title: 'Add Hotel', width: '400px',
position: { my: 'top', at: 'top+150' },
closeText: ''
});
// Open the dialog
// mydiv.parent().appendTo($("form:first"))
mydiv.load("AddHotelPop.aspx")
mydiv.dialog('open')
}
function MyClose() {
var mydiv = $('#mypop')
mydiv.dialog('close')
}
</script>
Note NOW how the div pop up is BLANK. We will load + pop the 2nd other page into that div for display.
The results now look the same. The only real differnce is that the add button in the 2nd page does that re-direct back to the first page.
And thus our page will now have the first load - not a post back, and our gird will re-load again.
As noted, we using jQuery.UI for the above, and that .Load() feature is what allows one to pull + load into that div a whole other page.
The UI and screen shots look and work identical as to the above screen shots, but the dialog pop page is now a separate aspx page.

How to keep jquery modal open after postback?

I am having an empty div and i am using LOAD method of jquery and getting data from another aspx page. it works fine. it gets File upload and button control from that page. now when i click on the button my button code doesn't get called and my dialog gets close.
jQuery On Page1.aspx
var checkP = $('#<%= productName.ClientID %>').val();
checkP = checkP.replace(/\ /g, '-');
$("#midDiv").load("UploadImages.aspx?prodName=" + checkP + " #midDiv");
$("#midDiv").dialog();
//It Shows Dialog With File Upload Option & Button Option.
Page1.aspx
<div id="midDiv">
</div>
Page2.aspx
<div id="midDiv">
<asp:FileUpload ID="productsImages" CssClass="hid" runat="server" />
<asp:Button ID="Button1" runat="server" OnClick="uploadImageTemp" Text="Button" />
</div>
Page2.aspx.cs //Code Behind
protected void uploadImageTemp(object sender, EventArgs e)
{
//Some Work Here...
}
Is there any way that my button code gets called or is there any way to keep jQuery modal open ?

Append your dialog in form like below.
var checkP = $('#<%= productName.ClientID %>').val();
checkP = checkP.replace(/\ /g, '-');
$("#midDiv").load("UploadImages.aspx?prodName=" + checkP + " #midDiv");
$("#midDiv").dialog().parent().appendTo($("form:first"));
Change your button control to link button control.
<div id="midDiv">
<asp:FileUpload ID="productsImages" CssClass="hid" runat="server" />
<asp:LinkButton ID="Button1" runat="server" OnClick="uploadImageTemp" Text="Button" />
</div>
Now call your code behind button click event.

Jquery UI Dialog with asp button trigger in update panel

I have a issue with Jquery Modal dialog being called from a button inside an update panel..
here are the insights..
Javascript used for opening a Jquery modal dialog in aspx page..
<script type='text/javascript'>
function openModalDiv(divname) {
$('#' + divname).dialog({
autoOpen: false,
bgiframe: true,
closeOnEscape: true,
modal: true,
resizable: false,
height: 'auto',
buttons: { Ok: function () { closeModalDiv(divname) } },
open: function (event, ui) { jQuery('.ui-dialog-titlebar-close').hide(); }
});
$('#' + divname).dialog('open');
('#' + divname).parent().appendTo($('form:FrmSearch'));
$('#' + divname).css('overflow', 'hidden')
}
function closeModalDiv(divname) {
$('#' + divname).dialog('close');
}
</script>
the button in aspx page..
<asp:UpdatePanel ID="upDialogs" runat="server">
<ContentTemplate>
<asp:Button ID="btnOpenDialog" runat="server" Text="Open Dialog" onclick="btnOpenDialog_Click" />
</ContentTemplate>
</asp:UpdatePanel>
The Div which needs to be called from code behind via javascript..
<div id="ErrorDiv2" title="Error" style="visibility:hidden">
<p><span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>Please select an option among the results and try again!</p>
</div>
Finally the code behind ..
protected void btnOpenDialog_Click(object sender, EventArgs e)
{
if (ProfileID == null)
{
Page.ClientScript.RegisterStartupScript(this.GetType(), "ErrorDivOpen", "document.getElementById('ErrorDiv2').style.visibility = 'visible';", true);
Page.ClientScript.RegisterStartupScript(this.GetType(), "ErrorDivShow", "openModalDiv('ErrorDiv2');", true);
}
}
Now the Issue in detail..
Without the update panel the modal dialog pops very fine but makes full post back..
I want to have only a partial post back and hence am using a update panel..
The following are the solutions I have tried..
Added update panel to the existing div, dint work.
added an update panel along with runat="Server" for the div, still dint work..
Can any one help me with possible solutions?

Thanks for your quick reply but I found another solution.
I added both update panel and runat parameters to the Div.
<asp:UpdatePanel ID="upErrorDiv" runat="server"><ContentTemplate>
<div runat="server" id="ErrorDiv2" title="Error" style="visibility:hidden">
<p><span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>Please select an option among the results and try again!</p>
</div>
</ContentTemplate></asp:UpdatePanel>
Changed the code behind as.
if (ProfileID == null)
{
ScriptManager.RegisterStartupScript(ErrorDiv2,this.GetType(), "ErrorDivOpen", "document.getElementById('ErrorDiv2').style.visibility = 'visible';", true);
ScriptManager.RegisterStartupScript(ErrorDiv2,this.GetType(), "ErrorDivShow", "openModalDiv('ErrorDiv2');", true);
return;
}

Could you try injecting the javascript into a Literal control inside UpdatePanel, istead registering it with ClientScriptManager ?
Kris

doPostBack from C# with JavaScript

hi I have one parent page which opens a pop up window, and user makes some changes on child pop up page then clicks a save button.
When the user clicks the save button, I want to doPostBack to the parent page so that the changes made in the pop up window can be seen in parent window.
Question : How can I achive the above scenario?
I want to write the script code in aspx.cs file, I tried
string script = "";
script = "<script>window.opener.__doPostBack('UpdatePanel1', '')</script>";
ScriptManager.RegisterClientScriptBlock(Literal1, typeof(Literal), "yenile", script, true);
but this did not do anything, no errors just nothing.
I am new to JavaScript, need help with all steps.

The parent page:
<asp:UpdatePanel runat="server">
<ContentTemplate>
<div>
<asp:Literal runat="server" ID="ChildWindowResult" />
</div>
<hr />
<input type="button" value="Open Dialog" onclick="window.open('MyDialog.aspx', 'Dialog');" />
<asp:Button ID="HiddenButtonForChildPostback" runat="server"
OnClick="OnChildPostbackOccured" style="display: none;" />
<asp:HiddenField runat="server" ID="PopupWindowResult"/>
</ContentTemplate>
</asp:UpdatePanel>
The MyDialog page:
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
function postData() {
var resultField = $("input[type='hidden'][id$='PopupWindowResult']", window.opener.document);
var parentPosDataButton = $("[id$='HiddenButtonForChildPostback']", window.opener.document);
resultField.val($("#<%= SomeValueHiddenField.ClientID %>").val());
parentPosDataButton.click();
}
</script>
<asp:TextBox runat="server" ID="SomeValueHiddenField" />
<asp:Button runat="server" OnClick="PostData" Text="Click Me" />
protected void PostData(object sender, EventArgs e)
{
SomeValueHiddenField.Value = DateTime.Now.ToString();
ClientScript.RegisterStartupScript(this.GetType(), "PostData", "postData();", true);
}
But I believe that it would be much better to utilize here some pop-up controls like PopUpExtender from the AjaxControlToolkit library or dialog from the jQuery-UI.

You probably need to use ClientID:
string script = "";
script = "<script>window.opener.__doPostBack('" + UpdatePanel1.ClientID + "', '')</script>";
ScriptManager.RegisterClientScriptBlock(Literal1, typeof(Literal), "yenile", script, true);

The last parameter is to whether include script tag or not
So, if you do
RegisterClientScriptBlock(page,type, "<script>foo();</script>", true);
You will end up with:
"<script><script>foo();</script></script>"
So, change your last parameter to false, or better yet, remove the tags in the string

Review the following suggested solution:
http://livshitz.wordpress.com/2011/06/12/use-popup-to-postbackupdate-its-parentopener-without-losing-viewstate-values-and-close/#more-16

ASP.NET HoverMenuExtender Lazy Loading

I'm trying to get my hovermenuextenders to do some lazy loading. I have avatars across the site that when hovered over should pull back various things (images, recent posts, post count, etc) For obvious reasons I don't want to do this for all avatars on the page_load.
Using the following code I'm able to get the hover event to trigger a postback to the server asynchronously (breakpoint is hit onmouseover). However, the commands in the postback don't seem to be reflected after execution is done. The loading image/label stay in the hover panel. Any help is appreciated!
EDIT: I just realized that the very last avatar rendered on the page works properly but none of the ones above it do. Any ideas what might be causing this strange behavior?
<script language="javascript" type="text/javascript">
function OnHover(image) {
__doPostBack('<%= this.imageHoverTrigger.UniqueID %>', '');
}
</script>
<!-- DUMMY Hover Trigger -->
<input id="imageHoverTrigger" runat="server" style="display:none;"
type="button" onserverclick="imageHoverTrigger_Click" />
<!-- User Avatar -->
<div style="border: solid 1px #AAA; padding:2px; background-color:#fff;">
<asp:ImageButton ID="UserImg" runat="server" />
</div>
<!-- Hover tooltip disabled by default
(Explicitly enabled if needed)-->
<ajax:HoverMenuExtender ID="UserInfoHoverMenu" Enabled="false" runat="server"
OffsetX="-1"
OffsetY="3"
TargetControlID="UserImg"
PopupControlID="UserInfoPanel" dyn
HoverCssClass="userInfoHover"
PopupPosition="Bottom">
</ajax:HoverMenuExtender>
<!-- User Profile Info -->
<asp:Panel ID="UserInfoHover" runat="server" CssClass="userInfoPopupMenu">
<asp:UpdatePanel ID="UserInfoUpdatePanel" runat="server" UpdateMode="Conditional" >
<ContentTemplate>
<asp:Image ID="loadingImg" runat="server" ImageUrl="~/Design/images/ajax-loader-transp.gif" />
<asp:Label ID="loadingLbl" runat="server" Text="LOADING..." ></asp:Label>
<asp:Panel ID="UserInfo" runat="server" Visible="false">
<b><asp:Label ID="UserNameLbl" runat="server"></asp:Label><br /></b>
<span style="font-size:.8em">
<asp:Label ID="UserCityLbl" runat="server" Visible="false"></asp:Label> <asp:Label ID="UserStateLbl" runat="server" Visible="false"></asp:Label>
</span>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="imageHoverTrigger" />
</Triggers>
</asp:UpdatePanel>
</asp:Panel>
And the code-behind:
protected void Page_Load(object sender, EventArgs e)
{
UserImg.Attributes.Add("onmouseover", "javascript:OnHover(this)");
}
protected void imageHoverTrigger_Click(object sender, EventArgs args)
{
// Hide loading image/label
loadingLbl.Visible = false;
loadingImg.Visible = false;
//TODO: Set user data here
UserInfo.Visible = true;
}

Figured it out:
My Page_Load event hookup should've been:
UserImg.Attributes.Add("onmouseover", "javascript:OnHover('" + this.imageHoverTrigger.UniqueID + "','" + this.hiddenLbl.ClientID + "')");
UserImg.Attributes.Add("onmouseout", "javascript:ClearTimer()");
and the javascript function should've been:
var hoverTimer;
// Called on the hover of the user image
function OnHover(trigger, hiddenTxt) {
var field = document.getElementById(hiddenTxt);
// Only post if this hover hasn't been done before
if (field == null || field.innerHTML == "false") {
hoverTimer = setTimeout(function() { ShowInfo(trigger) }, 500);
}
}
// Clears timeout onmouseout
function ClearTimer() {
clearTimeout(hoverTimer);
}
// Retrieves user info from server
function ShowInfo(trigger) {
__doPostBack(trigger, '');
}
I also added a hidden field on the form in order to know when the hover has been executed. The code behind sets the hidden field to true and my javascript checks for the value of the hidden field each time it executes. This stops the code from doing round trips each time the user hovers over the image.