JS: How to repeatedly reload page, read element values, then click button - javascript

Over the last few days, I've been working on a script that interacts with a particular site. A page on the site has a table of values that is randomized every reload.
I've learned that I can load the page with JQuery's $.get( ) method and then use regex to read the values of the elements, but I can't figure out how to press a button on the page.
I'm not sure how I could select an element then call the normal .click( ) method on it, or if that would even work at all.
Basically, what I want to accomplish is:
Get a new (reloaded) version of the page.
Read values from an element on the page.
Click a button on the page.
Keep repeating previous 3 steps.
How can I make this happen (with or without JQuery)?
EDIT: So it seems this is difficult/impossible to do from another page, but it works if I'm on the page. Knowing that, is there a way that I can repeating reload the page without disrupting the javascript running on it?

If the buttonpush don't trigger an get/post event, u cant do this. If the button does, you have to simulate it by sending the next get or post with the button parameters. This will get you the expected datas, so no need to refresh.

Related

JavaScript - Selenium Webdriver. How to check if element is visible

Im using Selenium to open a page. After I open the page, I want to click a some sort of refresh button. When I click it, Im getting this error:
ElementNotVisibleError: element not visible
This is the code I use to click the button:
driver.findElement(By.id(id)).click();
My guess is that the button goes not visible whenever it is pushed. And that maybe it starts off not visible as well. Cause it doesnt do a full page refresh.
Any way for selenium to check if something is visible, and maybe wait until it is?
Edit:
As it turns out, there are multiple buttons with the same ID. And the button I am trying to reach are way down. I tried to find the button with By.xpath, but I still couldnt find it. The way I did it, was to search for button by id, like this //button[contains(#id, 'abc')][1]. (Different number of course).
Selenium could not find the element, but I could find it with Chrome developer tools. Any suggestions?
Solution: 1 You can try using this code in a syso,
System.out.println("getting Page Source "+driver.getPageSource());
This method will return the entire page Source and you can check whether your button exists in the source or not. You can place the above code at several points in your function and check until you find the button in the source.
Solution: 2 In case your button does not exist in the source you will have to check and see whether the button is getting loaded in an iframe and if so you can use the following code and switch to the iframe and and then try finding the button,
driver.switchTo.frame(frameName);
In your case you could use Explicit wait to check when the element/button is clickable.
Try doing this
wait.until(ExpectedConditions.visibilityOfElementLocated(id))

Redirect on page reload jQuery

I need create probably an uncommon thing, so I haven't found any guide, and thats why I would like to ask here:
I am creating an interface for a site, which is being created by ajax loading its parts.
My web interface can accept an URL parameter as an input. If there is the parameter, my site changes its behavior (loads the page + content by value of that parameter and show it at specified place).
But, at some point, I have to get rid of the parameter.
Especially, if someone reloads the page, I want to show the cleanly loaded web page, not the content - but the parameter is still there whie pressing F5
So, my code - which is not working, looks simply like that:
//EDIT: Thanks to #charlietfl. I have here an unload event, which figures in ways like "I want to go to another page by url adress bar"
Same problem, jsut need to change it just and only to RELOAD page event.
//we are here: http://example.com/?docId=1
$(window).bind('beforeunload',function(){
//window.location.replace("http://example.com");
window.location.href = "http://example.com";
});
Know two things:
1) $(window).bind works well, with simple alert in it.
2) window.location.replace("http://example.com"); works well too, if fired at some other event, like key press (for my testing)
What I am trying to achieve, is to "skip" the reload by redirecting.
Aaaand one more thing. I know about HTML5 syntax changing the url without reloading the page (change->reload->done), but I can't use it, because of compatibility needed with older browsers.
Well, plase, any tips? Thanks in advance :)

Use JavaScript to disable all buttons on a page until a refresh

