提交表单时，页面不会刷新来自sql server的新数据，直到刷新？

时间：2017-03-20 21:20:03

标签： php html mysql forms mamp

问题

index.php是一个页面，显示MAMP使用SQL托管的服务器中的相册。在grid.php中，我查询服务器并在网格中显示相册。 index.php还有addalbum.php中的表单，允许用户将相册添加到数据库中。

但是，当用户在addalbum.php中提交表单时，尽管数据库已更新，但即使我这样做，页面也不会显示新数据：

<form action="../p3/index.php" method="post">

我必须刷新页面或再次单击它以查看更新的数据。我很困惑为什么会发生这种情况，因为我将form action设置为index.php所以它应该刷新页面。

如果有人对此有任何建议，我们将不胜感激！

enter image description here

代码

的index.php 

<?php
    $name = "Albums";
    require_once('config.php');
    require_once("nav.php");
    require_once("php/header.php");
    require_once("php/grid.php");
    require_once("php/footer.php");
//    require_once("../P3_M2/php/header.php");
//    require_once("../P3_M2/php/grid.php");
//    require_once("../P3_M2/php/footer.php");
    require_once('php/login.php');
    require_once('php/addalbum.php');
    $error_log = addAlbumToDatabase();
    foreach($error_log as $error){ //debuggin
      echo "<h1>$error</h1>";
    }
?>

的config.php 

<?php
define( 'DB_HOST', 'blahblahblah');
define('DB_NAME', 'blahblahblah');
define('DB_USER', 'blahblahblah');
define('DB_PASS','blahblahblah');

