Re: [Proto-Scripty] Confirm() happening twice on click.

231 views
Skip to first unread message

Jason Westbrook

unread,
Jul 11, 2012, 12:37:45 PM7/11/12
to prototype-s...@googlegroups.com

can you either post the HTML that you are using or post the url where it is located publicly?


you can simplify your javascript this way


$$('td a.delete').each(function(s){
    s.observe('click', confirmDelete);
  } );


Jason Westbrook | T: 313-799-3770 | jwest...@gmail.com



On Wed, Jul 11, 2012 at 9:26 AM, thinsoldier <thins...@gmail.com> wrote:
Hello.

I have a page that lists records and each row has a link that goes to a page which deletes the associated record.

But before the browser navigates to that page I stop it by asking the user if they really want to delete the item.

If they click cancel the browser goes nowhere.
If they click OK the browser navigates to the php file that deletes the record.

My problem is that after the confirm() UI appears and is clicked, it appears AGAIN, then when I click again does the expected behaviour occur.

What is causing that in this code?

document.observe("dom:loaded", function() {
  // attach to all delete links in the table
  var dels = $$('td a.delete');
  dels.each(function(s){
    s.observe('click', function(event){ confirmDelete(event); }  );
  } )
});


function confirmDelete(event)
{
    var ask = confirm('Are you sure you want to delete this entry?');
   
    if(ask){ xfoo = 'follow link - delete it'; }
    else{ event.stop();  xfoo =' do nothing - stop event ';      }
}

--
You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.
To view this discussion on the web visit https://groups.google.com/d/msg/prototype-scriptaculous/-/qwdMPG_i8WMJ.
To post to this group, send email to prototype-s...@googlegroups.com.
To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en.

Jason Westbrook

unread,
Jul 11, 2012, 2:13:13 PM7/11/12
to prototype-s...@googlegroups.com


I don't see any problems with the HTML elements

and to answer your question the observe method identifies the function as the "handler" and passes the event object to the handler


and you can get the javascript to one line if you want

$$("td a.delete").invoke("observe","click",confirmDelete);


Jason Westbrook | T: 313-799-3770 | jwest...@gmail.com



On Wed, Jul 11, 2012 at 10:40 AM, thinsoldier <thins...@thinsoldier.com> wrote:


On Wednesday, 11 July 2012 12:37:45 UTC-4, Jason wrote:

can you either post the HTML that you are using or post the url where it is located publicly?


Here is the html:

<table>
<thead>
<tr>
<th>Saved</th>
<th>Name</th>
<th>Rename</th>
<th>Delete</th>
<th>Switch Format</th>
<th>Browse</th>
</tr>
</thead>
<tbody>
<tr>
  <td>
    11 Nov, 2009
  </td>
  <td>
    <a class="rsslink" href="savedsearches.php?cmd=rss&amp;ssid=39" title="Access RSS Feed"> <img src="/images/icons/rss_16.png"> Sale less than x 250 thousand </a>
  </td>
  <td>
    <a class="rename" href="user.php?cmd=savedSearchRenameForm&amp;id=39">Rename</a>
  </td>
  <td>
    <a class="delete" href="user.php?cmd=savedSearchDelete&amp;id=39" title="Cannot undo."><img src="/images/icons/close_32.png" alt="delete"></a>
  </td>
  <td>
    <a class="reformat" href="user.php?cmd=savedSearchSwitchFormat&amp;id=39" title="Receive this by e-mail instead.">
      <img src="/images/icons/rss_32.png"> <img src="/images/icons/arrow_right_16.png"> <img src="/images/icons/email_32.png">
    </a>
  </td>
  <td>
    <a class="browse" href="search.php?cmd=search&amp;formcat=residential&amp;searchType=BUYSEARCH&amp;searchOnPriceField=price&amp;island=252&amp;maxprice=250000"><img src="/images/icons/search_32.png" alt="view results"></a>
  </td>
</tr>
<tr>
  <td>
    25 Jun, 2012
  </td>
  <td>
    <a class="rsslink" href="savedsearches.php?cmd=rss&amp;ssid=77" title="Access RSS Feed"> <img src="/images/icons/rss_16.png"> All the -plexes in NP </a>
  </td>
  <td>
    <a class="rename" href="user.php?cmd=savedSearchRenameForm&amp;id=77">Rename</a>
  </td>
  <td>
    <a class="delete" href="user.php?cmd=savedSearchDelete&amp;id=77" title="Cannot undo."><img src="/images/icons/close_32.png" alt="delete"></a>
  </td>
  <td>
    <a class="reformat" href="user.php?cmd=savedSearchSwitchFormat&amp;id=77" title="Receive this by e-mail instead.">
    <img src="/images/icons/rss_32.png"> <img src="/images/icons/arrow_right_16.png"> <img src="/images/icons/email_32.png">
   </a>
  </td>
  <td>
    <a class="browse" href="search.php?cmd=search&amp;formcat=residential&amp;searchType=BUYSEARCH&amp;searchOnPriceField=price&amp;island=410&amp;property_type%5B0%5D=655&amp;property_type%5B1%5D=656&amp;property_type%5B2%5D=657&amp;property_type%5B3%5D=695"><img src="/images/icons/search_32.png" alt="view results"></a>
  </td>
</tr>
</tbody>
</table>

 

you can simplify your javascript this way


$$('td a.delete').each(function(s){
    s.observe('click', confirmDelete);
  } );

But wouldn't the confirmDelete function need to be given the click event so it knows which click Event object to event.stop() ?

--
You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.

thinsoldier

unread,
Jul 11, 2012, 3:06:15 PM7/11/12
to prototype-s...@googlegroups.com
Thanks for all your help. Thing thing has been buggin me for a very long!

Could you explain what exactly was happening with my original code that made the confirm fire twice?

To post to this group, send email to prototype-scriptaculous@googlegroups.com.
To unsubscribe from this group, send email to prototype-scriptaculous+unsub...@googlegroups.com.

Jason Westbrook

unread,
Jul 11, 2012, 3:10:40 PM7/11/12
to prototype-s...@googlegroups.com

Honestly I'm not exactly sure

there is a possibility that the observe method was calling confirmDelete instead of just tagging it as the event handler

Jason Westbrook | T: 313-799-3770 | jwest...@gmail.com



To view this discussion on the web visit https://groups.google.com/d/msg/prototype-scriptaculous/-/wwHOXznXcpYJ.

To post to this group, send email to prototype-s...@googlegroups.com.
To unsubscribe from this group, send email to prototype-scripta...@googlegroups.com.

Victor

unread,
Jul 16, 2012, 6:53:25 AM7/16/12
to prototype-s...@googlegroups.com
My problem is that after the confirm() UI appears and is clicked, it appears AGAIN, then when I click again does the expected behaviour occur.

document.observe("dom:loaded", function() {
  // attach to all delete links in the table
  var dels = $$('td a.delete');
  dels.each(function(s){
    s.observe('click', function(event){ confirmDelete(event); }  );
  } )
});


function confirmDelete(event)
{
    var ask = confirm('Are you sure you want to delete this entry?');
   
    if(ask){ xfoo = 'follow link - delete it'; }
    else{ event.stop();  xfoo =' do nothing - stop event ';      }
}


Try to show target of click events in your confirmDelete(), e.g. like this:

function confirmDelete(event) {
    var ask = confirm('Are you sure you want to delete this entry?' +
      '\n(clicked on ' + Object.inspect(event.findElement()) + ')');
    if(ask){ xfoo = 'follow link - delete it'; }
    else{ event.stop();  xfoo =' do nothing - stop event ';      }
}

It will give additional information, e.g. that your code receives click events from both A and IMG elements.

thinsoldier

unread,
Jul 16, 2012, 11:59:26 AM7/16/12
to prototype-s...@googlegroups.com
I've actually found the cause of my problem. 
Quite foolish of me. I had earlier experimented with having all my javascript after the footer of the page rather than in the <head>. So I had 2 instances of the script tag that contained this code on 1 page.

I am grateful to everyone for their help. I learned much and was able to decrease the number of lines of code needed.

Phil Petree

unread,
Jul 16, 2012, 12:42:50 PM7/16/12
to prototype-s...@googlegroups.com

At least by half ;-)

--
You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group.
Reply all
Reply to author
Forward
0 new messages