Question

I wonder whether someone can help me please.

I’m using the code below to create a delete button with icon, which, when coupled with Javascript, allows a user to delete images from a gallery page.

I’m currently using a icon which I’ve downloaded, but what I’d like to use, if possible, is the ui.Trash icon.

I’m the first to admit that I’m not particularly well versed to applying .css files and settings and it took me quite some time to put together the current script.

From what I’ve been reading, I think I’m right in saying that the image is called via a span class? and I’ve tried to use this instead of the url but this causes my gallery style to go a little awray.

<style>

         .galleria-thumbnails .btn-delete {    
          display: block;  
          position: absolute; bottom : 0px;  
          width: 80px;     
          height: 80px;    
          cursor: pointer;     
          background: url(trashout.png) no-repeat bottom; } 

        </style>

    <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"); 

        // send the AJAX request
        $.ajax({
        url : 'delete.php',
        type : 'post',
        data : { image : img.attr('src') },
        success : function(){
        alert('Deleting image... ');
        img.parent().fadeOut('slow');
        }
        });

        return false;
        });

        });

    </script>

I’ve included the icon name in my AJAX script, but I’m unable to actually create the icon and I’m not really sure what to do next. I just wondered whether someone could have a look at this and offer some help please on how I can change the icon.

Many thanks and regards

Answer 1

Here’s an example with a jQuery UI button that only displays the trash icon:

<button class="table-delete-link" title="Delete" href="delete-example.php?id=17">
    <span class="ui-icon ui-icon-trash"></span>
    <span class="ui-button-text">Delete</span>
</button>


$(document).ready(function() {
    $('button.table-delete-link').click(function () {
        var targetUrl = $(this).attr('href');
        $.ajax({
            url: targetUrl,
            type: 'GET',
            success: function (data, textStatus, xhr) {
                alert('Item successfully deleted!');
            },
            error: function (xhr, textStatus, errorThrown) {
                var errorMessage = xhr.responseText;
                errorMessage = errorMessage.substring(errorMessage.indexOf('<title>') + 7, errorMessage.indexOf('</title>'));
                alert('Unable to delete item: ' + errorMessage);
            }
        });
        return false;
    });
});

See this in action on jsFiddle: http://jsfiddle.net/jimmym715/qpDha/