We Keep Coding

How to pass a JavaScript var into a Rails Controller

I'm looking to pass a JavaScript variable into a Rails Controller. The interesting part is that the variable is generated inside Canman, and I cannot use it (yet) outside of it.
This is probably just JavaScript and not necessarily related with Canman. But I'm just not sure what it is happening here.
The approach I'm following (but completely open if there is a better way) is to populate a hidden field with jQuery, just to access the data via params from the controller.
If possible (and if this is a good practice) I will like to avoid the form, and just call some JavaScript on click and then pass that variable to the controller.
View
= form_for #post do |form|
= form.hidden_field :base64
= form.submit
JavaScript
$('form').submit(function(event){
Caman('#canvas', img, function() {
var imageBase64 = this.toBase64();
alert(imageBase64); // works fine
$('#post_base64').val(imageBase64);
});
alert(imageBase64); // nothing
});
PostsController
def update
#post = Post.find(params[:id])
raise '¯\_(ツ)_/¯'
...
end
post_params
=> {"base64"=>""}
Also, I read that an option could be to make an AJAX request. However, I'm not sure how to proceed with that, yet.
At some point, I tried with a text_area instead of a hidden_field. The text_area got populated with the right data. However, params never got the data. If I got back via the browser button, the data was in the text_area, and clicking on submit one more time, populates the params as expected.
Thanks in advance!

Short answer: Ajax.
The goal was to send the value of a variable (a base64 image) to my rails controller, and once there, keep going just with Ruby.
At the end, I created a simple Ajax function to send data from my client (Image from browser) to my server (Rails Controller) via params
save_canvas.js
$(document).on('click', '.save_canvas', function() {
event.preventDefault()
var base64Data = canvas.toDataURL('png')
$.ajax({
type: "POST",
url: "http://localhost:3000/pictures/",
data: { image: base64Data },
success: function(post){ console.log('success') },
error: function(post){ console.log(this) }
})
})
pictures_controller.rb
def create
#picture = Picture.new(image: params[:image])
#picture.save
redirect_to #picture
end
I got support to achieve this here

How to submit form and update element on the page without refresh, in Rails 4

