Solved

What's the difference between calling .click() and actually clicking a button??

Posted on 2004-10-02
19
2,497 Views
Last Modified: 2008-01-09
Hi.

I have the following situation. I have a cancel button control on my page. The postback event clears the form and rebinds all the data.

I simulate a click of this button via javascript from a popup like this... document.opener.formName.buttonName.click();

And it coes cause the postback and it fires the postback event as expected... BUT.. The data is not refreshed! If I click the button with the mouse it is refreshed properly every time. I can tell by my trace log that the databinding events are firing.

Is there some difference between the two with regards to viewState or something like that?

Thanks - It is making me crazy. I can't figure out a way to refresh the opening page without the data being the same OR the stupid browser 'post data' prompt coming up.

b
0
Comment
Question by:WillyCornbread
  • 5
  • 5
  • 4
  • +2
19 Comments
 
LVL 17

Expert Comment

by:AerosSaga
ID: 12209213
is this a submit button server control, that is an asp web form submit button?  
0
 
LVL 15

Expert Comment

by:Thogek
ID: 12209283
I believe (although I don't recall for certain, at the moment) that calling a client-side form button's click method does simluate a click event -- *except* that doing so does not trigger that button's client-side onclick event (as a normal click would).

Some ASP.NET PostBack-triggering controls depend on client-side JavaScript code catching client-side click (or chage) events in order to submit their forms.  This is apparently to allow the engagement of Validation controls, AutoPostBack behavior of controls that aren't normally submit-triggering controls, etc. -- and to set an indicator that the submision is a PostBack event, and which control triggered the PostBack.

So (if I'm remembering all of that correctly), simluating a click on a submittable form button via your own client-side JavaScript code should submit the form, but may cause the ASP.NET page to fail to realize that the resulting request is a PostBack.
0
 
LVL 17

Expert Comment

by:AerosSaga
ID: 12209290
hmm...interesting thogek
0
 
LVL 15

Expert Comment

by:Thogek
ID: 12209299
> I have a cancel button control on my page. The postback event clears the form and rebinds all the data.

If you only want the button to reset the form, is there any reason not to just use an HTML reset button, such as:

    <input type="reset" value="Cancel" />

http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/input_reset.asp

Unless I've misunderstood....
0
 
LVL 15

Expert Comment

by:Thogek
ID: 12209305
AerosSaga,
Yeah.  I don't recall for sure eaxctly which controls require it (or if they all do), but ASP.NET has a lot of hidden dependencies on client-side JavaScript which can make integration between ASP.NET and your own client-side JavaScript a bit more complex than it should be.
0
 
LVL 17

Expert Comment

by:AerosSaga
ID: 12209311
thats good to know.
0
 
LVL 10

Expert Comment

by:jnhorst
ID: 12209967
I think the trick will be to look at the HTML source for the opening page.  If it does not have a JavaScript function named "__doPostBack(...)", then what you want to do in Page_Load is this:

If Not Page.IsPostBack Then
     GetPostBackClientEvent(Me.theSubmitButton, "")
End If

This will cause ASP.NET to write out the doPostBack function and wire the button's onclick event to it.  Then calling it from the child window might work.

John
0
 
LVL 10

Expert Comment

by:jnhorst
ID: 12210345
I have ginned up a parent and child page and was able to fire the postback such that the server-side click event of the button was executed.  The parent page will have a submit button that is configured in the Page_Load event as follows:

If Not Page.IsPostBack Then
       GetPostBackClientEvent(Me.cmdTestButton, "")
       Me.cmdTestButton.Attributes.Add("onclick", "javascript:__doPostBack('" & Me.cmdTestButton.ID & "', '');")
End If

Then in your child page, use an HTML button, not a server-side button.  The HTML would look like this:

// 'cmdTestButton' is the name of the server-side button on the parent page.
<INPUT id="Button1" type="button" value="Button" onclick="javascript:window.opener.document.getElementById('cmdTestButton').click();">

By resolving the parent's submit button, which has its onclick event wired to fire the postback by calling __doPostBack(), and calling its click method, you should be able to accomplish your objective.

John
0
 

Author Comment

by:WillyCornbread
ID: 12211750
Wow, thanks for the great responses...

To answer...

It is an asp web form button control.

A simple reset button won't work, because I need to reset some variables, and rebind data.

The calling page DOES have the __doPostBack function written, and I have tried firing this, and it behaves the same.

THe last suggestion from Jnhorst is pretty much exactly what I am doing.

The strange thing that I want to be clear is that I have some Trace.Warn statements inside the postback event handler for the cancel button. Regardless of whether I manuall 'click' the button, OR if I click it via javascript the Traces are written -- so the event IS firing,  and it 'says' it is binding the data, but it is NEVER refreshed unless it is a manual click.

Basically it's a popup window that I allow the user to upload a file and it adds to the database. Upon successful upload, the popup closes and refreshes the parent window so the files list reflects the just uploaded file.

Hopefully this makes it clearer, if anyone wants to see any code, I'll be happy to post it, but like I said. The trace log looks EXACTLY the same whether I click via javascript or manual, the data is what doesn't refresh.

???

Has anyone accomplished this in another manner?

Thanks again for the help, I appreciate your time and expertise :)

b


0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 26

Accepted Solution

by:
Rejojohny earned 500 total points
ID: 12211944
>>Basically it's a popup window that I allow the user to upload a file and it adds to the database. Upon successful upload, the popup closes and refreshes the parent window so the files list reflects the just uploaded file

do u open the form modally? if not what is happening is that the parent page is getting reloaded before the file  upload happens and so the data is not getting refreshed ..

i have done similar coding and have no problem it .. what i do is add a HTML input button to open the new upload form .. and a another server button which has the code to rebind the controls (server code). Something like this

in the parent window .....

<script language = javascript>
OpenNewWindow()
{
       window.showModalDialog UploadFile.aspx,,"dialogHeight: " & plngHeight & "px; dialogWidth: " & plngWidth & "px; dialogTop: px; dialogLeft: px; edge: Sunken; center: Yes; help: Yes; resizable: No; status: No;")
     __doPostBack('lnkbutRefresh','');
}

