I have a partial that show a form into a page.
As I submit the form, I just want that the controller do its operation and come back to the page without render anything. I just want to show the flash message of success or error and nothing more. But the controller by default try to render a new page. How can I do to avoid this behavior ?
To do what you want, only using asynchronous HTTP request with JavaScript (AJAX).
So you post the values of the form's fields and update the flash area with the result.
You can use jQuery to help in ajax requests:
<Edited>
If you do not have a flash area in your page you can create it putting a div element at the top or your page (or any other place you want).
Then in the button's onclick event you put this:
<input type=button onclick="$.post('/controller/action/update', $('#testform').serialize(), function success(data, textStatus, jqXHR){$.('#flash').html(data)})">
This function sends the form's data to the server and when return the callback function is called (success). Then you need only to update the flash content with the returned data.
Related
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.
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.
When loading normal pages in jquerymobile, I get the nice loading animation, but when I pull from an ajax source, Im not getting the animation and users could get confused that they did not submit the form.
I couldnt find anything to call the animation just from a google search
If you submit your form as you normally would JQM does ajax the form automatically and you get your neat little animation you are referring to. i.e.
<form action="processMyForm.php" method="post">
...inputs here
</form>
You also have access to the following methods.
$.mobile.showPageLoadingMsg("b", "This is only a test"); // options are (theme, text, boolean text only)
$.mobile.hidePageLoadingMsg();
I'm using the data-remote along with data-URL to make an Ajax call via jquery ujs and it is working.
However, I can't understand how I'm to process the returned value.
For example, I have a controller action which returns some HTML - how do I attach a JS function (I presume) to replace the HTML in an existing div when the Ajax call finishes? I've set data-type to :html btw.
I can see the HTML is being returned by sniffing the network traffic.
I've got it to work by writing my own Ajax call (rather than using jquerys ujs version) but it feels as though I've reinvented the wheel - but I can't find how to use jquerys data-remote to make the call for me, and to then have it update a div (for example).
Thanks,
Ian
i presume that you have a button with the id "button" and a div with the id "add_some_content"
$("#button").click( function(){
$.get("some_random_url", function(data) {
$("#add_some_content").html(data);
});
});
or as jxpx777 pointed out:
$("#button").click(function(){
$("#add_some_content").load("some_random_url");
});
if you now press on the button, an ajax get request for your url is made. the answer from that page is attached to the div.
I'm looking for a good example that shows how to handle (in the controller) a POST onchange (of a input["text"] for example)
Currently when I set my onchange = form[0].submit(); and I watch the action hit the controller, the HTTP verb is still GET for some odd reason. But when I view source the form on the page has the method="POST" ... so what am I doing wrong?
Are you able to make use of an ajax library (jquery, ms, whatever) and set up a post for the call instead?
"The javascript submit() method does not fire the onsubmit event, but bypasses it and directly submits the form. " - http://www.webmasterworld.com/forum91/4047.htm
you should put
return false
at the end of submit event handler function