What is the best method to handle a AJAX get if there is no javascript enabled on browser?
For an example, a simple click on image thumbnail directs you to a controller that returns image details and zoomed photo.
I wanted to do this with ajax and show the bigger picture with details on the same page.
But I don't know how to implement backup method when user doesn't have javascript.
Can i delegate click method on anchor container and then somehow stop bubbling? And then when there is no javascript does the anchor gets triggered? The details won't be on same page, but atleast they will show.
Can i delegate click method on anchor container and then somehow stop bubbling?
Basically, yes. Have the link around the image (or whatever):
<a class="image-link" href="link/to/the/details">...</a>
And handle it in JavaScript:
$(document.body).on("click", ".image-link", function(e) {
// We're handling it with ajax, don't do the default action
// (which is following the link)
e.preventDefault();
// ...do the ajax stuff...
});
If JavaScript isn't enabled, the handler isn't hooked up, and the link gets followed normally. If JavaScript is enabled, we prevent the default action, which prevents the link being followed, and do the ajax instead.
Related
I have a web page that shows remote asset data (for example weather station data) and that does background XMLHttpRequest()'s every 5 seconds to our server and reloads the page if new data from the remote asset has been received. This has all been working fine for years.
The page also has numerous links and submit buttons that can be used to go to other pages or submit commands to the server (which then sends a command to the asset). Issue I'm having is that some of the commands the server then executes involve calls to 3rd party web services, some of which can occasionally take up to 30 seconds to return or time out. But in the meantime if new data came in from the asset the background JS function reloads the page, thereby interrupting and cancelling the new http request that the user initiated.
I could probably work around this by adding onclick or onsubmit tags to every link and submit button to call a function to disable the timer, but as there can be dozens of links on the page I am hoping there might be a simpler, more elegant way where one simple function can tell me if the user clicked on something and thereby initiated a new active http session.
I enable my script by doing a setTimeout('myCheckServerFunction("'+url+'")',5000); from the html head. If the server then tells it there is new data it does a setTimeout(function(){location.reload();},5000);
So I'd like to disable the JS timer and prevent any reload if the user has clicked any link or button and thus if a new http session is active. Does there exist a function like this? eg. something like "window.isNewHttpRequestActive()" ? Or maybe there's a way I can check if the window.location changed? (not sure if that would get updated before the new http request is complete.)
Otherwise I could maybe attach a addEventListener() to every link and submit button on the page but I'm a PHP dev not JS so if anyone could recommend the best way to parse the DOM and attach a listener to every link and submit button that would work too.
I did try looking for events that "bubble" up to higher layers eg. the body element and that will catch link clicks but also catches any click even just a click on any blank area, So not sure how well that would work as I'd still need to filter that event to determine if it actually came from a link or button. Thank you.
Listening to all click events on body isn't necessarily a bad idea.
EDIT: As gre_gor pointed out in comment, it might be. The perceived target of the click is not always the link or button if other elements are inside of them.
So my original method, which was using event.target.tagName is to be avoided.
The following code would add an event listener for click on every a element of the document, and let you cancel the timer if it is set :
for (let element of document.getElementsByTagName("a") {
element.addEventListener("click", (event) => {
if (relocationTimeout !== undefined) {
clearTimeout(relocationTimeout);
relocationTimeout = undefined;
}
});
}
Up to you to adapt the selector in the loop to fit your needs.
Of course don't forget to store the timeout reference in a variable when you set it :
let relocationTimeout = setTimeout(function(){location.reload();},5000)
My website, as most websites today, uses the same template for most of its pages and I am building a system that allows for ajax to load only page content without reloading the whole template. For the purpose I'm looking for a method that fires before the browser is redirected to another page. Something like onbeforeunload but I also need to know the location of the redirect, is there such a thing?
I need to catch link clicks, back button clicks, forward button clicks as well as manual redirects like window.location = url
There is no direct way to find out what URL the user is leaving the page for.
You would need to bind event handlers to the various different things that the user can use to leave the current page.
For links, you can bind a click event handler and then examine the href attribute.
For forms, you can bind a submit event handler and then collect the form data and examine the action and method.
For the back button you can bind a popstate event handler (which you could use in conjunction with pushState and friends).
You, obviously, couldn't detect where the user was going if they used a bookmark or just typed a new address into the address bar.
I have a link in rails that's a remote link (i.e. submits through ajax)
The link would be like so:
<a href="#myurl" data-remote="true">
<div class="switchIt switchOn">my linked item</div>
</a>
When the link is clicked - nothing on the page happens, and that's the success.
So I've added an effect on .mousedown, for the div's style to change (a simple .removeClass and .addClass). I need to it be mousedown, rather than click (which is more like mouseup) because of the effect I'm trying to achieve.
The problem I'm running into now, is that after clicking the div, the link no longer "submits" the url at all. Its as if mousedown has blocked it.
I could make the link remote through a jQuery ajax call and fix this nonsense - but I'd rather let rails handle it as it has been, and does elsewhere in my site.
Any ideas what might be causing this issue?
Updated with script...:
$('body').delegate('.switchIt', 'mousedown', function(){
$(this).toggleClass('switchOn');
$(this).toggleClass('switchOff');
});
I'm currently struggling with a good navigation on a website using Ajax calls and unobstrusive JS. I'm catching the click event on links, load the content, attach it to a div and then return false. This works quite well and also allows Google to crawl the site with speaky URLs.
But I didn't know how to deal with the browser back button. I found this solution to catch the event when the user clicks on the back button:
http://www.bajb.net/2010/02/browser-back-button-detection/
It works quite well. But I also want the back button to work normally when the user found the website via a link and wants to return to the previous page (I don't want to trap anyone).
When I thought about it the best way would be to use anchors. The normal back button supports them and you can go back in history without reloading the page (/#1 <- /#2 <- /#3 etc.)
It would work like this:
Use normal URLs in the link, but catch the click event
When user clicks, load content and attach it to a DIV
Change the window.location, using an anchor (e.g. 'domain.com/#products/women-clothing' with window.location="#products/women-clothing";)
When the window.location changes, get the anchor, read out the path and get the content via ajax, attach it to a DIV
Only the last part isn't really clear for me and I could need help here.
Finaly, my question: Does this make any sense?
Thanks!
Just add the href to window.location.hash after loading the content into a div. Then you can use that back button detection script to load what ever is in the hash.
I solved the problem by using this great jQuery Plugin: History.js
Thanks!
I am trying to alert the user when they leave the shopping page with cart filled up. And also get feedback or the reason for their exit.
I need to get event source id because to know whether they exit my site or navigate by clicking a link in my page.
Any one help me on this...
It's not possible. You should be able to catch if the user clicked a link to leave the page by manually setting up a listener event on each of them, but the browser does not give you any information about what led to the unload event. If it was an event ouside the document ("Back" button etc.), you're out of luck.