</script>
</HEAD>
<BODY>
<input type=button id=OpenNewWindow value = "upload file" onlclick="javascript:OpenNewWindow;">
<asp:linkbutton id="lnkbutRefresh" style="DISPLAY: none; Z-INDEX: 102; LEFT: 4px; POSITION: absolute; TOP: 54px"
runat="server">LinkButton</asp:linkbutton>
........


0
 

Author Comment

by:WillyCornbread
ID: 12212308
It is my understanding that showModalDialog is only compatible with Internet Explorer, unfortunately, I need Mozilla compatibility in my application.

Can this be accomplished cross-browser? Your explanation does make sense that the parent is refreshing as the data is being updated... I just can't figure out. I suppose I could have the refresh function run in a setTimeOut, but that seems like a last resort.

Any further advice? Thanks again for your time.

b
0
 
LVL 15

Expert Comment

by:Thogek
ID: 12212545
BTW, assuming that my babble above does apply to a button.click() call....

In the client-side code in which you are calling the button's click() method, you can also directly call its onclick() method -- which is actually a call to trigger whatever onclick handlers are present.  Something like:

    if(yourButton.onclick() != false)
        yourButton.click();

I'm not sure that this will give you what you're looking for, but it's simple enough to give it a try and see what happens.  :-)
0
 

Author Comment

by:WillyCornbread
ID: 12213520
Well, I found a kind of workaround.

The issue does seem to be that the parent page just refreshes too quickly. The data is not done updating.

So I changed it so that after the file is uploaded, the popup window does not automatically close. You have to click a button to close it. This button refreshes the parent page and the data looks correct.;

BUT. If you close the popup window via the 'X' in the upper right, it doesn't update. I tried using a window.onBlur event, but this fires when the page is posted back.

