Solved

JQuery Modal Popup with Gridview

Posted on 2014-10-22
16
703 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 8
16 Comments
 
LVL 57

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 57

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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
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 57

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 57

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
 
LVL 57

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 57

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 57

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 57

Expert Comment

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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
This article aims to explain the working of CircularLogArchiver. This tool was designed to solve the buildup of log file in cases where systems do not support circular logging or where circular logging is not enabled
The viewer will learn how to dynamically set the form action using jQuery.
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…

695 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