Multiple popups inside repeater

2019-04-15 07:14发布

站内问答 / jQuery
558 1 5

I am creating a mobile site where I have a list of pictorials of motorcycle models. I created the list with each image as a list-item and also added a div with the data-rel="popup" inside the list-item. Everything compiles and functions correctly, but any image I click in the list only shows the first image. I.e., when the 3rd list-item in the list is clicked and the popup is opened, image #1 is displayed. This is also true for every link in the list.

Do you know why it is doing this? I know I can go around this by creating another jquery page and just redirect to that, but it's much cleaner having the popup and I'm curious how to get the correct image to display, or if I'm overlooking something?

All the images and data are stored in a sql server database

Here is the code:

<div data-role="content">
    <div id="SelectedPictorialDiv" runat="server">
        <ul data-role="listview" id="SelectedPictorialList">
            <asp:Repeater ID="SelectedPictorialRepeater" runat="server" DataSourceID="SelectedPictorialSqlDataSource"> 
                <ItemTemplate>
                    <li>
                        <a href="#SinglePicturePopup" data-rel="popup"> 
                            <asp:ImageButton ID="SelectedImageImageButton" runat="server" ImageURL='<%# Eval("ImageURL") %>' Width="75px" />
                            &nbsp&nbsp;<asp:Label ID="SelectedImageNumberLabel" runat="server" Text='<%# Eval("ImageNumber") %>'></asp:Label>
                            <asp:HiddenField ID="SelectedImagePictorialNumberHiddenField" runat="server" Value='<%# Eval("PictorialNumber") %>' />
                        </a>
                        <div id="SinglePicturePopup" data-role="popup" data-overlay-theme="b" data-transition="fade" data-shadow="false" data-theme="a">
                            <asp:Image ID="PopupImage" runat="server" ImageUrl='<%# Eval("ImageURL") %>' Width="100%" />
                        </div>
                    </li>
                </ItemTemplate>
            </asp:Repeater>
        </ul>
        <asp:SqlDataSource ID="SelectedPictorialSqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:KgIndex %>" 
            SelectCommand="SELECT ModelID, ImageURL, ImageNumber, PictorialNumber FROM Test_Models_Image WHERE ModelID = @modelID AND PictorialNumber = @pictorialNumber ORDER BY ImageNumber" >
            <SelectParameters>
                <asp:QueryStringParameter Name="modelID" QueryStringField="ModelID" Type="String" Direction="Input" />
                <asp:QueryStringParameter Name="pictorialNumber" QueryStringField="Pictorial" Type="String" Direction="Input" />
            </SelectParameters>
        </asp:SqlDataSource>
    </div>
</div>

