Rails prevent link_to, execute a javascript function and then trigger link_to

Question

I'm preventing a link_to when I click on it with the ev.preventDefault(); inside the function below... the javascript function gets executed but after that I want the original link_to thats was clicked to be executed.

<% @categories.each do |category| %>
    <%=  link_to "#{category.name}", search_path(:search => category.id), :onclick=>'getLocation(event);' %>
<% end %>


function getLocation(ev) {
    ev.preventDefault();
    if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(setGeoCookie,showError);
    } else {
    alert("Geolocation is not supported by this browser.");
   }
}

I'm not sure that this is possible, but if you can think of another way to implement this, it would be very helpful.

add event in link to ` <%= link_to "#{category.name}", search_path(:search => category.id), :onclick=>'getLocation(event);' %> do preventDefault when funciton start `function getLocation(ev) { ev.preventDefault(); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(setGeoCookie,showError); } else { alert("Geolocation is not supported by this browser."); } }` — Vishal, Jan 25 '19 at 09:27
Thanks for the reply @Vishal ... with the code you provided the link_to gets prevented and the geolocation prompt popup appears.. but when I click on allow it doesn't execute the link_to I clicked on. Is there a way to add that at the end? — Theopap, Jan 25 '19 at 09:34
@Theopap doesn't the onclick event handler run and then isn't there a redirection? — BenKoshy, Jan 25 '19 at 10:10
Thanks for the reply @BKSpurgeon , the `:onclick=>'getLocation(event);` runs but after I click ok on the popup prompt it doesn't redirect according to the link_to path I originally clicked on. I need that specific path because I'm passing params to the controller action which is a search action. — Theopap, Jan 25 '19 at 10:14
@Theopap Not sure of the answer, but you can perhaps troubleshoot it by checking whther the route has not been hit. can you: (i) check in your web browser (in Firefox you go to the "Web Developer" tool bar and check the Networks tab to see if the link route has not been hit, (ii) check in your rails server logs what is happening when you click link_to? — BenKoshy, Jan 25 '19 at 13:11

score 0 · Answer 1 · answered Jan 25 '19 at 10:52

You can use window.location.replace(...) to execute lint_to route if the default redirection not working for you as follows.

First find out the url against named route search_path(:search => category.id) I think it should be something like {your_host}/searches?search=category.id and pass this to JS function

<% @categories.each do |category| %>
  <%=  link_to "#{category.name}", search_path(:search => category.id), :onclick=>"getLocation({your_host}/searches?search=#{category.id});" %>
<% end %>


function getLocation(url) {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(setGeoCookie,showError);
  } else {
    alert("Geolocation is not supported by this browser.");
  }
  window.location.replace(url);
}

Thanks for the @Pramod Shinde , My goal is to click on on the `link_to` , prevent it, execute the javascript and then execute the original `link_to.... please check the question again, I have edited it. Right now I can't get it to redirect after I click on ok for the javascript prompt. — Theopap, Jan 25 '19 at 11:28

SRack · Answer 2 · 2019-01-25T16:53:09.357

0

I'd tweak it slightly to use the link's href for the redirection, and use window.location= to move pages in itself.

This should display the alert and redirect after the alert is dismissed:

<% @categories.each do |category| %>
  <%=  link_to "#{category.name}", search_path(:search => category.id), :onclick=>'getLocation(event);' %>
<% end %>

function getLocation(ev) {
  ev.preventDefault();

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(setGeoCookie,showError);
  } else {
    alert("Geolocation is not supported by this browser.");
  }
  window.location = ev.target.href
}

Give that a try and let me know how you get on, though I think that should do it!

edited Jan 25 '19 at 16:53

answered Jan 25 '19 at 15:39

SRack

11,495
5
47
60

Thanks for the reply @SRack ... It redirects before I click on allow on the geolocation popup prompt. I need it to redirect after I click allow. Any ideas on how to do that? – Theopap Jan 25 '19 at 15:45
Huh, which browser are you using @Theopap? I tested this out in Firefox and the redirection wasn't kicking in until the alert was dismissed. I don't think there's a handler for [after an alert is dismissed](https://stackoverflow.com/questions/463368/javascript-close-alert-box). I'd suggest using an alternative to alert - I'll update my answer to include a `confirm`, though otherwise you could show / hide a regular HTML element to achieve this. – SRack Jan 25 '19 at 15:56
I'm using safari and I also tried this on firefox... with the new code it doesn't redirect at all now! weird I know. Also `let` definitions are not supported by javascript version. – Theopap Jan 25 '19 at 16:01

Rails prevent link_to, execute a javascript function and then trigger link_to

2 Answers2