How to call postback on parent page from Jquery dialog form submit?

Question

I am currently using jQuery UI dialog to show a dialog box with a form after a user clicks a link. I have correctly populated the jquery UI dialog with the appropriate aspx page. I am having trouble knowing how to submit the form loaded into the dialog when the save button is clicked. Right now I am calling the button click event on the loaded form, that does save the data, but then it posts back to the same page that is loaded in the dialog, but on its own page. What I want is to save the data in the dialog, then refresh the current aspx page the original link to open the jquery dialog box was on.

So to summarize, I need to figure out a way when the save button is clicked on the jquery dialog, I am able to call the click handler in my code behind, do not return a response from that call, and then close the dialog, and postback to the parent page.

Javascript for creating and opening dialog: $(document).ready(function () { $("#dialog").dialog({ autoOpen: false, modal: true, resizable: false, title: "Item Edit", buttons: { "Save": function (e) { $('input#<%=btnSave.ClientID %>').click(); } } }); $(".item").on("click", function () { var itemId = $(this).attr("itemId"); var url = window.location.protocol + "//" +
window.location.host + "/ItemEdit.aspx?itemId=" + itemId; $("#dialog").load(url); $("#dialog").dialog("open"); return false; }); });

Form loaded into jquery dialog: <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ItemEdit.aspx.vb"
Inherits="ItemEdit" %> Item Edit Item:

/> tabindex="-1" style="position:absolute; top:-1000px"/>

Code behind for page loaded into jquery dialog: Imports System.Data.OleDb Imports System.IO Imports System.Data.SqlClient

Partial Public Class ItemEdit
Inherits System.Web.UI.Page

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)  
Handles Me.Load
    If (Not Page.IsPostBack) Then
        If Request.QueryString("itemId") IsNot Nothing Then
            Dim itemId As String = Request.QueryString("itemId")
            Dim command As New OleDbCommand("SELECT * FROM items WHERE id = 
" & itemId, New OleDbConnection(ConnectionString))
            Try
                command.Connection.Open()
                Dim reader As OleDbDataReader = command.ExecuteReader()
                If reader.Read() Then
                    lblItem.Text = reader("item")
                    cbxMB.Checked = reader("mb")
                    cbxPP.Checked = reader("pp")
                    cbxB.Checked = reader("b")
                    cbxT.Checked = reader("t")
                    lblItemId.Text = reader("itemId")
                End If
                reader.Close()
            Finally
                command.Connection.Close()
            End Try
        End If
    End If
End Sub

Protected Sub btnSave_Click(ByVal sender As System.Object, ByVal e As 
System.EventArgs) Handles btnSave.Click
    Dim command As New OleDbCommand("UPDATE items SET b=" & 
Math.Abs(CInt(cbxB.Checked)) & ",t=" & Math.Abs(CInt(cbxT.Checked)) & ",mb=" 
& Math.Abs(CInt(cbxMB.Checked)) & ",pp=" & Math.Abs(CInt(cbxPP.Checked)) & " 
WHERE id=" & lblItemId.Text, New OleDbConnection(ConnectionString))
    Try
        command.Connection.Open()
        command.ExecuteNonQuery()
    Finally
        command.Connection.Close()
    End Try
End Sub
End Class

Daniel Pl. Daniel Pl. · Accepted Answer · 2015-02-20T15:28:23

You want back to the parent page after complete saving, right?

I would say

Response.Redirect("Parentpage.aspx")

after your try-block should do it. The page will be reloaded and the dialog stay closed.

EDIT:

Referring to your comment, i think you have to pass the values via JavaScript and then update the Grid manually, to show the new values.

JS on Dialog:

function transferDataAndCloseDialog(item, mb, pp, b, t, itemId) {
 var retVal = new Object();
 retVal.Item = item;
 retVal.Mb = mb;
 retVal.Pp = pp;
 retVal.B = b;
 retVal.T = t;
 retVal.ItemId = itemId;

 window.parent.setDataAndCloseDialog(retVal);
}

CodeBehind Dialog (sorry C# you have to adapt): Call this in your btn_Click, after reading your data:

private void SetUpdateScript(string item, string mb, string pp, string b, string t, string itemId)
{
 string jScript = " $(document).ready(function () { "+
 " transferDataAndCloseDialog('"+item+"','"+mb+"','"+pp+"','"+b+"','"+t+"','"+itemId+"'); });";

 this.Page.ClientScript.RegisterClientScriptBlock(typeof(DialogPage), "UpdateScript", jScript, true);
}

JS Parentpage:

function setDataAndCloseDialog(data) {
 //A function, where you use the data to update your grid:
 // you can access the values like "data.Item" etc.
 updateGrid(data);
 $("#dialog").dialog("close");
}

How to call postback on parent page from Jquery dialog form submit?

1 Answers