Question

I will try and explain my problem as accurately as possible, I don’t think a JSFiddle will help in this case.

What I have is a page where all records of a database table are shown and a form to add a new record.

Once the form is filled in and submitted, the new record is added to the database correctly and the old html table is faded out to allow for the new table to be faded in but this is where it breaks and I am left with a blank section where the table should be.

Appropriate code below:

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;
});
});

The form to add the new record:

<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>

and below this is the div to show an ajax loading gif called flash and the table where the current records are shown:

<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 -->

The other file, add-gigs.php simply takes the POST variables and created a MySQL query to insert the new record and then has the same php code for the table as it is in the other file but obviously this one will now include the newly added row.

It is this table that I cannot get to fade in.

I hope that makes sense, otherwise I will try and elaborate further.

Answer 1

You forgot the “#” in $("gigs")

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

As just $("gigs"), it means to look for a <gigs> element on the page. The “#” prefix means to look for an element by “id” value.