Question

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

Firstly, my sincere apologies because I’m not very well versed with JavaScript and some may feel this a foolish post, but any help would be greatly appreciated.

I’m currently using the script below to delete gallery images.

<script type="text/javascript"> 
        Galleria.ready(function() {
            this.$('thumblink').click();

        $(".galleria-image").append( 
        "<span class='btn-delete ui-icon ui-icon-trash'></span>"); 
        $(".btn-delete").live("click", function(){  
        var img = $(this).closest(".galleria-image").find("img"); 
        $.msgbox("You are about to delete this image. It cannot be restored at a later date. Do you wish to continue?", {
        type: "alert",
          buttons : [
            {type: "submit", value: "Delete"},
            {type: "cancel", value: "Cancel"}
          ]
          },
          function(result) {
          if(result)


          // send the AJAX request
          $.ajax({
            url : 'delete.php',
            type : 'post',
            data : { image : img.attr('src'),  idnum: "VALUE", lid: "VALUE"},
            success : function(){
            img.parent().fadeOut('slow');
            }
        });               
    });
        return false;
    });     
});

</script>

I’ve now find a more suitable jQuery confirmation script here which I’d now like to try and implement.

Using the script.js file from this site and my existing script, I’ve tried to combine them and have come up with the following:

<script type="text/javascript"> 
Galleria.ready(function() {
    this.$('thumblink').click();
    $(".galleria-image").append( 
    "<span class='btn-delete ui-icon ui-icon-trash'></span>"); 
    $('.btn-delete').click(function(){
    var elem = $(this).closest(".galleria-image").find('.item'); 
        $.confirm({
            'title'     : 'Delete Confirmation',
            'message'   : 'You are about to delete this item. <br />It cannot be restored at a later time! Continue?',
            'buttons'   : {
                'Yes'   : {
                    'class' : 'blue',
                    'action': function(){
                        elem.slideUp();
                              $.ajax({
                                url : 'delete.php',
                                type : 'post',
                                data : { image : img.attr('src'),  idnum: "VALUE", lid: "VALUE"},
                                success : function(){
                                img.parent().fadeOut('slow');
                                }
                            }); 

                    }
                },
                'No'    : {
                    'class' : 'gray',
                    'action': function(){}  // Nothing to do in this case. You can as well omit the action property.
                }
                }
                }
            }
        });

    });

});
</script>

The problem I’m having is that although the page loads, it doesn’t load in the default Gallery image format, and the trash icon which I use as a visual trigger to delete the image has disappeared at the bottom of each image.

I’ve gone into the JavaScript Console and the error it shows is:Uncaught SyntaxError: Unexpected token }highlighting this line in my code as the problem: $.confirm({ but I have to be honest and say I’m not really sure what this means.

I’ve tried quite a few variations of changing the code around to try and get this to work, unfortunately without success.

I just wondered whether someone could possibly take a look at this please and provide some guidance on where I’m going wrong.

Many thanks and kind regards

Working solution

<script type="text/javascript"> 
Galleria.ready(function() {
this.$('thumblink').click();
$(".galleria-image").append( 
"<span class='btn-delete ui-icon ui-icon-trash'></span>"); 
$('.btn-delete').click(function(){
var img = $(this).closest(".galleria-image").find('img'); 
    $.confirm({
        'title'     : 'Delete Confirmation',
        'message'   : 'You are about to delete this item. <br />It cannot be restored at a later time! Continue?',
        'buttons'   : {
            'Yes'   : {
                'class' : 'blue',
                'action': function(){
                    //elem.slideUp();
                          $.ajax({
                            url : 'delete.php',
                            type : 'post',
                            data : { image : img.attr('src'),  idnum: "VALUE", lid: "VALUE"},
                            success : function(){
                            img.parent().fadeOut('slow');
                            }
                        }); 

                }
            },
            'No'    : {
                'class' : 'gray',
                'action': function(){}  // Nothing to do in this case. You can as well omit the action property.
                 }
               }
            });
        });
    });
    </script>

Answer 1

You are missing some braces, It cant be really solution to the problem but first check with this code, I have formatted with necessary braces and let us know your findings:

Galleria.ready(function() {
this.$('thumblink').click();
$(".galleria-image").append( 
"<span class='btn-delete ui-icon ui-icon-trash'></span>"); 
$('.btn-delete').click(function(){
var elem = $(this).closest(".galleria-image").find('.item'); 
    $.confirm({
        'title'     : 'Delete Confirmation',
        'message'   : 'You are about to delete this item. <br />It cannot be restored at a later time! Continue?',
        'buttons'   : {
            'Yes'   : {
                'class' : 'blue',
                'action': function(){
                    elem.slideUp();
                          $.ajax({
                            url : 'delete.php',
                            type : 'post',
                            data : { image : img.attr('src'),  idnum: "VALUE", lid: "VALUE"},
                            success : function(){
                            img.parent().fadeOut('slow');
                            }
                        }); 

                }
            },
            'No'    : {
                'class' : 'gray',
                'action': function(){}  // Nothing to do in this case. You can as well omit the action property.
                 }
               }
            });
        });
    });

Also Your success callfunction is missing data parameter