Gridview row button click popup window event not load properly in jquery

Ok, lets break this problem down a bit.

First, I suggest you get/grab/adopt/use some kind of "dialog" utility. They work MUCH better then attempting to roll your own. And they tend to play nice with popup-blockers etc.

the next goal is to write as LITTLE client side code as possible. This not due to me not being all that fond of JavaScript, but the "more" with ease we can leverage server side code, then the less messy the solution becomes. And client side code is oh so nice to write anyway.

Now, there are 2 pop up (dialog) libraries I can suggest. The one from the ajaxtoolkit is very nice (since you don’t need to learn + know any JavaScript).
However, that is quite a "rather" large and complex library to adopt JUST for a simple dialog.

The other choice – one that I use with great success? I use the "dialog" from jQuery.UI.

Since you already have jQuery installed (don’t we all???), then adding jQuery.UI makes a whole lot of sense here.

So, then we have a gridview, and I suppose we drop into that GV a plane jane asp.net button.

That plaine jane (standard code behind) can then:

load up a "div" area with the information to dialog pop
call/use/trigger/run the js code to pop that "div" as a dialog.

And the beauty of this approach is the "pop" dialog can have good old plain jane buttons. (such as a save, delete button). Do keep in mind that any post-back will collapse the dialog. However, in most cases, this is desirable, since when you say hit a save button, or delete button in that dialog, you want to run simple + easy button click code server side anyway. And that then solves tow issues.

We get to run nice server side code.

And since we doing a post-back, then the dialog box collapses without any extra code, which we also want to occur when done.

