CODEWITHSUNDEEP
javascriptjspevent-handlingstruts2action
kanishk
kanishk

Reputation: 743

Action is triggered thrice on a single event

This is kind of simple (I know) but yet I cant figure it out.

What is happening:

I have a jsp on which a button triggers an action (which deletes a particular record in db). But what I have observed is that the action is triggered thrice when the button is clicked, causing an error message even though the record is deleted. There are two 'divs'(parent-child) on the jsp page(see the code below). The button is in the child one.

What I found out:

when I remove the parent div (which makes the child one, parent) everything works fine (of-course except for the function that the parent div was performing). I read this post :

Event handler triggered twice instead of once

which suggested 'event bubbling' problem. I tried adding stopPropagation(); But that did not workout either.

Maybe something simple is escaping my eye. Please help.

Here is my code for jsp:

<s:url id="scriptURL" action="getContactInfo" />
<sd:div href="%{scriptURL}" listenTopics="getContactInfo" formId="contactInfo" showLoadingText="false" preload="false">
    <s:url id="scriptURL1"  action='delContactInfo'/>
    <sd:div href="%{scriptURL1}" listenTopics="delContactInfo" formId="contactInfo" showLoadingText="false" preload="false">

        <s:actionerror/>
        <s:actionmessage/>
        <s:form name="contactInfo" id="contactInfo" action="editContactInfo">

            <sd:autocompleter id="contact"  name="contact"  label="Full Name " autoComplete="false" searchType="substring" list="contactList"  valueNotifyTopics="getContactInfo"/>
            <sd:autocompleter id="customer" name="customer" label="Company "   autoComplete="false" searchType="substring" list="customerList" valueNotifyTopics="getContactInfo"/>
            //////other controls////////


            //////other controls////////

            <s:submit id="submit" name="submit" value="Save Changes" align="center" onclick="saveEvent(event);"/>

        </s:form>

        <s:submit id="del" name="del" align="center" value="Delete" onclick="deleteEvent(event);"/>

    </sd:div>

</sd:div>

The JS file:

function deleteEvent(e)
{
    alert('Delete the selected account !!');
    alert('Are you sure?');
    dojo.event.topic.publish('delContactInfo');

    event = e || window.event;
    if ('bubbles' in event) {   // all browsers except IE before version 9
        if (event.bubbles) {
            event.stopPropagation();
            alert('1');
        }else {  // Internet Explorer before version 9
             event.cancelBubble = true;
            alert('2');
        }
    }else{
        event.cancelBubble = true;
        alert('3');
    }
}

function saveEvent(e){
    alert('Do you want to save the changes you made?');

    event = e || window.event;
    if ('bubbles' in event) {   // all browsers except IE before version 9
        if (event.bubbles) {
            event.stopPropagation();
        }else {  // Internet Explorer before version 9
            event.cancelBubble = true;
        }
    }else{
        event.cancelBubble = true;
    }
}

I guess the problem lies somewhere here only. Because after this action is called which is doing its job. Its just that it is being called thrice. But if you feel additional information is required, please comment.

Thanks!!

Edit

Upvotes: 1

Views: 569

Answers (2)

Hogan
Hogan

Reputation: 70531

If you have to do this inline use something like this:

<prior stuff here>; var e = arguments[0] || window.event; e.stopPropagation();

It is much better to put the code in an external function and call it like this:

onclick="handleEvent(event);"


function handleEvent(e)
{

   // function code

   // then
  event = e || window.event;
  if ('bubbles' in event) {   // all browsers except IE before version 9
     if (event.bubbles) {
       event.stopPropagation();
     }
     else {  // Internet Explorer before version 9
       event.cancelBubble = true;
     }      
   }
}

Example taken from various places including http://help.dottoro.com/ljgfjsxd.php

For your newest code I would suggest this:

   <s:form name="contactInfo" id="contactInfo" action="editContactInfo">

        <sd:autocompleter id="contact"  name="contact"  label="Full Name " autoComplete="false" searchType="substring" list="contactList"  valueNotifyTopics="getContactInfo"/>
        <sd:autocompleter id="customer" name="customer" label="Company "   autoComplete="false" searchType="substring" list="customerList" valueNotifyTopics="getContactInfo"/>
        //////other controls////////


        //////other controls////////

        <s:submit id="submit" name="submit" value="Save Changes" align="center" onclick="saveEvent(event);"/>
        <s:submit id="del" name="del" align="center" value="Delete"   onclick="deleteEvent(event);"/>
    </s:form>

Note: both submit buttons are in the same form.

Upvotes: 1

Jwalin Shah
Jwalin Shah

Reputation: 2521

pls. refer below link and use tag which is inbuild tag provided by struts2.

How to restrict double click on button in struts /Java?

Upvotes: 0

Related Questions