title: jquery trying up update modal dialog with data retrieved via ajax
body: <p>I have a page on which the users contact information is displayed.  If they need to change it, there's an "Edit" button which opens a modal dialog box containing the form with the field values set to the current data.  That works fine.</p>
  
  <p>Within the form is a "country" field, which when changed triggers an ajax call that gets html for either a select box with the states of the new country selected or displays an text input to enter the state.</p>
  
  <p>I had an earlier version (different size, jquery 1.7) that it worked on ... the code for that was:</p>
  
  <pre><code>$('#edit-contact-link').click(function(){
      $('#dialog-contact-form-edit').dialog("open");
      return false;
  });
  
  $('#dialog-contact-form-edit').dialog({
      autoOpen: false,
      modal: true,
      width: 450,
      height: 600,
      open: function () {
         $("#Country").change(function() {
              var country = $(this).val();
              $.ajax({
                  type: "POST",
                  url: "includes/ajax/countrystate.php",
                  data: {
                      Country: country
                  },
                  dataType: "html",
                  success: function(data) {
                      //alert(data);
                      $('#state-dropdown').empty().html(data); // fill the state with the right data
                  }
              }); // end .ajax
          }); // country change function
      },
      buttons: {
          Submit: function() {
              $("form[name='contactform']").submit();
              $(this).dialog('close');
          },
          Cancel: function() {
              $(this).dialog('close');
          }
      }
  }); 
  </code></pre>
  
  <p>I tried using the same code on the new site (modifying the selectors and ajax file names slightly) and it didn't work at all. </p>
  
  <p>I finally got everything to work (except filling in the #state-dropdown div with the ajax data) by calling the dialog directly with the click of the edit button and creating a separate function using the on() method for triggering the ajax call on change of the #Country select field.</p>
  
  <p>Partially successful code:</p>
  
  <pre><code>$(document).on("change", "[id='Country']", function() {
      var country = $(this).val();
      var state = "";
      //alert("Country "+ country + " AND State " + state);
      $.ajax({
          type: "POST",
          url: "includes/functions/form-func/ajax-countries-states.php",
          data: {
              Country: country,
              State: ""
          },
          dataType: "html",
          success: function(data) {
              alert(data);
              $('#state-dropdown').empty().html(data); // fill the state with the right    data
          }
      }); // end .ajax 
  }); // country change function
  
  $('.contact-edit').click(function() {
      $('#dialog-contact-edit').dialog({
          modal: true,
          position: ["center", 100],
          width: 460,
          buttons: {
              "Close": function() {
                  $(this).dialog("close"); },
              "Submit": function() {
                  $(this).dialog("close"); }
          }
      });
  });
  </code></pre>
  
  <p>Now the only issue is the last line of the ajax call: </p>
  
  <pre><code>$('#state-dropdown').empty().html(data); 
  </code></pre>
  
  <p>I have a div in the form that should be emptied and filled with the data fetched with ajax.</p>
  
  <p>If the div is placed on the main body of the page (outside the dialog) it works fine, but if it's inside the dialog, it is not updated.</p>
  
  <p>Seems like there should be a simple fix for this, but I've spent hours searching and changing this and that ... all to no avail.  </p>
  
  <p>Any assistance from the brilliant minds here would be greatly appreciated.</p>
  
  <p>Marie</p>