Javascript not working in Chrome?? but in FF and IE works

Question

I am trying to create a button using a div. This div button will call a linkbutton onlick event. for some reason its not working in chrome. Its not firing the button event in Chrome? But it works fine in other browsers..

Here is my code..

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1"
    ValidateRequest="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div id="dvButton" runat="server" ></div>
       <asp:LinkButton ID="DummyBtn" runat="server" Text="Dummy" OnClick="DummyBtn_Click"></asp:LinkButton>
    <input type="hidden" id="hdnConfigId" runat="server" />
    <input type="hidden" id="hdnSelected" runat="server" />

    </form>
</body>
<script language="javascript" type="text/javascript">
    function Selected(value, selected) {

        document.getElementById('<%=hdnConfigId.ClientID %>').value = value;

        document.getElementById('<%=hdnSelected.ClientID %>').value = selected;

        document.getElementById('<%=DummyBtn.ClientID %>').click(); //This does not work in Chrome

    }
    </script>
</html>

Code behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
using System.IO;

namespace WebApplication1
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

           dvButton.InnerHtml = "<a href=\"javascript:void(0);\" id=1234 onclick=\"javascript:Selected('1234','Test');return false;\" >TEST</a>";
        }

        protected void DummyBtn_Click(object sender, EventArgs e)
        {
           string id = hdnConfigId.Value;
           string selected = hdnSelected.Value;
           //Logic to retrieve data by passing these parameters into DB

        }      
    }
}

RENDERED SOURCE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head><title>



</title></head>

<body>

    <form name="form1" method="post" action="WebForm1.aspx" id="form1">

<div>

<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />

<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUHNjcxMjAzMQ9kFgICAQ9kFgICAQ8WAh4JaW5uZXJodG1sBWo8YSBocmVmPSJqYXZhc2NyaXB0OnZvaWQoMCk7IiBpZD0xMjM0IG9uY2xpY2s9ImphdmFzY3JpcHQ6U2VsZWN0ZWQoJzEyMzQnLCdUZXN0Jyk7cmV0dXJuIGZhbHNlOyIgPlRFU1Q8L2E+ZGSqT177YHIKIjfz5j0oOl9lGktifA==" />

</div>



<script type="text/javascript">

//<![CDATA[

var theForm = document.forms['form1'];

if (!theForm) {

    theForm = document.form1;

}

function __doPostBack(eventTarget, eventArgument) {

    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {

        theForm.__EVENTTARGET.value = eventTarget;

        theForm.__EVENTARGUMENT.value = eventArgument;

        theForm.submit();

    }

}

//]]>

</script>





<div>



    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBALUn5j+AQKEzpmBDwKf7rOjAgLVqJ/GB0fyISUyIuzPcZ4CYvSLltNpE/oA" />

</div>

    <div id="dvButton"><a href="javascript:void(0);" id=1234 onclick="javascript:Selected('1234','Test');return false;" >TEST</a></div>

       <a id="DummyBtn" href="javascript:__doPostBack('DummyBtn','')">Dummy</a>





    <input name="hdnConfigId" type="hidden" id="hdnConfigId" value="1234" />

    <input name="hdnSelected" type="hidden" id="hdnSelected" value="Test" />

    </form>

</body>

<script language="javascript" type="text/javascript">

    function Selected(value, selected) {



        document.getElementById('hdnConfigId').value = value;



        document.getElementById('hdnSelected').value = selected;





        document.getElementById('DummyBtn').click();



    }

    </script>

</html>

I see a space after each .ClientID, try removing the space and let us know if that fixed or not your issue — , Feb 10 '12 at 13:53
@Dorin That won't fix his issue. The space is server-side, so will not cause a space client-side. — RB., Feb 10 '12 at 13:56
Daniel, it would really help you to not mix code and content here, especially try to lose the classic-asp style embedded values like <%=hdnConfigId.ClientID %>. The code would be clearer, and would not require a recompile on every visit! — CompanyDroneFromSector7G, Feb 10 '12 at 14:02
@Dorin There's no space to remove. It's equivalent to this code: `MyTextbox.Text = "Hello World" ;`. There is no space in the string... — RB., Feb 10 '12 at 14:06
Yes it shows an error on console.. as Uncaught TypeError: Object javascript:__doPostBack('DummyBtn','') has no method 'click' Selected (anonymous function) onclick — user929153, Feb 10 '12 at 14:08
@RB. I was refering to "<%=hdnSelected.ClientID[SPACE]%>", but it seems that the spaces gets removed... — , Feb 10 '12 at 14:18

score 2 · Answer 1 · edited May 23 '17 at 11:56

2

You can't call an anchor tag's click event from javascript directly, at least in some browsers.

There is an example of how to do it here: How can I simulate a click to an anchor tag?

Also, you could use jQuery, as I'm pretty sure that handles all the nasty stuff for you.

edited May 23 '17 at 11:56

Community

1
1

answered Feb 10 '12 at 14:18

CompanyDroneFromSector7G

4,291
13
54
97

score 1 · Accepted Answer · edited May 23 '17 at 09:59

1

You might want to check : How can I simulate a click to an anchor tag?

The problem is that DOMElement.click() method is not supported by every browsers, and firefox just implemented it recently for exemple.

The link I provided provides an alternative, or you could use jQuery ;)

edited May 23 '17 at 09:59

Community

1
1

answered Feb 10 '12 at 14:26

Jean-Philippe Gire

881
7
13

oo why didn't I think of that? – CompanyDroneFromSector7G Feb 10 '12 at 14:27
FIXED IT CHANGED THE LINKBUTTON TO BUTTON. :-) The button is going to be hidden so does not matter. Thanks for all the help and explanation. – user929153 Feb 10 '12 at 14:40

score 0 · Answer 3 · answered Feb 10 '12 at 13:55

0

IF you want to use .click() you have to use jQuery and include it, what you did not do !
jQuery Startup Tutorial: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

answered Feb 10 '12 at 13:55

mas-designs

7,498
1
31
56

He isn't using jQuery. This is plain JS. – Barry Chapman Feb 10 '12 at 13:56
Yes he did, but there isn't any in the code. Therefore including the jQuery library will not fix his problem. – Barry Chapman Feb 10 '12 at 13:58
Actually what EvilP says is right. If he used jQuery, this would work. – CompanyDroneFromSector7G Feb 10 '12 at 14:40

Barry Chapman · Answer 4 · 2012-02-10T14:20:32.820

0

EDIT: Sorry, posted before I saw the source.

First and foremost, isn't value and selected reserved words? That may present problems in older versions of IE.

You are triggering a click event on an anchor that has no onclick handler.

edited Feb 10 '12 at 14:20

answered Feb 10 '12 at 13:58

Barry Chapman

6,690
3
36
64

No still not fixed the issue in Chrome browser?? Keep getting Uncaught TypeError: Object javascript:__doPostBack('DummyBtn','') has no method 'click' in the Chrome console.. – user929153 Feb 10 '12 at 14:12
The problem is you are triggering a `click()` in your Selected() function on an anchor that has no onclick event. – Barry Chapman Feb 10 '12 at 14:20
I don't think you can even trigger `click()`'s on anchors. Only on form fields. – Barry Chapman Feb 10 '12 at 14:22

Javascript not working in Chrome?? but in FF and IE works

4 Answers4