即使使用'load'，div也不会重新加载更改的内容

Question

I have been working on this for some time now. I have a php file that has a div which reads a directory and loads the files in the directory into a dropdown. When the user selects from the file the file gets selected and teh operation is performed. However, the file name does not disappear from the dropdown until the page is refreshed. I have tried '.load' and it doesn't work. As in, the content of the div does not get updated.

My code is as follows: This is the PHP file:

<div id="mgA" class="form-group">
<label>Management Address:</label>
 <?php
   $path = "/licenses/ve/address/unused";
   clearstatcache();
  $files = array();
  $handle = opendir($path);
  echo '<select required id="mgmtAdd" class="form-control select2"      style="width: 100%;">';
  while ($file = readdir($handle)) {
 if (substr($file,0,1) != ".") {
 $files[]=$file;
  }
 echo "<option selected = 'selected' value='0'>Select</option>";
 natsort($files); //sorting
 foreach($files as $file){
 echo "<option value ='$file'>$file</option>";
 }
 echo '</select>';
   if (is_dir_empty($path)) {
    echo "Max no of hosts already created";
    }

function is_dir_empty($path) {
 if (!is_readable($path)) return NULL;
     return (count(scandir($path)) == 2);
  }
closedir($handle);?>

This is the button which on click the div should reload all the contents again:

   $( "#vServer").on( "click", function(e) {
    e.preventDefault();

    $("#mgA").load(virtualDialog);

    alert("refreshed");

    virtualDialog.dialog( "open" );
    });

Please let me know if anyone has any idea, any help is appreciated! Thank you!

Answer 1

As epascarillo has pointed out, you are using load() incorrectly. This may be more in line with what you wish to do but I did not test (or even check very closely) your PHP code.

I am also assuming that the div #mgA is the content of the jQueryUI dialog that you are opening with virtualDialog.

javascript/jQuery:

$( "#vServer").on( "click", function(e) {
    e.preventDefault();
    $.ajax({
        type: 'post',
         url: 'ajax-reload.php',
        success: function(d){
            $("#mgA").html(d);
            virtualDialog.dialog( "open" );
        }
    });
});

ajax-reload.php

<?php
    $path = "/licenses/ve/address/unused";
    clearstatcache();
    $files = array();
    $handle = opendir($path);
    $out = '<select required id="mgmtAdd" class="form-control select2"      style="width: 100%;">';
    while ($file = readdir($handle)) {
        if (substr($file,0,1) != ".") {
            $files[]=$file;
        }
        $out .= "<option selected = 'selected' value='0'>Select</option>";
        natsort($files); //sorting
        foreach($files as $file){
            echo "<option value ='$file'>$file</option>";
        }
    } //<=== this brace was missing
    $out .= '</select>';
    if (is_dir_empty($path)) {
        $out = "Max no of hosts already created";
    }

    function is_dir_empty($path) {
        if (!is_readable($path)) return NULL;
        return (count(scandir($path)) == 2);
    }
    closedir($handle);
    echo $out;
?>

See these additional examples of simple AJAX -- sometimes it helps to see the really simple examples:

AJAX request callback using jQuery