views:

320

answers:

4

I've got some code which works fine in IE but unfortunately not in Google Chrome/Firefox.

It relies upon calling a click() event on a button from javascript. Reading around it seems that this is an IE specific extension (doh). Is there any way I can do a similar thing in chrome + firefox? To clarify, it's executing the click event on a specific button, not handling what happens when the user clicks on a button.

Thanks

The code for those who asked for it:

function getLinkButton(actionsDiv)
{
    var hrefs = actionsDiv.getElementsByTagName("a");
    for (var i=0; i<hrefs.length; i++)
    {
        var id = hrefs[i].id;
        if (id !=null && id.endsWith("ShowSimilarLinkButton"))
        {
            return hrefs[i];
        }
    }
    return null;
}

function doStuff()
{
  //find the specific actions div... not important code...
  var actionsDiv = getActionsDiv(); 
  var linkButton = getLinkButton(actionsDiv);

  if (linkButton != null)
  {
    if (linkButton.click)
    {
        linkButton.click();
    }
    else
    {
        alert("Cannot click");
    }
  }
}

I don't really want to use jQuery unless absolutely necessary

+1  A: 

onclick attribute should be crossbrowser:

<input type="button" onclick="something()" value="" />

EDIT

And there was this question that seems to be about the same problem: http://stackoverflow.com/questions/748941/setattribute-onclick-and-cross-browser-compatability

Lex
A: 

onclick="methodcall();" works for me fine...

Brian
A: 

you can use onClick attribute or if you need more functionality have a look at jQuery and events it offers: http://api.jquery.com/category/events/

Kasia Gogolek
+2  A: 

I think you're looking for element.dispatchEvent:

function simulateClick() {
  var evt = document.createEvent("MouseEvents");
  evt.initMouseEvent("click", true, true, window,
    0, 0, 0, 0, 0, false, false, false, false, 0, null);
  var cb = document.getElementById("checkbox"); 
  var canceled = !cb.dispatchEvent(evt);
  if(canceled) {
    // A handler called preventDefault
    alert("canceled");
  } else {
    // None of the handlers called preventDefault
    alert("not canceled");
  }
}

I read your question as "I'm trying to fire the onclick event for my button", whereas everyone else seems to have read it as "I'm trying to handle an onclick event for my button". Please let me know if I've got this wrong.

Modifying your code, a proper x-browser implementation might be:

if (linkButton != null) 
{ 
  if (linkButton.fireEvent) 
    linkButton.fireEvent("onclick"); 
  else 
  { 
    var evt = document.createEvent("MouseEvents");
    evt.initMouseEvent("click", true, true, window,
                               0, 0, 0, 0, 0, false, false, false, false, 0, null);
    linkButton.dispatchEvent(evt);
  } 
} 
Andy E
you're right, everybody else is wrong :-)
Gordon Carpenter-Thompson
function clickButton(element) { if (element.click) { element.click(); } else if ("fireEvent" in element) { element.fireEvent("onclick"); } else { var evt = document.createEvent("MouseEvents"); evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); element.dispatchEvent(evt); } }This is the function i've got thanks to your code, doesn't work on Firefox however but does work on chrome now...
Gordon Carpenter-Thompson
I think the fireEvent bit is the bit which makes it work in Chrome..
Gordon Carpenter-Thompson
@Gordon: `fireEvent` works in IE too, so you can do away with the `click()`. I left a reference to `element` in the code that I meant to change to `linkButton` - `element.dispatchEvent(evt);` should be `linkButton.dispatchEvent(evt);`
Andy E
ah, found out why this code wasn't working in Firefoxhttp://devtoolshed.com/content/fix-firefox-click-event-issueFirefox does not support the javascript click() event on a hyperlink (rendered by a LinkButton). The solution was to make it into a Button.
Gordon Carpenter-Thompson