HTML にテキスト領域があり、リスト内のファイル名をクリックすると、そのテキスト領域にファイルの内容が表示され、ファイル間を行き来するのにうまく機能します。テキストエリア内で何かを編集するとすぐに、ファイル名をもう一度クリックしようとすると、何も実行されないか、そのテキストエリアが更新されなくなります。
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
var currentFile;
$(document).ready(function()
{
var request = new XMLHttpRequest();
request.open("GET", "getFiles.php", false);
request.send();
var result = request.responseText;
$("#fileNames").html(request.responseText);
});
$(document).ready(function()
{
$("li").click(function()
{
currentFile = $(this).text();
$("#currentFile").text(currentFile);
var request = new XMLHttpRequest();
request.open("GET", "getFileContents.php?fileName="+currentFile, false);
request.send();
var result = request.responseText;
$("#fileContents").text(result);
});
});
function saveFile()
{
var request = new XMLHttpRequest();
var contents = $("#fileContents").text();
request.open("GET", "saveFile.php?fileName="+currentFile+"&fileContents="+contents, false);
request.send();
}
</script>
<style type="text/css">
ul.fileList li
{
background-color:blue;
}
#fileContents
{
resize: none;
}
</style>
</head>
<body>
<div id="currentFile">No File Selected</div
<br />
<ul id="fileNames" class="fileList">
</ul>
<br />
<textarea id="fileContents" cols="25" rows="5">No Contents</textarea>
<input type="button" onclick="saveFile();" value="Save" />
</body>
</html>