SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Location
    Wellington, NZ
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Event listener - simply javascript

    Hi,

    I've got a really simple function I want to create, a confirm delete function that is applied to all links with a class of delete. A confirm message appears when the link is clicked, returning false if cancel is clicked.

    This is my code and for whatever reason that I just don't get (coz I'm a bit confused by all this stuff), clicking cancel when the confirm message appears seems to return true regardless.

    HTML Code:
    <a href='/admin/video.php?deletevid=1' class='delete'>Delete</a>
    Code JavaScript:
    var confirmDelete = 
    {
     init: function()
     {
      var links = Core.getElementsByClass("delete");
     
      for (i = 0; i < links.length; i++) 
      {
       Core.addEventListener(links[i], "click", confirmDelete.deleteListener);
      }
     },
     
     
     del: function(link)
     {
      return confirm("Are you sure you want to delete?")
     },
     
     
     deleteListener: function(event)
     {
      confirmDelete.del(this);
     }
     
    };
     
    Core.start(confirmDelete);

    I'm using the core library from the book Simply Javascript.

    How do I get this thing to return false, it's got to be somthing simple.

    Thanks

    Richard.

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When using event listeners it is not enough to return false if you want to stop a default action from taking place. You need to use event.preventDefault or returnValue = false;

    These ideas are explained from pg 119 in 'Simply JavaScript'.

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Location
    Wellington, NZ
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right ok, i've got it now, I'd made my code just a bit too complicated, I've fixed it now, adding in a preventDefault:

    Code JavaScript:
    var confirmDelete = 
    {
     init: function()
     {
      var links = Core.getElementsByClass("delete");
     
      for (i = 0; i < links.length; i++) 
      {
       Core.addEventListener(links[i], "click", confirmDelete.deleteListener);
      }
     },
     
     
     deleteListener: function(event)
     {
      if (confirm("Are you sure you want to delete?"))
      {
       return true;
      }
      else
      {
       Core.preventDefault(event);
      }
     }
     
     
    };
     
    Core.start(confirmDelete);

    Thanks

    Richard.

  4. #4
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The return true part doesn't really make sense. This does the same, and is slightly easier to read:
    Code:
    if (!confirm("Are you sure you want to delete?")) {
       Core.preventDefault(event);
    }

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Location
    Wellington, NZ
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah yes, of course, thanks, i'll modify my code.


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
  •