Java HtmlUnit background JavaScript loading - javascript

I have a website I'm trying to navigate using HtmlUnit.
This website changes certain buttons/makes certain elements visible/hidden based on JavaScript events.
The simplest example I can give: there is a text input box and a button with a class on it that prevents it from being clicked. As soon as text is written in the box the button becomes clickable. I am setting the value of the input text box but am not seeing the updates on the button.
I have tried the following in order to make the page wait for background updates:
use NicelyResynchronizingAjaxController() as the web client's ajax controller
override processSynchron() to return true when setting ajax controller
putting the thread to sleep a few seconds
synchronising on the page variable and calling wait on it for a few seconds
calling waitForBackgroundJavaScript on the web client
looping while the page's enclosing window's job manager has no more JavaScript jobs

Looks like you are using a really low level method.
Try
using the type("...") method
then waitForBackgroundJavaScript() to wait for the javascript to process
If this does not help you have to provide a detailed sample to give us a chance to see your code and do some analysis/debugging.

Related

Scrape web data from mouseover popup

I'm trying to use JavaScript to scrape data from the following page, specifically the "free shipping free returns" text that appears when you hover your mouse over the cart icon:
Whenever I hover over the cart icon, new HTML is added to the DOM.
And when I move my mouse away, the the previously added HTML goes away. I want to be able to parse data from the HTML that gets added without having the popup visible. How would I be able to scrape this text data even if someone does not hover over the cart icon? Is there a way to access all the HTML data at once?
You can try to catch the JavaScript function being executed when you hover your mouse over the cart icon. You can do this via the developer tools. Add break points to code execution if the DOM changes (on the parent element in which the new element is added).
Once you get the function, just execute it directly on that page and you'll probably be able to see the popup and extract it's contents.
You could also try to simulate a hover as explained in these answers: How do I simulate a mouseover in pure JavaScript that activates the CSS ":hover"?
Scraping a page for data is not usually recommended since they can change over time (especially ones not written directly in HTML, but are rather generated (usually they have CSS classes like 8h2H1)).
If this is not supposed to be a long-term solution, the above answer by #nvkrjn is a good answer. Or, you can just check for an element with the id name free-shipping-label.
But, if this is supposed to be a long-term solution, then I would suggest using an API (this site doesn't seem to have one) or querying the database like how to Javascript does. Also, if you're using a non-browser environment (eg BeautifulSoup), it may not run the JS required to get the data.

Reloading a page using jQuery while retaining some data

Are there any clever ways of resetting a page back to it's original state (basically a reload) without having the screen physically look like it resets.
Basically i have a bunch of ajax requests, variables and content that i want wiped when a user clicks 'new' (currently i'm using just using location.reload(); ) but want a more graceful way of doing it.
I'm really wanting to refresh it without the screen going white for a split second and also want to retain a single modal popup i have which is open when the user clicks 'new'.
So the user clicks the 'new' button, a popup appears taking a parameter, the site refreshes and the parameter is passed to an Ajax request kicking off the start process.
If anyone could point me in the direction of what to even look for it'd be much appreciated.
"Are there any clever ways of resetting a page back to it's original state (basically a reload) without having the screen physically look like it resets."
You can't refresh the website without making it look like it refreshed, the browser needs time to display the content.
You can, however, use jQuery .load to load some standard markup into your site to make it appear as it did when it was initialized, the browser won't refresh, just like making an AJAX call doesn't require the website to refresh.
I'm, however, unable to see why you want the website to refresh if only to make an AJAX call.
The simple answer is to have the content you want to reload inside a container i.e.:
<div id="container"> page content </div>
Then when you have successfully got new data from the ajax call you can empty the container with:
$("#container").empty();
and repopulate it with
$("#container").append(newcontent);
You can use jQuery's .load to request and replace a portion of your page, e.g. a container element.
For example, calling the following on index.html would effectively "reset" the #container element:
$("#container").load("index.html #container");
See "Loading Page Fragments" on the docs for $.load.
As for resetting variables and cancelling any pending ajax requests - you could perhaps write a reset() function to do all that for you.
Another possibility would be to put data in local storage, or in the url after a # before the reload. But your options for having it look like it isn't refreshing are pretty limited outside of jQuery .load or an XHR request (which is what the jQuery load does)

Change element value on external website

I have such a problem - I want to change value of an element on some external website.
Namely: I have webcam http interface which is password protected and there is a page with motion detection checkbox and "Apply" button (form submit). I want to create simple program with some sort of delayed toggling of motion detection (so I can launch this program and have some time to leave the building before motion detection starts). So I want to change checkbox state and write this change to system. I tried something like this, but that doesn't work:
jQuery.get("http://admin:password#192.168.0.1:12345/motion-page.asp",
function(data){
$('input[name="checkbox1"]').prop('checked', false);
// and there "simulate" clicking on Apply button - submit the form -- don't know how ...
}
);
Can anybody help me with this, please?
I would backtrack from the page that shows when you submit the camera form. See if the form itself is submitting the "turn camera on" variable as GET or POST. If you already know this, then all you would have to do is access the same URL as the form from the camera (assuming it's HTTP accessible on a network like this) and submit that same set of variables.
If you don't want to open a browser to do this, you could write yourself a custom application that submits it for you, but either way you have to open something to make the submission, as a script has to wait [X] amount of time before making the request. The fastest way will be through a browser.
I am not sure you need jquery for this (I never use jquery hardly at all). What I would do on the scripting side, since merely accessing this script means you want to activate the timer most likely, would be to create a timer object in javascript, and then make a single function that either accesses the URL of the camera form submission with the GET string parameters (that's easiest if it's doable via GET, because you wont have to build a form), or, if it's POST, have the function build a form and submit the form via POST to the same URL.
Google how to create a timer in javascript, and google how to automatically submit a form. Doing the code for you would be a waste of my time if you can figure it out on your own. If not, come back and we'll see what we can do :)
Good luck.
Why not after hitting the submit button, or after checking the box, have javascript actually run a timer? Look into the timer functions in js or jquery if that's more your thing. Not sure if you need it written to disk or whatever... since you're not giving much info, but whatever data you're wanting recorded could be captured when the box is checked and can be submitted along with the form whenever the timer runs out.
Submitting a form in jquery is simple:
http://api.jquery.com/submit/
:)

.prepend() result is visible to everybody not only to the person making the action

I'm using the .prepend() action into a page when a user click on a button.
I think only the clicker can see the element being added into the list but what do for all the users already watching this page can also see it ?
PS : A good example is the friend news thread of facebook (in the right column) where one actuality appears for everybody.
DOM operations are purely in YOUR browser. Unless your JS code pings the server with an update on the actions, and your server pushes that data to any observers, there's no way for one user's browser to 'spy' on what another's is doing.
When you say other users, do you mean other users of the site?
If so then the answer is no. Only that user will see ANY change made to the DOM in javascript because the change is only happening on the local computer. This is true regardless of whether AJAX is used.
Here's a metaphor to help you understand. When a web site gives a user a page, it is like mailing a letter to that user. The person who receives the letter (html document) can make changes all day long and it won't affect anyone else who got a copy of that letter.
You misunderstand jQuery prepend(). It does not perform any AJAX. It will simply insert new HTML on the page. If it is passed an existing HTML element, it will move that element to the beginning of element that you are prepending to.
For example:
// this adds a new paragraph to the beginning of the main content div
$('#mainContentDiv').prepend('<p>New content</p>');
See the jQuery API for more info: jQuery .prepend()
Notice you will not find AJAX mentioned anywhere on the page except in a comment by Karl Swedberg, and he refers to the AJAX docs.
You will probably need to use something like jQuery.ajax() separate from .prepend() to make the server update for other users to receive the change.

Accessible, 508 compliant Ajax Loading Indicator

How do I make an Ajax Loading Indicator Accessible / 508 compliant. My pre-compliance strategy is like so: initiate ajax request, set timeout to show an indicator(div containing a paragraph with text and a spinner in the center of the screen) if the request doesn't finish within one second, if the indicator is showing when the request is complete, remove indicator. I've tried doing things like setting focus on the indicator text to no avail. JAWS version 9 (which does not support WAI-ARIA) is the target screen reader and I am using jQuery though any solution will do.
Thanks!
If your using Jaws 9 there's no way to do this. I can think of two options. One is pop up an alert box telling the user to be pacient. Option two would be to add a read only text field and update that field with the timer value. I think jaws will notice the change if the user enters forms mode but can't test this out since I don't have a setup up for web development. I'd really suggest you push for a new version of Jaws and use WAI-ARIA as a selling point. Live reagons would make this a lot easyer.

Categories

Resources