JQuery won't respond when I click button
Question
I have this PHP jQuery File Upload system.... Folder List is generated success fully but won't create new folder of or delete when clicked on the expected. Below are the PHP and jQuery code.
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">×</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>
The action.php File, though the system is not completed, did everything that was done in the video, but it won't just create or give error notifications.
<?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';
}
}
}
?>
1 answers
solution1
0 2018-12-03 17:50:23
Once everything is cleaned up a bit, fixing some typos: $(documnet) & $('#old_name').val(foldername); (should be folder_name ), I have created this snippet of your code. It appears to work overall, except the AJAX elements. I can click the Create button and see the new dialog.
$(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">×</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>
Hope that helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
When I click the update button, it won't change/update (CodeIgniter, Update Multiple Rows)
When I click a button it didn't sends data to changePassword.php through ajax jquery
Toast message won't popup on button click
jquery validations are not working when i click on submit button
My div doesn't appear when I click on the submit button
Submit button name won't be posted on form submit when using jquery-form
when i add this select box in this select the button won't add ni field
Use PHP + jQuery when click on a button
jQuery post when click on radio button
jQuery Validation Plugin 1.9.0 .. I want submit won't reload the page when it's valid
Related Tags