Question

我会尽可能准确地解释我的问题，我不认为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>

以下是显示名为flash的ajax加载gif的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代码，但很明显这个将包括新添加的行。

这张桌子让我不能淡出。

我希望这是有道理的，否则我会尝试进一步阐述。

Answer 1

您忘记了$("gigs")

中的“＃”

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

仅作为$("gigs")，表示在页面上查找<gigs>元素。 “＃”前缀表示按“id”值查找元素。

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

1 个答案: