locked
What is the best way to pass game id to a modal popup bootstrap RRS feed

  • Question

  • User36582938 posted

    I am trying to send a value from .net to a modal popup for referecne its the game id being clicked from asp repeater my asp repeater is setup as such

              <asp:Repeater ID="rpGames" runat="server">
                    <ItemTemplate>
    
                        <div class="col-xs-4 col-md-2">
                            <a href="#myRegisterTorunament" data-toggle="modal" data-book-id="my_id_value">
    
                                <img src='<%#Eval("gameCoverImage")%>' runat="server" class="img-full" style="width: 160px; height: 160px;" />
                                <div id="game-bottom" class="game-bottom">
                                    <asp:Label ID="lblGameName" runat="server" Text="<%# Bind('name') %>"></asp:Label>
                                </div>
                            </a>
                        </div>
                        <div class="clear"></div>
                    </ItemTemplate>
                </asp:Repeater>
    
    
            </div>
            <asp:Repeater ID="rptPager" runat="server">
                <ItemTemplate>
                    <asp:LinkButton ID="lnkPage" runat="server" Text='<%#Eval("Text") %>' CommandArgument='<%# Eval("Value") %>'
                        CssClass='<%# Convert.ToBoolean(Eval("Enabled")) ? "page_enabled" : "page_disabled" %>'
                        OnClick="Page_Changed" OnClientClick='<%# !Convert.ToBoolean(Eval("Enabled")) ? "return false;" : "" %>'></asp:LinkButton>
                </ItemTemplate>
            </asp:Repeater>

    But I dont no how I would best pass a click to retreieve the game id in a modal popup which I have defined as follows.

        <div class="modal-content">
          <div class="modal-body" style="background-color: #353D52; color:white">
            <button type="button" class="close" ng-click="$hide()">×</button>
            <form class="ng-pristine ng-invalid ng-invalid-required" ng-submit="submit(createTournamentForm)" name="createTournamentForm" id="createTournamentForm" role="form" novalidate="">
            
                 <input type="text" name="bookId" value=""/>
               <input class="hidden" name="fakeUsernameField" type="text">
              <input class="hidden" name="fakePasswordField" type="password">
    
              <div class="container-fluid">
                <div class="row">
                 
               <div class="col-sm-6 hidden-xs game-image-container ng-scope" ng-if="!showFeatureInfo">
                    <div class="ng-scope" ng-if="selectedItem.imageUrl">
                     </div><!-- end ngIf: selectedItem.imageUrl -->
                  </div><!-- end ngIf: !showFeatureInfo -->
                  <div class="col-sm-6 tournament-create-form" ng-class="{'not-logged-in': !user }">
                <div class="ng-scope" ng-if="!showFeatureInfo">
                      <div class="container-fluid">
                        <h1 class="game-header ng-binding">Dota 2</h1>
                        <div class="form-group">
                          <div ng-class="{ 'has-error': createTournamentForm.organizationName.$invalid &amp;&amp; check }">
                              </div>
                          <div ng-show="organizations.length > 0">
                            <label class="control-label" for="organizationSelector" translate=""><span class="ng-scope">Organization</span></label>
                              
                              <asp:DropDownList CssClass="form-control ng-pristine ng-untouched ng-valid" ID="ddOrginization" runat="server"></asp:DropDownList>
                  
    
                          </div>
                          <br>
    
                          <!-- Templating -->
                          <div style="" class="row templating" ng-show="organizations.length > 0 &amp;&amp; pastTournaments.length > 0">
                            <label class="col-sm-5">
                              <input class="ng-pristine ng-untouched ng-valid" id="template-fresh" name="templateRadio" ng-model="template.selected" value="createFresh" translate="" type="radio"> Blank Tournament
                            </label>
                            <label class="col-sm-7 relative">
                              <div class="template-info">
                                <a class="ng-scope" data-title="Duplicate a tournament to start with the same details as a previous event including: Cover Image, About, Prizes, Rules, Schedule, Registration Requirements, and Brackets." data-container="#dialogCreateTournament" bs-tooltip="">
                                  </a>
                              </div>
                              <input class="ng-pristine ng-untouched ng-valid" id="template-copy" name="templateRadio" ng-model="template.selected" value="createCopy" type="radio">
                          
                              
    
                              <!-- ngIf: showTemplateCode -->
                            </label>
                          </div>
                          <!-- // end of Templating -->
                          <div ng-class="{ 'has-error': createTournamentForm.tournamentName.$invalid &amp;&amp; check }">
                              <asp:TextBox CssClass="form-control ng-pristine ng-untouched ng-invalid ng-invalid-required"  ID="txtTorunamentName" runat="server"></asp:TextBox>
                            </div>
                        </div>
                        <div class="row">
                          <div class="col-xs-6">
                            <div class="form-group">
                              <label class="control-label" for="tournamentStartDate" translate=""><span class="ng-scope">Start Date</span></label>
                                       <asp:TextBox CssClass="" class="form-control ng-pristine ng-untouched ng-valid ng-valid-required"  ID="txtstartDate"  data-date-format="dd/MM/yyyy" placeholder="dd/mm/yyyy"  runat="server"></asp:TextBox>
                   
                               </div>
                          </div>
                          <div class="col-xs-6">
                            <div class="form-group">
                              <label class="control-label" for="tournamentStartDateTime" translate=""><span class="ng-scope">Start Time</span></label>
                              <div class="input-group">
                                           <asp:TextBox CssClass="" class="form-control ng-pristine ng-untouched ng-valid ng-valid-required"  ID="txtStarttime"  data-date-format="dd/MM/yyyy" placeholder="dd/mm/yyyy"  runat="server"></asp:TextBox>
                   
                                <div class="input-group-addon transparent-addon ng-binding">PST
                                  <a class="ng-scope" data-html="true" data-container="#dialogCreateTournament" data-content-template="/scripts/directives/bfyGamesList/_partial/tournamentTypeToolTip.html" data-title="Not your timezone? Set your timezone in your user settings to ensure your tournament starts on time!" bs-tooltip="">
                                    </a>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- ngIf: selectedItem.name === 'League of Legends' -->
                        <div class="row waitlist">
                          <div class="col-sm-6">
                            <ul class="list-inline list-unstyled">
                          <li class="ng-hide" ng-show="tournament.hasRegistrationCap" ng-class="{'has-error': createTournamentForm.capNumber.$invalid }">
                                <input ng-disabled="validTemplateCode" name="capNumber" class="form-control ng-pristine ng-untouched ng-valid ng-valid-required" ng-model="tournament.teamCap" placeholder="Limit" ng-required="tournament.hasRegistrationCap" type="number">
                              </li>
                            
                              </ul>
                          </div>
                          <div class="col-sm-6">
                            <ul class="list-inline list-unstyled">
                              <li>
                                <label>
                                  <input ng-disabled="validTemplateCode" class="tournament-radio " ng-click="tournament.hasRegistrationCap = true" ng-checked="tournament.hasRegistrationCap" translate="" type="radio"> Capped registration with waitlist</label>
                              </li>
                              <li class="ng-hide" ng-show="tournament.hasRegistrationCap" ng-class="{'has-error': createTournamentForm.capNumber.$invalid }">
                                <input ng-disabled="validTemplateCode" name="capNumber" class="form-control ng-pristine ng-untouched ng-valid ng-valid-required" ng-model="tournament.teamCap" placeholder="Limit" ng-required="tournament.hasRegistrationCap" type="number">
                              </li>
                            
                            </ul>
                          </div>
                        </div>
                        <div class="row">
                          <div class="col-sm-6">
                            <ul class="list-inline list-unstyled">
                              <li id="tournament-type">
                                <div class="form-group fake-label" ng-class="{ 'dropdown-has-error': createTournamentForm.type.$invalid  &amp;&amp; check }">
                                  <select ng-disabled="validTemplateCode" class="form-control text-capitalize ng-pristine ng-untouched ng-invalid ng-invalid-required" ng-model="tournament.type" id="type" name="type" ng-options="item as item for item in tournamentTypes" required="" autofocus=""><option value="" class="hide" disabled="" selected="" translate=""><span class="ng-scope">Tournament Type</span></option><option label="team" value="0">team</option><option label="solo" value="1">solo</option><option label="draft" value="2">draft</option><option label="team&amp;draft" value="3">team&amp;draft</option></select>
                                </div>
                              </li>
                              
                            </ul>
                          </div>
                          <!-- ngIf: tournament.type && tournament.type !== 'solo' -->
                        </div>
                        <div class="row">
                          <!-- ngIf: selectedItem.regions --><div class="col-sm-6 ng-scope" ng-if="selectedItem.regions">
                            <div class="form-group" ng-class="{ 'has-error': createTournamentForm.region.$invalid &amp;&amp; check }">
                              <label class="control-label" for="region" translate=""><span class="ng-scope">Region/Server</span></label>
                              <select ng-disabled="validTemplateCode" name="server" class="form-control ng-pristine ng-untouched ng-valid" ng-model="tournament.region" id="region">
                                <!-- ngRepeat: item in selectedItem.regions --><option class="ng-binding ng-scope" ng-repeat="item in selectedItem.regions" value="Americas">Americas</option><!-- end ngRepeat: item in selectedItem.regions --><option class="ng-binding ng-scope" ng-repeat="item in selectedItem.regions" value="Europe">Europe</option><!-- end ngRepeat: item in selectedItem.regions --><option class="ng-binding ng-scope" ng-repeat="item in selectedItem.regions" value="Asia">Asia</option><!-- end ngRepeat: item in selectedItem.regions --><option class="ng-binding ng-scope" ng-repeat="item in selectedItem.regions" value="Other">Other</option><!-- end ngRepeat: item in selectedItem.regions -->
                              </select>
                            </div>
                          </div><!-- end ngIf: selectedItem.regions -->
                          <!-- ngIf: selectedItem.platforms -->
                          <!-- ngIf: selectedItem.slug === 'hearthstone-heroes-of-warcraft' && tournament.type === 'solo' -->
                        </div>
                        <div class="form-group">
                          <div class="checkbox">
                            <label>
                              <input ng-disabled="validTemplateCode" ng-model="requirePassword" class="bs-material ng-pristine ng-untouched ng-valid" type="checkbox">
                              <span class="check"></span>
                              <span translate=""><span class="ng-scope">Require Password</span></span>
                            </label>
                          </div>
                          <!-- ngIf: requirePassword -->
                        </div>
                      </div>
                    </div><!-- end ngIf: !showFeatureInfo -->
                  </div>
                </div>
              </div>
              <!-- ngIf: !showFeatureInfo --><div class="create-button-container ng-scope" ng-if="!showFeatureInfo">
                <!-- ngIf: template.selected !== 'createCopy' --><button type="submit" class="btn btn-primary ng-scope ng-isolate-scope" ng-if="template.selected !== 'createCopy'" disabler="" disabler-loading-text="Creating..." disabler-add-spinner="true" loading-status="creating" disabled-btn="creating" display-text="Create" translate="">Create</button><!-- end ngIf: template.selected !== 'createCopy' -->
                <!-- ngIf: template.selected === 'createCopy' -->
              </div><!-- end ngIf: !showFeatureInfo -->
            </form>
          </div>
        </div>
      </div>

    I am calling my modal popup with the help of a html button

    <button type="button" id="btnShowPopup" class="btn bg-purple btn-lg"
         data-toggle="modal" data-target="#myRegisterTorunament">
                                        Create A Tournament
      </button>

    And on another note how do I close a modall popup using a asp.net button does anybody have a clue

    Tuesday, January 5, 2016 9:07 PM