I'm having a lot of trouble trying to do something that I imagine would be fairly simple.
I have a list of items, let's say, todos. At the bottom of that list I have a text field where I add new items to that list. I want to make it so that the new items are added to the bottom of that list dynamically, without a full page refresh, like in a chat window.
I made the submit form remote: true and it successfully submits without reloading the page, but I can't get the new item to appear at the bottom of the list at the same time. I have to refresh the page to see the changes.
I tried a few different approaches I found on SO (there's no shortage of similar questions here) and the web, and even a gem called Sync, but each of them had errors and problems of their own and I couldn't get any to work properly. Each of them could be its own SO question. So instead I ask: Is there a "recipe" that is sure to successfully implement this in Rails 4?

let's say, now you have a user form to submit,
<%=form_for #user,remote: true%><%end%>
And you also have a controller,
UsersController
In your controller, you have a function,
def create
#something
end
which is for the form.
the only thing you need is to modify the function like
def create
#something
respond_to do |format|
format.js
format.html
end
end
then in your view side, under directory of view/users/ , create a create.js file, in the file, you can do the js action, like get the new record, and append the new record to the users list.
reference:
http://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html#form-for

There are various ways to do what you are asking. My approach would be:
Create an AJAX call to the controller that passes the parameters of the form
Inside the controller, you save/update things and then return a JSON object
On the success callback of the AJAX function, you append a list item/table row, using the object values
The code could be something like this:
model.js
$(function() {
$("#submit_button").on("click", function(event) {
event.preventDefault();
$.ajax({
type: "POST",
url: "your_controller_url",
data: "your_form_data"
success: function(result) {
// Append the result to a table or list, $("list").append(result)
},
});
});
});
controller.rb
def your_action
# Do your stuff
# return JSON to the ajax call
end
Well, this is just a skeleton. I prefer doing things this way. (Because i hate the js.erb approach)

Here is rails 5, hope it will help someone ( it still works on rails 4 ):
Try this ajax example:
In 'routes.rb':
# set the route that ajax can find the path to what controller in backend
get '/admin/some_great_flow', to: 'great_control#great_flow'
In 'great_control_controller.rb' controller:
# this function in controller will response for ajax's call
def great_flow
# We can find some user or getting some data, model here.
# 'params[:id]' is passed by ajax that we can use it to find something we want.
#user = User.find(params[:id])
# print whole data on terminal to check it correct.
puts YAML::dump(#user.id)
# transform what you want to json and pass it back.
render json: {staff_info: #user }
end
In 'app/views/great_control/index.html.erb' view:
<div>
<label>Staffs</label>
<%=select_tag(:staff, options_from_collection_for_select(#staffs, :id, :name), id:"staff_id", required: true)%>
</div>
<script>
//every time if option change it will call ajax once to get the backend data.
$("#staff_id").change(function(event) {
let staff_id = $("#staff_id").val()
$.ajax({
// If you want to find url can try this 'localhost:prot/rails/info/routes'
url: '/admin/some_great_flow',
type: 'GET',
dataType: 'script',
data: { id: staff_id },
// we get the controller pass here
success: function(result) {
var result = JSON.parse(result);
console.log(result['staff_info']);
// use the data from backend for your great javascript.
},
});
});
</script>
I write it for myself.

You can see the changes using javascript.
For eg lets consider a controller Mycontroller with action index and you are submitting form on index.
Then create a file in views my_controller/index.js.erb
To reflect changes use javascript in this template.
Definately remote sends the ajax call, so to see the changes you need some manipulation using javascript.
Thanks

Convert many GET values to AJAX functionality

I have built a calendar in php. It currently can be controlled by GET values ​​from the URL. Now I want the calendar to be managed and displayed using AJAX instead. So that the page not need to be reloaded.
How do I do this best with AJAX? More specifically, I wonder how I do with all GET values​​? There are quite a few. The only solution I find out is that each link in the calendar must have an onclick-statement to a great many attributes (the GET attributes)? Feels like the wrong way.
Please help me.
Edit: How should this code be changed to work out?
$('a.cal_update').bind("click", function ()
{
event.preventDefault();
update_url = $(this).attr("href");
$.ajax({
type : "GET"
, dataType : 'json'
, url : update_url
, async : false
, success : function(data)
{
$('#calendar').html(data.html);
}
});
return false;
});

Keep the existing links and forms, build on things that work
You have existing views of the data. Keep the same data but add additional views that provide it in a clean data format (such as JSON) instead of a document format (like HTML). Add a query string parameter or HTTP header that you use to decide which view to return.
Use a library (such as YUI 3, jQuery, etc) to bind event handlers to your existing links and forms to override the normal activation functionality and replace it with an Ajax call to the alternative view.
Use pushState to keep your URLs bookmarkable.

You can return a JSON string from the server and handle it with Ajax on the client side.

How to make JavaScript to work when its code is rendered dynamically after performing an AJAX GET request?

I am using Ruby on Rails 3.0.9 and jQuery 1.6.2. I am trying to get JavaScript to work when its code is rendered as a partial template after performing an AJAX HTTP GET request. That is, I have the following code that performs an HTTP GET request:
# The 'articles.html.erb' file
var jqxhr = $jQ.get('http://www.my_web_site.com')
.success(function(data) {
$jQ('#data_container').replaceWith(data);
})
and this is what returns the HTTP request performed to the 'http://www.my_web_site.com' URL (note: this is a partial template within some JavaScript code):
# The 'info_articles.html.erb' file
<%= link_to 'Article link', article_path(#article), :id => 'article_link' %>
<script type="text/javascript">
$jQ('#article_link').click(function(event) {
event.preventDefault();
...
});
</script>
After the replaceWith function correctly replaces the data somewhere in the web page related to the articles.html.erb template, the Javascript just rendered (that is, that contained in the info_articles.html.erb) doesn't work. In the above example I am referring to the click event handler: it simply doesn't work as expected.
Why does this happen? How can I solve that issue?

use a jquery live binding in the main document instead.

JavaScript. Open new window with array of parameters

I have an asp.net mvc 3 application with some Action Method that handles GET requests and returns a page. Code looks like this:
[HttpGet]
public ActionResult Print(IEnumerable<string> arrayOfIds)
{
.......................
return View(someModel);
}
Also there is JavaScript code, that calls this action:
window.open('#Url.Action("Print","Appointments")' + urlArray, "Print", "width=620,height=410,scrollbars=yes");
Where urlArray can be really big. How can I pass this data to the Action Method without using URL string (maybe using content of HTTP Request)? I need it because URL is so big that browsers can't work with it.
UPD: May be my explanation wasn't really clear... I solved my problem. This is JavaScript code:
$.ajax({
url: '#Url.Action("Print","Appointments")',
type: "POST",
data: { listOfIds : listOfIds },
dataType: "text",
traditional: true,
success: function (data) {
printWindow = window.open('', 'Print');
printWindow.document.write(data);
}
});
Also I changed attribute of Action Method from HttpGet to HttpPost.

I don't think your question has much to do with JavaScript. The URL limitation is a feature of HTTP GET. You need to use HTTP POST, which you can't do with window.open().
However, you can do something like this...
window.open('about:blank', 'Print', 'width=620,height=410,scrollbars=yes');
document.myForm.target='Print';
document.myForm.urlArray=urlArray;
document.myForm.submit();
This opens a new window and posts an existing HTML form (method="post") to the new window. The example above assumes a hidden field with the name "urlArray", but you just need to supply whatever your Action Method expects.
You can tidy this up quite a bit if you have an existing form on the page already that you're using to capture the urlArray, you'll just need to target the form at a new window that is created by your form's onsubmit event handler.

You'll be better off posting a form to the current page (and thus transfer everything to the server side through POST) and then use RedirectToAction and pass your data at the server side.
It's a better way to do it. You can post the form using Javascript. So rather than window.open you'll be using form.submit()
EDIT:
Add target="_blank" to your form tag to open the results in a new window.