onServerClick when javascript disabled - javascript

I'm trying to get an html button to call a server-side method like this:
<button onserverclick="onClick" runat="server">Submit</button>
However, this call is not being made when the browser's javascript is disabled.
I am confused because my understanding is that this call has no interaction with javascript.

The __doPostBack() method is responsible for raising a click event to the server in the background. With JavaScript disabled there's no way that's going to happen.
Here's one of the many articles that explains how this works. And a related question here which gives a glimpse into what code is generated behind the scenes.

Related

Selenium click event does not trigger angularjs event

I have this page where an angularjs modal-content popup, in there i fill up some fields and click save. After save is initiated, popup should dissapear an event should happen and so on.
My selenium test does all that perfectly except that when it clicks on the save button, popup dissapears but no event is triggered or saved so when i open up the window again everything is empty. I've tried stuff that i know with selenium and it still doesn't work. Can anyone help me out here?
This is the save button:
<button class="save-button" data-ng-click="onSettingsSave()" ng-hide="readOnlyMode || !canSave()">Save</button>
Stuff i've tried:
var saveButton = driver.FindElement(By.CssSelector("button.save-button"));
saveButton.Click();
var saveButton = driver.FindElement(By.XPath(saveXpath));
saveButton.SendKeys(Keys.Enter);
((IJavaScriptExecutor)driver).ExecuteScript("arguments[0].focus();",saveButton);
((IJavaScriptExecutor)driver).ExecuteScript("arguments[0].click();",saveButton );
Try force clicking the element using pure JS:
driver.execute_script("arguments[0].click();", yourElement)
You can't use $ as a shortcut for document.querySelector in a script like that.
driver.ExecuteScript("document.querySelector('#base_element_id div input').click()");
Also this probably won't trigger an onClick in react / angular
Like the OP I have tried everything I can think of to get Selenium to trigger client side javascript events. I've seen some posts across the web of people having partial success where it randomly works; in my case it never works.
Selenium does successfully trigger the browsers primary click action, be it checking a checkbox or pressing a button, but it does not trigger any attached client side javascript events.
Both the native element.Click() method in selenium, and the abstracted ExecuteScript with arguments method of clicking as suggested by #csaladenes have the same result.
The only solution I have found so far is to use pure JS through that same ExecuteScript method; basically avoid the overload with params selenium can embed.
driver.ExecuteScript("$('#base_element_id div input').click()");
In my case I am using the JQuery that is already on my page to make locating the element easier, but any form of truly pure JS should do the same thing.
EDIT:
After some additional testing, it turns out that my "fix" really did nothing. However, performing the same click more than once did cause the client side events to fire.
In my case I am checking a checkbox, so I needed to perform the click 3 times to leave it in the correct state and still have the client side events run.
This is very odd, and definitely needs some more work to figure out where the issue is at that makes this necessary.
Edit 2:
I think I have finally found a solution, and at least partial answer, that does not make me cringe.
It seems as though Selenium has an issue where sometimes it "loses" the focus of the browser. Considering how consistent and repeatable my issue is I don't think focus is the only problem in my case, however the solution works pretty well.
I was able to get the immediate parent of my checkbox, which was a div element, click that first to return focus to the page, then click the checkbox. After that sequence of events the client side events worked correctly.

How to catch all postbacks on page using jquery/javascript?

I am new to web development and working on web project. In web project I want to show the Loader image on the postback of the page irrespective of the which control caused the postback.
Currently I have wrote one javascript method which shows the loader image pop up. And I have to set each controls OnClientClick= mypopupmethod() event.
And I have lots of pages and controls which are causing the postbacks. So it just seems wrong to do all this way. Is there any way I can catch all the postback calls on page. I tried to tweak the '__doPostback' but I was not able to get to work.
So what I want is way to catch all the postback event on page or complete application by single method. and just call my mypopupmethod() in there.
I am not expecting to get exact code but if any one could just point me in right direction should be enough.
In case of any confusion please feel free to comment.
Possible answer as mentioned in How to intercept any postback in a page? - ASP.NET
Alternately, you can actually override the __doPostBack function and replace it with your own. This is an old trick that was used back in ASP.Net 1.0 days.
var __original= __doPostBack;
__doPostBack = myFunction(){
mypopupmethod();
__original();
};
This replaces the __doPostBack function with your own, and you can call the original from your new one.

WebForm_AutoFocus is not being generated

