CODEWITHSUNDEEP
javascriptruby-on-railsparameters
Sabrina
Sabrina

Reputation: 369

Include javascript array in params

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?

Upvotes: 0

Views: 222

Answers (2)

Anand
Anand

Reputation: 6531

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.

Upvotes: 0

Vishal
Vishal

Reputation: 7361

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
            }
          });
});

Upvotes: 1

Related Questions