8

I would like to have a confirmation message when I delete the items the media manager. For now, to delete an image, I just have to click on the top-right cross and the image is gone: if I make a mistake, well too bad! I looked into the media manager options but I couldn't see anything such as what I am looking for.

How could I get a confirmation message or a popup that will ask for a confirmation before deleting the item?

Thanks a lot for your help!

|improve this question
  • I have updated the answer with instructions as to where you should add the code. I forgot that the media files are displayed using an Iframe, and loaded using the component.php view. – johanpw Nov 20 '14 at 1:59
8

You can add a few lines of jQuery to your admin template (or add it using a plugin that fires only for the admin area):

jQuery("a.delete-item").on('click', function(e){
    if (confirm("Do you want to delete this image?") != true) {
        e.preventDefault();
    }
});

That will catch the click on the delete button X and display a dialog box.

Edit:
The media files are displayed using an Iframe, which in turn is loaded using the &tmpl=component parameter. The code above must therefore be added to the file administrator\templates\YOURADMINTEMPLATE\component.php (inside a <script> tag).

That should work :)

|improve this answer
  • Thanks for the edit, @Lodder, but according to the jQuery API, .click() is a shortcut for .on( "click", handler ). What's the difference (and what's "best practice") in this case? – johanpw Nov 18 '14 at 22:01
  • 2
    The .on() is the recommended way to do event binding as of a particular (can't remember which exactly) version of jQuery. It uses less memory and is better when for dynamic approaches. It's not of course mandatory, but definitely now the preferred method. For something as simple as the code you've written, then click() would be just fine, but I like to keep thing future proof just incase anything may get added to it...+1 by the way :) – Lodder Nov 18 '14 at 22:08
  • Thanks @johanpw for your answer! I have added your code to administrator\templates\isis\js\template.js but it isn't doing anything. In which file of my admin template I am supposed to add it? Thanks! – JinSnow Nov 19 '14 at 12:55
  • 2
    To expand on Lodder's answer, the on() method uses delegated events. The primary benefit being delegated events will be added to child elements not yet added to the DOM. Using $(document).on('click', 'a.delete-item', callbackFunction); guarantees the click event will fire even on dynamically generated content not added to the DOM. Very useful for AJAX heavy websites. – Brian Bolli Nov 20 '14 at 0:32
  • Thanks for the explanations. There's always something new to learn. – johanpw Nov 20 '14 at 1:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.