Here is the rendered HTML: *the jquery at the top is part of an addition that I'm working on for navigating the list based on name

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title>


    <!--STANDARD JQUERY-->
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" /><link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" /><link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine" /><link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine&amp;effect=shadow-multiple|3d-float" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="JQuery/jquery-ui.js"></script>
    <script src="JQuery/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="JQuery/jquery-ui.css" /><link rel="stylesheet" href="JQuery/jquery-ui.min.css" /><link rel="stylesheet" href="JQuery/jquery-ui.theme-smooth.css" /><link rel="stylesheet" href="JQuery/jquery-ui.theme.min-smooth.css" />




    <!--JQUERY MOBILE-->
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1" /><link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-1.4.3.min.css" />
    <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/[version]/jquery.mobile-1.4.3.min.js"></script>

    <script type="text/javascript">
        $.mobile.document.on("pagecreate", "#MainPage", function () {
            var head = $(".ui-page-active [data-role='header']");
            $.mobile.document.on("click", "#sorter li", function () {
                var top,
                    letter = $(this).text(),
                    divider = $("#sortedList").find("li.ui-li-divider:contains(" + letter + ")");
                if (divider.length > 0) {
                    top = divider.offset().top;
                    $.mobile.silentScroll(top);
                } else {
                    return false;
                }
            });
            $("#sorter li").hover(function () {
                $(this).addClass("ui-btn").removeClass("ui-li-static");
            }, function () {
                $(this).removeClass("ui-btn").addClass("ui-li-static");
            });
        });
        $(function () {
            $.mobile.window.on("scroll", function (e) {
                var headTop = $(window).scrollTop(),
                    foot = $(".ui-page-active [data-role='footer']"),
                    head = $(".ui-page-active [data-role='header']"),
                    headerheight = head.outerHeight();
                if (headTop < headerheight && headTop > 0) {
                    $("#sorter").css({
                        "top": headerheight + 15 - headTop,
                        "height": window.innerHeight - head[0].offsetHeight + window.pageYOffset - 10
                    });
                    $("#sorter li").height("3.7%");
                } else if (headTop >= headerheight && headTop > 0 && parseInt(headTop +
                    $.mobile.window.height()) < parseInt(foot.offset().top)) {
                    $("#sorter").css({
                        "top": "15px",
                        "height": window.innerHeight - 8
                    });
                    $("#sorter li").height("3.7%");
                } else if (parseInt(headTop + window.innerHeight) >= parseInt(foot.offset().top) &&
                    parseInt(headTop + window.innerHeight) <= parseInt(foot.offset().top) +
                    foot.height()) {
                    $("#sorter").css({
                        "top": "15px",
                        "height": window.innerHeight - (parseInt(headTop + window.innerHeight) -
                            parseInt(foot.offset().top) + 8)
                    });
                } else if (parseInt(headTop + window.innerHeight) >= parseInt(foot.offset().top)) {
                    $("#sorter").css({
                        "top": "15px"
                    });
                } else {
                    $("#sorter").css("top", headerheight + 15);
                }
            });
        });
        $.mobile.window.on("throttledresize", function () {
            $("#sorter").height(window.innerHeight - headerheight - 20).css("top", headerheight + 18);
        });
        $.mobile.document.on("pageshow", "#MainPage", function () {
            var headerheight = $(".ui-page-active [data-role='header']").outerHeight();
            $("#sorter").height(window.innerHeight - headerheight - 20).css("top", headerheight + 18);
        });
    </script>

</head>
<body style="height: 100%">
    <form method="post" action="MViewSinglePictorial.aspx?ModelID=54&amp;Pictorial=1" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="NtunFH788MQGLcGyEh8HoEOdwbObwbacfVa/s8udGTFe/UkrCRJNxrRKCnBmeHyR6D35FD/Hva0TbXOMtMY4AoPO7qph/zkehvgprXlu9PO7V9/p4kjdfu/H+D9cxJTr9HRL4a+IYOQyWlyM5u/h8yUB+NmNevjV79ocimb7ZPhu+rHb/v5j8+G20jr+qWuL0HJ1KPeEIwT61PWdL+unaFxg0iDBv4yKpJRBt6XZ4w7je7/HQrW1idea3rrUyP3RRpNdQVgg6rkEQXfzDg1w2FApc5la9MLVmxN5Z54NUxxervspKMIZFQGZ155yxlFRn4HPCJ11XcgjeG8r2nXKT2ybhjip32pSNDBRQpGqL4uoHTix6RJWxGXJQtg3ssK22TX+8AB9YUNCKa7SCYJzuCDl8Ri3n5A3yQRyYVi4O6K2TmRBgesR8oBNtLVthcPb8lmcsm4kQkJsiXoam8hC3O7CKQmhRcSuq7GkWEaJCKg/7jYHUOezcUv5g4KYk7U2Mcp/YUcO+g6B7MMWiYBMLn944h6EVEoPtUBWLd36sY1V7RtfWo5KgeXARKZwA5o5RKTCSkDSBlwRu6frjCNL+11iKY+VKEIMQtDkgeo03eR2xGo1G7MaLfOrrhCDocE0g4zSNVU6AXXI8m7jFC+ca6Rd51b34TAojyC54iYN5g0Qvo6VPKgXqrDOjEBj3wiB4oF3V/HI0JL6K2+BKQ3C35SihGtNbLr5swq+EkYvNDeDvj8KaS0GNe8wigGzcGChtfrMg7Y5W799xPFIb8hhSToU4czDz69PslwFhLRDyQV02QP+vg+ZWhnWbKaOO+M25BNBRu1OlYPgLzQjRZtPyPkJqBKeX77FQn7MSho+8oKdKwPsnLdDOJ+YsRKWvX1Rx0Fz7mOJVtTEbKu0ro2miAR1M1xzpYMUZAYzM7hr0Jzo+0c4gszyePavEj5cfIotOQ75Qecd2CgHgMum/s7m2VcI30dszd2JsunKv1YEWzN0GT61lAjd+rcn7O3DfI3oEqurABKpiE+R4kfwuBVk7wmxpMTtMKuowVOXVck0MCCaGVt0WzUGiSHLzUbXm0l2PhQt9rUGnyJ3hCnq2oCOtXhgqSMBslfYa8dUzx/VY93vDVkh+3jhKOfDhCAUg6+6l06nybh07E/W2mHYicCEQplwyojMecYywXsAFuh8p8jDXlqdQWKvwhObc1PLTOwgqfo6kbbdhAWSVMTYJzIoxIh3Up/G3Tb9rzZumHlczVhWh3NKsd3uRx6tH9XDnURspHzkSoq+PTpEwQ7yOvieA4wGfWojv/ti6OQ4iZlGGRm9/IV7/oyTLQIVoOszz6g0rQmGxaB8CzIaqu8x/uLxXWh+EqBEqy+njoV+UcDUjs9UgV7lmJGUKMT0Fu6fwCZZHwaaJWyPXr/+UTwIT8h/ZCFAg4Et5ErRUKRdZjh78FUIEuE0Kam0ovpwgkGtQ+aWGQAp18dgs8ofwcODrN1ULELf/AonI05kZT0Ucg9L1bdsiSoaMXP9g+PwUWRpproGafMMytF/fSvbESmcFt+GJw2lgfPFgaEZe1uR8A3PgSSmtLNqmi+0szL39ob2U67qdqWbtsU2HoBTqaf2WWsjf1mdQpUsZFPhTVRB9KiZosWoKXyChuhjEzkdWoH/PgjYN+0lRPhTZL4mteJpAfqGvA==" />