//Set up sqli
$mysqli = new mysqli( DB_HOST, DB_USER, DB_PASS, DB_NAME );
if ($mysqli->errno) { //Was there an error connecting to the database?
    //The page isn't worth much without a db connection so display the error and quit
    print($mysqli->error);
    exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        <?php echo "$name" ?>
    </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--Styling-->
    <link type="text/css" rel="stylesheet" href="css/main.css" />
    <link type="text/css" rel="stylesheet" href="css/grid.css" />
    <link type="text/css" rel="stylesheet" href="css/form.css" />
<?php
    $nameLowercased = strtolower($name);
    echo "<link type='text/css' rel='stylesheet' href='css/$nameLowercased.css'/>";

?>
    <!--Custom icon-->
    <link href="https://file.myfontastic.com/fNQ9F99nd88vQm96ESUaLW/icons.css" rel="stylesheet" />
    <!-- jQuery library -->
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <!--Javascript-->
    <script type="text/javascript" src="js/main.js"></script>
</head>

grid.php 

<?php
/*DATA*/
//Query for each page
$queryFor = array(
  'Albums' => 'SELECT * FROM Album;',
  'Photos' => 'SELECT * FROM Image;',
  'Album' => "SELECT * FROM Image WHERE id IN
              (SELECT image_id FROM AIDict WHERE album_id = $album_id);"
);

//Loop through the $result rows fetching each one as an associative array
$printGridFor = array(
    'Albums'=> function($row){
        $albumId = $row['id'];
        $albumTitle = $row['title'];
        $albumDate = $row['date_created'];
        $dateFormatted = date("F d, Y", strtotime($albumDate));
        $creator = $row['creator'];
        print("<div class='grid-square'>
                <a href='album.php?id=$albumId'class='grid-info'>
                    <h1>$albumTitle</h1>
                    <h2>$dateFormatted</h2>
                    <h2>$creator</h2>
                </a>
                <button class='delete'><span class='icon-trash-can'></span></button>
                <button class='edit''><span class='icon-pencil'></span></button>
              </div>");
        },
    'Photos' => function($row){
        $imgTitle = $row['title'];
        $filename = $row['file_name'];
        $filepath = $row['file_path'].$filename;
        print("<div class='grid-square'>
                    <img src='$filepath' alt='$imgTitle ''>
                    <button class='delete'><span class='icon-trash-can'></span></button>
                    <button class='edit'><span class='icon-pencil'></span></button>
                </div>");
        },
    'Album' => function($row){ //Same as 'Photos'
        $imgTitle = $row['title'];
        $filename = $row['file_name'];
        $filepath = $row['file_path'].$filename;
        print("<div class='grid-square'>
                    <img src='$filepath' alt='$imgTitle ''>
                    <button class='delete'><span class='icon-trash-can'></span></button>
                    <button class='edit'><span class='icon-pencil'></span></button>
                </div>");
        }
);

/*SQL*/

//Get the data
$query = $queryFor[$name];
$result = $mysqli->query($query);
if (!$result) { //If no result, print the error
    print($mysqli->error);
    exit();
}
?>
<div class="grid">
    <?php
        while ($row = $result->fetch_assoc()) {
           $printGridFor[$name]($row);
        }
    ?>
</div>
<button class="add"><span class="icon-plus"></span></button>

addalbum.php 

<?php
function addAlbumToDatabase(){
  $errors = array();
  if(isset($_POST['submit'])){
    global $mysqli;
    $maxIdQuery = "SELECT MAX(id) FROM Album";
    $maxIdResult = $mysqli->query($maxIdQuery);
    if (!$maxIdResult) { print($mysqli->error); exit();} //If no result, print the error
    if($row = $maxIdResult->fetch_row()){
      $maxId = $row[0]; //Get max id
      //Insert album into database
      $stmt = $mysqli->prepare("INSERT INTO Album (id, title, date_created, date_modified, location, creator)
                                VALUES (?, ?, ?, ?, ?, ?)");
      $stmt->bind_param('ssssss', $album_id, $title, $date_created, $date_modified, $location, $creator);
      $album_id = $maxId + 1;
      $title = (isset($_POST['album-title'])) ? $_POST['album-title'] : "Untitled";
      date_default_timezone_set('America/New_York');
      $todays_date = date('Y-m-d');
      $date_created = (!empty($_POST['date-created'])) ? $_POST['date-created'] : $todays_date;
      $date_modified = (!empty($_POST['date-modified'])) ? $_POST['date-modified'] : $date_created;
      $location = (isset($_POST['location'])) ?  $_POST['location'] : NULL;
      $creator = (isset($_POST['creator'])) ? $_POST['creator'] : NULL;
      $executed = $stmt->execute(); //execute statement
      $stmt->close(); //close statement
      if(!$executed){ //Add to error log
        $errors[] = "Unsucceful when inserting $title into database";
        $errors[] = $mysqli->error;
      }
      return $errors;
    }
    $errors[] = "$title not inserted into database";
    return $errors;

  }
  $errors[] = "Nothing added b/c submit button not pressed";
  return $errors;
}
?>
<div class="form-screen">
    <button class="close close-form"><span class="icon-x"></span></button>
   <form action="../p3/index.php" method="post">
        <div class="form-wrapper">
            <h1>Add Album</h1>
            <input type="text" name="album-title" placeholder="Album Title*" required>
            <input type="text" name="date-created"  class="date" placeholder="Date Created">
            <input type="text" name="date-modified"  class="date" placeholder="Date Modified">
            <input type="text" name="location" placeholder="Location">
            <input type="text" name="creator" placeholder="Author*" required="">
            <button type="submit" class="field submit" name="submit" value="submit">Create Album</button>
        </div>
    </form>
</div>

main.js 

$(document).ready(function () {
    //Show/Hide edit & delete buttons
    $(".grid").on("mouseenter", ".grid-square", function () {
        $(this).find(".delete").fadeIn(100);
        $(this).find(".edit").fadeIn(100);
    });
    $(".grid").on("mouseleave", ".grid-square", function () {
        $(this).find(".delete").fadeOut(100);
        $(this).find(".edit").fadeOut(100);
    });

    //Show/Hide nav bar
    $(".closeNavBtn").on("click", function () {
        $(".sidenav").css("width", "0px");
    });
    $(".menu").on("click", function () {
        $(".sidenav").css("width", "250px");
    });
    $(window).scroll(function (event) {
        if ($(".sidenav").width() === 250) {
            $(".sidenav").css("width", "0vw");
        }
    });

    //Show/Hide login screen
    $(".login").on("click", function () {
        $(".login-screen").fadeIn(300);
    });
    $(".close-login").on("click", function () {
        $(".login-screen").fadeOut(300);
    });

    //Show/Hide form screen
    $(".add").on("click", function(){
      $(".form-screen").fadeIn(300);
    });
    $(".close-form").on("click", function(){
      $(".form-screen").fadeOut(300);
    });
    //Customize input label based on file
    var input = document.querySelector('.inputfile');
    if(input != null){customizeInputLabel(input);}

    //Datepicker
    $.datepicker.setDefaults({
     dateFormat: 'yy-mm-dd'
    });
    $(".date").datepicker({
        inline: true,
        showOtherMonths: true, dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    });

});
//customizeInputLabel changes label when select file
function customizeInputLabel(input) {
    var label = input.nextElementSibling
        , labelVal = label.innerHTML;
    input.addEventListener('change', function (e) {
        var fileName = '';
        if (this.files && this.files.length > 1) fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length);
        else fileName = e.target.value.split('\\').pop();
        if (fileName) label.querySelector('span').innerHTML = fileName;
        else label.innerHTML = labelVal;
    })
}

文件目录结构

enter image description here

0 个答案:

没有答案
相关问题
最新问题