Answers

  • User475983607 posted

    buckd30

    I am trying to send a value from .net to a modal popup for referecne its the game id being clicked from asp repeater my asp repeater is setup as such

    You've got a lot of code there and I can't seem locate the Game ID.

    So, I put together a simple example that uses a repeater that renders div tags that contain a link, label, and hidden field.   The div is wired up to a click handler.  When the link is clicked the div looks into itself and grabs the Game Id from the hidden field.  The script then writes the ID to the modal and finally shows the modal.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BootstrapDemo1.aspx.cs" Inherits="TestingWeb.BootstrapDemo1" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
    
        <script type="text/javascript">
            $(function () {
                $('.GameIdClickFinder').click(function () {
    
                });
    
                $('.GameIdClickContainer').click(function (e) {
                    $('#modalGameId').text($('input[type="hidden"]', this).val())
                    $('#myModal').modal('show');
                    e.preventDefault();
                });
    
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:Repeater ID="rpGames" runat="server">
                    <ItemTemplate>
                    <div class="GameIdClickContainer">
                        <a href="#" class="GameIdClickFinder">Go</a>
                        <asp:Label ID="Label1" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
                        <asp:HiddenField ID="HiddenField1" runat="server" Value='<%# Bind("Id") %>'/>
                    </div>
                    </ItemTemplate>
                    
                    
                </asp:Repeater>
            </div>
            <div>
    
                <!-- Modal -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                            </div>
                            <div class="modal-body">
                                Selected Game Id: <span id="modalGameId"></span>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save changes</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </body>
    </html>
    

    The code behind just populates the repeater.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace TestingWeb
    {
        public partial class BootstrapDemo1 : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                BindRepeater();
            }
    
            protected void BindRepeater()
            {
                rpGames.DataSource = GetGames();
                rpGames.DataBind();
            }
    
            protected List<Game> GetGames()
            {
                List<Game> games = new List<Game>();
                for(int i =0; i <10; i++)
                {
                    games.Add(new Game() { Name = "Game " + i, Id = i });
                }
                return games;
            }
        }
    
        public class Game {
            public string Name { get; set; }
            public int Id { get; set; }
        }
    }

    buckd30

    And on another note how do I close a modall popup using a asp.net button does anybody have a clue

    This is a bit confusing.  The ASP button should submit the page and modal should revert back to its original state when the request returns.  Can you better explain what you are trying to do or provide a small code sample that demonstrates the issue?

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 6, 2016 12:43 AM
  • User61956409 posted

    Hi buckd30,

    And on another note how do I close a modall popup using a asp.net button does anybody have a clue

    You could call .modal("hide") method to close modal. The following sample code is for your reference.

    <asp:Button ID="btnclose" runat="server" Text="CloseModal" OnClientClick="return CloseModal();" />
    function CloseModal() {
        $("#myModal").modal("hide");
        return false;
    }
    

    Best Regards,

    Fei Han



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 6, 2016 5:23 AM
  • User475983607 posted

    I noticed you did not define the id to be generic of the hidden field why is that would it not be better going by the id of the field rather than type if you wanted to pass more than one thing?

    The "this" key word in JavaScript refers to the current context.  The Hidden field is in a div element and the handler fires when the div.  "this" is the div element.  Then it is just a matter of JQuery to retrieve the only Hidden field within the div.

    We can also take advantage of event bubbling to response to only link clicks.

        <script type="text/javascript">
            $(function () {
                var linkClicked = false;
    
                $('.GameIdClickFinder').click(function (e) {
                    e.preventDefault();
                    linkClicked = true;
                });
    
                $('.GameIdClickContainer').click(function (e) {
                    if (linkClicked) {
                        $('#modalGameId').text($('input[type="hidden"]', this).val())
                        $('#myModal').modal('show');
                        linkClicked = false;
                    }
                   
                });
            });
        </script>

    Checkboxes can be used to select multiple items.  This code subscribes to the modal show event and iterates over the cehckbox collection and adds a div element to the modal when it finds a checked checkbox.

    Check box added to the repeater

    <asp:Repeater ID="rpGames" runat="server">
        <ItemTemplate>
        <div class="GameIdClickContainer">
            <a href="#" class="GameIdClickFinder">Go</a>
            <input id="Checkbox1" type="checkbox" class="GameIdSelect" />
            <asp:Label ID="Label1" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
            <asp:HiddenField ID="HiddenField1" runat="server" Value='<%# Bind("Id") %>'/>
        </div>
        </ItemTemplate>
    </asp:Repeater

    And the updated script.  Notice that the code accesses the parent element to drill back down into the hidden field.

        <script type="text/javascript">
            $(function () {
                var linkClicked = false;
    
                $('.GameIdClickFinder').click(function (e) {
                    e.preventDefault();
                    linkClicked = true;
                });
    
                $('.GameIdClickContainer').click(function (e) {
                    if (linkClicked) {
                        $('#modalGameId').text($('input[type="hidden"]', this).val())
                        $('#myModal').modal('show');
                        linkClicked = false;
                    }            
                });
    
                $('#myModal').on('shown.bs.modal', function () {
                    $('.GameIdSelect').each(function (index, item) {
                        if (item.checked) {
                            $('.modal-body').append('<div>Game Id ' + $('input[type="hidden"]', $(item).parent()).val() + '</div>');
                        }
                        
                    });
                })
            });
        </script>

    By no means is this code production ready.  It's meant as an example to get you started.  

    I found creating simple tests pages that target specific tasks, like the one above,  is very useful during the development process.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 6, 2016 12:48 PM