Any thoughts on this last piece of the puzzle?

b
0
 
LVL 26

Expert Comment

by:Rejojohny
ID: 12214870
ok u could do it this way then ...
in the parent window .....

<script language = javascript>
OpenNewWindow()
{
       window.showModalDialog UploadFile.aspx,,"dialogHeight: " & plngHeight & "px; dialogWidth: " & plngWidth & "px; dialogTop: px; dialogLeft: px; edge: Sunken; center: Yes; help: Yes; resizable: No; status: No;")
}
function RefreshForm()
{
     __doPostBack('lnkbutRefresh','');

}

</script>
</HEAD>
<BODY>
<input type=button id=OpenNewWindow value = "upload file" onlclick="javascript:OpenNewWindow;">
<asp:linkbutton id="lnkbutRefresh" style="DISPLAY: none; Z-INDEX: 102; LEFT: 4px; POSITION: absolute; TOP: 54px"
runat="server">LinkButton</asp:linkbutton>

.. in ur popup window .. i.e, Uploadfile page .. assuming there is a upload button .. we will add a hidden textbox to check if the upload has been successful and page is getting loaded again

<Script language=javascript>
function OnFormLoad()
{
if (frmUpload.hidAction.value = 1) //set this value in the code-behind when the upload has been successful. Note hidaction is set as runat=server
    window.opener.RefreshForm(); //refresh the parent form

}
</Script>
.....
<Body onload="javascript:OnFormLoad();">
      <INPUT id="hidAction" type="hidden" size="3" name="hidAction" runat="server" value =0>


... assuming the code-behind is in VB and the button the user clicks to upload is called "butUploadDocs
Private Sub butUploadDocs_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles butUploadDocs.Click
          .... ur code to upload
          hidAction.value = 1
End Sub

0
 
LVL 26

Expert Comment

by:Rejojohny
ID: 12214880
oh .. i forgot to mention .. open the new window as a normal form using window.open and not modally ...
0
 

Author Comment

by:WillyCornbread
ID: 12217705
Okay, problem solved.

Thanks for all the help. The final solution was not provided here, but the information that was helped me to find this workaround.

Rejojohnys suggestion that the parent page was just updating before the data was actually updated was correct and led me to do it this way.

Basically in my javascript on the popup that calls the parent pages Reset function, I wrap it in a settimeout with an interval of 1 second. This one second allows the data to be updated, so when the page refreshes it is accurate.

I'll award the point to him/her, but I wanted to thank everyone for their help.

b
0
 

Author Comment

by:WillyCornbread
ID: 12217848
One last comment for anyone who views this thread...

Instead of using Rejojohnys suggestion of adding a hidden input and setting the value in the code-behind. I found it much cleaner to just dynamically add the onload handler when needed like this...

myBody.Attributes["onload"] = "somefunction()";

b
0
 
LVL 26

Expert Comment

by:Rejojohny
ID: 12218094
thx WillyCornbread for the points .. yup .. ur suggestion indeed looks cleaner .. thx for the input ...
0
 
LVL 26

Expert Comment

by:Rejojohny
ID: 12269693
WillyCornbread,
I just realised that for ur siuggestion to work, u have to define the body tag as runat=server ... it would be better to use "RegisterClientScriptBlock" ..
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

This article discusses the ASP.NET AJAX ModalPopupExtender control. In this article we will show how to use the ModalPopupExtender control, how to display/show/call the ASP.NET AJAX ModalPopupExtender control from javascript, how to show/display/cal…
Problem Hi all,    While many today have fast Internet connection, there are many still who do not, or are connecting through devices with a slower connect, so light web pages and fast load times are still popular.    If your ASP.NET page …
Get a first impression of how PRTG looks and learn how it works.   This video is a short introduction to PRTG, as an initial overview or as a quick start for new PRTG users.
This video gives you a great overview about bandwidth monitoring with SNMP and WMI with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're looking for how to monitor bandwidth using netflow or packet s…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now