</div>


    <script type="text/javascript">
        function ViewSingleImage(selectedDetails) {
            //array[0] = image number
            //array[1] = pictorialNumber
            //array[2] = modelID
            var array = selectedDetails.split(',');
            window.location.href = "MViewSinglePicture.aspx?ModelID=" + array[2] + "&pictorial=" + array[1] + "&image=" + array[0];
        }

        function Redirect(location) {
            if (location == "Dashboard") {
                window.location.href = "MDashboard.aspx";
            }
            else if (location == "Models") {
                window.location.href = "MViewModels.aspx";
            }
        }
    </script>
    <div id="MainContent_MainPage" data-role="page" data-url="MainPage" style="height: 100%" data-theme="a">
        <div data-role="header" data-theme="b" data-position="fixed">
            <div data-role="navbar" class="ui-icon-heart" data-grid="b">
            <ul>
                <li><a id="HomeA" class="ui-icon-home" onclick="Redirect('Dashboard');" data-icon="custom"></a></li>
                <li><a id="ModelsA" class="ui-icon-bullets" onclick="Redirect('Models');" data-icon="custom"></a></li>
                <li><a id="SearchModelsA" class="ui-icon-search" onclick="Redirect('Models');" data-icon="custom"></a></li>
            </ul>
            </div>
        </div>
        <div data-role="main" class="ui-content">
            <div data-role="body">
                <p>Images</p>

                <div data-role="content">
                    <div id="MainContent_SelectedPictorialDiv">
                        <ul data-role="listview" id="SelectedPictorialList">

                                    <li>
                                        <a href="#SinglePicturePopup" data-rel="popup">
                                            <input type="image" name="ctl00$MainContent$SelectedPictorialRepeater$ctl00$SelectedImageImageButton" id="MainContent_SelectedPictorialRepeater_SelectedImageImageButton_0" src="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/2vhvt3n.jpg" style="width:75px;" />
                                            &nbsp&nbsp;<span id="MainContent_SelectedPictorialRepeater_SelectedImageNumberLabel_0">1</span>
                                            <input type="hidden" name="ctl00$MainContent$SelectedPictorialRepeater$ctl00$SelectedImageURLHiddenField" id="MainContent_SelectedPictorialRepeater_SelectedImageURLHiddenField_0" value="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/2vhvt3n.jpg" />
                                            <input type="hidden" name="ctl00$MainContent$SelectedPictorialRepeater$ctl00$SelectedImagePictorialNumberHiddenField" id="MainContent_SelectedPictorialRepeater_SelectedImagePictorialNumberHiddenField_0" value="1" />
                                        </a>
                                        <div id="SinglePicturePopup" data-role="popup" data-overlay-theme="b" data-transition="fade" data-shadow="false" data-theme="a">
                                            <img id="MainContent_SelectedPictorialRepeater_PopupSingleImage_0" src="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/2vhvt3n.jpg" style="width:200px;" />
                                        </div>
                                    </li>

                                    <li>
                                        <a href="#SinglePicturePopup" data-rel="popup">
                                            <input type="image" name="ctl00$MainContent$SelectedPictorialRepeater$ctl01$SelectedImageImageButton" id="MainContent_SelectedPictorialRepeater_SelectedImageImageButton_1" src="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/Mladin-leads-Fontana-1.jpg" style="width:75px;" />
                                            &nbsp&nbsp;<span id="MainContent_SelectedPictorialRepeater_SelectedImageNumberLabel_1">2</span>
                                            <input type="hidden" name="ctl00$MainContent$SelectedPictorialRepeater$ctl01$SelectedImageURLHiddenField" id="MainContent_SelectedPictorialRepeater_SelectedImageURLHiddenField_1" value="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/Mladin-leads-Fontana-1.jpg" />
                                            <input type="hidden" name="ctl00$MainContent$SelectedPictorialRepeater$ctl01$SelectedImagePictorialNumberHiddenField" id="MainContent_SelectedPictorialRepeater_SelectedImagePictorialNumberHiddenField_1" value="1" />
                                        </a>
                                        <div id="SinglePicturePopup" data-role="popup" data-overlay-theme="b" data-transition="fade" data-shadow="false" data-theme="a">
                                            <img id="MainContent_SelectedPictorialRepeater_PopupSingleImage_1" src="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/Mladin-leads-Fontana-1.jpg" style="width:200px;" />
                                        </div>
                                    </li>

                                    <li>
                                        <a href="#SinglePicturePopup" data-rel="popup">
                                            <input type="image" name="ctl00$MainContent$SelectedPictorialRepeater$ctl02$SelectedImageImageButton" id="MainContent_SelectedPictorialRepeater_SelectedImageImageButton_2" src="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/Nissan_Rogue_Towing_Motorcycle_Trailer.jpg" style="width:75px;" />
                                            &nbsp&nbsp;<span id="MainContent_SelectedPictorialRepeater_SelectedImageNumberLabel_2">3</span>
                                            <input type="hidden" name="ctl00$MainContent$SelectedPictorialRepeater$ctl02$SelectedImageURLHiddenField" id="MainContent_SelectedPictorialRepeater_SelectedImageURLHiddenField_2" value="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/Nissan_Rogue_Towing_Motorcycle_Trailer.jpg" />
                                            <input type="hidden" name="ctl00$MainContent$SelectedPictorialRepeater$ctl02$SelectedImagePictorialNumberHiddenField" id="MainContent_SelectedPictorialRepeater_SelectedImagePictorialNumberHiddenField_2" value="1" />
                                        </a>
                                        <div id="SinglePicturePopup" data-role="popup" data-overlay-theme="b" data-transition="fade" data-shadow="false" data-theme="a">
                                            <img id="MainContent_SelectedPictorialRepeater_PopupSingleImage_2" src="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/Nissan_Rogue_Towing_Motorcycle_Trailer.jpg" style="width:200px;" />
                                        </div>
                                    </li>

                                    <li>
                                        <a href="#SinglePicturePopup" data-rel="popup">
                                            <input type="image" name="ctl00$MainContent$SelectedPictorialRepeater$ctl03$SelectedImageImageButton" id="MainContent_SelectedPictorialRepeater_SelectedImageImageButton_3" src="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/bmw.jpg" style="width:75px;" />
                                            &nbsp&nbsp;<span id="MainContent_SelectedPictorialRepeater_SelectedImageNumberLabel_3">4</span>
                                            <input type="hidden" name="ctl00$MainContent$SelectedPictorialRepeater$ctl03$SelectedImageURLHiddenField" id="MainContent_SelectedPictorialRepeater_SelectedImageURLHiddenField_3" value="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/bmw.jpg" />
                                            <input type="hidden" name="ctl00$MainContent$SelectedPictorialRepeater$ctl03$SelectedImagePictorialNumberHiddenField" id="MainContent_SelectedPictorialRepeater_SelectedImagePictorialNumberHiddenField_3" value="1" />
                                        </a>
                                        <div id="SinglePicturePopup" data-role="popup" data-overlay-theme="b" data-transition="fade" data-shadow="false" data-theme="a">
                                            <img id="MainContent_SelectedPictorialRepeater_PopupSingleImage_3" src="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/bmw.jpg" style="width:200px;" />
                                        </div>
                                    </li>

                        </ul>


                        <span id="MainContent_SelectedPictorialLabel"></span>
                        <input type="hidden" name="ctl00$MainContent$ModelIDHiddenField" id="MainContent_ModelIDHiddenField" />
                        <input type="hidden" name="ctl00$MainContent$SelectedPictorialHiddenField" id="MainContent_SelectedPictorialHiddenField" />
                    </div>
                </div>
            </div>
        </div>
    </div>


