Rails - use AJAX to set session variable with link_to

Question

In my rails application I have a view with two links:

authenticate.html.erb:
<%= link_to t('.start_new'), edit_registration_path, id: "new-button", class: "btn btn-default" %>
<% unless @organisation_survey.blank? %>
  <%= link_to t('.start_edit'), edit_registration_path, id: "edit-button", class: "btn btn-default" %>
<% end %>

The first one should send the user to a new survey while the second one should let him edit his previous survey. Both are supposed to send the user to the edit_registration_path first because in both cases the user is logged in and can edit his name, email etc. In case the user clicks the second link to edit his previous survey a session variable should be set:

authenticate.html.erb:  
<script type="text/javascript">
  $('edit-button').observe('click', function (event) {
    <% session[:edit_survey] = "y" %>
    event.stop();
  });
</script>

I know it's not good practice to have javascript in the html.erb file but I'm not able to set the session[:edit_survey] in the js.coffee file. In that file I obviously don't have access to this session variable and I can't set it to "y". But I really need to set this session variable because in another view I need to decide between new and edit path:

questions_info.html.erb:
<% if session[:edit_survey] == "y" %>
  <%= link_to t('.start'), edit_question_path(1), class: "btn btn-default" %>
<% else %>  
  <%= link_to t('.start'), new_question_path(1), class: "btn btn-default" %>
<% end %> 

What I want is to go to the edit_question_path(1) if the user clicked the edit button on the first page and to go to the new_question_path(1) if he clicked the new button.

Currently the session[:edit_survey] is set to "y" even if the edit button is not clicked, I guess the click event fires no matter which button is clicked. When the user decides to hit the new button he is going to end in editing his previous survey instead of taking a new survey - I don't want this. So I am searching for a solution to let the user decide if he wants to take a new survey or edit his previous survey and then he should be sent to the correct question_path. Because there are some pages between the first page with these two buttons and the questions I can't just use params... Any ideas are appreciated.

EDIT: Now I know the javascript is not the problem, instead of it I should use some AJAX. I tried many solutions now but the variable is never set now.

authenticate.html.erb:

<%= link_to t('.start_edit'), edit_registration_path, id: "edit-button", class: "btn btn-default" %>

dashboard.js.coffee:

`$(document).ready(function(){
  $("#edit-button").click(function() {  
    $.post('/authenticate');
  });
});`

routes.rb:

post '/authenticate' => 'dashboard#set_edit_var'

dashboard_controller.rb:

def set_edit_var
  session[:edit_survey] = "y"
end

URL where the edit button is:

http://localhost:3000/dashboard/XT0Epg0BAWRktZ-By-xsKw/authenticate

If you need to know: authenticate is a method of dashboard, so it is: views > dashboard > authenticate.html.erb

Any help is appreciated because I just don't manage to get this AJAX request working for me, no matter how many threads I am reading. I tried "get" instead of "post" but it doesn't make anything better... The method call is working, when I click the button and add an alert the alert is shown, but the $.post and the routes seem to be wrong.

Answer 1

It is not the case that the click event fires when the link is not clicked.

Your problem is that the javascript defined, even in the html.erb file will run on the browser on the client, and the session is only accessible on the server. In fact the Ruby on Rails code only runs on the server.

So when you write:

<script type="text/javascript">
  $('edit-button').observe('click', function (event) {
    <% session[:edit_survey] = "y" %>
    event.stop();
  });
</script>

The erb is interpreted on the server. When it encounters the code:

<% session[:edit_survey] = "y" %>

the session is set to "y". This is not included in the javascript code for the page which gets sent to the client and used in the browser.

One way to see this more clearly is load the page and do a show source in your browser. You will notice that the javascript looks like the following:

<script type="text/javascript">
  $('edit-button').observe('click', function (event) {
    event.stop();
  });
</script>

What you will need to do is make an AJAX call to the server, and have the web service for the AJAX call set the session data.