Include javascript array in params

Question

The user can click elements on my page. Their names are filled into a javascript array via an onclick-event. I want to pass this array as params in my url to the next page. How do I include a javascript array in the ruby <%= %>?

I read to use ajax for this. As my javascript skills are very minor, I am wondering if there is an easy fix for my problem.

    <div class="new-content">
      <div class="newmap-cards">
        <% @companies.each do |company|%>
           <% if company.photo.present? %>
          <button class="newmap-card" value=<%=company.name%> style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.2)),
         url('<%= cl_image_path company.photo, height: 300, width: 400, crop: :fit %>')">
            <p><%= company.name %></p>
          </button>
        <% else %>
        <button class="newmap-card" value=<%=company.name%> >
            <p><%= company.name %></p>
          </button>
          <% end %>
        <% end %>
      </div>
      <div
      id="map"
      data-markers="<%= @markers.to_json %>">
      </div>

      <%= button_to "", new_user_registration_path, method: :get, class: "student-select-card", params: { vacancy_id: params[:vacancy_id], job_category: params[:job_category], jobs_interested: "${var n}" } %>

    </div>

<script>
  var n = [];

document.body.addEventListener("click", function(event) {
    if (event.target.nodeName == "BUTTON") {
        var val = event.target.value;
        n.push(val);
        console.log(n);      //these console.log are tests
        console.log(ret);
        document.getElementById("res").innerHTML = val;
    }
});

</script>

So this part in my code is definitely wrong: jobs_interested: "${var n}"

But how can I do that instead?

Are you using jquery?

Anand
– Anand

2019-08-02 12:28:33 +00:00
Commented Aug 2, 2019 at 12:28 — Anand
– Anand, Commented Aug 2, 2019 at 12:28
yes i am using jquery

Sabrina
– Sabrina

2019-08-02 14:04:11 +00:00
Commented Aug 2, 2019 at 14:04 — Sabrina
– Sabrina, Commented Aug 2, 2019 at 14:04

Vishal · Accepted Answer · 2019-08-02 11:22:53Z

1

You can do something like below based on your business logic, When user click on next page collect all checked element as array and pass it in ajax request.

$(document).on('change', 'id or class of your html element', function(evt) {
      return $.ajax('Path of your action', {
            type: 'GET',
            dataType: 'html',
            data: {
              data: pass array of values here
            },
            error: function(jqXHR, textStatus, errorThrown) {
              return console.log("AJAX Error: " + textStatus);
            },
            success: function(data, textStatus, jqXHR) {
             // your business logic
            }
          });
});

answered Aug 2, 2019 at 11:22

Vishal

7,3716 gold badges34 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Sabrina Over a year ago

i might be a bit slow here. But what does business logic here means in this example?

Vishal Over a year ago

what you want to do when your ajax request is completed

Sabrina Over a year ago

I want to forward the user to the users/sign_up page. With the new params. Could you make your example more specific for me? thanks a lot in advance.

Vishal Over a year ago

@Sabrina did you sorted out your problem?

Sabrina Over a year ago

I did not. I am afraid understand too little of javascript to understand your answer.

|

Anand · Accepted Answer · 2019-08-02 15:03:32Z

0

An alternative way can be like this-

Chnage button as -

<%= button_to "", new_user_registration_path(vacancy_id: params[:vacancy_id], job_category: params[:job_category]), method: :get, class: "student-select-card" %>

Javascript code -

<script type="text/javascript">
  var n = [];
  document.body.addEventListener("click", function(event) {
    if (event.target.nodeName == "BUTTON") {
      var val = event.target.value;
      n.push(val);
      console.log(n);      //these console.log are tests
      console.log(ret);
      document.getElementById("res").innerHTML = val;
      // Get existing path of button
      var existingPath = document.getElementsByClassName("student-select-card").getAttribute("href");
      // Set new path and pass paramter jobs_interested
      document.getElementsByClassName("student-select-card").setAttribute("href", existingPath + "&jobs_interested="+n);
    }
  });
</script>

Ps, I'm not sure if your existing cod is working already, have just modified and added a way to pass javascript variable with existing URL. Hopefully, this should help you.

edited Aug 2, 2019 at 15:03

answered Aug 2, 2019 at 13:07

Anand

6,5414 gold badges14 silver badges27 bronze badges

9 Comments

Sabrina Over a year ago

this looks like an easy solution. But i get the following error when i hit the button: No route matches [POST] "/users/sign_up". How do I tell him to do a GET request instead?

Anand Over a year ago

@Sabrina sorry for inconvenience can you please show me the error log?

Sabrina Over a year ago

Started POST "/users/sign_up?job_category=Marketing+%26+Design&vacancy_id=general+application" for ::1 at 2019-08-02 15:53:33 +0200 ActionController::RoutingError (No route matches [POST] "/users/sign_up"):

Sabrina Over a year ago

shouldn't it be a get request instead of a post request?

Sabrina Over a year ago

Also it does not look like he actually attached the array to the url :(

|

Collectives™ on Stack Overflow

Include javascript array in params

2 Answers 2

7 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related