We Keep Coding

acts_as_votable javascript html table

I'm trying to use the acts_as_votable gem in ruby on rails. However, I get stuck when I need to add the button to the view.
I want to add a voting system to a list of item which are put into an html table as users fill out the form in the web browser.
I can insert a 'like' button in each row for each 'destination' item. However, does this mean I need to write a 'attachLikeHandler' function to deal with what happens when the like button is clicked?
Here is the dashboard.js:
var insertDest = function(dest) {
// Find a <table> element with id="myTable":
var table = document.getElementById("destTable");
// Create an empty <tr> element and add it to the 1st position of the table:
var row = table.insertRow(1);
// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
var name_cell = row.insertCell(0);
var address_cell = row.insertCell(1);
// var delete_cell = row.insertCell(2);
var like_cell = row.insertCell(2);
like_cell.innerHTML = '<input class="Like" type="button" value="Like" />';
var like_count_cell = row.insertCell(3);
like_count_cell.innerHTML= 0;
// Add some text to the new cells:
name_cell.innerHTML = dest.name;
address_cell.innerHTML = dest.address;
// delete_cell.innerHTML = "<div class='del'>x</div>";
addMarker(dest.address,map);
};
var insertAllDest = function(trip){
var d = trip.destinations;
for (i in d){
insertDest(d[i]);
}
};

However, does this mean I need to write a 'attachLikeHandler' function
to deal with what happens when the like button is clicked?
Yes:
$(".like").on('click', function() {
$.ajax({
method: "PUT",
url: "/photos/" + $(this).attr("id"),
success: function(msg_from_server) {
alert(msg_from_server); //"Thanks for voting!" or "Sorry, you already voted!"
}
});
});
If you have a route declared as resources :photos, then a url like /photos/12 will send a request to photos#update, then inside the update action params[:id] will be 12. Note that you'll need to add the resource id to the html when constructing the html.

Using JavaScript in Google Scripts to transfer information to spreadsheet, but spreadsheet shows undefined

I am using Google Scripts UiApp in order to gather availability information. I want to send this information to a spreadsheet. I have used the example here: http://www.googleappsscript.org/advanced-examples/insert-data-in-sheet-using-ui-forms
to get me started in the right direction.
The Web App looks good and when clicking submit, the appropriate message displays. However, the values that are transferred to the spreadsheet say "undefined" for all of the entries.
How can I convince it to link the textbox entered data to the variables so that I can transfer to the spreadsheet?
Thanks!!
Here is some code:
var submissioSSKey = // Key removed
function doGet() {
var rows = 15
var columns = 15
var mygrid = UiApp.createApplication().setTitle("MLC Walk Ins Scheduling")
var panel = mygrid.createSimplePanel();
// Define the grid layout
var grid = mygrid.createGrid(rows, columns).setCellPadding(2).setCellSpacing(8)
// Create the text at the top
var Title = mygrid.createLabel("Walk-In Scheduling")
grid.setWidget(1, 1, Title)
(snip) - creating various checkboxes and textboxes
var text1 = mygrid.createTextBox().setName('name1')
grid.setWidget(3,9,text1)
var text6 = mygrid.createTextBox().setName('message1')
grid.setWidget(4,9,text6)
// Create the "submit" button
var submit_button = mygrid.createButton("Submit")
grid.setWidget(12,9,submit_button)
var infoLabel = mygrid.createLabel('Availability inserted successfully.').setVisible(false).setId('info');
grid.setWidget(13,9,infoLabel)
var handler = mygrid.createServerClickHandler('insertInSS');
handler.addCallbackElement(panel);
submit_button.addClickHandler(handler);
panel.add(grid);
mygrid.add(panel);
mygrid.add(grid);
return mygrid
}
Then the function call for the button:
//Function to insert data in the sheet on clicking the submit button
function insertInSS(e){
var mygrid = UiApp.getActiveApplication()
var name1 = e.parameter.name1
var message1 = e.parameter.message1
mygrid.getElementById('info').setVisible(true).setStyleAttribute('color','blue')
var sheet = SpreadsheetApp.openById(submissioSSKey).getActiveSheet()
var lastRow = sheet.getLastRow()
var targetRange = sheet.getRange(lastRow+1, 1, 1, 2).setValues([[name1,message1]])
return mygrid
}

Ahh! A simple fix for a big headache.
I had an extra line:
mygrid.add(grid);
that was breaking it.

