I'm trying to add a HighCharts chart to my Rails app, the content of which will be determined by the selection of radio buttons. My code for the radio buttons is fairly standard and is as follows:
<%= radio_button_tag(:interface, "wlan") %>
<%= label_tag(:interface_wlan, "WLAN") %>
<%= radio_button_tag(:interface, "3g") %>
<%= label_tag(:interface_3g, "3G") %>
I see Rails 3.1 has the "remote => :true" option to make Ajax much simpler. My question is where exactly do I put this option for a series of radio buttons? I tried adding it at the end of the radio_button_tag parameters, but it didn't generate the appropriate HTML.
Alternatively, if there is a simpler way of doing what I want to do I'd be open to that as well.
You can do this using jquery. In my opinion is far easier to do this way.
You put the code in your your_model.js file, create the ajax function like the code below.
Create a custom route and do whatever you want.
$("#wlan").click(function() {
$.ajax({
type: "TYPE_OF_REQUEST",
url: "/your_url",
success: function(data) {
... Your success behavior here ...
},
error: function(data) {
... Your error behavior here ...
}
});
});
Related
I'm using form with :remote => true for ajax functionality, this form works fine but outside this form I have select_tag for other feature :
<%= select_tag "months", options_for_select(#dynamic_month.collect { |name|
name }, 'ALL'), id: 'chart_filter', :onchange =>"monthWise(this)" %>
Here I'm passing #dynamic_month from controller, but I'm not getting updated value from controller after submission of form, Is there any way we can achieve this keeping this select option outside the form and getting updated data from controller.
Thank you.
I am trying to build a dynamic dropdown in ruby on rhodes.There are basically two dropdowns on my screen and i am using ajax to get the values of the second dropdown from the database depending on the value selected in the first dropdown..I am a newbie to ruby and do not know the syntax on how to use ajax in ruby on rhodes..
JavaScript Code I am using...
$.post("/app/Settings/dropdown",
{ value:a },
function(data){
alert(data);
});
-----Partial Controller Code
enter code here
def dropdown
#a = #params['value']
puts #a
if #a.eql?"Auto"
mystring="auto1|auto2|"
else
mystring="personal1|personal2|"
end
end
I can get any parameter sent via ajax call to controller..My Question is how to send back the data from controller to function in that ajax call so that i can use that information to create a dynamic dropdown..I want to send this mystring to function(data)??
In Rhodes, controller actions can only render other actions or return a string consisting of partials. So, in order to populate a dropdown using AJAX, you'll have to render the view associated with the action which will returned as response to the AJAX call.
Controller 'dropdown' action:-
def dropdown
#a = #params['value']
if #a.eql?"Auto"
#optionList[:auto1]="auto1"
#optionList[:auto2]="auto2"
else
#optionList[:personal1]="personal1"
#optionList[:personal2]="personal2"
end
render :action => "dropdown"
end
'dropdown.erb' view:-
<% optionList.each do |key, value| %>
<option value="<%= key %>"><%= value %></option>
<% end %>
AJAX call:-
$.post(
"/app/Settings/dropdown",
{ value:a },
function(data){
data = data.replace("<div>","");
data = data.replace("</div>","");
alert(data);
}
});
Make sure you replace the div tags in the AJAX response, since Rhodes automatically surrounds AJAX responses with div tags.
I have an autocomplete field on my form that is working however I need to force the user to select one of the values from the list (with autocomplete, the user is not restricted to an item from the list -- it's a textfield and they can enter whatever they want). The jQuery combobox adds the additional functionality that I require. Can anyone help me add that additional functionality to my form -- is there a tutorial or exmample I can follow?
Here's what I have so far (and it is working - Thank you Ryan Bates )
view - new.html.erb
<%= f.input :widget_name, input_html: { data: { autocomplete_widget_source: widgets_list_path } } %>
controller
def list
#widgets = Widget.order(:name).where("name like ?", "%#{params[:term]}%")
render json: #widgets.map(&:name)
end
JQuery
jQuery ->
$('#model_widget_name').autocomplete
source: $('#model_widget_name').data('autocomplete-widget-source')
I tried using a simple collection_select, but the document is too large (10,000 items) because of the size of the select list.
<%= collection_select :model, :widget_id, Widget.all, :id, :name, selected: #model.widget_id -->
Thanks in advance.
I think I finally found the answers I was looking for.
I added the following
jQuery ->
$('#model_widget_name').bind 'autocompletechange', (event, ui) ->
if (!ui.item)
$(this).val('');
Does this make sense? Do I need more?
THANK YOU TO THE FOLLOWING:
mechianicalfish on stackoverflow
Mark Berry at MCB
Systems
I found a number of questions and answers regarding updating a partial using Ajax after submitting a form. But my question is ?simpler?, I just want to reload a partial every few seconds and load in the new data. This really can't be hard at all, and I remember doing something similar in Rails 2.3 but I can't find the answer anywhere.
Basically, I have a show.html.erb rendering a partial like so:
<div id="latest_post">
<%= render :partial=>'info/latest', :object=>#user, :as=>:user %>
</div>
The partial file located at app/views/info/_latest
<% post = user.posts.last %>
<h1>Last Post</h1>
<p><%= post.content %></p>
I just want the latest_post div to be updated every 30 seconds. Please help!
Well it turns out the answer is a little complicated:
Step 1: Use Javascript's setInterval function along with jQuery's $.get() function to load a page, say /users/1/posts/latest.
setInterval(function(){
$.get("/users/1/posts/latest.js", function(data){
$("latest_post").html(data);
},
"html")
}, 30000);
Step 2: Create a latest.js.erb and put it in your app/views/posts folder.
Contents of latest.js.erb:
<%= render partial: 'posts/latest', object: #user.posts.last, as: :post %>
Step 3: Create the above partial with whatever you'd like (if you don't need a partial, you can just write the entire contents of the div in the latest.js.erb file.)
Step 4: Add a latest method to your PostsController, that defines #user, etc. for the latest.js.erb to use.
Step 5: Add get '/latest' to your routes.rb
Hey! I'm teaching myself Ruby, and have been stuck on this for a couple days:
I'm currently using MooTools-1.3-compat and Rails 3.
I'd like to replace one button (called "Follow") with another (called "Unfollow") as soon as someone clicks on it. I'm using :remote => true and have a file ending in .js.erb that's being called...I just need help figuring out what goes in this .js file
The "Follow" button is in a div with id="follow_form", but there are many buttons on the page, and they all have an id = "follow_form"...i.e. $("follow_form").set(...) replaces the first element and that's not correct. I need help replacing the button that made the call.
I looked at this tutorial, but the line below doesn't work for me. Could it be because I'm using MooTools instead of Prototype?
$("follow_form").update("<%= escape_javascript(render('users/unfollow')) %>")
ps. This is what I have so far, and this works:
in app/views/shared:
<%= form_for current_user.subscriptions.build(:event => #event), :remote => true do |f| %>
<div><%= f.hidden_field :event %></div>
<div class="actions"><%= f.submit "Follow" %></div>
<% end %>
in app/views/events/create.js.erb
alert("follow!"); //Temporary...this is what I'm trying to replace
*in app/controllers/subscriptions_controller.rb*
def create
#subscription = current_user.subscriptions.build(params[:subscription])
#subscription.save
respond_to do |format|
format.html { redirect_to(..) }
format.js {render :layout}
end
Any help would be greatly, greatly appreciated!
The ID selector should be used if there is only one of those elements on the page, as the Id selector us for unique IDs. A Class selector is what your looking for. Classes are used for multiple elements that have the same styles or same javascript events.
The code to replace Follow with Unfollow would be as follows in Mootools. I am not totally understanding your question, but you will need to assign a ID to the button.
document.addEvent('domready',function(){
$$('follow_form').addEvent('click',function(e){
//Ajax Here
this.set('value','Unfollow');
});
});
Mootools has a different set of functions than Prototype, so most (if not all) code designed for prototype will not work in Mootools. If you want to see the functions in Mootools, I recommend the Docs (its a good read): http://mootools.net/docs/
This code would work as well for you, if you do not/can not add unique IDs to each form element:
$$('input').addEvent('click',function(){
if(this.value == 'Follow') {
//Ajax Here
this.set('value','Unfollow');
}
});