jquery - Multiple popups inside repeater -
jquery - Multiple popups inside repeater -
i creating mobile site have list of pictorials of motorcycle models. created list each image list-item , added div data-rel="popup" within list-item. compiles , functions correctly, image click in list shows first image. i.e., when 3rd list-item in list clicked , popup opened, image #1 displayed. true every link in list.
do know why doing this? know can go around creating jquery page , redirect that, it's much cleaner having popup , i'm curious how right image display, or if i'm overlooking something?
all images , info stored in sql server database
here 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" />   <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 test_models_image modelid = @modelid , pictorialnumber = @pictorialnumber order 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 rendered html: *the jquery @ top part of add-on i'm working on navigating 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&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 { homecoming 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&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;" />   <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;" />   <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;" />   <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;" />   <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>
instead of creating multiple popups serve same purpose, can create 1 global popup , update its' content based on clicked listview item.
give listview items class , attach event listener on pagecrate of page.
<li> <a href="#" class="thumb"> <input type="image" src="img.jpg"/> </a> </li> create popup within page div.
<div id="mypopup" data-role="popup" data-overlay-theme="b" data-transition="fade" data-shadow="false" data-theme="a"> </div> once listview item received event, retrieve popup, listview item , image src. insert retrieved image popup , open 1 time image loaded ensure popup positioned listview item.
$(document).on("pagecreate", "#pageid", function () { /* attach event listener */ $(".thumb").on("click", function (e) { /* retrieve info */ var popup = $("#mypopup"), elm = $(this), img = $("input", elm).attr("src"); /* insert img popup , open */ popup.html($("<img/>", { src: img }).one("load", function (e) { popup.popup("open", { positionto: elm }); })); }); }); demo
jquery html asp.net jquery-mobile repeater
Comments
Post a Comment