lost span after jQuery ajax call

[Firemankurt]

The IDEA:

 

I have several spans with an IDs of  "Chunk0","Chunk1","Chunk2", etc...

 

<span id="Chunk0">Waiting...</span>
<span id="Chunk1">Waiting...</span>
<span id="Chunk2">Waiting...</span>

 

I want to give feedback to user about where in the process each "Chunk" of data is as it is processed by jQuery (Sent to the server and returned status).

 

It starts out as "waiting..."

Then as it is sent "Sending Now..."

Then when server returns result I want it to say "Sent"

 

<!--
sending = function (id)
{
$('#Chunk'+id).html( 'Sending Now...' );
$.ajax( {
type: "POST",
url: 'Paging3/ajax/paging.php',
data: {Udate:UFID,ChunkNum:id},
success: function(r){ $('#Chunk'+id).html( 'Sent' ); },
error: function(){alert('Paging Set Failed - Please check your connection.');}
});
id++;
if ($('#Chunk'+id).length) sending(id);
}

//-->

 

 

The PROBLEM:

The span changes to "Sending Now..." but the spans never change to "Sent" after the ajax call.

 

I changed the success function to see if I could debug it and found that the code below alerts "#Chunk0 NOT FOUND" every time.

 

<!--
sending = function (id)
{
$('#Chunk'+id).html( 'Sending Now...' );
$.ajax( {
type: "POST",
url: 'Paging3/ajax/paging.php',
data: {Udate:UFID,ChunkNum:id},
success: function(r){ if($('#Chunk'+id).length) {alert('#Chunk'+id+' FOUND');} else {alert('#Chunk'+id+' NOT FOUND');} $('#Chunk'+id).html( 'Sent' ); },
error: function(){alert('Paging Set Failed - Please check your connection.');}
});
id++;
if ($('#Chunk'+id).length) sending(id);
}

//-->

 

Why is jQuery not finding the span after the ajax call?

[Mahngiel]

if you comment out the $('#Chunk'+id).html( 'Sending Now...' ); part, does it work?

[Firemankurt]

Kinda solved it.

 

I changed to:

<!--
sending = function (id)
{
var curChunk = $('#Chunk'+id);
curChunk.html( 'Sending Now...' );
$.ajax( {
type: "POST",
url: 'Paging3/ajax/paging.php',
data: {Udate:UFID,ChunkNum:id},
success: function(r){ curChunk.html( 'Sent' ); },
error: function(){alert('Paging Set Failed - Please check your connection.');}
});
id++;
if ($('#Chunk'+id).length) sending(id);
}

//-->

 

It works and is probably more efficient but I am not totally sure why it did not before????