Simulate postback from JavaScript problem in IE

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

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:Button> to 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
 
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:Button> to 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
Click to expand...

Because it cannot find 'TheButton'. If you open the source of the page
(View Source) you will see that <asp:Button ... runat=server> has 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();
 
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
 
Hi,

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

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" />
 
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)
 
I have just tested this in IE7 like yourself, and it works properly.
Unfortunately I need the backwards-compatibility with IE6.

Marc
 
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
 
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






- Show quoted text -
Click to expand...

add return false

function DoClick() {
document.getElementById('TheButton').click(); return false;
}
 
Excellent! Thanks very much.

Marc
Click to expand...

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?
 
Back
Top