We are excited to announce that the ASP.NET Forums are moving to the new Microsoft Q&A experience. Learn more >
Issues with modal popup , document.getElementsByClassName length property
6 replies
Last post Nov 07, 2019 06:52 AM by Brando ZWZ
Last post Nov 07, 2019 06:52 AM by Brando ZWZ
Member
29 Points
162 Posts
Issues with modal popup , document.getElementsByClassName length property
Oct 29, 2019 03:58 PM|Norkle|LINK
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
All-Star
53661 Points
24018 Posts
Re: Issues with modal popup , document.getElementsByClassName length property
Oct 29, 2019 06:21 PM|mgebhard|LINK
I'm guessing the markup is invalid because there are many duplicate Ids. jQuery will find the first Id as Ids should be unique.
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
Member
29 Points
162 Posts
Re: Issues with modal popup , document.getElementsByClassName length property
Oct 30, 2019 03:26 PM|Norkle|LINK
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">×</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
All-Star
53661 Points
24018 Posts
Re: Issues with modal popup , document.getElementsByClassName length property
Oct 30, 2019 04:03 PM|mgebhard|LINK
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.
Star
9831 Points
3120 Posts
Re: Issues with modal popup , document.getElementsByClassName length property
Oct 31, 2019 09:54 AM|Brando ZWZ|LINK
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">×</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">×</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:
<div>Best Regards,</div> <div> </div> <div>Brando</div>Member
29 Points
162 Posts
Re: Issues with modal popup , document.getElementsByClassName length property
Nov 05, 2019 03:57 PM|Norkle|LINK
I'm confused: how is myButton being called?
Star
9831 Points
3120 Posts
Re: Issues with modal popup , document.getElementsByClassName length property
Nov 07, 2019 06:52 AM|Brando ZWZ|LINK
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