Can't retrieve selected value from dropdown in dialog using jquery

Question

I have a dialog popup with a few fields in them. This dialog is retrieved from a php file. I can get the val() from all of them but the dropdowns.

Snippets:

Call dialog:

$('#createNote').click(function(e){
  e.preventDefault();
  $.ajax({  url: 'functions.php',
            type: 'POST',
            data: {"function": "createNoteDialog"},
            success: function(data){`enter code here`
               $('#dialog-form').html(data);
               $('#dialog-form').dialog('open');}
  });
}); 

Generate Form:

if ($func == "createNoteDialog" ){
  echo '<form class="cmxform"><fieldset>';

  echo '<li><label for="Category">Category</label><select id="inputCategory" class="text ui-widget-content ui-corner-all">';
  $r_categories = mysqli_query($global_dbh,'select category from pledges.patchCategories order by 1 asc');    
  $first_row = mysqli_fetch_row($r_categories);
  echo '<option value="' . $first_row[0] . '" selected>' .$first_row[0] . '</option>';
  while(($row = mysqli_fetch_array($r_categories)) != false) echo '<option value="' . $row[0] . '">' .$row[0] . '</option>';
  echo '</select>';

  echo '<label for="Version">Version </label><select id="inputVersion" class="text ui-widget-content ui-corner-all">';
  $r_versions = mysqli_query($global_dbh,'select version from pledges.patchVersions order by 1 desc');   
  $first_row = mysqli_fetch_row($r_versions);
  echo '<option value="' . $first_row[0] . '" selected>' .$first_row[0] . '</option>';
  while(($row = mysqli_fetch_array($r_versions)) != false) echo '<option value="' . $row[0] . '">' .$row[0] . '</option>';
  echo '</select>';

  echo '<li><label for="DevNote">Dev Note </label><textarea id="inputDevNote" name="DevNote" cols=60 rows=7></textarea></li>';
  echo '<li><label for="BuildNote">Build Note </label><textarea id="inputBuildNote" name="BuildNote" cols=60 rows=7></textarea></li>';
  echo '<li><label for="Comment">Comment </label><textarea id="inputComment" name="Comment" cols=60 rows=6></textarea></li>';

  echo '</fieldset></form>';
}

Saving:

$( "#dialog-form" ).dialog({
      autoOpen: false,
      height: 700,
      width: 800,
      modal: true,
      buttons: {
        "Create Note": function() {
          $.post(    "functions.php"
                 , { "function": "saveNote" , "version": $("#inputVersion").val(), "category": $('#inputCategory').val()  ,"devNote": $('#inputDevNote').val() ,"buildNote": $('#inputBuildNote').val() ,"comment": $('#inputComment').val()});
            patchNotesTable.fnDraw();   
            $( this ).dialog( "close" );
        },
        "Cancel": function() {
          $( this ).dialog( "close" );
        }
      },
      close: function() {
        $(this).dialog('close');
      }
    });

For some reason the $('#inputCategory').val() and $('#inputVersion').val() are empty, while the text area's are fine.

Also tried adding an onChange function to alert changes to the dropdown ... it wouldn't fire.

The form seems to be generated correctly:

<li><label for="Category">Category</label><select id="inputCategory" class="text ui-widget-content ui-corner-all">

Just can't figure out why it can't grab those values :)

Answer 1

Try this.

Create another <div class="loop">...</div> inside your dialog box. And put your all your stuff inside "loop".

After that try to reload this division just after ajax, after the click

$('#createNote').click(function(e){
e.preventDefault();
   $.ajax({ ...
           ...
          ...

   });
  $(".loop").load("functions.php .loop", {"function": "saveNote" , "version": $("#inputVersion").val(), "category": $('#inputCategory').val()  ,"devNote": $('#inputDevNote').val() ,"buildNote": $('#inputBuildNote').val() ,"comment": $('#inputComment').val()});

});