0

Not sure if this is possible, with or without jQuery. I have a page where there are two dropdown menus; one is showing today's car sales and the other is showing car sales from yesterday. Today's Sales is always rendered on page load; when a radio button is checked the Comparison Sales is then rendered and an extra path is added onto the URL.

The issue I have is that when a user is sent the url with the extra path (i.e the comparison menu has been selected prior to the link being sent) the text etc of the Today's Sales dropdown won't populate when they open the link.

So for eg:

URL with no comparison: http://www.example.com/today/sales

URL with comparison dropdown open: http://www.example.com/today/sales/compare/yesterday

I want to create an if statement to say something like

if(link.pasted) {
 //do this
}

Again not sure if this is possible.

Rebecca O'Riordan
  • 863
  • 8
  • 23
  • Maybe you should instead ask how to fix the dropdown. – JJJ Jul 09 '15 at 08:44
  • As far as I'm aware you can't check if someone copy pasted something. – Chrillewoodz Jul 09 '15 at 08:45
  • 1
    Yes, i don't think pasting the url has got anything to do with this really, has it? Are you really just asking "how do i cope with the situation where the url doesn't have "/compare/yesterday" at the end? – Max Williams Jul 09 '15 at 08:45
  • You should fix the today's sales dropdown. BTW there is no way to detect a cut and pasted URL. – John Wu Jul 09 '15 at 08:53
  • Ok thanks, I wasn't convinced there would be a way to detect it. The problem only occurs when a link to the comparison is open, hence trying to figure out how to populate the Today's Sales from a followed link. – Rebecca O'Riordan Jul 09 '15 at 08:56
  • @MaxWilliams when the URL doesn't have /compare/yesterday there are no issues, it's when it has, and has been followed externally, that the issues arise. – Rebecca O'Riordan Jul 09 '15 at 08:57
  • I think you can find your answer this topic: [topic](http://stackoverflow.com/questions/2723140/validating-url-with-jquery-without-the-validate-plugin) – Ronald Zwiers Jul 09 '15 at 08:59
  • Can you explain what you mean by "followed externally"? – Max Williams Jul 09 '15 at 08:59
  • @MaxWilliams what I mean is that when I send the link to a user (http://www.example.com/today/sales/compare/yesterday) and they click on it and it opens in their browser, the Today's Sales dropdown hasn't been 'populated' or 'refreshed', but the Comparison Sales dropdown is populated with data and works fine. – Rebecca O'Riordan Jul 09 '15 at 09:04
  • 1
    This is, by definition, an [X-Y problem](http://www.google.co.uk/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&ved=0CCIQFjAA&url=http%3A%2F%2Fmeta.stackexchange.com%2Fquestions%2F66377%2Fwhat-is-the-xy-problem&ei=2zmeVbHXCeOt7gairLSgCA&usg=AFQjCNG6PdyCWEgR_NXZkL96ZR4G9aJ-wA&bvm=bv.96952980,d.ZGU). Your problem isnt how to detect a user pasting a url in the browser - its how do you tell the difference between the first route in, and the second route in, and adjust the view accordingly. Its one major reason MVVM frameworks (which often have routing at their core) exist. – Jamiec Jul 09 '15 at 09:07
  • @foreverlearning, I suggest instead of tracking whether `link was pasted`, you should put efforts to identify the url with extra params to populate the required fields. –  Jul 09 '15 at 09:23
  • You could look at `request.referer` to see whether they've come from an internal or external url. – Max Williams Jul 09 '15 at 09:33
  • @MaxWilliams - I think you mean [document.referrer](https://developer.mozilla.org/en-US/docs/Web/API/Document/referrer) for a javascript app. (Careful, it has two r's) – Jamiec Jul 09 '15 at 09:36
  • @MaxWilliams thanks I will look into that. – Rebecca O'Riordan Jul 09 '15 at 09:37
  • @Jamiec thanks for the updated link and X-Y problem link. – Rebecca O'Riordan Jul 09 '15 at 09:37
  • @Jamiec i was assuming he'd be handling it in the Rails side but yeah thanks. I think in Rails you can get it with referer or referrer :) – Max Williams Jul 09 '15 at 09:40

2 Answers2

1

You seem to have redirected an entire page to a different URL when the user makes their selection, instead you should consider using a hash at the end of the url to indicate the "comparison" has taken place.

So you'll end up with two urls, both of which could be pasted into a browser

http://www.example.com/today/sales
http://www.example.com/today/sales#compare-yesterday

It is easy enough to apply the hash to the first url on a javascript action

$('input:radio.compareYesterday').click(function(){
    location.hash = "compare-yesterday";
});

You can also watch for a change in the hash location, in order to perform some update to the view - I suggest you wrap that up in a function, as you'll be doing it onload too!.

function updateUI(){
    if(location.hash == "#compare-yesterday"){
        // do whatever happens when comparison is active
    }
    else{
        // reset the UI to its default state
    }
}

$(function(){
    $(window).on('hashchange',updateUI);

    // other onload stuff

    updateUI();
});

This fiddle demonstrates however jsfiddle does not allow me a url that goes direct to the result in a way which passes the hash through - so although the code is there I cant demonstrate that it would also work if you went directly to the #compare-yesterday route.

This is the basis for how Single Page Applications deal with routing, and how to adjust the view depending on the users actions (or indeed, if they've followed a link into your SPA). You may like to have a look at frameworks such as Angular if you're interested in learning more.

Jamiec
  • 133,658
  • 13
  • 134
  • 193
0

Depending on the entire architecture of your page you could propably set a js variable to some value on dropdown selection. You can then check if this variable is set to determine if the user got to this page just now.

mad_manny
  • 1,081
  • 16
  • 28