Delete Row With jQuery
<p>I wonder whether someone may be able to help me please.</p>

<p>The <strong>extract</strong> of code below successfully creates a table showing records pertinent to the current user.</p>

<pre><code>/* display row for each location */ 
echo "&lt;tr&gt;\n"; 
$theID = $row['locationid']; 
echo " &lt;td style='text-align: Center'&gt;{$row['locationname']}&lt;/td&gt;\n"; 
echo " &lt;td style='text-align: Left'&gt;{$row['returnedaddress']}&lt;/td&gt;\n"; 
echo " &lt;td style='text-align: Center'&gt;{$row['totalfinds']}&lt;/td&gt;\n"; 
echo " &lt;form name= 'locationsconsole' id= 'locationsconsole' action= locationsaction.php  method= 'post'&gt;&lt;input type='hidden' name='lid' value=$theID/&gt;                                                 &lt;td&gt;&lt;input type= 'submit' name= 'type' value= 'Details'/&gt;&lt;/td&gt;&lt;td&gt;&lt;input type= 'submit' name= 'type' value= 'Images'/&gt;&lt;/td&gt;&lt;td&gt;&lt;input type= 'submit' name= 'type' value= 'Add Finds'/&gt;&lt;/td&gt;&lt;td&gt;&lt;input type= 'submit' name= 'type' value= 'View Finds'/&gt;&lt;/td&gt;&lt;td&gt;&lt;input type= 'submit' name= 'type' value= 'Delete'/&gt;&lt;/td&gt;&lt;/form&gt;\n"; 
    &lt;/tbody&gt; 
    &lt;/table&gt; 
    &lt;div align="center"&gt;&lt;p id="deletelocationresponse"&gt;&lt;/p&gt;&lt;/div&gt;
</code></pre>

<p>At the end of this section of code, you'll see that there is a <code>Delete</code> button. Upon clicking this, a record is deleted from the table and the deletion functionality works correctly.</p>

<p>In addition to the delete button you'll notice that there is a div called <code>deletelocationresponse</code>. This runs a jquery script to provide onscreen messages to the user telling them whether the deletion has been successful or not. The code for this is below.</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(document).ready(function(){
    $('#locationsconsole').submit(function(){

        //check the form is not currently submitting
        if($(this).data('formstatus') !== 'submitting'){

            //setup variables
            var form = $(this),
                formData = form.serialize(),
                formUrl = form.attr('action'),
                formMethod = form.attr('method'), 
                responseMsg = $('#deletelocationresponse');

            //add status data to form
            form.data('formstatus','submitting');

            //show response message - waiting
            responseMsg.hide()
                       .addClass('response-waiting')
                       .text('Please Wait...')
                       .fadeIn(200);

            //send data to server for validation
            $.ajax({
                url: formUrl,
                type: formMethod,
                data: formData,
                success:function(data){

                    //setup variables
                    var responseData = jQuery.parseJSON(data), 
                        klass = '';

                    //response conditional
                    switch(responseData.status){
                        case 'error':
                            klass = 'response-error';
                        break;
                        case 'success':
                            klass = 'response-success';
                        break;  
                    }

                    //show reponse message
                    responseMsg.fadeOut(200,function(){
                        $(this).removeClass('response-waiting')
                               .addClass(klass)
                               .text(responseData.message)
                               .fadeIn(200,function(){
                                   //set timeout to hide response message
                                   setTimeout(function(){
                                       responseMsg.fadeOut(300,function(){
                                           $(this).removeClass(klass);
                                           form.data('formstatus','idle');
                                       });
                                   },2000)
                                    setTimeout(function() { 
                                    $('body').fadeOut(400, function(){
                                    location.reload();
                                    setTimeout(function(){
                                    $('body').fadeIn(400);
                                     }, 500);
                                     window.scrollTo(x-coord, y-coord);
                                 });
                            }, 2000);                           
                        });
                    });
                }
            });
        }

        //prevent form from submitting
        return false;
    });
});
&lt;/script&gt;
&lt;style type="text/css"&gt;
#deletelocationresponse {
    display:inline;
    margin-left:4px;
    padding-left:20px;
    font:Calibri;
    font-size:16px;
}

.response-waiting {
    background:url("images/loading.gif") no-repeat;
}

.response-success {
    background:url("images/tick.png") no-repeat;
}

.response-error {
    background:url("images/cross.png") no-repeat;
}
&lt;/style&gt;
</code></pre>

<p>The problem I'm having is that when the <code>Delete</code> button is clicked the onscreen message is stuck on the <code>Please wait</code> message.</p>

<p>Now I know this script works, because I use it on my other pages, obviously with the relevant fields changed. So I've narrowed it down to a problem in it picking up my form name, which is this line in the jQuery code: <code>$('#locationsconsole').submit(function(){</code>.</p>

<p>On my other pages my form is created via HTML whereas this script uses PHP.</p>

<p>I've tried researching this, but I'm not particularly well versed in JavaScript, so I'm not too sure what I should be looking for. Could someone possibly tell me please is there a way to call the form in a different way?</p>

<p>Any help would be gratefully appreciated.</p>

<p>Many thanks and kind regards</p>
