title: jQuery/AJAX - Whole page keeps reloading
body: <p>I'm having trouble loading a particular part of a page. It's nothing too fancy. The idea is when a user clicks next/prev day/week/month then the dates would load accordingly which is being handled in the backend. But before so I need to do some formatting on the front end which is the following:</p>
  
  <pre><code>&lt;script&gt;
  
  //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 += "             &lt;div class=\"prev\"&gt;";
  strVar += "                    &lt;p&gt;Prev&lt;\/p&gt;";
  strVar += "                    &lt;a href=\"\" onClick=\"dateChange('"+prevMonth+"')\"&gt;&lt; month&lt;\/a&gt;";
  strVar += "                    &lt;a href=\"\" onClick=\"dateChange('"+prevWeek+"')\"&gt;&lt; week&lt;\/a&gt;";
  strVar += "                    &lt;a href=\"\" onClick=\"dateChange('"+prevDay+"')\"&gt;&lt; day&lt;\/a&gt;";
  strVar += "                &lt;\/div&gt;";
  strVar += "                ";
  strVar += "                &lt;div class=\"next\"&gt;";
  strVar += "                 &lt;p&gt;Next&lt;\/p&gt;";
  strVar += "                    &lt;a href=\"\" onClick=\"dateChange('"+nextMonth+"')\"&gt;month &gt;&lt;\/a&gt;";
  strVar += "                    &lt;a href=\"\" onClick=\"dateChange('"+nextWeek+"')\"&gt;week &gt;&lt;\/a&gt;";
  strVar += "                    &lt;a href=\"\" onClick=\"dateChange('"+nextDay+"')\"&gt;day &gt;&lt;\/a&gt;";
  strVar += "                &lt;\/div&gt;";
  
  
  //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&amp;date="+dateInput+"");
                //alert(dateInput);
            }
            else if(boatName == "PowerCatamaran"){
                $(this).next().load("availability.asp?boatType=PowerCatamaran&amp;date="+dateInput+"");
            }
            else{
                $(this).next().load("availability.asp?boatType=nothing&amp;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&amp;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&amp;date=");
            }
            else if(boatName == "PowerCatamaran"){
                $(this).next().load("availability.asp?boatType=PowerCatamaran&amp;date=");
            }
            else{
                $(this).next().load("availability.asp?boatType=nothing&amp;date=");
            }
        }
        $(this).children().last().toggleClass("hide");
        $(this).find('.dateSelect').toggleClass("hide");
  
        //alert("title being clicked");
      });
  }); 
  &lt;/script&gt;
  </code></pre>
  
  <p>I'm confused as to why the whole page keeps getting reloaded when I click on an a link which is the following:</p>
  
  <pre><code>    &lt;div class="title"&gt;
          &lt;h2&gt;Catamarans&lt;/h2&gt;
          &lt;div class="dateSelect"&gt;
              &lt;div class="prev"&gt;
                  &lt;p&gt;Prev&lt;/p&gt;
                  &lt;a href="" onClick="dateChange('someDate')"&gt;&lt; month&lt;/a&gt;
                  &lt;a href="" onClick="dateChange('someDate')"&gt;&lt; week&lt;/a&gt;
                  &lt;a href="" onClick="dateChange('someDate')"&gt;&lt; day&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="next"&gt;
                  &lt;p&gt;Next&lt;/p&gt;
                  &lt;a href="" onClick="dateChange('someDate')"&gt;month &gt;&lt;/a&gt;
                  &lt;a href="" onClick="dateChange('someDate')"&gt;week &gt;&lt;/a&gt;
                  &lt;a href="" onClick="dateChange('someDate')"&gt;day &gt;&lt;/a&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="expand hide"&gt;
              Click to Expand
          &lt;/div&gt;
       &lt;/div&gt;
  </code></pre>
  
  <p>I confirmed that the whole page keeps reloading because the document.ready keeps firing. The idea is to load the current date once. But the page keeps reloading and thus, the current date keeps getting used ALL the time. I just don't understand what is going on now. Any help will be greatly appreciated!</p>