Get edit item value in RadGrid client-side

i'm looking for somone that can help me on this problem:
i've a Telerik RadGrid in edit-mode, after pressing radgrid's update button i do some checks into a javascript file; i want to check the value in some cells that are in edit mode but i don't know how to see the value.
I try to explain better with an example: i have some columns editable and some read-only, for the read-only columns i can view the value but for the editable columns i view all the html of the cell and i don't know how to get only the value, here is the code
function calculate(dgRDO) {
var grid = $find(dgRDO).get_masterTableView();
var righe = grid.get_editItems();
for (var i = 0; i < righe.length; i++) {
var row = righe[i];
//i can view this value, CODART column is ReadOnly
var codart = grid.getCellByColumnUniqueName(row, "CODART").innerHTML;
//i cannot view only the value but i view the entire html of the cell, PREZZO column is editable
var prezzo = grid.getCellByColumnUniqueName(row, "PREZZO").innerHTML;
}
Thanks for any suggestion

RESPONSE FROM TELERIK (IT WORKS)
In order to easily access RadGrid cells client-side you could use the ClientDataKeyNames property. It should contain the DataField names of the columns that will be accessed on the client. Illustration on extracting key values client-side is available in this article.
A sample function for accessing a column that is added to the ClientDataKeyNames collection would look similar to this:
function command(sender, eventArgs) {
var grid = $find("<%= RadGrid1.ClientID %>");
var masterTableView = grid.get_masterTableView();
var editItem = masterTableView.get_editItems()[0];
var cellValue = editItem.getDataKeyValue("Quantity");
}

Try this
var prezzo = grid.getCellByColumnUniqueName(row, "PREZZO").val();

How to generate <form:input> tags dynamically from JS?

I need to generate two type of fields, with a specific tags <form:input> and <form:hidden> dynamically from JS.
The first one <form:input> should be an input field the second, must be hidden.
The problem is that <form:input> is not recognized as an input and it's not shown at all. But it can be seen from the page source code.
if (bank != null) {
var fields = bank.additionalFields;
var additionalRows = document.getElementById("additionalRows");
for (i = 0; i < fields.length; i++) {
//from here generates jsp inputs:
//1 - <form:input>
//2 - <form:hidden> for each element from fields
var formInput = document.createElement("form:input");
var formHidden = document.createElement("form:hidden");
formInput.setAttribute("path", "paymentInfo.fields[" + i + "].value");
formHidden.setAttribute("path", "paymentInfo.fields[" + i + "].id");
formInput.setAttribute("type", "text");
formHidden.setAttribute("type", "text");
formInput.setAttribute("value", "");
formHidden.setAttribute("value", fields[i].id);
additionalRows.appendChild(formInput);
additionalRows.appendChild(formHidden);
}
}
Other <form:input> fields generated from JSP are appearing properly on the page.
Link to the generated page source code >> https://dl.dropboxusercontent.com/u/106355152/form_input.PNG
How can it be resolved?

What you are trying to do likely cannot be done. <form:input> and <form:hidden> appear to be server side tags - this is why they are only working from the java end.
You can generate regular and tags using javascript in a way similar to your current approach:
var formInput = document.createElement("input");
var formHidden = document.createElement("input");
formInput.setAttribute("type", "text");
formHidden.setAttribute("type", "hidden");
and then append them to your form.

How to select 2 words in 2 different textareas using createTextRange

I need to select some words in 2 TextArea programmatically. I am using the following javascript to select the words. The problme is that the selection persists only on the 2nd TextArea. I am using IE 6(I know it is old, but project related purpose).
function abc(start1, end1){
var textarea1ctlID = '<%=textarea1. ClientID %>';
var textarea2ctlID = '<%=textarea2. ClientID %>';
var txtarea1 = document.getElementById(textarea1ctlID);
var txtarea2 = document.getElementById(textarea2ctlID);
var start = parseInt(start1);
var end = parseInt(end1);
var txtarearange1 = txtarea1.createTextRange();
txtarearange1.moveStart("Character", start1);
txtarearange1.collapse();
txtarearange1.moveEnd("Character", end1);
txtarearange1.select();
var txtarearange2 = txtarea2.createTextRange();
txtarearange2.moveStart("Character", start1);
txtarearange2.collapse();
txtarearange2.moveEnd("Character", end1);
txtarearange2.select();
}
How to make the select persist in both the TextAreas

You can't. IE only allows one selected range.