Question

I wonder whether someone can help me please.

The extract of script below enables a user to delete records from a table, linked to a mySQL database.

<script type="text/javascript">
    $(document).ready(function(){
        $('form.delete').submit(function(e){ 

            e.preventDefault();
            var elem = $(this).closest('.delete');
            var lid = $(this).serialize();
            $.confirm({
                 'title'    : 'Delete Confirmation',
            'message'   : 'If you delete this Location, all associated Find records will also be deleted. <br /><br />They cannot be restored at a later time! Do you wish to continue?',
                'buttons'   : {
                    'Yes'   : {
                'class' : 'blue',
                'action': function(){
                //elem.slideUp();
                              $.ajax({ 
                            url: 'deletelocation.php', 
                            type: 'POST', 
                            data: lid, 
                            success: function(response) { 
                            console.log('success', response); 
                                    setTimeout(function() { 
                                    $('body').fadeOut(400, function(){
                                    location.reload();
                                    setTimeout(function(){
                                    $('body').fadeIn(400);
                                     }, 500);
                                     window.scrollTo(x-coord, y-coord);
                                 });
                            }, 2000);
                            }, 
                            error: function() { 
                            console.log('error') 
                            } 
                            }); 
                    }
                },
                'No'    : {
                    'class' : 'gray',
                                        'action': function(){}  // Nothing to do in this case. You can as well omit the action property.

                }
            }
        });

    });

    })
</script> 

I can manage to get the ‘Delete Confirmation’ message working and the actual deletion of the record, but I’m having a little difficulty in adding a ‘Fade out’ as the deletion takes place and then a ‘Fade in’ upon page reload.

I’ve read a number of posts and from these I came up with the following which I’ve integrated into the above :

setTimeout(function() { 
$('body').fadeOut(400, function(){
location.reload();
setTimeout(function(){
$('body').fadeIn(400);
}, 500);
window.scrollTo(x-coord, y-coord);
});
}, 2000);

However this doesn’t work, and I’m not sure why. I just wondered where someone may be able to take a look at this please and let me know where I’m going wrong.

Many thanks and kind regards

Answer 1

firstly thank you very much for your help. I have however realised where my problem lay. I had the JavaScript after the body section of my page. I’ve now moved this to the beginning of my script before the form, and it works fine. Kind regards