How to build Preview functionality before form submit in Rails ? - ruby-on-rails

I have a simple scaffold and I want the user to see (preview) the form data before he submits it. It looks to be fairly straight forward problem but surprisingly I am not able to figure out how to do it. I found this but it looks to be somewhat dated (2010 question)
Is there any gem or jquery plugin which can simplify this preview functionality ? any suggestions on how to do it in rails 3.2.x ?
Thanks

It really depends on what kind of "preview" you want to include - either "preview page" or "rendered fragment":
Preview page is what some services are showing: summary of all inputs shown in form of separate page with button "confirm". It doesn't require javascript or anything fancy - just click "next" on form page, see data typed just a second ago and click "confirm" or "back to edit". If this is what you require then you can do it simply by creating new controller action(preview?) which would initialize model with passed parameters(just like "create" action would, but without saving) and generate template with "preview" shown and hidden form that will be passed to "create" action after clicking "confirm". Alternatively you can simply modify "new" form so it would hide form depending on called action and show preview instead.
Second option is "render fragment" - it will live-update part of your current page via javascript. Depending on how complicated this view will be and what kind of operations you will need to do before showing template it might be good to use some javascript plugin or send request to server and obtain rendered partial. In former case you can select from very easy implementations(like this) up to complete solutions dedicated to it. On the other hand if you choose to render it on server then simple ajax request with all params of form should be enough to provide you with HTML output that can be put directly into DOM element.

I don't know about any gem which can do that.
I think showing a modal with jquery and getting data from data-elements is a simple way to go.

Related

Rails ajax post from button that sends values from outside of the form in the request

I'm somewhat new to rails and am wrapping a GUI around a CLI tool to give some non-technical users some self-service. Part of the tool contains a page where the user selects a few values from some drop downs etc, and then clicks one of a few buttons on the screen to kick off their desired actions. The fields where they make their selections are outside of the forms that the buttons belong to. On button click, I want to call a javascript function that will grab the values the user selected, and post an ajax call back to the server to run the command corresponding to the button, and then when the request returns I want to insert the command output into a text area.
The only problem I'm having is with getting the values of the fields outside of the form generated by button to, and including them in the ajax request. Outside of rails this is pretty trivial, but I'm having a hard time getting this to work. Does anybody have any suggestions or examples?
Thanks
There's really no need for what I was trying to do... it ends up I can just use the form_tag helper and multiple submit_tag helpers to create the submit buttons with different values. See this post for details: How do I create multiple submit buttons for the same form in Rails?
Also, here is a great write up on the javascript portion (it uses coffee script, but I didn't have any trouble following it even though I'm using jquery): http://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html

jquery mobile - MVC: How to save input from popup dialogs

Newbie here, scratching my head on this one.
How do you normally save information specified in a popup dialog for use by other forms on your page?
Scenaro:
Click an options button, which pops up a dialog.
Set some checkboxes, radio buttons, etc...
Submit form (dialog seems to need it's own form)
Do you usually just save the inputs in a session, cookie, or do you have another way access your dialog controls from the main form?
Seems like I'm missing something basic, as it should be easy to set some options and use them on the rest of the page.
All advice appreciated!
If you are trying to pass data from one page/dialog to another see Passing parameters between pages

Rails Ajax Or Javascript?

I was wondering which way would be the best for my following problem. and maybe sample on how to do it also
I have the following models: customer, music, books.
What I would like to do is when a customer wants to go into the edit page then automatically customer general information such as name, password show up! But on an other tab by pressing music which his another model then music information comes up in the same. Sorta like facebook and twitter edit page do it.
Now each of the form are rendered by the following code line at the moment
<%= render 'general'%>
but how do i include them in the link and should i just use javascript and toggle them or use ajax ??
Thanks
Well, this has little to do with Ajax, since all information you need aparently would already been loaded by you main customer object.
What i understand you want is something like the tabs javascript plugin of twitter bootstrap: http://twitter.github.com/bootstrap/javascript.html#tabs
You put the different content (music/books/etc) in different divs and when the tab is clicked, the content changes and the user gets a better experience.
Take a look at the link, it is super easy to set up this plugin on your project.

Make checkbox as a link?

I want the html.checkbox() in ASP.NET MVC to be as a link that goes to an action controller (GET and not POST).
Question:
It is possible to make the html.checkbox() to act as a "actionlink" instead of going to the FormCollection without using Javascript and JQuery or any additional plugin?
This wouldn't be possible in any framework as checkboxes are just static input elements. They have no ability to trigger any sort of action on their own, hence where javascript and event handlers comes in.
You could try making a form who's method is GET, but it would still have to go somewhere.. I guess you could make an action that handles various states of a checkbox and then routes to the correct page, however you'd still need to submit this form by having the user click a submit (again because the only way to trigger an action from clicking a checkbox is by using javascript)
You could also fake a checkbox using css and checkbox-like images.
text goes here
If you need to show it as either checked or unchecked, you would use two classes with two different checkbox-like images.
I doubt this is possible without javascript.
Except for buttons and links, no controls actually do anything but change their own value in the DOM.
It would however be rather trivial to add an onclick to your checkbox that would do whatever (including a GET request).

Passing dynamic data to controller with ASP.NET MVC and jQuery on form submit

I have a website which is basically a single page containing a bunch of dynamic content. In normal operation the user should never leave this page. To handle/report certain errors though, I need to redirect to an error page. So on the error page I want to provide a link back to the normal page which provides the app the information required to rebuild all the dynamic content which was previously open.
I think I can rebuild the page by parsing the querystring with javascript and reloading dynamic content. I'm not sure if this is the best way, but I've got it working. So href in the link on my error page needs to look something like:
MySite/MyController/MyAction?1,5,8,9
where the numbers in the querystring basically indicate the Id's of content sections to load in on document.ready.
I'm now stuck on how to generate this link though. I think I need to pass these numbers into the controller somehow, so the controller can pass them into the error view which will then generate the "back" link.
I have a standard html form for uploading a file:
using (Html.BeginForm("MyAction", "MyController",
FormMethod.Post,
new { enctype = "multipart/form-data" }))
{ /* ... */ }
I then have a button which calls the jQuery .submit() method on the form.
So, the question, when I click on the button which submits the form, how can I attach the additional data so I can access it in my controller?
Hope that's clear, if not let me know and I can provide more detail. Thanks.
Edit: It occured to me that I could submit this information with a hidden field in the form. I'll try that if I can't find a better way, but I'd like a more generic solution if possible as I have a number of forms on the page and ideally I'd like this data available to any/all of them.
your url should be biult just before sending the form with .submit() not in Html.BeginForm tag....
i can't see the problem over here... what exactly you are dealing with?
I know this is not quite what you asked but instead of going through the hassle of redirecting the user in the first place why don't you show a modal window (a jquery based one) that contains an iFrame. The iFrame href can be determined by the calling page and can show the error page.
Not sure if this helps but I have used this technique and found that I do not need to worry about getting the user back to the place where they started from. Additional to this you will not need to rebuilding/reloading the orignal content as it will still be on the calling page.
****EDIT**** After reading your comments maybe you could do the following...
On the link click - open up a modal popup pointing to an iframe.
The iframe calls the action on the controller to download the file.
The view could say "Downloading file... please wait, click here to close etc."
If the action throws the error then redirect to the error page as normal as it is within the iframe modal popup.
This way you do not need to leave the current calling page.

Resources