Question

I have this very simple jQuery script, which gives me error that delay is not a function.

What am I doing wrong? Thing is that everything works, except that delay is causing error :S

I made sure I’m loading only jquery library once, which is also latest version 1.7.1

function    statusInquiry(orderItemID)
{
    var loadUrl = "bl_updaInfo.php";

    $.post(  
        loadUrl,
        {"orderItemID": orderItemID, "type": "statusInquiry"},
        function(responseText){
            $("#reportArea" + orderItemID).fadeIn("slow").html(responseText);
        },
        "html"  
    );
    updateLogList(orderItemID);

    $("#reportArea" + orderItemID).delay(10000).fadeOut("slow");
}

ERROR I’m getting:
– [19:44:10.792] $("#reportArea" + orderItemID).delay is not a function

responseText is exactly this:

<table class="tablerainbow-noborder" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="color: #888786;" width="70%">Client requests status for this search.</td>
<td style="color: #888786;">Posted 2012-03-12 12:34:22 by Client</td>
</tr>
</tbody>
</table>

Answer 1

You are passing in a string value. Have you tried passing in a number (without the quotes)?

Also, are you sure you’re using this the way it was intended? According to the jQuery API docs, delay affects the next animation in the queue, not the ones that have already been executed.

Ultimately, the answer depends on what you want to do. The fadeOut command will not be affected by the call to delay if delay appears after the fadeOut in the call chain. If you want to pause for a bit before the fadeOut occurs, then you’ll need to switch the two calls around.

EDIT: More thoughts based on some interaction with @Adrov.

From the jQuery API docs for post, you might want to take a look at the contents of the responseText object when it goes into the success callback. If you are putting a complete page of HTML into an existing div tag, you’ll end up with conflicts and odd behaviors. The example below is straight from the jQuery docs. Notice how a find is executed on the results before putting the data into the existing page.

$.post( url, { s: term },
      function( data ) {
          var content = $( data ).find( '#content' );
          $( "#result" ).empty().append( content );
      }
    );

EDIT NOTE: Ken Redler’s answer suggests to chain the delay and fadeOut methods inside the success callback for the post method. I just want to make sure that this suggestion doesn’t get lost, as it’s a very good suggestion.