<div class="aspNetHidden">

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="rcVSDhHOh/VCV4xvZW1xySlgIk+aKBCHWnqXQ/hbRyJ3Q+19pQPrrjB8bdWGFG8Os0xdxZMZQZINDmkHDm1+4DTPwLkjXqC+3lHpYvBzjNOAZSPI9ZLjeK7GpS/Qqwlzw+yGLFoO7IPk2hVzdFndH4en1nBGJuB3fF5+/jPr8dUi7oHYnloqnnYr1bmoqJMyYqf/iAf4gr9vfMA4L7LhvOqOMx/MaTeuTZDXFwjkROfwODzrE3fNaT8UCGvRPeRtR6z1xhfSzsZX6/YrPxrfP8pAzqmM/WcxvQvjwgS9G+VPdoByMI1vbqLLRgmT2C0T4HrkHC54DZCHQuIy3NqZB8woDZP5pe2jjOJF44LeTwngdosmRqjwIsN1QMXoFh24fi3TVmnXm3jHyJCmRa51wA==" />
</div></form>

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome","requestId":"c17b133f1b354c05bd3175a66999aee5"}
</script>
<script type="text/javascript" src="http://localhost:54681/00b84f193a774765ab59c6705f4e8d6b/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

1条回答
乱世女痞
2楼-- · 2019-04-15 08:09

Instead of creating multiple popups to serve the same purpose, you can simply create one global popup and update its' content based on clicked listview item.

Give all listview items a class and attach an event listener on pagecrate of the page.

<li>
   <a href="#" class="thumb">
      <input type="image" src="img.jpg"/>
   </a>
</li>

Create a popup inside page div.

<div id="myPopup" data-role="popup" data-overlay-theme="b" data-transition="fade" data-shadow="false" data-theme="a">
</div>

Once a listview item received an event, retrieve popup, listview item and image src. Insert the retrieved image into the popup and then open it once image is loaded to ensure that the popup is positioned to the listview item.

$(document).on("pagecreate", "#pageID", function () {
    /* attach event listener */
    $(".thumb").on("click", function (e) {
        /* retrieve data */
        var popup = $("#myPopup"),
            elm = $(this),
            img = $("input", elm).attr("src");
        /* insert img into popup and the open it */
        popup.html($("<img/>", {
            src: img
        }).one("load", function (e) {
            popup.popup("open", {
                positionTo: elm
            });
        }));

    });
});

Demo

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)