Question

我无法加载页面的特定部分。这没什么太花哨的。这个想法是当用户点击下一个/上一天/周/月，然后相应地加载日期，这将在后端处理。但在此之前，我需要在前端进行一些格式化，如下所示：

<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一直在触发。想法是加载当前日期一次。但页面不断重新加载，因此，当前日期一直在使用。我只是不明白现在发生了什么。任何帮助将不胜感激！

Answer 1

preventing default events in jQuery

$(".title").click(function(e){
      e.preventDefault();
      $(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");
    });

Answer 2

而不是：

strVar += "<a href=\"\"...

尝试使用：

strVar += "<a href=\"javascript:void(0)\"...

但如果您通过jQuery分配了事件处理程序，那么您甚至不需要这样做。您可以致电e.preventDefault()

jQuery / AJAX - 整个页面不断重新加载

2 个答案: