accessing js variables/values in rails and vice versa

Question

So my problem is that I need to find a way to make the graphs created by the code below to save the values to the ballot i created in rails. the ballot works with manual values as shown on the last lines of code but i need to grab the values from the graph to submit and i also need to figure out a way to load the values from the ballot back into the graph.

so far ive tried gon gem with no luck on getting it to work and also trying a hand full of other methods that didn't work.

**editablegraph.html.erb**

<div class="container-fluid" id="graphT" style="width:300px;height:700px;">


<script style="text/javascript">

    var paper3 = Raphael("graphT");

    var val1T = 0 * 6;

    var val2T = 0 * 6;

    var val3T = 0 * 6;

    var val4T = 0 * 6;

    var val5T = 0 * 6;

    var begin1 = val1T;
    var begin2 = val2T;
    var begin3 = val3T;
    var begin4 = val4T;
    var begin5 = val5T;

var load = function()
{       
    paper3.clear();

    var bar1 = paper3.set();
    bar1.push(
        paper3.rect( 30, 650 - val1T, 40, val1T)
            .attr({
                fill : "80-#151515-#000", 
                opacity : .8,
                stroke : "none"
            }),
        paper3.path( paralel3( val1T, 30))
            .attr({ 
                fill : "#000",
                opacity : .6,
                stroke : "none"
            }),
        paper3.path( paralel4( val1T, 30))
            .attr({ 
                fill : "90-#151515-#000",
                opacity : 1,
                stroke : "none"
            }),
        paper3.text( 40, 630 - val1T, Math.floor(val1T/6).toString() )
            .attr({
                "font-size" : 18,
                "font-family" : "Times-Bold",
                fill: "#fff"
            })
    );


    var bar2 = paper3.set();
    bar2.push(
        paper3.rect( 86, 650 - val2T, 40, val2T)
            .attr({
                fill : "80-#151515-#39f",
                opacity : .8,
                stroke : "none"
            }),
        paper3.path( paralel3( val2T, 86))
            .attr({ 
                fill : "#39f",
                opacity : .6,
                stroke : "none"
            }),
        paper3.path( paralel4( val2T, 86))
            .attr({ 
                fill : "90-#151515-#39f",
                opacity : 1,
                stroke : "none"
            }),
        paper3.text( 96, 630 - val2T, Math.floor(val2T/6).toString() )
            .attr({
                "font-size" : 18,
                "font-family" : "Times-Bold",
                fill: "#fff"
            })
    );


    var bar3 = paper3.set();
    bar3.push(
        paper3.rect( 142, 650 - val3T, 40, val3T)
            .attr({
                fill : "80-#151515-#73b",
                opacity : .8,
                stroke : "none"
            }),
        paper3.path( paralel3( val3T, 142))
            .attr({ 
                fill : "#73b",
                opacity : .6,
                stroke : "none"
            }),
        paper3.path( paralel4( val3T, 142))
            .attr({ 
                fill : "90-#151515-#73b",
                opacity : 1,
                stroke : "none"
            }),
        paper3.text( 152, 630 - val3T, Math.floor(val3T/6).toString() )
            .attr({
                "font-size" : 18,
                "font-family" : "Times-Bold",
                fill: "#fff"
            })
    );

    var bar4 = paper3.set(); 
    bar4.push(
        paper3.rect( 198, 650 - val4T, 40, val4T)
            .attr({
                fill : "80-#151515-#ee1fa5",            
                opacity : .8,
                stroke : "none"
            }),
        paper3.path( paralel3( val4T, 198))
            .attr({ 
                fill : "#ee1fa5",
                opacity : .6,
                stroke : "none"
            }),
        paper3.path( paralel4( val4T, 198))
            .attr({ 
                fill : "90-#151515-#ee1fa5",
                opacity : 1,
                stroke : "none"
            }),
        paper3.text( 208, 630 - val4T, Math.floor(val4T/6).toString() )
            .attr({
                "font-size" : 18,
                "font-family" : "Times-Bold",
                fill: "#fff"
            })
    );

    var bar5 = paper3.set();
    bar5.push(
        paper3.rect( 254, 650 - val5T, 40, val5T)
            .attr({
                fill : "80-#151515-#26701c",
                opacity : .8,
                stroke : "none"
            }),
        paper3.path( paralel3( val5T, 254))
            .attr({ 
                fill : "#26701c",
                opacity : .6,
                stroke : "none"
            }),
        paper3.path( paralel4( val5T, 254))
            .attr({ 
                fill : "90-#151515-#26701c",
                opacity : 1,
                stroke : "none"
            }),
        paper3.text( 264, 630 - val5T, Math.floor(val5T/6).toString() )
            .attr({
                "font-size" : 18,
                "font-family" : "Times-Bold",
                fill: "#fff"
            })
        );  

start = function () {
  this.odx = 0;
  this.ody = 0;
},
move1 = function (dx, dy) {
  val1T = begin1-dy;
  this.odx = dx;
  this.ody = dy;
  load();
},
move2 = function (dx, dy) {
  val2T = begin2 - this.ody;
  this.ody = dy;
  load();
},
move3 = function (dx, dy) {
  val3T = begin3 - this.ody;
  this.ody = dy;
  load();
},
move4 = function (dx, dy) {
  val4T = begin4 - this.ody;
  this.ody = dy;
  load();
},
move5 = function (dx, dy) {
  val5T = begin5 - this.ody;
  this.ody = dy;
  load();
},
up1 = function(){
    if( val1T < 0 ) 
{
    val1T = 0;
}
else if( val1T > 600 )
{
val1T = 600;
}
    begin1 = val1T;
    document.getElementById('attra').value = Math.floor(val1T/6);
    load();
},
up2 = function(){
        if( val2T < 0 ) 
{
    val2T = 0;
}
else if( val2T > 600 )
{
    val2T = 600;
}
    begin2 = val2T;
    document.getElementById('attrb').value = Math.floor(val2T/6);
    load();
},
up3 = function(){
        if( val3T < 0 ) 
{
    val3T = 0;
}
else if( val3T > 600 )
{
    val3T = 600;
}
    begin3 = val3T;
    document.getElementById('attrc').value = Math.floor(val3T/6);
    load();
},
up4 = function(){
        if( val4T < 0 ) 
{
    val4T = 0;
}
else if( val4T > 600 )
{
    val4T = 600;
}
    begin4 = val4T;
    document.getElementById('attrd').value = Math.floor(val4T/6);
    load();
},
up5 = function(){
        if( val5T < 0 ) 
{
    val5T = 0;
}
else if( val5T > 600 )
{
    val5T = 600;
}
    begin5 = val5T;
    document.getElementById('attre').value = Math.floor(val5T/6);
    load();
}
    bar1.drag( move1, start, up1);
    bar2.drag( move2, start, up2);
    bar3.drag( move3, start, up3);
    bar4.drag( move4, start, up4);
    bar5.drag( move5, start, up5);
};
load();
</script>

<%= form_for(@ballot) do |f| %>

<%= f.hidden_field :user_id, value: current_user.id %>
<%= f.hidden_field :target_id, value: @user2.id %>

<%= f.text_field :attr_A, id: "attra" %>

<%= f.text_field :attr_B, id: "attrb" %>

<%= f.text_field :attr_C, id: "attrc" %>

<%= f.text_field :attr_D, id: "attrd" %>

<%= f.text_field :attr_E, id: "attre" %>

<% end %>

<%= link_to "Thy judgment be cast upon the unworthy", vote_path( target_user: @user2, attrA: 20, attrB: 20, attrC: 20, attrD: 20, attrE: 20, ballot: @ballot ), method: "post" %>

</div>

I guess I should add that this is my first rails app. This is one of the last things I need to do for my first app to be done.

score 0 · Answer 1 · answered Dec 30 '12 at 09:16

Thats really lengthy piece of code. I have done something thats very similar of your requirement. I would suggest JSON gem and json.js to transfer data back and forth from GUI to rails.

Create a javascript class which holds the data on browser side. To pass data to rails, you can use JSON.stringify(object) and pass it along in an ajax call. And use JSON.parse on ruby side to get the data in the form of a hashmap.

When passing data from ruby to javascript, make sure you create the object of the class that you have created on the javascript side and load the values into that manually.

I dono about gon gem.

accessing js variables/values in rails and vice versa

1 Answers1