Reputation: 153
I am using Rails 3, Jquery-UJS and Jquery. I have a working setup of Jquery with Rails3 .I am trying to send a variable from Javascript to Rails controller by clicking a link.
My current approach is using js as follows to make an ajax call and pass msg string.
$("#select_link").click(function()
{$.ajax({
type: 'POST',
url: 'http://your_url/jmsg',
data: {msg: "hello world"},
;}
});
});
Should I include this code in my application.js file?
In my .html.erb file I have
<%= link_to "Send variable", jmsg_path, :remote => true %>
In my controller I have
def jmsg
@message= params[:msg]
respond_to do |format|
format.js
end
end
Till now, I've not been able to get the javascript variable in my @message instance variable
EDIT:
I made changes as suggested. However, the variable @message is not set when I do
@message=params[:msg]
When I check XHR using Fiebug, I see 302 Moved Temporarily for the POST action (the POST parameter msg is set correctly though). Response is - $("#show_message").html("")
My .js view is:
$("#show_message").html("<%= @message %>")
EDIT2 : When I check Firebug, it shows that there are two actions now: 1. POST /jmsg - with response @message = "hello world" 2. GET /jmsg - with response @message= " "
Upvotes: 3
Views: 4245
Reputation: 1953
When i wanna get any value from controller, i always use json format by doing something like these.
// jmsg.js.erb
{
"message": "<%= @message %>"
}
// yourjs.js
$.ajaxSetup({
'beforeSend': function(xhr) { xhr.setRequestHeader("Accept", "text/javascript") }
});
$("#select_link").click(function(){
$.ajax({
type: 'POST',
url: 'http://your_url/jmsg',
dataType: 'json',
data: {msg: "hello world"},
success: function(json, status, xhr){
// $("#show_message").html(json.message)
}
});
});
// in your.html.erb, remove :remote => true
<%= link_to "Send variable", jmsg_path %>
Upvotes: 1
Reputation: 2341
Okay, I will share with you what I know about using AJAX and jQuery in Rails, in an unobtrusive manner:
First, include this at the beginning of your application.js file
jQuery.ajaxSetup({
'beforeSend': function(xhr) { xhr.setRequestHeader("Accept", "text/javascript") }
});
Then, in the same file, create a function as follows, with is the function that loads before the DOM loads. In this function, you write your own functions:
$(function() {
$("#select_link").sendVar();
}
jQuery.fn.sendVar = function(){
this.click( function() {
var msg= 'hello world';
$.post('/your_url/jmsg/' + msg, function(data){
})
return false;
});
}
Make sure you have a route for this post request in your routes.config file, for e.g.
match 'your_url/jmsg/:msg', :controller => 'your_url', :action => 'jmsg', :via => :post
Let me know if this works for you. A similar code worked for me, for a similar case. Thanks.
Upvotes: 0
Reputation: 69905
Add the below code into your application js and try this
$(function(){
$("#select_link").click(function(){
$.ajax({
type: 'POST',
url: 'http://your_url/jmsg',
data: { msg: "hello world" },
});
});
});
Upvotes: 0