SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    monitormensch oerdec's Avatar
    Join Date
    Sep 2004
    Location
    Hamburg
    Posts
    706
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unobtrusive Confirm Boxes [prototype]

    Hello,

    I want a confirm box to appear whenever a user wants to delete a record set. Unfortunately itīs not working like intended. This is my HTML:

    Code HTML4Strict:
    ...
    <td>Edward</td>
    <td>Example</td>
    <td><a href="http://example/users" id="delete_33" class="delete">delete</a></td>
    ...

    This is my JavaScript:

    Code JavaScript:
    var confirmDeletion = function() {
      var url = window.location.href;
      document.getElementsByClassName('delete').each(function(del) {
        var confirmDel = function() {
          var check = confirm('Are you shure?');
          if (check == true) {
            alert(url + 'delete/' + this.id);
            window.location.href = url + 'delete/' + this.id;
          }
        }
        Event.observe(del, 'click', confirmDel);
      });
    };
    Event.observe(window, 'load', confirmDeletion);

    http://example/users - Thereīs the list with all record sets. http://example/users/delete/ - the URL of the deletion controller.

    It may look strange - my JavaScript knowledge is very poor. There are two problems. When I push the cancel button in FF the page reloads ... but the confirm box should just close. And in IE the id is undefined.


    Thanks,

    oerdec

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    eventhandlers receive the event as their first argument, and you can use this to stop it carrying out the default action:
    Code:
    var confirmDel = function(e) {
      Event.stop(e);
      var check = confirm('Are you sure?');
      if(check) {
        window.location.href = url + 'delete/' + this.id;
      }
    };
    your code can be shortened a little by using the $$ selector shortcut, and the 'invoke' part of Enumerable rather than 'each':
    Code:
    $$('a.delete').invoke('observe','click',function(e) {
      Event.stop(e);
      var check = confirm('Are you sure?');
      if(check) {
        window.location.href = url + 'delete/' + this.id;
      }
    });

  3. #3
    monitormensch oerdec's Avatar
    Join Date
    Sep 2004
    Location
    Hamburg
    Posts
    706
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, gjones. It works now. Your optimised code, too.

    I had a look at the documentation, it says "Since it avoids the cost of a lexical closure over an anonymous function (like you would do with each or collect), this performs much better.".

    Sounds good, but what does it mean? Lexical closure?!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •