Ruby on Rails : Manage array from client side in Rails application?

Question

I am developing a Rails 4 web application. In my Rails application View i have 2 forms . First form contains List of Employees where i can select employees and add to Second Form by clicking on ADD button . Second form also contains a button where i can remove employees from Second Form, all the removed employees will be moved back to first form.

Currently i achieving it like , when i click the add button in First form i will pass the selected employee data to controller through an Ajax call and return the same selected data to second form to display selected employees.

Is it possible to manage this from client side without making any call to Server.

Is there any gems available in Rails to achieve this.

I am using Rails 4 and Ruby 2.

Example : Sample List Manipulation in Javascript

Any help is appreciated.

Have a look at api.rubyonrails.org/classes/ActionView/Helpers/… — Ishank Gupta
– Ishank Gupta, Commented Feb 28, 2014 at 6:57

Richard Peck · Accepted Answer · 2014-02-28 10:01:22Z

2

Yes it's possible to do this on the client-side

Javascript

All I would do is replace your ajax calls with the on-page JS

Have used JQuery in this example (hope that's okay):

http://jsfiddle.net/U443j/3/

$(".move").on("click", "input", function() {
    var button = $(this).attr("id");
    var from = document.getElementById("FromLB");
    var to = document.getElementById("ToLB");

    if (button == "left") {
       move(to, from);
    }else{
       move(from, to);   
    }
});


function move(tbFrom, tbTo) 
{
 var arrFrom = new Array(); var arrTo = new Array(); 
 var arrLU = new Array();
 var i;
 for (i = 0; i < tbTo.options.length; i++) 
 {
  arrLU[tbTo.options[i].text] = tbTo.options[i].value;
  arrTo[i] = tbTo.options[i].text;
 }
 var fLength = 0;
 var tLength = arrTo.length;
 for(i = 0; i < tbFrom.options.length; i++) 
 {
  arrLU[tbFrom.options[i].text] = tbFrom.options[i].value;
  if (tbFrom.options[i].selected && tbFrom.options[i].value != "") 
  {
   arrTo[tLength] = tbFrom.options[i].text;
   tLength++;
  }
  else 
  {
   arrFrom[fLength] = tbFrom.options[i].text;
   fLength++;
  }
}

tbFrom.length = 0;
tbTo.length = 0;
var ii;

for(ii = 0; ii < arrFrom.length; ii++) 
{
  var no = new Option();
  no.value = arrLU[arrFrom[ii]];
  no.text = arrFrom[ii];
  tbFrom[ii] = no;
}

for(ii = 0; ii < arrTo.length; ii++) 
{
 var no = new Option();
 no.value = arrLU[arrTo[ii]];
 no.text = arrTo[ii];
 tbTo[ii] = no;
}
}

This will allow you to move the items between form elements. The reason this is important is because it allows you to send the data to the controller as one data-set:

Controller

On my JSFiddle, I have a save button

This can be tied to your Rails controller, allowing you to send your form data to your system

This will send your params hash like this:

params { "FromLB": ["value1", "value2"], "ToLB": ["value1", "value2"] }

The hash will be structured differently, but you'll get two sets of data, which you can then put into your db:

#app/controllers/your_controller.rb
def action
   @from = params[:FromLB]
   @to = params[:ToLB]

   #Save the data-sets here
end

answered Feb 28, 2014 at 10:01

Richard Peck

76.8k9 gold badges98 silver badges148 bronze badges

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

2 Comments

Cyber Over a year ago

Thanks for replying.For Save button i can also use an Ajax call to server with the List i needed.right? because i don't want to reload the whole page again.

Richard Peck Over a year ago

Sure - the big point is you need to send all the data to your controller, so you have both data-sets available in the backend. Currently, I believe you're sending single data-sets

Collectives™ on Stack Overflow

Ruby on Rails : Manage array from client side in Rails application?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related