Disclaimer: I am living at some place where my net connection gets cut off at least ten times a day. I am not sure if my question makes much sense to guys with stable connection.
Question: Suppose that I am checking GMail when the connection gets cut off. Then, if I unknowingly press my Inbox link, instead of a browser specific error page, I just get a warning div displayed at the top of my page like, "Unable to Connect. Please try in ___ seconds / minutes".
How can I replicate this feature in my web app?
This happens because Gmail uses AJAX requests instead of hyperlinks to new pages.
When you make an AJAX request, you can add an error handler that does whatever you want.
It is impossible to add error handling to normal page navigation.
When you press the link to inbox, you start an ajax request (easy to do using jQuery).
It it succeed, then insert the content and change the url.
If it fails, give the user an error.
Remeber to use a plugin like jQuery BBQ to make back/forward buttons work.
Related
We are using zapier's webhooks to collect answers we gather via html5 formatted mail messages. The mail is created with zapier and includes some dynamic info and two buttons to make your choice. These button actions are each linked to a different webhook. The webhook provided by zapier has a static part and a dynamic part which is a zapier variable. When the receiver pushes the button, a blank browser window shows up with, whether a short text or in "silent mode" a blank page.
Although we are sending an extra mail as confirmation for the decision made via mail, we would like to either avoid the showing of this blank page at all or maybe replace it by a customized HTML page that shows a more attractive web page.
We tried different approaches like using an additional javascript onlick action on the button to achieve the opening of two pages with one click. One with the webhook blank page as the trigger and another one with a nice confirmation message page for a nice user experience. Unfortunately, there are some mail client limitations that seems not to allow javascript executions.
Is there any workaround like using any third-party service that offers webhook containers with the possibility to customize the content of the page linked to the webhook URL or any idea on how to link a button action to two url’s?
Thank you for reading this long question. Any help would be greatly appreciated.
David here, from the Zapier Platform team.
I can't speak to other options, but the best choice for you here is probably to have the email link go to a static page with two buttons. That way, you'll be in the browser and can do whatever you need with JS. This is likely buttons that have onClick handlers and then show nice confirmations.
It also avoids false clicks, where a mail client tries to load external resources (which normally doesn't matter, but in this case can trigger a webhook).
I am looking to build an in-house debugging system so we can see how users react to certain things.
What would be the best way to communicate all mouse clicks, moves, etc. back to the server?
One way I've thought of is to run a bind on body for everything and then just add it to an array which is sent at page unload, but I figured this could seriously kill a browser if the user has decided to click everything in sight or has sat there in work for 4 hours just moving his mouse on the page.
Ideally I want to avoid web sockets.
I'm sure this has been done before so I'd love to know how it's been done.
Thanks
For those of you wondering, I used the answer found here (How do you log all events fired by an element in jQuery?)
as a wrapper, with a combination of #hallleron's approach - storing the values in a string separated by | firing off AJAX queries every 3.5 seconds, then setting the array back to null. On page unload, the AJAX query fires one final time.
I'm also considering making the unload script dynamically create an iFrame with (again) a dynamically generated form and contents which auto posts the contents, just in case the AJAX hangs for whatever reason.
All array strings use their own CSRF token and have a randomly generated ID for the client side which is then hashed on the server side and is used to check if that has already been sent, just to stop any possible double AJAX requests.
On the server side, it is stored using ARCHIVE Engine Type and also INSERT DELAYED Insert method.
Eventually I'll probably move the logging system to its own EC2/RDS group.
The reasoning behind all this is to be able to see the most popular features of the website, who is clicking where (say if there's 2 home buttons, which one is more popular, etc.)
Hope this helps anyone else stuck in this predicament.
I Want to make an app with ruby on rails and Jquery that will allow multiple users to have the same page open at the same time, and if any of them makes a change to the page, adds a post, or deletes a post it will show all other users that change without having to reload the page.
Here in stack-overflow, whenever another user comes and gives me a point or removes a point on the post, it will show me without having to refresh the page.
Same with the comments, if someone posts, I will see it without having to refresh.
Can anyone tell me here to get started with this?
I would rather not have to have the page reload every 30 seconds.
Any help would be appreciated.
Thank you in advance.
There are a few ways to go about this:
Websockets
Server Sent Events via ActionController::Live (Rails 4+)
Long Polling (outdated method at this point)
Between websockets and SSE I would go with the former. Higher browser compatibility and the more mature technology of the two. If you're willing to pay for convenience, check our Pusher (solid free tier). Otherwise you might want to check out something like Faye (good intro at http://railscasts.com/episodes/260-messaging-with-faye).
A lot of services send your browser to another url when you click a link on their sites.
Google search results and links on Facebook would be two well-known examples.
The slower a connection, the more noticeable it is, when browsing on a mobile network, you can be looking at a blank page for seconds. During this time you can see the query string in the address bar, showing some of what is being logged.
I understand the reason for the redirects is so user-behaviour can be analysed, for any reason from service quality to target marketing, and that's fine. But why do we have to be sent to a different page? Is that not sub-optimal from the users perspective?
Could it not be handled by a javascript call instead? If not why not?
Edit: by using javascript I mean something like:
bind function to link
On click, have the function delay the redirect until the tracking query has been sent using ajax
Continue to page
Is that not sub-optimal from the users perspective?
Detailed user profiles are, apparently, more valuable than happy users.
Could it not be handled by a javascript call instead? If not why not?
Browsers would leave the page before the request was sent with JavaScript and the data would be lost.
Requests to third party servers keep slowing my site down, so I am trying to have as few as possible.
In my book, the ideal "tweet this" solution should
be a small JavaScript snippet to be hosted on my own site
not have any activity while loading the page (at least as few as possible, but no additional HTTP requests)
just when clicked, retrieve short URL and tweet it
Is there anything like this? All solutions I have found do load stuff from other servers while my page is loading.
I would not mind to do some of the scripting around this myself, but of course I do not want to re-invent the wheel, if there is a good solution around.
EDIT: In case anyone is interested in what I finally ended up with.
I decided to implement the API call in my backend, triggered by an AJAX request when the user clicks a button. From the client perspective, this solution needs least resources and is as lazy as it can be. Plus: addressing the bit.ly API directly is really trivial.
However: retweet.js (posted below) is still the best out-of-the-box client-side solution I have seen so far.
Not 100% certain this is what you're after, but have you had a look at this?
Easy Retweet Button by John Resig http://ejohn.org/blog/retweet/
It uses bit.ly to shorten urls and forwards the user to their Twitter login page.
Oh, and it uses jQuery which can be hosted on your site. :-D
You could go with a really lo-fi solution and simply link to the Twitter page from your home page. Add a link like this:
Tweet this!
... where [mystatus] would be some string representing the tweet you want the user to send.
This link, when clicked on, will open a new window/tab and, if the user is logged into Twitter, will populate the status message input with the [mystatus] string. If the user is not logged in, they'll get redirected to the Twitter login screen and after a successful login their status input will be populated with the [mystatus] string.
You would need some kind of solution to customize the [mystatus] string to contain what you want it to contain. Some options:
You could do this with a server-side language: construct and populate the href attribute of the anchor tag before the HTML is composed and sent to the client.
You could also do this with JavaScript after the page loads: attach some function on page load that will change the href attribute of the anchor tag to contain the status message you desire.