Issues with modal popup , document.getElementsByClassName length property

Question

User-2006371901 posted

I hav a modal popup that sits inside an aspnet repeater control with this call inside my html:

<!-- modal pop-->
<button id="btn" class="btn modclic-btn">Click for Gallery</button>
<div id="myModal" class="popup">
<!-- Modal content -->
<div class="popup-content">
<div class="popup-header">
<span class="end">X</span>
<h2> <%#Eval("MakeName")%> <%#Eval("ModelName")%> </h2>
</div>
<div class="popup-body">
[ contents of modal ]

</div>
</div>
</div>
<!-- /modal pop-->

with this script

<!-- jscript -->
<script>
var popup = document.getElementById('myModal');
var myBytton = document.getElementById("btn");

var span = document.getElementsByClassName("end")[0];
myBytton.onclick = function() {
popup.style.display = "block";
}
span.onclick = function() {
popup.style.display = "none";
}
window.onclick = function(event) {
if (event.target == popup) {
popup.style.display = "none";
}
}
</script>

<!--/ -->

since this is inside a dynamic repeating module, I am not getting any response to the records' modal button clicks , only the very first one in the resultset's modal button displays the content for that record. Tried removing the [0] length element on document.getElementsByClassName("end")[0]; (which provides a text "X" to close the modal window) ; but the main problem is the button (id="btn") doesnt provide a popup after the first record displayed, even tho the button is visible.
??
Ned

Answer 1

User475983607 posted

I'm guessing the markup is invalid because there are many duplicate Ids.  jQuery will find the first Id as Ids should be unique.

<div id="myModal" class="popup">

I recommend changing the design to use a single model and implement Bootstrap's recommendation for populating modal content.

https://getbootstrap.com/docs/4.0/components/modal/#varying-modal-content

Answer 2

User-2006371901 posted

Thanks, I've gone to a bootstrap example of modal, it works fine to the point that each "click here" button  on each record to open the modal works, but only the first records data shows up in the content:

<!-- Modal -->
<div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"><%#Eval("Biketype")%> <%#Eval("MakeName")%> <%#Eval("ModelName")%> </h5>

[Here is more content...]

<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

...and looking at View Source for the generated HTML, it shows the correct content for all the other records, but when I click on the button for a certain record, the content displayed is only for the first record, not the record in question.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#basicExampleModal">

thanks

Ned

Answer 3

User475983607 posted

If you still have multiple modals with the same Id then the results are excepted and explained in my first post.  Every Id must be unique when viewing the source.  If there are Duplicate IDs, jQuery will always find the first one.

Also suggested in my first post with a link, you should use the standard Bootstrap pattern for populating a single modal.

If my assumptions are incorrect then please share code that reproduces this issue.

Answer 4

User283571144 posted

Hi Norkle,

According to your description, I suggest that you can trigger the modal with show.bs.modal, and extract info from data-* attributes. Then you can find modal-body's label to get values.

Solution1:

    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/jquery-3.2.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script>
        $(document).ready(function () {
    $('#exampleModal').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);
                var recipient = button.data('whatever');
                var modal = $(this);
                modal.find('.modal-title').text('New message to ' + recipient);
                modal.find('.modal-body input').val(recipient);

                var h = document.getElementById("hh");
                modal.find('.modal-body h1').text(recipient);
            }) 
        })
    
    </script>

<div>
            <asp:Repeater ID="myRepeater" runat="server">
                <HeaderTemplate>
                    <div style="font-weight: bold;">My Repeater</div>
                </HeaderTemplate>
                <ItemTemplate>
                    <div>
                        <asp:Button ID="Button1"  class="btn" data-toggle="modal" data-target="#exampleModal" runat="server" data-whatever="<%# Container.DataItem %>" Text="<%# Container.DataItem %>" />
                    </div>
                     <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">New message</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                      <div class="modal-body">
                            <label for="in"></label>
                            <input  id="in"/>
                            <h1 id="hh"></h1>
                        </div> 

                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
                </ItemTemplate>
            </asp:Repeater>
        </div>

        protected void Page_Load(object sender, EventArgs e)
        {
            List<string> myList = new List<string>();
            myList.Add("Test1");
            myList.Add("Test2");
            myList.Add("Test3");
            myRepeater.DataSource = myList;
            myRepeater.DataBind();
         }

You can aslo achieve the requirement with solution2, put html of modal outside repeater.

Solution2:

<link href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/jquery-3.2.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <script>
        $(document).ready(function () {
     var myBytton = document.getElementById("ss");
            var x = $(".ss");
            var span = document.getElementsByClassName("end")[0];
            $(".ss").click(function () {
                popup.style.display = "block";
            })
         
        })
        function Show(button) {
            event.preventDefault();
            var x = $(button).val();
            $("[id*=test]").html(x);
        }
    </script> 

<div>
            <asp:Repeater ID="myRepeater" runat="server">
                <HeaderTemplate>
                    <div style="font-weight: bold;">My Repeater</div>
                </HeaderTemplate>
                <ItemTemplate>
                    <div>
                        <asp:Button ID="Button1" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" runat="server" Text="<%# Container.DataItem %>" OnClientClick="Show(this)" />
                    </div>
                </ItemTemplate>
            </asp:Repeater>

            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">New message</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <asp:Label ID="test" runat="server" Text=""></asp:Label>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Test Result:

Best Regards,

 

Brando

Answer 5

User-2006371901 posted

I'm confused: how is myButton being called?

$(document).ready(function () {
     var myBytton = document.getElementById("ss");
            var x = $(".ss");
            var span = document.getElementsByClassName("end")[0];
            $(".ss").click(function () {
                popup.style.display = "block";
            })
         
        })
        function Show(button) {
            event.preventDefault();
            var x = $(button).val();
            $("[id*=test]").html(x);
        }

Answer 6

User283571144 posted

Hi Norkle,

 I am very sorry to bring you trouble. Instead of using document.getElementById in the above code, the OnClientClick method is called in the button. Use the bootstrap modal popup to bind the data-toggle and data-target properties on the button and add a click event to it with js.

function Show(button) {
            event.preventDefault();
            var x = $(button).val();
            $("[id*=test]").html(x);
        }

 <asp:Repeater ID="myRepeater" runat="server">
                <HeaderTemplate>
                    <div style="font-weight: bold;">My Repeater</div>
                </HeaderTemplate>
                <ItemTemplate>
                    <div>
                        <asp:Button ID="ss" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" runat="server" Text="<%# Container.DataItem %>" OnClientClick="Show(this)" />
                    </div>
                </ItemTemplate>
            </asp:Repeater> 
 

Best Regards,

Brando