动态将新记录添加到MySQl中-淡入淡出旧的显示，但是更新的数据不会淡入

问题描述

| 我将尝试尽可能准确地解释我的问题，在这种情况下，我认为JSfiddle不会提供帮助。 我所拥有的页面是显示数据库表的所有记录的页面以及添加新记录的表单。 填写并提交表单后，新记录将正确添加到数据库中，并且淡出旧的html表，以允许淡入新表，但这是中断的地方，我留下空白部分桌子应该在哪里。 适当的代码如下： gigs.PHP：

$(\".comment_button\").click(function() {

$(\'#gigs\').fadeOut(1000).empty();

var dateval = $(\"#date\").val();
var venueval = $(\"#venue\").val();
var timeval = $(\"#time\").val();
var untilval = $(\"#until\").val();
var mapval = $(\"#map\").val();


var dataString = \'date=\'+ dateval + \'&venue=\'+ venueval + \'&time=\'+ timeval + \'until=\'+ untilval + \'map=\'+ mapval;

if(dateval==\'\')
{
    alert(\"Please select the date of the gig\");
}
else if(venueval==\'\')
{
    alert(\"Please enter a venue\");
}
else if(timeval==\'\')
{
    alert(\"Please select a start time\");
}
else if(untilval==\'\')
{
    alert(\"Please enter a finish time\");
}
else
{
    $(\"#flash\").show();
    $(\"#flash\").fadeIn(400).html(\'<img src=\"images/loading.gif\" align=\"absmiddle\">&nbsp;<span class=\"loading\">Updating Gigs...</span>\');

    $.ajax({
        type: \"POST\",url: \"add-gigs.PHP\",data: dataString,cache: false,success: function(html){
            $(\"gigs\").prepend(html).fadeIn(1000);
            $(\"#flash\").fadeOut(1000);  
        }
    });
}
return false;
});
});

添加新记录的表格：

<form  method=\"post\" name=\"form\" action=\"\">
                <fieldset>
                <legend>Add Gig</legend>
                <span class=\"add-gig-label-venue\">Venue:</span>  <input type=\"text\" name=\"venue\" id=\"venue\" maxlength=\"100\" /><br />
                <span class=\"add-gig-label-date\">Date:</span>  <input type=\"text\" name=\"date\" id=\"date\" maxlength=\"10\" />
                <span class=\"add-gig-label-start\">Start Time:</span>  <input type=\"text\" name=\"time\" id=\"time\" maxlength=\"5\" />
                <span class=\"add-gig-label-end\">End Time:</span>  <input type=\"text\" name=\"until\" id=\"until\" maxlength=\"5\"/> <br />
                <span class=\"add-gig-label-map\">Google Maps URL:</span>  <input type=\"text\" name=\"map\" id=\"map\" />
                <input type=\"submit\"  value=\"Add Gig\"  id=\"v\" name=\"submit\" class=\"comment_button\"/>
                </fieldset>
            </form>

下面是显示ajax加载gif称为

flash

的div以及显示当前记录的表：

<div id=\"flash\" align=\"left\" ></div>
<div id=\"gigs\"> <!-- div that is emptied -->
<!-- Start the table -->
<table class=\"gig-table\" cellspacing=\"0\" cellpadding=\"0\">
<!-- table data -->
</table>
</div> <!-- end \'gigs\' div -->

另一个文件add-gigs.PHP只需使用

POST

变量并创建一个MySQL查询以插入新记录，然后该表具有与另一个文件中相同的PHP代码，但是显然，此文件现在将包括新的添加的行。 这是我无法淡出的桌子。 我希望这是有道理的，否则我将尝试进一步阐述。     

解决方法

        您忘了

$(\"gigs\")

中的“＃”

    success: function(html){
        $(\"#gigs\").prepend(html).fadeIn(1000);
        $(\"#flash\").fadeOut(1000);  
    }

只需

$(\"gigs\")

，就意味着在页面上查找

<gigs>

元素。 \“＃\”前缀意味着通过\“ id \”值查找元素。