您的位置: 首页  >  技术问答  >  如何在提交后重新加载包含其中的div，甚至刷新整个页面？

如何在提交后重新加载包含其中的div，甚至刷新整个页面？

分类: 技术问答 • 2022-03-15 09:38:33

如何在提交后重新加载包含其中的div，甚至刷新整个页面？

问题描述：

sorry for the long explanation, but for the last 2 days I have been banging my head on this issue and have tried every which way to get my dynamic table or the page to refresh without having any success. This issue comprises 3 pages, page one has includes that loads 3 different pages in Div's (these pages each have a table that loads a specific file list from a directory) the divs get have show/hide via the drop down also in every row I have a delete button which will delete the file in the aws bucket directory and remove that row from the table.

The problem is when I click delete it will delete the file from the directory, but will not remove the row (This works when on the actual page and not loaded into the div tags via the include) if I refresh the page or click Delete a second time the row is then removed. BTW the upload works flawlessly I have tride .location, jquery, javascript, ajax, tried stepping through the code in debug. I have put the ajax etc.. in the deletes3file.php before and after the echo also before and after each include and in each php file. One thing I should mention is the deletes3file.php has an echo pop up so once I hit OK is when I want to remove the row from the table.

PAGE 1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link rel="stylesheet" type="text/css" href="CSS/styles.css" /> 
        <link rel="stylesheet" type="text/css" href="CSS/panels.css"/>  


    <body>
        <!-- Begin Wrapper -->
        <div id="wrapper">
         <!-- Begin Header -->
        <div id="header">
                <ul>
                    <li>
                    <a href="index.php">Home</a> 
                    <div class="cp-thumb">
                <div class="cp-hover">
                <?php
                  echo gethostname()
                ?>
            </div>
            </div>
                    </li>
                </ul>
            <div><a href="index.php" id="top-img"></a></div>
        </div>
    <!-- End Header -->

            <!-- Begin Content -->
        <div id="content">


<div id="dirlist">
<h2>Select Folder to upload to</h2>

<form action="uploads3.php" method="post" enctype="multipart/form-data" name="form1" id="form1"
    <input type="hidden" name="method" value="post" />
      <select id="bucketName" name="bucketName">                 
        <option value="0">--Select Folder--</option>
        <option value="Policy">Policy</option>
        <option value="Program">Program</option>
        <option value="Procedures">Procedures</option>
     </select>
      <input name="theFile" type="file" />
      <input name="Submit" type="submit" value="Upload">


    <script type="text/javascript">
  document.getElementById('bucketName').addEventListener('change', function() {
     var style = this.value == "Policy" ? 'block' : 'none';
  document.getElementById('Policy').style.display = style;
     var style = this.value == "Program" ? 'block' : 'none';
  document.getElementById('Program').style.display = style;
     var style = this.value == "Procedures" ? 'block' : 'none';
  document.getElementById('Procedures').style.display = style;
});
</script>
</form>

</div><!-- End dirlist -->


<div id="Policy" style="display: none;">
<p><?php
include 'policy.php';
?></p>

</div>

<div id="Program" style="display: none;">
<p><?php
include 'program.php';
?></p>
</div>

<div id="Procedures" style="display: none;">
<p><?php
include 'procedures.php';
?></p>

</div>



     </div><!-- End Content -->
        </div><!-- End Wrapper -->


    </body>
</html>

DELETE PAGE: 

<?php
if(isset($_POST['bucketName'])){
$bucketName = $_POST['bucketName']; 
}

$fname = $_POST['fname'];

include 'awss3con.php';
if($_POST){

if ($s3->deleteObject( $bucketName, $fname, S3::ACL_PUBLIC_READ)) {


                    echo "We successfully deleted your file $bucketName / $fname";

                }else{
                    echo "Something went wrong while delteing your file. $fname sorry.";
                }

    }

?>

THE PAGE IN THE INCLUDES:

<?php
$ignore = Array(".","..");
$count=1;
include 'awss3con.php';

// Get the contents of our bucket
echo '<form action="deletes3file.php" method="post" enctype="multipart/form-data">';
 echo '<table id=db-table border=1>';
 echo '<th colspan=3 style="text-align:center;">Policies</th>';
  $contents = $s3->getBucket("MyBucket",'Policy');
    foreach ($contents as $file){
 //if(!in_array($file, $ignore));
  if(!isset($flag_first)){
    $flag_first=1;
     continue;
     }

        $fname = $file['name'];
        $furl = "https://s3.amazonaws.com/MyBucket/".$fname;
        $newname = explode('/', $fname);
        $fname = $newname['1'];
        $bucketName = "MyBucket/Policy";
        //output a link to the file
        /*echo "<tr id='del$count'><td>$count</td><td><input type='submit' name=$furl index=$count value='delete' onclick='deleteFile(\"$dispimage\",$count,\"$directory\");> <a href=\"$furl\">$fname</a>
        <input type='text' id=$count value=$furl name='furl' visible=''></td></tr>";*/
         echo "<tr id='del$count'><td>$count</td><td>$fname</td><td><input type='button' id='delete$count' value='Delete' onclick='deleteFile(\"$fname\",$count,\"$bucketName\");'></td></tr>";
        $count ++;

    }
    echo '</table>';
    echo "</form>";

        ?>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    function deleteFile(fname,rowid,bucketName)
{
    $.ajax({ url: "deletes3file.php",
        data: {"fname":fname,"bucketName":bucketName},
        type: 'post',
        success: function(output) {
          alert(output);
          $("#del"+rowid).remove();
        }

    });

}
</script>

答

Instead of attaching the event handler in HTML and passing parameters :

  • Use HTML5 data attributes to associate data with HTML element(s).
  • Attach event handlers in javascript.

This is better practice as it separates document structure from dynamic functionality, leading to better readbility of both HTML and javascript.

So, build rows as follows :

 echo "<tr data-fname=\"$fname\" data-bucket-name=\"$bucketName\"><td>$count</td><td>$fname</td><td><input class=\"deleteFile\" type=\"button\" value=\"Delete\"></td></tr>";

Note: There's no need for any ids

And write the corresponding script as follows :

jQuery(function($) {
    $(".deleteFile").on('click', function(event) {
        event.preventDefault(); // probably not necessary but won't do any harm.
        var $row = $(this).closest('tr'); // the clicked button's row.
        $.ajax({
            'url': 'deletes3file.php',
            'data': $row.data(), // the data object is composed for you automatically
            'type': 'post',
            'success': function(output) {
                $row.remove(); // here, you already have a reliable reference to the row that is to be deleted, so just remove() it.
            }
        });
    })
});

相关推荐