时间戳

首页 > 解决方案 > 尝试将项目添加到数据库时jquery ajax动画不起作用

javascript - 尝试将项目添加到数据库时jquery ajax动画不起作用

问题描述

我正在做一个 TODO 应用程序，我具有添加和编辑项目的基本功能。

当我添加一个项目时，它会重新加载页面并添加该项目，但我想向最近添加的项目添加一个简单的淡入淡出或背景闪光，但由于某种原因不起作用。

这是我的 index.php，我可以在其中添加项目：

<?php include_once "_partials/header.php" ?>

<div class="page-header">
    <h1>VERY MUCH TODO LIST</h1>
</div>

<?php $data = $database->select('items', [ 'id' , 'text'] ); ?>

<ul class="list-group col-sm-6">
    <?php
        foreach ( $data as $item ) {
            echo '<li class="list-group-item">';
            echo $item['text'];
            echo '  <div class="controls pull-right">';
            echo '      <a href="edit.php?id=' . $item["id"] . '" class="edit-link">edit</a>';
            echo '      <a href="delete.php?id=' . $item["id"] . '"  class="delete-link text-muted glyphicon glyphicon-remove"></a>';
            echo '  </div>';
            echo '</li>';
        }
    ?>
</ul>

<form id="add-form" class="col-sm-6" action="_inc/add-item.php" method="post">
    <p class="form-group">
        <textarea class="form-control" name="message" id="text" rows="3" placeholder="is there [ /watch?v=GO3wwqikkF0 ] ?"></textarea>
    </p>
    <p class="form-group">
        <input class="btn-sm btn-danger" type="submit" value="add new thing">
    </p>
</form>

这是add-item.php：

<?php

// include
require 'config.php';

// add new stuff
$id = $database->insert('items', [
    'text' => $_POST['message']
]);

// success
if ( $id ) {
    header("Location:  $site_url/index.php");
}

这是 app.js ，在这里你可以看到我有 li.hide 然后添加了一些花哨的东西。但即使我将 .appendTo() 更改为 .prependTo() 它也不起作用。

(function($){
var form = $('#add-form'),
    input = form.find('#text');

    input.val('').focus();

form.on('submit', function(event){
    event.preventDefault();

    var req = $.ajax({
        url: form.attr('action'),
        type: 'POST',
        data: form.serialize()
    });

    req.done(function(data){
        if ( data === 'success' ) {
            var li = $('<li class="list-group-item">' + input.val() + '</li>');
            
                li.hide()
                    .appendTo('.list-group')
                    .css({backgroundColor: '#00bc8c'})
                    .delay(200)
                    .animate({backgroundColor: '#303030'});

                input.val('').focus();
        };
    });
});

input.on('keypress', function(event){
    if ( event.which === 13 ) {
        form.submit();
        return false;
    }
})
}(jQuery));

这是 config.php ：

<?php

// show all errors
ini_set('display_startup_errors', 1);
ini_set('display_errors', 1);
error_reporting(-1);

// Require Composer's autoloader.
require 'vendor/autoload.php';

// Using Medoo namespace
use Medoo\Medoo;

// Connect the database.
$database = new Medoo([
    'type' => 'mysql',
    'host' => 'localhost',
    'database' => 'todo',
    'username' => 'root',
    'password' => 'root'
]);

//global variables
$site_url = 'http://localhost:8888';

// Enjoy
$database->insert('account', [
    'user_name' => 'foo',
    'email' => 'foo@bar.com'
]);

$data = $database->select('account', [
    'user_name',
    'email'
], [
    'user_id' => 50
]);

// echo json_encode($data);

// [{
//    "user_name" : "foo",
//    "email" : "foo@bar.com",
// }]

标签： javascriptphpjqueryajax

解决方案

要为颜色设置动画，例如backgroundColor，您还需要导入jQuery UI. 如他们的文档中所述：

jQuery UI 项目扩展了 .animate() 方法，允许对一些非数字样式（例如颜色）进行动画处理。

这将适用于您尝试的 backgroundColor 转换。这是脚本标签

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

看看下面的片段。我还添加了fadeIn()

(function($) {

  var form = $('#add-form'),
    input = form.find('#text');
  input.val('').focus();
  form.on('submit', function(event) {
    event.preventDefault();


    var li = $('<li class="list-group-item">' + input.val() + '</li>');

    li.hide()
      .appendTo('.list-group')
      .css({
        backgroundColor: '#00bc8c'
      })
      .fadeIn()
      .delay(500)
      .animate({
        backgroundColor: '#303030',
        color: '#ffffff'
      }, 1000);

    input.val('').focus();

  });
}(jQuery));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<ul class="list-group col-sm-6">
</ul>
<form id="add-form" class="col-sm-6" action="_inc/add-item.php" method="post">
  <p class="form-group">
    <textarea class="form-control" name="message" id="text" rows="3" placeholder="is there [ /watch?v=GO3wwqikkF0 ] ?"></textarea>
  </p>
  <p class="form-group">
    <input class="btn-sm btn-danger" type="submit" value="add new thing">
  </p>
</form>

推荐阅读