Simulate postback from JavaScript problem in IE

[=?Utf-8?B?TWFyYyBXb29sZnNvbg==?=]

I have what seems to be a relatively simple problem when attempting to
simulate a postback in ASP.NET from JavaScript. My scenario is (and please
don't ask me why) that I have an HTML <a>nchor which is generated dynamically
using the DOM, and when clicked should force an <asp:Buttonto do a postback
so that some server-side processing can be done.

The relevant JavaScript is below:

function GetAnchor() {
theAnchor = document.createElement("a");
theAnchor.href = "javascript:void(0);";
theAnchor.onclick = DoClick;
theAnchor.innerHTML = "Click me";

... // add element to parent, amongst other things
}
function DoClick() {
document.getElementById('TheButton').click();
}

and the ASP.NET:

<asp:Button ID="TheButton" runat="server" />

All very straighforward (although there are some more complicated bits and
bobs outside this), and the anchor causes a successful postback in FireFox
when it is clicked. However, IE6 seems to refuse to postback when requested.
If I add the following to the codebehind to see what's going on:

TheButton.Attributes.Add("onclick", "alert('Oh dear');" &
ClientScript.GetPostBackEventReference(TheButton, ""))

then I receive the message box but no postback follows. Again, this is fine
in FireFox. Clicking the button manually works successfully, but this is not
suitable for this solution.

Any ideas?

Thanks,

Marc

[Alexey Smirnov]

On Jun 11, 11:56 am, Marc Woolfson
<[e-mail]:

I have what seems to be a relatively simple problem when attempting to
simulate a postback in ASP.NET from JavaScript. My scenario is (and please
don't ask me why) that I have an HTML <a>nchor which is generated dynamically
using the DOM, and when clicked should force an <asp:Buttonto do a postback
so that some server-side processing can be done.

The relevant JavaScript is below:

function GetAnchor() {
theAnchor = document.createElement("a");
theAnchor.href = "javascript:void(0);";
theAnchor.onclick = DoClick;
theAnchor.innerHTML = "Click me";

... // add element to parent, amongst other things
}
function DoClick() {
document.getElementById('TheButton').click();
}

and the ASP.NET:

<asp:Button ID="TheButton" runat="server" />

All very straighforward (although there are some more complicated bits and
bobs outside this), and the anchor causes a successful postback in FireFox
when it is clicked. However, IE6 seems to refuse to postback when requested.
If I add the following to the codebehind to see what's going on:

TheButton.Attributes.Add("onclick", "alert('Oh dear');" &
ClientScript.GetPostBackEventReference(TheButton, ""))

then I receive the message box but no postback follows. Again, this is fine
in FireFox. Clicking the button manually works successfully, but this is not
suitable for this solution.

Any ideas?

Thanks,

Marc

Because it cannot find 'TheButton'. If you open the source of the page
(View Source) you will see that <asp:Button ... runat=serverhas been
converted to HTML input field with ASP.NET id. To find the control you
should call ASP.NET contol's property:

document.getElementById('<%=TheButton.ClientId%>') .click();

[=?Utf-8?B?TWFyYyBXb29sZnNvbg==?=]

Hi,

Thanks for your reply. Unfortunately that is not the case here - 'TheButton'
remains the ID of the control after it has been rendered:

<input type="submit" name="TheButton" value="" onclick="alert('Oh
dear');__doPostBack('TheButton','');" id="TheButton" />

The 'Oh dear' message *does* get displayed, so the browser is not having
difficulty in finding the control itself, rather just click()-ing it.

Marc

"Alexey Smirnov" wrote:

Because it cannot find 'TheButton'. If you open the source of the page
(View Source) you will see that <asp:Button ... runat=serverhas been
converted to HTML input field with ASP.NET id. To find the control you
should call ASP.NET contol's property:

document.getElementById('<%=TheButton.ClientId%>') .click();

[Alexey Smirnov]

On Jun 11, 1:55 pm, Marc Woolfson
<[e-mail]:

Hi,

Thanks for your reply. Unfortunately that is not the case here - 'TheButton'
remains the ID of the control after it has been rendered:

Okay, I see, it's not the case.

I tried to test your code and it works for me in IE (v.7)

<asp:button id="btnLogin" runat="server" text="Login"
OnClick="btnLogin_Click"></asp:button>

<script>
theAnchor = document.createElement("a");
theAnchor.href = "javascript:void(0);";
theAnchor.onclick = DoClick;
theAnchor.innerHTML = "Click me";
f = document.getElementById("form1");
f.appendChild(theAnchor);
function DoClick() {
document.getElementById('btnLogin').click();
}
</script>

A code for the form and button:

<form name="form1" method="post" action="...." id="form1">
.....
<input type="submit" name="btnLogin" value="Login" id="btnLogin" />

[bruce barker]

use the javascript debugger, and step into __doPostBack to see whats
canceling its call to form.submit(). for example, a validation routine
may be getting a script error, which would cause this behavior.

-- bruce (sqlwork.com)

Marc Woolfson wrote:

Hi,

Thanks for your reply. Unfortunately that is not the case here - 'TheButton'
remains the ID of the control after it has been rendered:

<input type="submit" name="TheButton" value="" onclick="alert('Oh
dear');__doPostBack('TheButton','');" id="TheButton" />

The 'Oh dear' message *does* get displayed, so the browser is not having
difficulty in finding the control itself, rather just click()-ing it.

Marc

"Alexey Smirnov" wrote:

>Because it cannot find 'TheButton'. If you open the source of the page
(View Source) you will see that <asp:Button ... runat=serverhas been
converted to HTML input field with ASP.NET id. To find the control you
should call ASP.NET contol's property:

document.getElementById('<%=TheButton.ClientId%>' ).click();

[=?Utf-8?B?TWFyYyBXb29sZnNvbg==?=]

I have just tested this in IE7 like yourself, and it works properly.
Unfortunately I need the backwards-compatibility with IE6.

Marc

"Alexey Smirnov" wrote:

Okay, I see, it's not the case.

I tried to test your code and it works for me in IE (v.7)

<asp:button id="btnLogin" runat="server" text="Login"
OnClick="btnLogin_Click"></asp:button>

<script>
theAnchor = document.createElement("a");
theAnchor.href = "javascript:void(0);";
theAnchor.onclick = DoClick;
theAnchor.innerHTML = "Click me";
f = document.getElementById("form1");
f.appendChild(theAnchor);
function DoClick() {
document.getElementById('btnLogin').click();
}
</script>

A code for the form and button:

<form name="form1" method="post" action="...." id="form1">
.....
<input type="submit" name="btnLogin" value="Login" id="btnLogin" />

[=?Utf-8?B?TWFyYyBXb29sZnNvbg==?=]

Hi Bruce,

I have just tried what you have suggested and it seems to step right through
to theForm.submit() without a problem. It just does not want to postback!

I also tried adding a spin wait to confirm that it wasn't just posting back
'too quickly' and this backed up my theory above (in FF/IE7 it spin waits
correctly when the item is clicked).

Marc

"bruce barker" wrote:

use the javascript debugger, and step into __doPostBack to see whats
canceling its call to form.submit(). for example, a validation routine
may be getting a script error, which would cause this behavior.

-- bruce (sqlwork.com)

[Alexey Smirnov]

On Jun 11, 6:28 pm, Marc Woolfson
<[e-mail]:

Hi Bruce,

I have just tried what you have suggested and it seems to step right through
to theForm.submit() without a problem. It just does not want to postback!

I also tried adding a spin wait to confirm that it wasn't just posting back
'too quickly' and this backed up my theory above (in FF/IE7 it spin waits
correctly when the item is clicked).

Marc

"bruce barker" wrote:

use the javascript debugger, and step into __doPostBack to see whats
canceling its call to form.submit(). for example, a validation routine
may be getting a script error, which would cause this behavior.

-- bruce (sqlwork.com)- Hide quoted text -

- Show quoted text -

add return false

function DoClick() {
document.getElementById('TheButton').click(); return false;
}

[=?Utf-8?B?TWFyYyBXb29sZnNvbg==?=]

Excellent! Thanks very much.

Marc

"Alexey Smirnov" wrote:

>
add return false

function DoClick() {
document.getElementById('TheButton').click(); return false;
}

[Alexey Smirnov]

On Jun 12, 10:10 am, Marc Woolfson
<[e-mail]:

Excellent! Thanks very much.

Marc

Hej... great that it's working now :-)

Return false is a must, otherwise the normal behavior
"javascript:void(0);" is executed. I didn't recognized it at the first
glance, because of the function and IE7 :-))

The question is why did they change it for IE7?