For a filesystem, I use an ajax request to rename a directory or file.
Scanning files in a directory:
$files = array_diff( scandir($dir), array(".", "..", "tmp") );
Part of the php code:
if( isset($_POST['new_name']) ){
// code for renaming goes here
echo $_POST['old_name'] . 'renamed to ' . $_POST['new_name'];
exit;
}
For renaming a directory or file, show filename, date, extension and so on..., I use a foreach and the structure looks like below:
<div class="echo"><div>
<div class="dynamic-content">
foreach($files as $file) {
?>
<!-- Rename-->
<td class="td-rename">
<h4>Rename File/Folder</h4>
Current name: <b><?php echo basename($dir.'/'.$file); ?></b><br />
<form class="rafform" method="post">
<input type="hidden" class="old_name" name="old_name" value="<?php echo $dir . '/' . $file; ?>" />
<input type="text" class="new_name form-control" name="new_name" placeholder="only a-z, A-Z, 0-9, -, _" value="" />
<input type="submit" class="submitmodal rename btn " value="Rename" />
</form>
</td>
<!-- below are coming more `td's` like:-->
<td class="td-filename">
…………
</td>
<td class="td-date">
…………
</td>
<td class="td-extension">
…………
</td>
and so on...
<?php } ?> // end foreach
</div> <!-- end dynamic content-->
My ajax request looks like this:
$(document).on('submit' , ".rafform" , (function(e) {
e.preventDefault();
$.ajax({
url: "",
type: "post",
data: new FormData(this),
cache: false,
contentType: false,
processData: false,
beforeSend: function () {
window.location.hash='close'; /* show spinner and disappear upload modal */
},
success: function(data) {
$('.dynamic-content').load('index.php .dynamic-content > *');
$('.echo').append(data);
$('.uploadspinner').hide();
$(".echolist").delay(5000).fadeOut(500);
},
});
}));
So after each request: the echo from PHP is put in the div with class echo and to see the changes immediately, I do a load() of the same page index.php with only the content in the div with class dynamic-content. Because in this div, the files are rendered. The user can see immediately that the file is renamed.
But now I notice, doing it this way, when a directory has a lot of subdirectories and files, rendering the files is getting slower and slower.
Is there a faster way to render the files after an change (rename per example)? For me it is important that every change is immediately visible for the user! And if so, what will be the structure I have to use?