And while in a lot of cases, we want this dialog to center on the page, I OFTEN want the dialog to pop up beside, or even right below the button we just clicked. (this is also why I like/suggest using the jQuery.UI dialog. (it has VERY nice ability to position the pop dialog).

Also, nice for that jQuery.UI dialog is it can be "modal", and thus it will automatic gray out and disable the rest of the page for you. (again, more reasons why to use a existing dialog system – it has LOTS of features and abilities for you.

So, lets assume jQuery, and also then jQuery.UI is installed.

So, now whole business becomes rather easy.

We need 2 parts:

Our gridview.

A div (that is "hidden"), and that is the context of the pop dialog. That of course would be some plain jane asp.net controls to edit the data.

So, first up, our gv, nothing fancy:

note that I used a "button" as opposed to a asp.net button, but the code and event click works 100% the same (I only used the button since it supports the gylph-icons – no other reason).

So, first up our grid – and NOTE how it is a pure simple GV – no java script click events or anything.

<asp:GridView ID="GridView1" 
    runat="server" CssClass="table table-hover" AutoGenerateColumns="false"
    width="48%" DataKeyNames="ID" OnRowDataBound="GridView1_RowDataBound"  >
    <Columns>
        <asp:BoundField DataField="FirstName" HeaderText="First Name"  />
        <asp:BoundField DataField="LastName" HeaderText="Last Name"    />
        <asp:BoundField DataField="HotelName" HeaderText="Hotel Name"  ItemStyle-Width="160"  />
        <asp:BoundField DataField="Description" HeaderText="Description" ItemStyle-Width="270" />
        <asp:TemplateField HeaderText="" ItemStyle-HorizontalAlign="Center">
            <ItemTemplate>
                <button runat="server" id="cmdEdit"
                    type="button" class="btn myshadow"
                    onserverclick="cmdEdit_Click">
                    <span class="glyphicon glyphicon-home"></span> Edit
                </button>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

And code to load above is this:

id Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
LoadData();
}

void LoadData()
{
    string strSQL = "SELECT * FROM tblHotelsA ORDER BY HotelName";
    DataTable rstData = General.MyRst(strSQL);
    GridView1.DataSource = rstData;
    GridView1.DataBind();
}

Ok, so now we see/have/get this:

So, now right below the gv, we add a div (it will be set to display none).

All that div does/have is the controls and content to edit a row. that div will then be a pop dialog with jQuery.UI.

So, this markup really does not matter much, it just plaine jane controls – all done by drag + drop from the tool box. A wee bit of styling.

but, for more of a complete example, I’ll post the markup (I could leave this out – just some more boring markup).

Note however, the style=display:none. So, while developing, I have display:normal, but when happy with the layout, then we hide it with display:none.

the markup in a "div".

<div id="EditRecord" runat="server" style="float: left; display: none; padding: 15px">
    <div style="float: left" class="iForm">
        <label>HotelName</label><asp:TextBox ID="txtHotel" runat="server" Width="280" f="HotelName" /><br />
        <label>First Name</label><asp:TextBox ID="tFN" runat="server" Width="140"  f="FirstName"/><br />
        <label>Last Name</label><asp:TextBox ID="tLN" runat="server" Width="140" f="LastName" /><br />
        <label>City</label><asp:TextBox ID="tCity" runat="server" Width="140" f="City" /><br />
        <label>Province</label><asp:TextBox ID="tProvince" runat="server" Width="75" f="Province" /><br />
    </div>
    <div style="float: left; margin-left: 20px" class="iForm">
        <label>Description</label>
        <br />
        <asp:TextBox ID="txtNotes" runat="server" Width="400" TextMode="MultiLine"
            Height="150px" f="Description"></asp:TextBox><br />
        <asp:CheckBox ID="chkActive" Text=" Active" runat="server" 
            TextAlign="Right" f="Active" />
        <asp:CheckBox ID="chkBalcony" Text=" Has Balcony" runat="server" 
            TextAlign="Right" f="Balcony"/>
    </div>
    <div style="clear: both"></div>
    <button id="cmdSave" runat="server" class="btn myshadow" type="button"
        onserverclick="cmdSave_Click">
        <span aria-hidden="true" class="glyphicon glyphicon-floppy-saved">Save</span>
    </button>

    <button id="cmdCancel" runat="server" class="btn myshadow" style="margin-left: 15px"
        type="button"
        onclick="MyClose();return false">
        <span aria-hidden="true" class="glyphicon glyphicon-arrow-left">Back/Cancel</span>
    </button>

    <button id="cmdDelete" runat="server" class="btn myshadow" style="margin-left: 15px"
        type="button"
        onserverclick="cmdDelete_ServerClick"
        onclick="if (!confirm('Delete Record?')) {return false};">
        <span aria-hidden="true" class="glyphicon glyphicon-trash">Delete</span>
    </button>

</div>

Ok, so, now we need the jQuery.UI. that "little" bit of js code.

this is right below the above div.

<script>
    function pophotel(btnT) {
        btn = $('#' + btnT)
        var mydiv = $("#EditRecord")
        mydiv.dialog({
            modal: true, appendTo: "form",
            title: "Edit Hotel", closeText: "",
            width: "835px",
            position: { my: 'right top', at: 'right bottom', of: btn },
            dialogClass: "dialogWithDropShadow"
        });
    }
    function MyClose() {
        popdiv = $('#EditRecord')
        popdiv.dialog('close')
    }
</script>

That is ALL the js code we need.

Ok, so now the button click code.

That is this code:

protected void cmdEdit_Click(object sender, EventArgs e)
{
    HtmlButton btn = sender as HtmlButton;
    GridViewRow gRow = btn.NamingContainer as GridViewRow;
    int PKID = (int)GridView1.DataKeys[gRow.RowIndex]["ID"];
    ViewState["PKID"] = PKID;

    string strSQL = $"SELECT * FROM tblHotelsA WHERE ID = {PKID}";
    DataRow rstData = General.MyRst(strSQL).Rows[0];
    General.FLoader(this.EditRecord, rstData);

    // pop the edit div using jQuery.UI dialog
    string sJava = $"pophotel('{btn.ClientID}')";
    Page.ClientScript.RegisterStartupScript(Page.GetType(), "MyJava", sJava, true);
}

or, if using VB, then this:

    Dim btn As HtmlButton = sender
    Dim gRow As GridViewRow = btn.NamingContainer
    Dim PKID As Integer = GridView1.DataKeys(gRow.RowIndex).Item("ID")

    ViewState("PKID") = PKID
    Dim strSQL As String = $"SELECT * FROM tblHotelsA WHERE ID = {PKID}"
    Dim rstData As DataRow = Myrst(strSQL).Rows(0)
    fLoader(EditRecord, rstData)

    ' pop the edit div using jQuery.UI dialog
    Dim sJava As String = $"pophotel('{btn.ClientID}')"
    Page.ClientScript.RegisterStartupScript(Page.GetType(), "MyJava", sJava, True)

but, note how so far? Not very much code, and this is for both the code behind, and the client side js code.

So, we get the row. Pull the data, shove into the controls. (I have a floader routine – it just takes the row of data and automatic fills out the controls for me. I became VERY tired of writing that kind of code over and over – so that one routine can be used for ANY page. I map the controls by using a "made up" or "cooked up" attribute called "f". So, that how I define the database column. but, you can load up the controls ANY way you want.

Note the last line of that code, we THEN call the JavaScript pop dialog. And I pass it the control name (since I wanted the pop dialog to pop JUST right below the button clicked – a nice touch!!).

The end result now looks like this: