Ok, first up: You can quite much ignore suggesting that jquery.UI dialogs, and bootstrap will mess this up. Everyone uses bootstrap, and jquery, and adding jquery.UI dialogs is not any big deal at all - its just not. The only traps occur when you try to mix and use bootstrap dialogs with jquery.UI ones. (don't do that!!). While I LOVE bootstrap, I very much do NOT like their dialogs - (they look fantastic, but the way they works is poor, and I don't use them).
So, with above out of the way, the next issue is "how" the jQuery.UI dialogs work. In 99% of cases, you put your content you want to pop up inside of a div (and set style/display = none - jquery.ui dialog will then do the hide, and showing for you automatic.
So the jquery $("dialog") means nothing here, you will use $("#MyDivToPop") as the selector. (and the many examples on the web would be better if they were CRYSTAL clear in such examples - using variable names as same as type (often seen in c# and vbnet is a beyond confusing for people to learn code ).
Ok, so we have several goals here:
We want to pop a dialog.
We want to use code to fill out what going to be in that dialog.
The code MOST likely is server code behind, (or at least it can be!!!!).
So, lets cook up and bake an simple example here.
Lets load up and display a simple grid view - some hotels.
but, lets also drop in a plane jane regular server side button. When we click the button, we will pop up MORE information and details about the row (hotels) we just clicked on.
From this example, you should then be able to run with this.
Approach:
So, as noted, we need to drop in a "div" on this page.
We will click the button (server side). Fill out the controls and information we want to pop, and then pop the dialog (our simple div with markup) as a dialog.
So, first up, lets say we have this simple grid view. Everyday kind of thing we do:
Ok, and our code to fill out above can be this - again plane jane stuff so far.
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
LoadGrid
End If
End Sub
Sub LoadGrid()
Dim rstData As DataTable
rstData = MyRst("SELECT * FROM tblHotelsA ORDER BY HotelName")
GHotels.DataSource = rstData
GHotels.DataBind()
End Sub
Ok, so now we have this:
Now, we need that jQuery.UI dialog - when we click on the info, we want to pop that dialog (and this will give you the ideas as how to use this for your pop ups that need values from server side code.
Ok, so the next part, is to drop in that "div" and put our markup inside of that div that we want to display. What you drop and put inside is really NOT different then any other kind of markup you would place on a page. Once you have it all pretty, then change the css style = display:none - (but only after you happy with the layout).
So, lets have say this markup for the popup:
Ok, so now we need our JavaScript routine to pop the above div - that will look like this:
Ok, that is quite much all we need. Only part left is now our row button click in the grid - but that's 100% server side and EASY code behind - stuff you always been doing anyway.
So, click on a row - we get PK, pull the data, fill out the div, and then pop (with script inject).
We have this code:
Protected Sub cmdView_Click(sender As Object, e As EventArgs)
' Row click - get hotel informaton, fill out the pop div
Dim btn As Button = sender
Dim gRow As GridViewRow = btn.NamingContainer
Dim intPK As Integer = GHotels.DataKeys(gRow.RowIndex).Item("ID")
Dim rstData As DataTable = MyRst("SELECT * FROM tblHotelsA WHERE ID = " & intPK)
With rstData.Rows(0)
txtHotel.Text = .Item("HotelName")
tCity.Text = .Item("City").ToString
tProvince.Text = .Item("Province").ToString
chkActive.Checked = .Item("Active")
chkBalcony.Checked = .Item("Balcony")
chkSmoking.Checked = .Item("Smoking")
txtNotes.Text = .Item("Description")
End With
' ok, div information filled out, now call our js pop function.
Dim strHotelName = """Information for " & rstData.Rows(0).Item("HotelName") & """"
Dim strJavaScript As String = "popinfo(" & btn.ClientID & "," & strHotelName & ")"
Page.ClientScript.RegisterStartupScript(Me.GetType(), "My Pop script", strJavaScript, True)
End Sub
Again, real plane jane code. That code grabs the information, SHOVES it into the div with our controls, and then we register the function (to pop the dialog). the results are then like this:
So, the above should get you started, and give you how to pop the div, and also fill out information from code behind BEFORE we pop the dialog.
A few more notes and tips:
If the dialog pop has ANY post-backs, then it will of course collopse, and this is OFTEN great, since you click some button, and we want the dialog to close anyway.
However, if you need the popped jquery.ui dialog to survive post-backs, then you need to move the div OUTSIDE of of the update panel. As per your posted markup, I see you have a update panel, and the way to make this work is to reverse what you have.
So, it will be like this:
"my div to pop"
update panel
content
your markup inside
end content
end update panel
end my div
so, the outer most part of the dialog to pop needs to be the "div", then update panel, then content.
With above the pop up can survive post-backs in most cases. However, if you do need this, then make sure you also add
appendTo: "form" in the jquery.UI dialog settings - you don't need this in most cases, but for post-backs to work, and modify the markup in that dialog, then you need the appendTo: form.
Regards,
Albert D. Kallal (Access MVP 2003-2017)
Edmonton, Alberta Canada