誰かが郵便番号と郵便番号からの距離をマイルで入力したときに取得される住所のリストがあります。
戻されたリストは、次のコードを使用して垂直スクロール リストに表示されます。
$(".upHide").hide();
// get the number of .child elements
var totalitems;
var currentscrollval;
totalitems = $(".addressscroll .storeLi").length;
if (totalitems >= 2) {
$(".downHide").show();
}
// get the height of .w6392597
var scrollval = $('.storeLi').height();
// work out the total height.
var totalheight = (totalitems * scrollval) - ($(".addressscroll").height());
$(document).on("click", ".downHide", function () {
currentscrollval = $('.addressscroll').scrollTop();
alert("totalitems " + totalitems);
alert("scrollval " + scrollval);
alert("currentscrollval " + currentscrollval);
alert("totalheight " + totalheight);
$('.addressscroll').scrollTop(scrollval + currentscrollval);
// hide/show buttons
if (currentscrollval == totalheight) {
$(this).hide();
}
else {
$(".upHide").show();
}
}); $(document).on("click", ".upHide", function () {
var currentscrollval = parseInt($('.addressscroll').scrollTop());
$('.addressscroll').scrollTop(currentscrollval - scrollval);
// hide/show buttons
if ((scrollval + currentscrollval) == scrollval) {
$(this).hide();
}
else {
$(".downHide").show();
}
});
htmlで：
<div class="divAddress" style="display: block;">
<div id="up">
<img class="upHide" alt="top" src="http://static.e-talemedia.net/content/images/moreup.png" style="display: inline;">
</div>
<div class="addressscroll">
<ul id="locatorScroll">
<li class="storeLi">
<div class="singleadddress">
<p class="storeNameP">1 Hi Spek</p>
<p class="storeP">
<p class="linksP">
</div>
</li>
<li class="storeLi">
<div class="singleadddress">
<p class="storeNameP">2 A L Young</p>
<p class="storeP">
<p class="linksP">
</div>
</li>
..MORE LIST ITEMS HERE
</ul>
</div>
<div id="down">
</div>
</div>
そして、これはすべてうまくいきます。
ただし、リストを下にスクロールして距離をマイル単位で変更すると、新しいリストが返されますが (AJAN と JSON を使用してリストを取得しています)、totalItems と CurrentScrollVal は値を保持しているようです。したがって、最初のラウンドでアラートを配置した場所には、アラートが次のように表示されます（6回クリック）：
合計アイテム数 8 8 8 8 8 8
スクロールバー 130 130 130 130 130 130
currentscrollval 130 260 390 520 650 778
全高 778 778 778 778 778 778
しかし、2 回目のラウンドでは、リストが順番に表示されないため、リストの途中にある可能性があり、(1 回クリックすると) アラートが表示されます。
totalItems 8
scrollval 130
currentscrollval 130
totalheight 778
totalItems 31
scrollval 130
currentscrollval 350
totalheight 3768
そのため、最初に最初のリストから値を入力し、次に戻された 2 番目のリストから値を入力して、アラートを 2 回通過します。
これがもたらす効果は、リストが一番上から始まらず、リスト内の項目を見落としているように見えるため、要素をスクロールしてそこにないときに要素を検査すると3番目のリスト項目が表示されるにもかかわらずです。
完全なコードの詳細を編集します。
<div class="maps">
<div class="divOuter">
<div class="divLocator">
<div class="topSection">
<div class="topSectionLeft">
<p class="storeP">
Please enter your Postcode
<input id="enterPostCode" type="text" /></p>
</div>
<div class="topSectionRight">
<p class="storeP">
Distance from your location
<select id="distanceMiles" name="distanceMilesChange">
<option value=""></option>
<option value="5">5 miles</option>
<option value="10">10 miles</option>
<option value="15">15 miles</option>
<option value="20">20 miles</option>
</select>
<input id="enterMiles" type="hidden" /></p>
</div>
<div id="hiddenPostMsg">
Please enter your postcode and then select a distance</div>
</div>
<div class="upgradeTab">
</div>
<div class="divMapsArea">
<div class="googleMaps">
<!-- Displays the Google Map which was defined in the initialize script above, and defines the map size on the screen -->
<div id="gmap_canvas">
</div>
</div>
<div class="divAddress">
<div id="up">
<img class="upHide" src="http://static.e-talemedia.net/content/images/moreup.png"
alt="top" /></div>
<div class="addressscroll">
<ul id="locatorScroll">
</ul>
</div>
<div id="down">
<img class="downHide" src="http://static.e-talemedia.net/content/images/moredown.png"
alt="top" /></div>
</div>
<div id="loading" style="display: none">
<img src="http://static.e-talemedia.net/content/images/ajax_loader_large.gif" alt="Loader" /><p>
Loading...</p>
</div>
</div>
</div>
</div>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCHqhrDdmkEFuDv55BeCK7nFkfYGdYSW20&sensor=false">
</script>
<script type="text/javascript">
//<![CDATA[
//if the postcode input field is clicked on the dropdown should clear
$("#enterPostCode").click(function () {
$("#distanceMiles").find('option:first').attr('selected', 'selected');
});
$("#hiddenPostMsg ").hide();
$(".divAddress").hide();
var map;
//set up the markers array so that we can clear them
var markers = [];
// Deletes all markers in the array by removing references to them.
function clearMarkers() {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
markers.length = 0;
};
function initialize() {
var zoomGrade = 10;
//create the google map
var mapProp = {
center: new google.maps.LatLng(51.694031, 0.04505),
zoom: zoomGrade,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("gmap_canvas"), mapProp);
//for some reason .change was firing twice and with the unbind it meant it only fired once
$('#distanceMiles').unbind();
$("#distanceMiles").change(function () {
//clear the old markers if there are any
clearMarkers();
$(".divAddress").hide();
$(".addressscroll ul").html('');
$("#distanceMiles option:selected").each(function () {
var manufacturerId = 109;
var postcodeEntered = $("#enterPostCode").val();
var milesEntered = $(this).val();
if (postcodeEntered != "" && milesEntered != "") {
$("#hiddenPostMsg ").hide();
var theUrl = "/Widgets/GetPostcodes/" + manufacturerId + "/" + postcodeEntered + "/" + milesEntered;
$.ajax({
type: "POST",
//contentType: "application/json; charset=utf-8",
url: theUrl,
data: { 'manufacturerId': manufacturerId, 'postcodeEntered': postcodeEntered, 'milesEntered': milesEntered },
dataType: "json",
success: function (data) {
for (var i = 0; i < data.length; i++) {
var item = data[i];
//the count goes next to the retailer so we know which marker is for which
var count = i + 1;
//to custom the markers i need to use the number we are on (i)
var iconurl = "https://where-to-buy.co/content/images/marker" + count + ".png";
//Sets the initial map location (latitude, longitude) in decimal degree format, and the zoom level (1 is zoomed out - 21 is farthest zoom in)
map.setZoom(item.ZoomLevel);
map.setCenter(new google.maps.LatLng(item.OriginalLat, item.OriginalLong));
//Close bracket to end the function named initialize !!!very important to not delete this!!!
//javascript that sets up variables that enable the map to draw a custom icon.
var marker = new google.maps.Marker({
position: new google.maps.LatLng(item.StoreLat, item.StoreLong),
icon: iconurl,
map: map
});
marker.setMap(map);
//put into an array so that they clear
markers.push(marker);
//End of add marker code
var showDistance = item.Distance.toFixed(2);
//now i need to create a list that will display on the right hand side inside .addressscroll
$(".addressscroll ul").append("<li class =\"storeLi\"><div class=singleadddress><p class=\"storeNameP\">" + count + " " + item.StoreName + "</p><p class=\"storeP\">" + item.Address1 + "<br/>" + item.TownCity + " " + item.Postcode + "<br/>" + item.Telephone + "<br/>" + showDistance + " miles</p><p class =\"linksP\" ><a class =\"storeA\" href = \"https://www.google.com/maps?q=" + item.MapsPostcode + "\" target=\"_blank\" >Display Map | </a><a class =\"storeA\" href = \"https://maps.google.co.uk/maps?f=d&hl=en&geocode=&saddr=" + item.OriginalMapsPostcode + "&daddr=" + item.MapsPostcode + "\" target=\"_blank\" >Display Route</a></p></div></li> ");
//Creates a directions object and registers a map and DIV to hold the resulting computed directions
// var directionsPanel;
// var directions;
// directionsPanel = document.getElementById("my_directions_div");
// directions = new GDirections(gmap, directionsPanel);
// //Specify the FROM and TO for your directions: postcode to postcode
// directions.load("from: "+ item.OriginalPostcode +", to: "+ item.Postcode + "");
}
$(".divAddress").show();
$(".upHide").hide();
// get the number of .child elements
var totalitems;
var currentscrollval;
totalitems = $(".addressscroll .storeLi").length;
if (totalitems >= 2) {
$(".downHide").show();
}
// get the height of .w6392597
var scrollval = $('.storeLi').height();
// work out the total height.
var totalheight = (totalitems * scrollval) - ($(".addressscroll").height());
$(document).on("click", ".downHide", function () {
currentscrollval = $('.addressscroll').scrollTop();
// alert("totalitems " + totalitems);
// alert("scrollval " + scrollval);
// alert("currentscrollval " + currentscrollval);
// alert("totalheight " + totalheight);
$('.addressscroll').scrollTop(scrollval + currentscrollval);
// hide/show buttons
if (currentscrollval == totalheight) {
$(this).hide();
}
else {
$(".upHide").show();
}
}); $(document).on("click", ".upHide", function () {
var currentscrollval = parseInt($('.addressscroll').scrollTop());
$('.addressscroll').scrollTop(currentscrollval - scrollval);
// hide/show buttons
if ((scrollval + currentscrollval) == scrollval) {
$(this).hide();
}
else {
$(".downHide").show();
}
});
if (totalitems == 0) {
$(".downHide").hide();
$("#hiddenPostMsg ").show();
$("#hiddenPostMsg ").text("Invalid Postcode. Please try again");
}
}
});
}
else if (postcodeEntered == "") {
//here i want to clear the dropdown aswel
$("#hiddenPostMsg ").show();
$("#hiddenPostMsg ").text("Please enter your postcode and then select a distance");
$("#distanceMiles").find('option:first').attr('selected', 'selected');
}
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.trigger(map, 'resize');
</script>
<!-- Signals to the browser that a section of javascript follows, and to read accordingly -->
<script type="text/javascript">
//<![CDATA[
// Bind my loading div to the ajax send and complete functions
$().ready(function () {
$("#loading").bind("ajaxSend", function () {
$(this).show();
}).bind("ajaxComplete", function () {
$(this).hide();
});
});
//]]>
</script>
<!-- Signals to the browser that a section of javascript follows, and to read accordingly -->
<script type="text/javascript">
//<![CDATA[
// Bind my loading div to the ajax send and complete functions
$().ready(function () {
$("#loading").bind("ajaxSend", function () {
$(this).show();
}).bind("ajaxComplete", function () {
$(this).hide();
});
});
//]]>
</script>
<!-- Signals to the browser that a section of javascript follows, and to read accordingly -->
<%-- <%= Html.GoogleMapsScriptsReturnPostcodeData(Model)%>--%>
</div>
このページが行っていること: ユーザーが郵便番号を入力し、ドロップダウン リストからマイル単位の距離を選択します。ユーザーが距離を選択すると、jquery が起動し、AJAX を介してコントローラー (MVC3) に情報を送信して、 JSON オブジェクトは、郵便番号から特定の距離にある住所のリストです。
これは、ユーザーがリストを下にスクロールし、ドロップダウン リストから新しい距離を選択するまで、すべて正常に機能します。これが発生すると、アドレスのリストが表示されません。これは、上記で説明した問題が発生したときです。 （これがもっと理にかなっているといいのですが）
編集 2
私が本当にやりたいことは、この呼び出しで次のことを確認することです。
$("#distanceMiles").change(function () {
特に totalItems と currentscrollval の場合、以前の値は残りません
編集 3
コードの一部を見ていたと思いますが、コードを置き換えるのではなく追加しているためだと思います。
$(".addressscroll ul").replace("<li class =\"storeLi\"><div class=singleadddress><p class=\"storeNameP\">" + count + " " + item.StoreName + "</p><p class=\"storeP\">" + item.Address1 + "<br/>" + item.TownCity + " " + item.Postcode + "<br/>" + item.Telephone + "<br/>" + showDistance + " miles</p><p class =\"linksP\" ><a class =\"storeA\" href = \"https://www.google.com/maps?q=" + item.MapsPostcode + "\" target=\"_blank\" >Display Map | </a><a class =\"storeA\" href = \"https://maps.google.co.uk/maps?f=d&hl=en&geocode=&saddr=" + item.OriginalMapsPostcode + "&daddr=" + item.MapsPostcode + "\" target=\"_blank\" >Display Route</a></p></div></li> ");
したがって、存在するかどうかを確認する方法を理解する必要があります。存在する場合は追加する必要があり、置き換える必要があります。
編集 4
私が追加したように、それが問題であったかどうかは実際にはわかりません
$("#distanceMiles").change(function () {
//I want to remove the list if there is one
//check if storeLi exist if it does replace if not append
if ($(".storeLi").length > 0) {
$(".addressscroll ul").empty();
}
これによりulが空になるため、新しいものだけが追加されますが、それでも機能しません。
何か案は？
ありがとう