title: jquery refresh and display using AJAX
body: <p>Need some guidance on how to go about refreshing and updating information inside a div that contains information from an AJAX call. Currently, the div is emptied before updating it on click. I need this to happen without binding it to a click event handler.</p>
  
  <p>Here's the code : </p>
  
  <pre><code>var selectedSize = "Select a Size";
  $("#ResidentialBuildingSize").append('&lt;option value="' + selectedSize + '"&gt;' + selectedSize + '&lt;/option&gt;');
  $('option[value="' + selectedSize + '"]').attr('disabled', 'disabled');
  $("#ResidentialBuildingStories").change(function () {
      url = '/ResidentialBuilding/getBldgSize?stories=';
      optionElement = $('#ResidentialBuildingStories').val();
      url = url + optionElement;
      $("#ResidentialBuildingSize").empty();
      $("#ResidentialBuildingSize").append('&lt;option value="' + selectedSize + '"&gt;' + selectedSize + '&lt;/option&gt;');
      $('option[value="' + selectedSize + '"]').attr('disabled', 'disabled');
      $.getJSON(url, function (data) {
          $.each(data, function (index, value) {
              $('#ResidentialBuildingSize').append('&lt;option value"' + value.size + '"&gt;' + value.size + '&lt;/option&gt;');
          });
      });
      $("#info").click(function () {
          infoHead = "infoHead";
          invisible = "invisible";
          type = $("#ResidentialBuildingType").val();
          stories = $("#ResidentialBuildingStories").val();
          size = $("#ResidentialBuildingSize").val();
          url = "/ResidentialBuilding/getBldgInfo?type=" + type + "&amp;stories=" + stories + "&amp;size=" + size;
          //$("#titles").empty();
          //$("#values").empty();
          $.getJSON(url, function (data) {
              $.each(data, function (index, value) {
                  $("#titles").empty();
                  $("#values").empty();
                  $("#titles").append('&lt;h5 class="' + infoHead + '"&gt;' + value.r.type + " (" + value.r.stories + ")" + '&lt;/h5&gt;');
                  $("#titles").append('&lt;p&gt;' + "Stories" + '&lt;/p&gt;');
                  $("#titles").append('&lt;p&gt;' + "Age" + '&lt;/p&gt;');
                  $("#titles").append('&lt;p&gt;' + "Size" + '&lt;/p&gt;');
                  $("#titles").append('&lt;p&gt;' + "Orientation" + '&lt;/p&gt;');
                  $("#titles").append('&lt;p&gt;' + "Shape" + '&lt;/p&gt;');
                  $("#titles").append('&lt;p&gt;' + "Floor Height" + '&lt;/p&gt;');
                  $("#titles").append('&lt;p&gt;' + "Foundation" + '&lt;/p&gt;');
                  $("#titles").append('&lt;p&gt;' + "Window Percent" + '&lt;/p&gt;');
                  $("#titles").append('&lt;p&gt;' + "Heating" + '&lt;/p&gt;');
                  $("#titles").append('&lt;p&gt;' + "Cooling" + '&lt;/p&gt;');
                  $("#values").append('&lt;h5 class="' + infoHead + ' ' + invisible + '"&gt;' + '&amp;nbsp;' + '&lt;/h5&gt;');
                  $("#values").append('&lt;p&gt;' + value.r.stories + '&lt;/p&gt;');
                  $("#values").append('&lt;p&gt;' + value.r.age + '&lt;/p&gt;');
              });
          });
      });
  });//end change function
  </code></pre>