I have an ASP.NET page which sometimes does not generate the expected "WebForm_AutoFocus()" javascript, even though I am explicitly calling .Focus() on one of the controls. Are there any known scenarios where some factor would prevent that javascript from being generated?
Specifically, when the user clicks a particular button, I'm creating some new controls dynamically: in this case a text box. In OnPreRender I'm grabbing that newly-created control and calling .Focus() on it. The idea is, when the postback completes, the browser gives focus to the newly-created textbox control. However, the generated HTML (verified via firebug and fiddler) simply does not contain a WebForm_Autofocus call at all.
In other scernarios, the same page (on postback or on initial hit) calls .Focus() on a different control - one which is not dynamically created; in those cases the WebForm_AutoFocus() script is generated perfectly, and all is well.
Unfortunately, I'm working on a client system that LOVES frameworks upon frameworks, and abstractions upon abstractions, so I cannot post a meaningful/concise code sample here. However, if any of my friendly SO'ers knows more about generation of that "WebForm_AutoFocus" javascript - and scenarios which would prevent it from being generated - that would give me a good place to start digging.
The autofocus call only gets included if asp.net thinks there is a need for it. Set a default button on the page so that asp.net will know to make the method.

Why use buttons & forms for submitting a piece of data, when just icon image with onclick handling function may work as well?

Why use buttons within form for submitting a piece of data (such as for favorite-ing an question here on SO), when simply icon image with on-click JS handler function may work as well ?
Here the buttons I am referring to are like 'Vote-up' buttons, or 'Favorite a question' buttons on stack overflow. & not the Submit an answer button for which I would defintiely use forms and buttons.
I would like to simply put the icon images in place of my 'vote up' or 'favrorite' buttons and attach a click event handling function which would update my server via ajax. The reason being this reduces & cleans-up my markup
EDIT :
I guess most of the biggest sites today like fb/ twitter etc are relying on JS & as I have just noticed they dont provide a alternate way for some of the most basic features like liking a post when javascript is disabled. I obviously dont need to go beyond those users. Thus by limiting myself to JS enabled users I think I would be quite OK.
The vote-up & favorite button are anchor tags on stackoverflow (or I don't see what you're talking about!).
Also, I think it is better to use forms so that it degrades gracefully without JS.
I'd use an ajax post request for that, definitely. I think you're right. Use $.ajax or the shortcut $.post on the click event for the image. A loading effect is also important in terms of UX.
Why use buttons within form for submitting a piece of data (such as for favorite-ing an question here on SO), when simply icon image with on-click JS handler function may work as well ?
It might work. It might not work. HTML is solid and reliable. Build on things that work and don't fall foul of the Gawker problem

What is the meaning of __doPostBack function, and when is it used?

I had problem triggering server side button click events so I found a solution on the net that I should do something like
<input type="submit" name="button" id="loginButton" value="Submit"
class="button-orange" alt="Register" title="Register" runat = "server" onclick ="this.disabled=true;__doPostBack('loginButton','')"/>
I did it, and it worked, but I would like to know what is going on!
Check this article:
Understanding the JavaScript __doPostBack Function
This method is used to submit (post back) a form to the server and allows ASP.NET framework to call appropriate event handlers attached to the control that raised the post back.
You usually (in simple scenarios) don't use the method directly - it is internally used by the controls you drop on the page.
The parameters passed to this function are stored in a hidden field and picked up by ASP.NET framework on the server-side in order to find the control that raised the post back.
simply said, it is used mainly by controls with AutoPostBack property
http://www.dotnetspider.com/resources/189-AutoPostBack-What-How-works.aspx
if you want to implement autopostback for your custom control, then you need to implement IPostBackDataHandler
The solution might be working but it's not a real fix.. better way will be to find why the button events are not triggering and fix the core of the problem.
Now to answer your questions.. PostBack is the term used to describe when the form is being submitted (posted) back to the same page. Simple as that.
Ordinary submit button would have been enough, but part of PostBack is the ability to identify which control triggered it, meaning what button or link was clicked.
To do such a thing ASP.NET is automatically adding hidden fields to the form and when clicking on element that should cause PostBack, JavaScript code is used to update the values of those hidden fields to the proper values indicating what was clicked - the argument you pass.
The name Microsoft chose to give to the JS function doing the above is __doPostBack - it's just a name of a function, ordinary JavaScript function that ASP.NET automatically writes to the browser.
Hope things are bit more clear now.

Categories