JQuery Modal Popup with Gridview

Trying to see the link between your GridView and the call to showmodalPopup?

Question
1. Can you give us a link to the page - or failing that post the rendered HTML from the page
2. What is the expected behaviour - how are you wanting to invoke the popup from  the GridView?

What I want to do is click a linkbutton in gridview and show a modal popup with a iframe. I am attaching the IFrame values through the command argument.

I saw your comment and added an onclick event to the JQuery Script. However it does not work.

<script type="text/javascript">
    $(document).on("click", "[id*=TRStartLink]", function () {
        $("#popupdiv").dialog({
            title: "Team Information",
            buttons: {
                Ok: function () {
                    $(this).dialog('close');
                }
            },
            modal: true
        });
        return false;
    });
</script>

Select allOpen in new window

Ok firstly - any reason you are doing this

$(document).on("click", "[id*=TRStartLink]", function () {

Select allOpen in new window

Instead of

$(document).on("click", "#TRStartLink", function () {

Select allOpen in new window

Having said that - ASP mangles ID's when it outputs them
You have to generate your Javascript like this

$(document).on("click", "#<%=TRStartLink.ClientId%>", function () {

Select allOpen in new window

You have to insert the ID for your button into the Javascript
More info here
http://encosia.com/robust-aspnet-control-referencing-in-javascript/

I have been working on this for 3 days now and trying different things. Could it be on rowcommand causing the problem? Right now  am at a loss.

Did you see my post ? You are trying to link the click event to the ID of the button as it is in your asp code. When .Net renders that out it changes the ID so that link will never fire.

You have to wire the click event to the actual id that is rendered into the html.

Try this
Open your web page in your browser
Go to view source
Do a search for 'TRStartLink'
Look at the ID for the control - is it 'TRStartLink' or does it have prefixes / suffixes appended to it.

For the JQuery to work it has to match the ID of the control exactly - if the id has been changed then the JQuery has to change to match that.

Yes I did see your post. I tried it and I get an error saying TRStartlink does not exist in the current context. I looked at the page source and yes TRStartLink does have both a prefix and suffix append to it. Like this:

ContentPlaceHolder1_GridView1_TRStartLink_0
ContentPlaceHolder1_GridView1_TRStartLink_1
ContentPlaceHolder1_GridView1_TRStartLink_2
ContentPlaceHolder1_GridView1_TRStartLink_3

Exactly - so you have to either output the ID directly into the Javascript
Failing that you have to output some javascript setting a variable like this

var button_id = <%=TRStartLink.ClinetID%>;

Select allOpen in new window

And then use the button_id variable in place of the string in your JQuery.

That is the only way to solve this.

I still get an error saying TRStartlink does not exist in the current context

Can you post your code or something that will help us understand what you have done and what the problem could be.

Is this a javascript error?

What does your rendered javascript look like?

Anything you can provide that we can look at to try and troubleshoot?

This is what I have

<script type="text/javascript">
$(document).on("click", "#<%=TRStartLink.ClientId%>", function () {
        $("#popupdiv").dialog({
            title: "Team Information",
            buttons: {
                Ok: function () {
                    $(this).dialog('close');
                }
            },
            modal: true
        });
        return false;
    });
</script>
                              <div id="GridViewDiv" runat="server">
                                  <asp:GridView ID="GridView1" ShowHeader="false" OnRowCommand="GridView1_RowCommand" runat="server" AutoGenerateColumns="false">
                                    <Columns>
                                     <asp:TemplateField>
                                         <ItemTemplate>
                                             <asp:LinkButton ID="TRStartLink" CommandName="Level" CommandArgument='<%#Eval("ID") + ","+Eval("Team") + "," +Eval("TeamDate") %>' Text='<%# Eval("varTeam") %>' runat="server" /> 
                                        </ItemTemplate>
                                     </asp:TemplateField>            
                                    </Columns>
                               </asp:GridView>
                            </div>


	<div id="popupdiv" class="cell_Cdiv" runat="server" style="display: none">
<iframe id="TeamFrame" runat="server" />  
</div>

        protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
        {
            //ScriptManager.RegisterStartupScript(this, GetType(), "popupdiv", "showmodalpopup();", true);
            
            if (e.CommandName == "Level")
            {
                string[] commandArgs = e.CommandArgument.ToString().Split(new char[] { ',' });
                string ID = commandArgs[0];
                string Team = commandArgs[1];
                string TeamDate = commandArgs[2];
                TeamFrame.Src = "Test.aspx?ID=" + ID + "&STeam=" + Team + "&SDate=" + TeamDate;
            }
        }

Select allOpen in new window

How is that Javascript being included in your page - is it part of your aspx file?

If so where are you getting the error

I just tried this and it works as expected.

<!doctype html>
<html>
<head>
<title>Test</title>
</head>
<body>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
  $('#' + '<%=TRStartLink.ClientID%>').click(function(e) {
    e.preventDefault();
    alert('Link clicked and prevented');
  });
});
</script>

<form runat="server" id="f1">
   <asp:LinkButton ID="TRStartLink" CommandName="Level" CommandArgument="x" Text="This is the Text" runat="server" /> 
</form>
</body>
</html>

Select allOpen in new window

I used Modal's on other pages and they work fine too. The issue is the Modal Popup inside a GridView. The example above does not have the modal inside a GridView.

I do not have a link. I am still trying to figure out the issue.

I created a test page and and created a gridview and it would fine. The issue was with the master page.

Ok, if you get stuck feel free to post back here.