单击按钮时 JQuery 不会响应

我有这个PHP jQuery文件上传系统。。。。文件夹列表已完全成功生成，但单击预期时不会创建的新文件夹或删除。下面是PHP和jQuery的代码。

jQuery(index.php(

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>List From Directory</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br />
<br />
<div class="container">
<h2 align="center">List Folders From Directory</a></h2>
<br />
<div align="right">
<button type="button" name="create_folder" id="create_folder" class="btn btn-success">Create</button>
</div>
<div id="folder_table" class="table-responsive">
</div>
</div>
</body>
</html>
<div id="folderModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title"><span id="change_title">Create Folder</span></h4>
</div>
<div class="modal-body">
<p>Enter Folder name
<input type="text" name="folder_name" id="folder_name" class="form-control" /> </p>
<br />
<input type="hidden" name="action" id="action" />
<input type="hidden" name="old_name" id="old_name" />
<input type="button" name="folder_button" id="folder_button" class="btn btn-info" value="Create" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
load_folder_list();
function load_folder_list()
{
var action = "fetch";
$.ajax({
url : "action.php",
method:"POST",
data:{action:action},
success:function(data)
{
$('#folder_table').html(data);
}
})
}
$(document).on('click', '#create_folder', function(){
$('#action').val('create');
$('#folder_name').val('');
$('#folder_button').val('Create');
$('#old_name').val('');
$('#change_title').text('create Folder');
$('#folderModal').modal('show');
});

$(documnet).on('click', '#folder_button', function(){
var folder_name = $('#folder_name').val();
var action = $('#action').val();
var old_name = $('#old_name').val();
if(folder_name != '')
{
$.ajax({
url : "action.php",
method:"POST",
data:{folder_name:folder_name,old_name:old_name, action:action},
success:function(data)
{
$('#folderModal').modal('hide');
load_folder_list();
alert(data);
}
});
}
else
{
alert("Enter Folder Name");
}
});
$(document).on('click', '.update', function(){
var folder_name = $(this).data("name");
$('#old_name').val(foldername);
$('#folder_name').val(folder_name);
$('#action').val("change");
$('#folder_button').val('Update');
$('#change_title').text("Change Folder Name");
$('#folderModal').modal("show");
});
});
</script>

action.php文件虽然系统还没有完成，但它完成了视频中所做的一切，但它不会只是创建或发出错误通知。

<?php
//action.php
if(isset($_POST["action"]))
{
if($_POST["action"] =="fetch")
{
$folder = array_filter(glob('*'), 'is_dir');
$output = '
<table class="table table-bordered table-striped">
<tr>
<th>MPO Number</th>
<th>No. of Attachment</th>
<th>Update</th>
<th>Delete</th>
<th>Upload File</th>
<th>View Uploaded File</th>
</tr>
';
if(count($folder) > 0)
{
foreach($folder as $name)
{
$output .= '
<tr>
<td>'.$name.'</td>
<td>'.(count(scandir($name)) - 2).'</td>
<td><button type="button" name="update" data-name="'.$name.'" class="update btn btn-warning btn-xs">Update</button></td>
<td><button type="button" name="delete" data-name="'.$name.'" class="delete btn btn-danger btn-xs">Delete</button></td>
<td><button type="button" name="upload" data-name="'.$name.'" class="upload btn btn-info btn-xs">Upload File</button></td>
<td><button type="button" name="view-files" data-name="'.$name.'" class="view_files btn btn-default btn-xs">View Files</button></td>
</tr>
';
}
}
else
{
$output .= '
<tr>
<td colspan="6">No Folder Found</td>
</tr>
';
}
$output .='</table>';
echo $output;
}
if($_POST["action"] == "create")
{
if(!file_exists($_POST["folder_name"]))
{
mkdir($_POST["folder_name"], 0777, true);
echo 'Folder Create';
}
else
{
echo 'Folder Already Created';
}
}
if($_POST["action"] =="change")
{
if(!file_exists($_POST["folder_name"]))
{
rename($_POST["old_name"], $_POST["folder_name"]);
echo 'Folder Name Change';
}
else
{
echo 'Folder Already Cready Created';
}
}
}
?>

一旦一切都清理干净了，就修复了一些拼写错误：$(documnet)&$('#old_name').val(foldername);(应该是folder_name(，我已经创建了您的代码片段。除了AJAX元素之外，它似乎总体上可以工作。我可以单击"创建"按钮并查看新对话框。

$(function() {
function load_folder_list() {
var action = "fetch";
$.ajax({
url: "action.php",
method: "POST",
data: {
action: action
},
success: function(data) {
$('#folder_table').html(data);
}
});
}
$(document).on('click', '#create_folder', function() {
$('#action').val('create');
$('#folder_name').val('');
$('#folder_button').val('Create');
$('#old_name').val('');
$('#change_title').text('create Folder');
$('#folderModal').modal('show');
});
$(document).on('click', '#folder_button', function() {
var folder_name = $('#folder_name').val();
var action = $('#action').val();
var old_name = $('#old_name').val();
if (folder_name != '') {
$.ajax({
url: "action.php",
method: "POST",
data: {
folder_name: folder_name,
old_name: old_name,
action: action
},
success: function(data) {
$('#folderModal').modal('hide');
load_folder_list();
alert(data);
}
});
} else {
alert("Enter Folder Name");
}
});
$(document).on('click', '.update', function() {
var folder_name = $(this).data("name");
$('#old_name').val(folder_name);
$('#folder_name').val(folder_name);
$('#action').val("change");
$('#folder_button').val('Update');
$('#change_title').text("Change Folder Name");
$('#folderModal').modal("show");
});
load_folder_list();
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<br />
<br />
<div class="container">
<h2 align="center">List Folders From Directory</a>
</h2>
<br />
<div align="right">
<button type="button" name="create_folder" id="create_folder" class="btn btn-success">Create</button>
</div>
<div id="folder_table" class="table-responsive">
</div>
</div>
<div id="folderModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title"><span id="change_title">Create Folder</span></h4>
</div>
<div class="modal-body">
<p>Enter Folder name
<input type="text" name="folder_name" id="folder_name" class="form-control" /> </p>
<br />
<input type="hidden" name="action" id="action" />
<input type="hidden" name="old_name" id="old_name" />
<input type="button" name="folder_button" id="folder_button" class="btn btn-info" value="Create" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

希望能有所帮助。

相关内容

最新更新

热门标签：