Rails form with ajax and non-ajax buttons - ruby-on-rails

I have a form_for an #object with two buttons.
While the first button renders the 'show action', the second button renders the same form again. So I'd like the latter to be ajax-handled.
Is it possible to have a non-ajax button and an ajax button in the same form or do I have to change strategy?
Maybe I need a form_for with 'remote: true' so that both the buttons are ajax but then, how would I manage the first button to render the proper 'show view'?
Or maybe the only real solution is to have two different forms?
Thank you.

You could try to hook onto the buttons onClick event, remove the data-remote="true" attribute, submit the form and add data-remote="true" again. I dont know if this is really the best way but it should work.
function sendWithoutAjax() {
$('my_form_id').removeAttr("data-remote");
$('my_form_id').submit();
$('my_form_id').data( "remote", "true" );
}
Something like this...

I think the easiest approach would be to use the jQuery Form plugin. Then you can just create the form to submit to your non-ajax action, and the ajax functionality will be attached to the submit button itself:
$(".ajax_submit_button").click(function() {
$(this).closest("form").ajaxSubmit({
// options go here
...
});
return false;
});

Related

Sending form contents as both html and ajax?

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.

jquery form validation for formvalidation plugin

I am trying lot to get it work but no luck..any jquery expert can share there view please.
i have form, for validation i use form validation plugin (jquery) which doese validation correctly when i put.
$("#contact").validationEngine(); // #contact is my form id.
now i want to submit the form using ajax on button click (submit form button) which is also happening correctly using following.
$(".button").click(function() {
ajax code goes here ...
}
here problem is when i click on submit button it goes and update database it does not wait for formvalidation plugin to validate it...
what actually i want to do is first validate the form if all okay then go and call ajax function to update the database. if validation fails then dont call ajax function to update data base.
could any one please share some clues.
Thank you in advance...
regards, Mona.
$(function() {
$("#contact").validate({
rules: {
},
submitHandler: function(form){
ajax call
}
});
});
orignal post jQuery: validate before submitting try if this helps to resolve your issue..

Grails form submit without changing the view

I want to call an action (it does some filtering and send mails) from my GSP but I want to stay on that GSP. How to acoplish this? Thanks.
You have to use Ajax to submit your form.
Use the formRemote tag to achieve an Ajax submit.
Alternatively you could build it on your own by hooking into the onSubmit event of you form.
If you want to do this with a form, you can take a look on 'submitToRemote' tag: submitToRemote
but if you want to do it with a hyperlink... take a look on 'remoteLink' tag: remoteLink

Ajax Dropdown Selection to change TextArea Contents

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.

How to submit without having a submit button on the form?

Can I have a submit in <% using (Ajax.BeginForm("ChangePassword", new AjaxOptions { OnComplete = "ChangePasswordComplete" })) without having a submit button on the form?
I yes, how? Let's say I want to submit the above when a user click on an input of type button simply?
You'd have to use Javascript to post back the form, jQuery has a submit method you can use.
$("#FormId").submit();
But really, an input of type button is the same as submit, only it submits automatically so you might as well use that.
Progressive Enhancement
Alternatively, you can use the jQuery Form plug-in to post a standard form (using Html.BeginForm or manually outputting the <form />) and that will work for people who don't have Javascript enabled on their browser.

Resources