Solved

JQuery Modal Popup with Gridview

Posted on 2014-10-22
16
643 Views
Last Modified: 2014-11-03
I am trying to call a JQuery Modal Popup from Gridview. I do not get an error but the modal does not popup.

<script type="text/javascript">
    function showmodalpopup() {
        $("#popupdiv").dialog({
            title: "Team Information",
            width: 400,
            height: 300,
            modal: true,
            buttons: {
                Close: function () {
                    $(this).dialog('close');
                }
            }
        });
    };
</script>
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
                   <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                       <ContentTemplate>
                              <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>
                       </ContentTemplate>
                   </asp:UpdatePanel>

	<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;
            }
        }

Open in new window

0
Comment
Question by:RecipeDan
  • 8
  • 8
16 Comments
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 40398749
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?
0
 
LVL 1

Author Comment

by:RecipeDan
ID: 40399689
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>

Open in new window

0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 40401295
Ok firstly - any reason you are doing this
$(document).on("click", "[id*=TRStartLink]", function () {

Open in new window

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

Open 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 () {

Open 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/
0
 
LVL 1

Author Comment

by:RecipeDan
ID: 40402139
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.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 40402266
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.
0
 
LVL 1

Author Comment

by:RecipeDan
ID: 40403423
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
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 40403621
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%>;

Open 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.
0
 
LVL 1

Author Comment

by:RecipeDan
ID: 40404083
I still get an error saying TRStartlink does not exist in the current context
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 51

Expert Comment

by:Julian Hansen
ID: 40404159
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?
0
 
LVL 1

Author Comment

by:RecipeDan
ID: 40404872
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;
            }
        }

Open in new window

0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 40405880
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>

Open in new window

0
 
LVL 1

Author Comment

by:RecipeDan
ID: 40406426
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.
0
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 40406456
not have the modal inside a GridView
Not sure what that means. There is no such thing as a modal popup in html - we fake it with a div that overlays the rest of the content and emulates a popup. The fact that it is "in a gridview" or not should have no bearing on the situation.

You have an event - in this case a click on your link button - and you have javascript code intercepting that event - the JQuery snippet you have above. The linkbutton has an ID - the JQuery event handler is bound to that ID - the fact that a gridview is involved somewhere in all this is irrelevant - JQuery does not care - the link is clicked - the event fires and the dialog code runs.

If this is not happening then it is because either
a) The event is not being bound because of an id name mismatch
b) A javascript error that is stopping the running of the script
c) A missing javascript library to display the popup

That's pretty much it.

Do you not have a link for us to look at?
0
 
LVL 1

Author Comment

by:RecipeDan
ID: 40417233
I do not have a link. I am still trying to figure out the issue.
0
 
LVL 1

Author Comment

by:RecipeDan
ID: 40418832
I created a test page and and created a gridview and it would fine. The issue was with the master page.
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 40418906
Ok, if you get stuck feel free to post back here.
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
C# Reverse int in fast ways 6 28
Check my code out(2) 1 33
JavaScript Scope issue 4 20
jqplot Pie Chart - javascript 2 17
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now