Onchange display / modify partial
Discarded with select
<%= select("array", "folder", @rows.keys, {}, :onchange =>"?" )%> There is a partial "form"
<%= render "form"%> I need to display a particle when there is a change in selection. Please let me know if there is a way to do this. I found that remote_function deprecated from rails 3.0. I saw all possible links here with onchange and select tags, but could not find the correct answer. I am new to rails, jQuery and Ajax. Please, help
thanks
why not display the form on the same page and show it on the tag change
<html> <body> <!-- Your Select tag --> <select id="select_id"> <option value="one" selected> One </option> <option value="two"> Two </option> </select> <!-- Here your a div inside with your form is placed --> <div id="myform" style="display:none"> <form action="/someurl"> .. .. </form> <!-- JQuery code to show the form --> <script type="text/javascript"> $(document).ready(function() { $("select#select_id").bind("change",function() { if ($(this).val() == "one") $("div#myform").show(); else $("div#myform").hide(); }) }) </script> </html> I still want to make an ajax request, I'm pretty simple too
$(document).ready(function() { $("select#select_id").bind("change",function() { if ($(this).val() == "one") { $.ajax({ url : "/form_url", data : "html", type: "GET", success : function(data) { $("div#myform").html(data) } }) }) }) on the server side, you need to answer the ajax request using format.js and visualize the template sent using the render command, or just define the .js.erb file
There is definitely a way to do this, and it works a little, but it is pretty easy once you get it.
First you need to attach the jQuery function to the change event of your select box. This can be done by adding some javascript to your application.js file. We want to do this here so that our javscript remains unobtrustive . You can try something like this in your application.js file:
$(document).ready(function(){ $("#select_field_id").change(function(){ var id = $(this).children(":selected").val(); var params = 'some_id=' + id; $.ajax({ url: "/some_controller/change_folder", data: params }) }); What this does is attach an anonymous function to the change event of the select field with id select_field_id . When this field is changed, the id selected parameter will be stored in var id , and then we will create the parameter for the request that we will send by doing var params = 'some_id=' + id; . some_id will be the identifier of what you are changing (so folder_id if that is what you use in your example).
Now we need to create a method that will process this request in our controller. So, let's move on to the example folder, add this to the folder controller:
def change_folder @folder = Folder.find(params[:some_id]) respond_to do |format| format.js end end It just finds the folder based on the id sent by your ajax request, on change_folder . It will also look for the appropriate change_folder.js.erb or change_folder.js for rendering.
Now we need to write the file change_folder.js.erb . We need to replace the HTML on some part of your page with the new folder that we received, so you should have some kind of div or other section with a unique identifier.
Inside change_folder.js.erb we can write this:
$('#your_div').html("<%= escape_javascript(render(partial: "folder", locals: { :folder => @folder })).html_safe %>") This will display the partial name _folder.html.erb , which is in the same directory as the change_folder.js.erb file. Partially, you will need to use the @folder variable to display the fields, so you will need something like:
<%= @folder.name %> <%= @folder.last_updated %> Inside your _folder.html.erb partial. .name and .last_updated are, of course, the newly created properties of the .last_updated model. You will have to use any properties that you specified for your folder model.
This should make you go where you need to. Please let me know if you need anything clarified.