All replies

  • User475983607 posted

    buckd30

    I am trying to send a value from .net to a modal popup for referecne its the game id being clicked from asp repeater my asp repeater is setup as such

    You've got a lot of code there and I can't seem locate the Game ID.

    So, I put together a simple example that uses a repeater that renders div tags that contain a link, label, and hidden field.   The div is wired up to a click handler.  When the link is clicked the div looks into itself and grabs the Game Id from the hidden field.  The script then writes the ID to the modal and finally shows the modal.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BootstrapDemo1.aspx.cs" Inherits="TestingWeb.BootstrapDemo1" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
    
        <script type="text/javascript">
            $(function () {
                $('.GameIdClickFinder').click(function () {
    
                });
    
                $('.GameIdClickContainer').click(function (e) {
                    $('#modalGameId').text($('input[type="hidden"]', this).val())
                    $('#myModal').modal('show');
                    e.preventDefault();
                });
    
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:Repeater ID="rpGames" runat="server">
                    <ItemTemplate>
                    <div class="GameIdClickContainer">
                        <a href="#" class="GameIdClickFinder">Go</a>
                        <asp:Label ID="Label1" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
                        <asp:HiddenField ID="HiddenField1" runat="server" Value='<%# Bind("Id") %>'/>
                    </div>
                    </ItemTemplate>
                    
                    
                </asp:Repeater>
            </div>
            <div>
    
                <!-- Modal -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                            </div>
                            <div class="modal-body">
                                Selected Game Id: <span id="modalGameId"></span>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save changes</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </body>
    </html>
    

    The code behind just populates the repeater.

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace TestingWeb
    {
        public partial class BootstrapDemo1 : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                BindRepeater();
            }
    
            protected void BindRepeater()
            {
                rpGames.DataSource = GetGames();
                rpGames.DataBind();
            }
    
            protected List<Game> GetGames()
            {
                List<Game> games = new List<Game>();
                for(int i =0; i <10; i++)
                {
                    games.Add(new Game() { Name = "Game " + i, Id = i });
                }
                return games;
            }
        }
    
        public class Game {
            public string Name { get; set; }
            public int Id { get; set; }
        }
    }

    buckd30

    And on another note how do I close a modall popup using a asp.net button does anybody have a clue

    This is a bit confusing.  The ASP button should submit the page and modal should revert back to its original state when the request returns.  Can you better explain what you are trying to do or provide a small code sample that demonstrates the issue?

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 6, 2016 12:43 AM
  • User61956409 posted

    Hi buckd30,

    And on another note how do I close a modall popup using a asp.net button does anybody have a clue

    You could call .modal("hide") method to close modal. The following sample code is for your reference.

    <asp:Button ID="btnclose" runat="server" Text="CloseModal" OnClientClick="return CloseModal();" />
    function CloseModal() {
        $("#myModal").modal("hide");
        return false;
    }
    

    Best Regards,

    Fei Han



    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 6, 2016 5:23 AM
  • User36582938 posted

    I noticed you did not define the id to be generic of the hidden field why is that would it not be better going by the id of the field rather than type if you wanted to pass more than one thing?

    Wednesday, January 6, 2016 7:06 AM
  • User475983607 posted

    I noticed you did not define the id to be generic of the hidden field why is that would it not be better going by the id of the field rather than type if you wanted to pass more than one thing?

    The "this" key word in JavaScript refers to the current context.  The Hidden field is in a div element and the handler fires when the div.  "this" is the div element.  Then it is just a matter of JQuery to retrieve the only Hidden field within the div.

    We can also take advantage of event bubbling to response to only link clicks.

        <script type="text/javascript">
            $(function () {
                var linkClicked = false;
    
                $('.GameIdClickFinder').click(function (e) {
                    e.preventDefault();
                    linkClicked = true;
                });
    
                $('.GameIdClickContainer').click(function (e) {
                    if (linkClicked) {
                        $('#modalGameId').text($('input[type="hidden"]', this).val())
                        $('#myModal').modal('show');
                        linkClicked = false;
                    }
                   
                });
            });
        </script>

    Checkboxes can be used to select multiple items.  This code subscribes to the modal show event and iterates over the cehckbox collection and adds a div element to the modal when it finds a checked checkbox.

    Check box added to the repeater

    <asp:Repeater ID="rpGames" runat="server">
        <ItemTemplate>
        <div class="GameIdClickContainer">
            <a href="#" class="GameIdClickFinder">Go</a>
            <input id="Checkbox1" type="checkbox" class="GameIdSelect" />
            <asp:Label ID="Label1" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
            <asp:HiddenField ID="HiddenField1" runat="server" Value='<%# Bind("Id") %>'/>
        </div>
        </ItemTemplate>
    </asp:Repeater

    And the updated script.  Notice that the code accesses the parent element to drill back down into the hidden field.

        <script type="text/javascript">
            $(function () {
                var linkClicked = false;
    
                $('.GameIdClickFinder').click(function (e) {
                    e.preventDefault();
                    linkClicked = true;
                });
    
                $('.GameIdClickContainer').click(function (e) {
                    if (linkClicked) {
                        $('#modalGameId').text($('input[type="hidden"]', this).val())
                        $('#myModal').modal('show');
                        linkClicked = false;
                    }            
                });
    
                $('#myModal').on('shown.bs.modal', function () {
                    $('.GameIdSelect').each(function (index, item) {
                        if (item.checked) {
                            $('.modal-body').append('<div>Game Id ' + $('input[type="hidden"]', $(item).parent()).val() + '</div>');
                        }
                        
                    });
                })
            });
        </script>

    By no means is this code production ready.  It's meant as an example to get you started.  

    I found creating simple tests pages that target specific tasks, like the one above,  is very useful during the development process.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, January 6, 2016 12:48 PM