ページの特定の部分を読み込めません。それはあまりにも空想的ではありません。ユーザーが次/前の日/週/月をクリックすると、それに応じて日付が読み込まれ、バックエンドで処理されます。しかしその前に、フロントエンドで次のようなフォーマットを行う必要があります。
<script>
//the prev/next link values will change when any one are clicked. This function will append the appropriate date to the link ranging from the prev month to the next month
function dateChange(dateInput){
//creating new instance of the date based on the date passed into the function
var nextDay = new Date(dateInput);
var nextWeek = new Date(dateInput);
var nextMonth = new Date(dateInput);
var prevDay = new Date(dateInput);
var prevWeek = new Date(dateInput);
var prevMonth = new Date(dateInput);
//the date will change according to the date passed in from 1 day to 1 month
nextDay.setDate(nextDay.getDate()+1);
nextWeek.setDate(nextWeek.getDate()+7);
nextMonth.setDate(nextMonth.getDate()+30); //need to add more complex code to handle next month
prevDay.setDate(prevDay.getDate()-1);
prevWeek.setDate(prevWeek.getDate()-7);
prevMonth.setDate(prevMonth.getDate()-30); //need to add more complex code to handle next month
//The following will go into another function which formats the date in such a way that vbscript can handle it.
nextDay = dateFormat(nextDay);
nextWeek = dateFormat(nextWeek);
nextMonth = dateFormat(nextMonth);
prevDay = dateFormat(prevDay);
prevWeek = dateFormat(prevWeek);
prevMonth = dateFormat(prevMonth);
//updating the values for the a tag in the onclick attribute. and appending to the strVar variable
var strVar="";
strVar += " <div class=\"prev\">";
strVar += " <p>Prev<\/p>";
strVar += " <a href=\"\" onClick=\"dateChange('"+prevMonth+"')\">< month<\/a>";
strVar += " <a href=\"\" onClick=\"dateChange('"+prevWeek+"')\">< week<\/a>";
strVar += " <a href=\"\" onClick=\"dateChange('"+prevDay+"')\">< day<\/a>";
strVar += " <\/div>";
strVar += " ";
strVar += " <div class=\"next\">";
strVar += " <p>Next<\/p>";
strVar += " <a href=\"\" onClick=\"dateChange('"+nextMonth+"')\">month ><\/a>";
strVar += " <a href=\"\" onClick=\"dateChange('"+nextWeek+"')\">week ><\/a>";
strVar += " <a href=\"\" onClick=\"dateChange('"+nextDay+"')\">day ><\/a>";
strVar += " <\/div>";
//For each .title it finds, it will look for its child .dateselect and remove .dateselect child. It will then append new data to .dateselect with the updated values
$(".title").each(function(index, element) {
$(this).find('.dateSelect').children().remove();
$(this).find('.dateSelect').append(strVar);
var boatName = $(this).next().attr('id');
if(!$(this).next().hasClass('hide')){
if(boatName == "SailingCatamaran"){
$(this).next().load("availability.asp?boatType=SailingCatamaran&date="+dateInput+"");
//alert(dateInput);
}
else if(boatName == "PowerCatamaran"){
$(this).next().load("availability.asp?boatType=PowerCatamaran&date="+dateInput+"");
}
else{
$(this).next().load("availability.asp?boatType=nothing&date="+dateInput+"");
}
}
});
//Stops propagation so when day,week or month are clicked, the table won't disappear
event.stopPropagation()
}
//Function is to receive the date in its raw format and convert it into YYYY,MM,DD
function dateFormat(theDate){
theDate = ('0' + (theDate.getMonth()+1)).slice(-2) + ','
+ ('0' + theDate.getDate()).slice(-2) + ','
+ theDate.getFullYear();
return theDate;
}
$(document).ready(function() {
//alert(dateCounter);
var dateCounter;
if (dateCounter == null){
var current = new Date();
current = dateFormat(current);
dateChange(current);
dateCounter = 0; //anything but null
}
//alert(dateCounter);
/*$("table").first().load("availability.asp?boatType=PowerCatamaran&date="+current+"", function(response, status, xhr){
if (status == "error") {
var msg = "Sorry but there was an error: ";
$("table").html(msg + xhr.status + " " + xhr.statusText);
}
});*/
$(".title").click(function(){
$(this).next().toggleClass("hide");
var boatName = $(this).next().attr('id');
if(!$(this).next().hasClass('hide')){
if(boatName == "SailingCatamaran"){
$(this).next().load("availability.asp?boatType=SailingCatamaran&date=");
}
else if(boatName == "PowerCatamaran"){
$(this).next().load("availability.asp?boatType=PowerCatamaran&date=");
}
else{
$(this).next().load("availability.asp?boatType=nothing&date=");
}
}
$(this).children().last().toggleClass("hide");
$(this).find('.dateSelect').toggleClass("hide");
//alert("title being clicked");
});
});
</script>
次のリンクをクリックすると、ページ全体がリロードされ続ける理由について混乱しています。
<div class="title">
<h2>Catamarans</h2>
<div class="dateSelect">
<div class="prev">
<p>Prev</p>
<a href="" onClick="dateChange('someDate')">< month</a>
<a href="" onClick="dateChange('someDate')">< week</a>
<a href="" onClick="dateChange('someDate')">< day</a>
</div>
<div class="next">
<p>Next</p>
<a href="" onClick="dateChange('someDate')">month ></a>
<a href="" onClick="dateChange('someDate')">week ></a>
<a href="" onClick="dateChange('someDate')">day ></a>
</div>
</div>
<div class="expand hide">
Click to Expand
</div>
</div>
document.ready が発火し続けるため、ページ全体がリロードし続けることを確認しました。アイデアは、現在の日付を一度ロードすることです。しかし、ページはリロードし続けるため、現在の日付が常に使用され続けます。私は今何が起こっているのか理解していません。どんな助けでも大歓迎です！