Question

I wonder whether someone may be able to help me please.

The extract of code below successfully creates a table showing records pertinent to the current user.

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

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

In addition to the delete button you’ll notice that there is a div called deletelocationresponse. 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.

<script type="text/javascript">
$(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;
    });
});
</script>
<style type="text/css">
#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;
}
</style>

The problem I’m having is that when the Delete button is clicked the onscreen message is stuck on the Please wait message.

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: $('#locationsconsole').submit(function(){.

On my other pages my form is created via HTML whereas this script uses PHP.

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?

Any help would be gratefully appreciated.

Many thanks and kind regards

Answer 1

The first step is to do basic debugging. FireBug, or other client side debugging tools can give you a lot of power. You can also start putting in alerts. For example, you can put a code like alert('got here!'); inline in the javascript to see which line specifically is throwing the error. If you are using FireBug, you can replace this with console.log('got here');

console.log will also allow you to dump nested variables, if you find the problem is in your response.

Secondly, save the rendered page as HTML, and then start to troubleshoot that. This eliminates the PHP side of the debugging, since you have either a HTML error or an error in the JSON response from the AJAX request.

Client side debugging tools like Firebug will also let you see the AJAX request and the raw response.