动态添加新记录到MySQl - 淡出旧的显示精细但更新的数据不会退色

我会尝试尽可能准确地解释我的问题，我不认为JSFiddle会在这种情况下提供帮助。动态添加新记录到MySQl - 淡出旧的显示精细但更新的数据不会退色

我所拥有的是一个页面，其中显示了数据库表的所有记录以及添加新记录的表单。

一旦填写并提交了表单，新记录就会正确添加到数据库中，并且旧的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 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代码，但很明显这一个现在会包括新添加的行。

正是这个表，我不能让淡入。

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

来源

2011-06-15 martincarlin87

请你详细说明一下。 $（ “演出”）预定（HTML）.fadeIn（1000）; “演出”在哪里？你可以使用ID或类名访问它...？ – chhameed 2011-06-15 11:36:11

嗨，我弄明白了，'gigs'在代码发布的最后一节，我愚蠢地错过了＃号，这就是为什么它不能正常工作。 – martincarlin87 2011-06-15 11:47:56

你忘了 “＃” 在$("gigs")

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

正如刚才$("gigs")，这意味着寻找在页面上<gigs>元素。 “＃”前缀表示通过“id”值查找元素。

来源

2011-06-15 11:32:49 Pointy

哦不，我不相信我错过了。对不起，现在愚蠢的问题，但感谢帮助，我疯了！ – martincarlin87 2011-06-15 11:37:07

动态添加新记录到MySQl - 淡出旧的显示精细但更新的数据不会退色

回答

相关问题