Solved

JQuery Modal Popup with Gridview

Posted on 2014-10-22
16
666 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 54

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 54

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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
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 54

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 54

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 54

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 54

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 54

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 54

Expert Comment

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

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Performance in games development is paramount: every microsecond counts to be able to do everything in less than 33ms (aiming at 16ms). C# foreach statement is one of the worst performance killers, and here I explain why.
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…

809 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