Question

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

Firstly, apologies because I’ve only just started to use Javascript, so I’m perhaps I’m making a very basic mistake, so please bear with me.

I’m trying to implement Example 2 from this piece of third party software in my gallery page shown here.

Shown in the code below, I’ve been able to add the message to the onclick event i.e. when the user clicks the ‘bin’ icon, but the AJAX piece of code that is supposed to run upon the ‘Delete’ button being clicked is failing:

<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(){
    $.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(Delete) {
      var img = $(this).closest(".galleria-image").find("img"); 
      // send the AJAX request
      $.ajax({
        url : 'delete.php',
        type : 'post',
        data : { image : img.attr('src'),  userid: "VALUE", locationid: "VALUE"},
        success : function(){
        img.parent().fadeOut('slow');
    }
    });               
    });
    return false;
    });     
    });

</script>

I’m really not sure where I’ve gone wrong here, despite spending some time disecting the code. I just wondered whether someone could perhaps look at this please and let me know where I’ve gone wrong.

POST UPDATE
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").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'),  userid: "VALUE", locationid: "VALUE"},
            success : function(){
            img.parent().fadeOut('slow');

    }
        });               
        });
        return false;
        });     
        });

    </script>

Many thanks and regards

Answer 1

I have renamed the variable Delete to result.

function(result) {
  //result variable holds the value of what user clicks 'Delete' or 'Cancel'. 
  //Cancel click will pass false.
  //Delete click will pass Delete.
  alert(result)
  //You can also check if(result=='Delete') instead of if(result)
  if(result)
  {
      var img = $(this).closest(".galleria-image").find("img"); 
      // send the AJAX request
      $.ajax({
        url : 'delete.php',
        type : 'post',
        data : { image : img.attr('src'),  userid: "VALUE", locationid: "VALUE"},
        success : function(){
        img.parent().fadeOut('slow');
    }
  }

See if this works.