I have a page that will cause an error if a user tries to click too many buttons at one time (for the impatient user) and therefore need to DISable any button (all defined by a JS onclick function) on the page until it is refreshed (with new data sent via the server using Java.) What is the best method to do this, and is there a way to do it with jQuery?
You would have to find all types of buttons using something like this..
$('input[type="submit"], button')
and loop through the returned array and do .attr('disabled','disabled'); on the item in each iteration.
How about simply calling this when you want to disable the buttons:
jQuery('input[type="button"]').attr('disabled', 'disabled');
That will disable all inputs of type button on the page. Of course, as soon as you reload/replace the page contents, the new buttons will not be disabled. You can also just disable all inputs if that's easier.
Fiddle: http://jsfiddle.net/duffmaster33/xDMux/
The single best solution is to use the BlockUI plugin for jQuery. It accomplished everything I needed and more. http://www.malsup.com/jquery/block/

Create a website with jquery that doesn't refresh but the back button still works

I'm trying to create a website with different pages that all change with jquery (and maybe ajax, depending on how long it takes to initially load everything)
Basically, the idea is that when you click on an item to view it, some sort of animation happens, and then you can view that item/page without the browser refreshing. Each new "page" would be associated with a hash value, so the idea is, whenever the hash value is changed some js function happens to make the change happen. I'm doing this so when you press the back button, the hash will change and as a result change the content of the page.
I'm having a hard time trying to figure out how to monitor the hash value so something happens when the back button is pressed and the hash value changes... (I know how to make it on click it checks the hash value, I'm just stuck on the back button)
The idea is that the functionality will look similar to this website I found http://thinkav.co.nz/
Thanks
(I would ideally not like to use plugins)
You could try the jQuery BBQ: Back Button & Query Library
jQuery BBQ: Back Button & Query Library
and read something about hash bang urls
Hash URIs
you must consider making your ajax site crawlable
Making AJAX Applications Crawlable
what you're looking to do is a part of the new HTML5 specs, and is essentially using the pushState() method. This allows webpages to use the hashmark(#) as a reference just like a URL, therefore allowing you to use the back and forward buttons as normal. I've never used it, but this should point you in the right direction! Happy Coding!
Use Ben Almans hashchange plugin. It has a hashchange event that fires everytime the hashchanges.
$(document).ready(function() {
// Bind the event.
$(window).hashchange( function(){
// Update page in here
})
// Trigger the event when the page first loads to handle the back button
$(window).trigger("hashchange");
});
the url bar at the top of the page will always remember anchors without refreshing so just load content via ajax and let the browser do the remembering for you.
ie:
//the js
function load(){
var hash = window.location.hash;
var url = hash+".html";
$("body").load(url);
}
$(document).ready(function(){
$("a").click(function(){
load();
});
});
//the html
click me
this should load test.html into the body with no refresh.

How do I add a callback function to .submit() in Javascript?

I am submitting a page onclick of a form element and need a function to run after the submit refreshes the page. I'm trying to add an animated scroll back to the clicked element that caused the submission. I've got the scroll part covered but I can seem to figure out how to cause the function I wrote for the scroll to run after the page refreshes from the submit.
Any timely help would be much appreciated!
If you are doing a full submit, rather than an AJAX submit, then the page that displays afterwards is not the same page as the one that the form was submitted from. Consequently, the identity of the clicked element will not be available on the second page.
What you need to do is, during the submit handler, store the identity of the clicked element (Should probably be a unique ID of some kind) in a hidden field of the form.
When the page refreshes, it should now have the unique ID available (Probably placed in the same hidden field of the form by the server side code) and a javascript function can read this value to control the scrolling.
Does this make sense?
If you update your question to include some sample code, then I might be able to clarify further.
If you do a "real" form submit, where the actual page refreshes, there is no way you can do it from the client (except using frames). Once you leave the page, your javascript is out of scope. You need to insert the javascript to the refreshed page on the server.
If, on the other hand, you are submitting the form and refreshing a part of the page via ajax, then, depending on the framework you use, you'll be looking for a callback hook like onSuccess etc. in your ajax submit function
This would be easier to do in ajax however if you need to do it as a postback then you need to attach an event to the body load event and send some data back with the postback that would identify that the page has loaded as part of a post back and not a new page load.
e.g. create a hidden contol ont he web page and on the postback give it a value , on the postback check to see if that hidden control has a value and if so run your scorll code.

Categories