In my web app, the left-hand side has buttons.
The right-hand side shows a display based on which left-hand button was pressed.
Sometimes, a user will do the following:
1. Press button 1
2. wait 1-3 seconds
3. Get reasonably frustrated and click button 2
4. button 1's display shows up instead
If I understand correctly, then the server-to-client request for button 1 gets served up before button 2.
I'm thinking other web developers have run into this issue. How should it be approached?
Thanks,
Kevin.
Are the button clicks resulting in AJAX requests? If so, either disable the buttons while the resource is being fetch and show a loading image or cancel any existing AJAX request when the button is clicked before making another request. For example:
var request;
$('#button1').click(function(event) {
if (request && typeof request.abort == 'function') request.abort()
request = $.post(...)
});
The request is almost certainly going to continue server side depending on a lot of factors however client side the function that would be executed to show the result of the request no longer will be run.
Related
I have a hook on the beforeUnload event. If i try to click on a link, reload or close the tab or the navigator, the app ask for confirmation before leaving. That's the desired behavior.
But if click on the back button or the backspace outside an input, no confirmation.
At the beginning of the html :
window.onbeforeunload = function() {
if (confirmEnabled)
return "";
}
And i use the Gwt PlaceHistoryMapper.
What did i miss ? Where did i forgot to look ?
Thanks !
As long as you stay within your app, because it's a single-page app, it doesn't by definition unload, so there's no beforeunload event.
When using Places, the equivalent is the PlaceChangeRequestEvent dispatched by the PlaceController on the EventBus. This event is also dispatched in beforeunload BTW, and is the basis for the mayStop() handling in Activities.
Outside GWT, in the JS world, an equivalent would be hashchange and/or popstate, depending on your PlaceHistoryHandler.Historian implementation (the default one uses History.newItem(), so that would be hashchange).
I'm using the Facebook Like/Send buttons along with dynamically generated HTML (loaded via AJAX requests). I've found that even though the Send button works fine when the element exists on page load, dynamically created Send buttons aren't working correctly. Clicking the button activates it and the button greys out, but the popup doesn't appear.
Here is a demonstration of what is happening: http://jsfiddle.net/Daniel15/VxpSj/
Any suggestions?
Thanks!
Yes, I can confirm the problem from your fiddle.
function addLikeButton()
{
// […]
FB.XFBML.parse(newEl);
document.getElementById('container').appendChild(newEl);
}
For some reason, this seems to be “the wrong way around”. Reverse the order of these two lines – put the new element into the DOM first and let FB.XFBML.parse parse it afterwards, then (from my test with your fiddle) it seems to work in the desired way.
I am writing a perl script using WWW::Selenium module to automate a website.
I am not at all a web development guy and have no idea about web technologies.
Let me try to explain the issue in layman terms.
I am dealing with a webpage, which has an order form with a button.
When I click the button, there is no page submit, but the button label changes.
Say for eg, the button goes through these changes when clicked multiple times.
Get Quote --> Order --> Confirm Order
Each time I click the button, there is no page refresh, but the button label keeps changing as above.
The id of the button is the same throughout, only the class changes.
How can I do this in WWW::Selenium?
Presently I am using wait_for_page_to_load(5000) after each click.
But the click is not having any effect on the label and I get error that timed out after 5000s.
Should I be using some other function to wait?
You could do something like this
$sel->wait_for_text_present_ok("Your text","time to wait","The message to display if this fails");
and an example below-
$sel->wait_for_text_present_ok("Order Confirmed","9000","The order was successfully placed");
Seems like you could use
$class = $sel->get_attribute($attribute_locator)
where the $attribute_locator is the button#class with button being the element locator that you clicked. Check if $class is the class you expect.
I'm creating a transaction related site using lift. In here, there's a requirement to show a success page after the user action.
when i make action happen and press the browser's back button. it again goes to the previous page(before transaction page) making the transaction doable again. I need to limit this behavior. Is there any way of limiting the access to previous page by browser back button in lift.
There is no way to reliably stop the user from returning to the URL, but you can stop them from invoking the action more than once. Take a look at S.oneShot. From the Scala Doc:
All functions created inside the oneShot scope will only be called
once and their results will be cached and served again if the same
function is invoked
If you wrap the function that occurs when the button is pressed, even if the user does return to the page and click the button a second time, the body of the function shouldn't be invoked again.
How FB refreshes the page without reloading it (xmlHttpRequest) but Back/Forward Buttons still work as usual?
It's not about using history.pushState() methods. PushState() only changes URL-string but does nothing to get previous looking page after you click Back Button. So it's smth different.
Here's my code and example.
I have such site (look at the pic below). Header-div and Content-div. At the begining when you first time open it, the URL is mysite.com/page1.php. I want to change content in Content-div without reloading page. Just new info should appear in Content-div. And the URL should change to mysite.com/page2.php.
Here's HTML-code.
<div id="content"></div>
Reload Content
Here's JS-code to it.
document.getElementById("relaodLink").onclick = function() {
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", "page2.php", true);
xmlHttp.send();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
document.getElementById("content").innerHTML = xmlHttp.responseText;
}
}
return false;
}
So Header should not reload after pressing relaodLink, just content in Content-div changes. And most important: URL should change like page was really reloaded. Back Button allows to go to mysite.com/page1.php and then Forward Button allows to go back to mysite.com/page2.php again. With history.pushState() methods it doesn't work. But in FB Back and Forward Buttons work fine. How to make it?
(source: ljplus.ru)
This is an excellent question. If you observe, you can notice that the back buttons and forward buttons will work in gmail also though it is completely built on Ajax.
The browser back and forward buttons work on storing what is there in the address bar. So in Ajax, if you never change what is there in the address bar, it doesn't go into the history and hence back and forward buttons don't work.
For this to work, you need to append something to the address bar constantly.
For example : In gmail,
When Inbox is clicked - https://mail.google.com/mail/?tab=mm#inbox
When Starred is clicked - https://mail.google.com/mail/?tab=mm#starred
When Sent is clicked - https://mail.google.com/mail/?tab=mm#sent
So in this way, gmail keeps appending to address bar. Hence history is preserved. The same goes with facebook also. Though the page is not refreshed, the location in address bar changed - that's the key here !!
I hope it helps you !