I'm trying to use Ajax in one of my Rails applications to have a form_tag textarea change its contents according to the selected value of a dropdown that is out of that form_tag.
I would like to ask, what is the correct way of handling this ? Is it possible to respond to js in my show action and have a js.rjs ? Do you happen to know of any resources or can offer some insight ?
You should write a javascript, which triggers on the dropdown menu's onchange event, and start an ajax process. With jQuery it is something like this (in your show code within a script tag):
$("#dropdownMenuName").change(function(){
$.get("controller/action.txt", function(data){ $("#textareaName").val(data); } );
});
This simply sends a request to your app on the controller/action.txt action, and the result is pasted into the textarea's text property. Of course you should write the answer as a simple text, as the result is printed in the textarea instantly.
Related
I have a dropdown select on my page called language, which is in a form with other elements. When the form is submitted normally (which submits everything), I can access the value of the dropdown with params[:langauge].
I have another link/button on the page which, when clicked, should get the value of language and pass it to the controller. The controller could then run some ajax to change the language on the page. But how do I pass (just) the value of the dropdown through the link?
Update:
Should I get the value with Jquery, or is there a simpler way?
$('select[name="language"]').val()
If that is a link, the only way to use is query string
that link
You can get "href" of that link by JS, and then use this method to update query string.
Then the method will be able to process with correct params.
If that is a button, that would mean a mini form, you can set a hidden field inside the form and use jQuery to update its value. When sent, the controller method will know this value.
This javascript code should update the URL whenever the dropdown value is changed.
$(function() {
$('#link-button').attr("href", "/link_path/" +$(this).val())
$("select#language").change(function() {
$('#link-button').attr("href", "/link_path/" +$(this).val())
});
});
I have an admin form that updates a model via a html submit. I'd like to be able to send the form's contents to an Ajax modal dialog for a 'preview' via a link or button in the admin form.
Is there a way to send the form's contents to the modal dialog via Ajax without breaking the html submit? So far all I can do is get the data into the modal as html which breaks the js rendering. All the Ajax submit examples I find attach to the form which will break the html submit.
Suggestions and/or pointers are appreciated.
We are using Rails 3.2.12 for what it's worth.
I suppose it depends on how you are rendering your modal. If you're doing it server side and just need to get the form values to your ajax controller action you could do something like this with jquery"
$.post(ajaxUrl + "?" + $("#myform").serialize())
to generate a query string of your form values that you could sent to you ajax model.
Or if you're building the modal client side try
$("#myform").serializeArray()
to get an array of name, value pairs
This is what it took to get this to work under Rails 3.2.12
View:
<%= link_to 'Preview Promotion UI', admin_preview_promotion_url, id: :promotion_preview %>
The above link is inside the form do/end.
Javascript in application.js
$("#promotion_preview").live('click', (function (event) {
event.preventDefault();
$.post("/store/admin/promotions/preview",
$(event.currentTarget.parentElement).serialize().replace('=put&', '=post&'),
{},
"script"
);
}));
Rails.js injects some hidden code in the page that sets the type of response to PUT and then gets in the way of the routing. At least in this case simply replacing PUT with POST fixes things.
With this bit of code I can post my form updates as usual and activate a modal dialog "preview" using the form data.
Hi i have a form in GSP and I want to make all the form elements read only after submit.
Is there any way to do it. I have form elements like textboxes, dropdowns attachment field......
I am using G:Form
I am also using java script in my GSP.
Please help me out
Thanks.
Keep in mind that even if you set the tags as readonly on the server side, users can still change them through a variety of means, and whatever the value on the form is before it gets sent back to you.
You can use an onsubmit event in the form tag, calling a JavaScript function which will disable any form elements you want to affect. Since GSP is server pages, not the browser, it will not normally be able to help you in this respect.
Certainly the easiest way is client-side with jQuery:
$(function() {
$('input, select, textarea').attr('disabled', 'disabled');
});
I have a rails form to simply post data and using ajax, reload.
format.js{ render :update do |page|
page.reload
end}
I want to also, clear the value of a textbox inside the form because right now, the textboxes just keep the same value. If they were "hello" and the other was "world", I would click submit, it would run reload, and keep the same textbox values.
EDIT I'm using the default javascripts produced by rails. Prototype.js, application.js (etc.)
Try resetting for form like so:
page[:the_form].reset
You can also update a specific text field value:
page[:foo].value = 'Hello!'
If this is an AJAX call, I suspect the right way to clear the form is in your success callback from the ajax call. If you're using ExtJS or jQuery, this should be pretty easy to do, but without letting us know which JS library you use we can't be much more explicit.
I have this ruby on rails code
<%= builder.select(:serving_size_id, '') %>
I have not specified any options on purpose because I set the options in a different way when the page loads (using jQuery and Ajax).
The question: Is there any way I can get the value from the column "serving_size_id" but not change that line? I have a partial which I use it for new and edit and I think it would be sweet if I can do the setting of the selected index in JS.
Any ideas?
I'm not sure I completely understand your question, but if you want to set the value of the select field with JavaScript, you need to obtain the value in JavaScript at some point. I can think of two ways of doing this:
1) When you get the options via AJAX, have the server indicate which one is selected. This can be done by returning HTML <option> tags with selected="selected" set for one of them. To do this, your AJAX request is going to have to provide information about the object this select field is for (so the server can look up the object's current serving_size_id value).
2) When you render the field in your original partial, also render some JavaScript which sets the current value of the field, for example, underneath what you have above:
<%= javascript_tag "var ssid = '#{builder.object.serving_size_id}';" %>
Then, after the options are retrived via AJAX, the ssid variable is checked and the correct option is selected.
using jQuery in rails is easy but a little more difficult than prototype.
ex: "div id="serving_size" class="nice" rel="<%=h num%>">Stuff Goes Here.../div>"
in application.js do the following:
//application.js
$(document).ready(function(){
if($('#serving_size'){
$('#serving_size').live("mouseover",function(){
//we are hovering over specific div id serving size
if($('#serving_size').hasAttr('rel')){
alert($('#serving_size').attr('rel'); //your dynamic rel value, and fire function
}
}
}
if('.nice'){
$('.nice').live("mouseover",function(){
//we are now hovering over any item on page with class nice
if($(this).hasAttr('rel')){
//we are now using jQuery object ref and finding if that obj has attr rel
alert($(this).attr('rel')); // shows dynamic rel value
}
}
}
});
If you use the above code you should be able to do anything you want and fire any custom code from each of your set event callbacks.
The 'live' function in jQuery is great because it can be called on items that will eventually be on the page (eg. if you fill in something with ajax, jQuery will be prepared for that item being in the page)
I hope this help.