This is a part of an app allowing the user to create HTML newsletters. After making edits, I'd like to let them preview the final look before saving the edits.
The preview page would display the preview and add the data in a hidden field to get resubmitted on approval. On "back to editing," the hidden field data would be passed back to the edit view.
I would have to add a "preview" action to the controller.
Is there a simpler way or best practice for this pattern?
In my opinion it would be good to add a kind of "preview" - Attribute to the model. When you klick on "Preview" you could copy the record or set "preview" to "true" and show it as static page when tis is the case. If the preview is ok, then you could set preview to false and that would state, that the Newsletter is ready to send.
Hope it is clear how i mean it, kinda late for me ;)
Related
I have about 20 forms, each with 15-20 textbox inputs each.
Once the user submits the form, all their values need to be confirmed, this is done by replacing each textbox with a label control that shows the entered value.
The user may click on a back button to edit the data, in which case the textboxes re-appear, or they can confirm their data submission.
What would be the best way to handle this in MVC?
Thanks
I would recommend having different views for editing and showing data. This could be useful if you would like to omit or add some extra of the fields, keeping your view logic simple. You could store the form data in the database with some flag indicating that it is not confirmed yet. After confirmation you would only change the flag of the record. Another option is to store form data in tempData or Session and save it after confirmation.
The quickest way would probably be to have both on the page and bound to the same Model properties but wrap them in some simple render logic. an example off the top of my head in razor could be something like
#if (is in edit state){
<field markup>
#}
else{#
<label markup>
#}
Its been a while since I've worked on an MVC app but that's how i would have done it back then i think.
I am still pretty new to Rails and am working on a basic app and have run into a problem, which I can't seem to get around, sorry if this question has already been answered, but searching didn't yield me any results.
Basically I am creating an app that catalogues all of someones's clothes, Now the main page is the index page of everything they have logged, and each picture is linked to the show page where more information is revealed. I want to use AJAX to bring that show page to the side of the main index page. I am working off of another tutorial to figure this out but have run into a problem. On the initial load of my index page, I need to define a variable for that show page so that it can be rendered using a partial, but I can't use find(params[:id]) since the user hasn't selected anything yet. So my question is how do I set that initial value to either just the first item in the catalogue or not have anything appear, and then when someone does click the link, the sidebar shows the more detailed description of the piece of clothing.
Thanks for any help.
#object = params[:id] ? MyModel.find(params[:id]) : MyModel.first
But I think there's some problem with design of application.
You might have some luck working with the ruby gem 'PJAX'. Here is a screen cast showing you how to get that AJAX sidebar you want. Good luck
It sounds like you can just print the container element as normal, but leave it empty when the page is generated. Optionally, hide it via CSS. Then, when you load its content with AJAX, set it to visible or just populate it as normal.
Alternatively, if you really want to set it to the first item in the catalog (or in any ActiveRecord) you can use .first e.g. Products.first, and use that value to populate its initial contents.
I'm using ExpressionEngine and SafeCracker along with Ajax (plugin: jquery.form.js - http://jquery.malsup.com/form/).
Best I can tell, SafeCracker will only allow for updating a single entry at a time. However, the UI / UX necessitates that a list be displayed. I've proof of concept'ed an entry by entry on-demand form. That is, click a particular edit link next to each entry and a snippet of jquery creates a form along with displaying a submit button. Click submit and that single entry updates. The inputs don't exist until the Update link is clicked
What I would prefer to do, if possible, is to create the non-form and form versions of each entry as the page is renbered and use some sort of toggle to display one or the other. Again, doable. Then, when I click the Edit link I'd add the necessary attributes to the input so that entry's form elements will be read but the other (display: none) elements for the other entries will be ignored. I'm thinking (out loud) that if I add the attr("name", some-value) that would work. That is, an input with no name will be ignored.
Yes, I can test this and I will. However, even if it works I'm not sure if it's a best practice and/or there's a more ideal way of accomplishing my ends. I'm here looking for validation and/or additional expertise and input.
Thanks in advance.
Just set disabled property to inputs and they will excluded from Form submission, whatever input fields are hidden or visible. Different jQuery methods, like submit() and serialize() follow specification of HTML 4 and exclude all disabled controls of a forms. So one way is to set
$('your_input').prop('disabled', true);
or ,
$('your_input').attr('disabled', 'disabled');
Check following link:
http://www.w3.org/TR/html401/interact/forms.html#successful-controls
Also, you may use a general button instead of a submit, as result you can handle click event on it and within that event you can make exclusion, validation, manipulation on values and what ever you like.
You can put a disabled attribute on them server side or set the property via jQuery:
$(".hidden input").prop("disabled", true);
I am looking for the best way to create ajax enabled subforms from items in a list with MVC 3. A static list of values should be generated, but with an "edit" link/button next to every item, to toggle inline edits.
I did follow the tutorial at this link
http://blog.janjonas.net/2011-07-24/asp_net-mvc_3-ajax-form-jquery-validate-supporting-unobtrusive-client-side-validation-and-server-side-validation [1]
However it is based on the form edit fields always being visible
I'd like to show a static list with field values, but let the user activate an edit field by clicking "edit" (e.g. button)
I did modify the example at [1] by creating a default partial view with a form with submit button only. When posting the data by ajax the edit form will show. It looks like it is working, (I only need to hide validation errors on the first POST - which does not send real data).
Update:
An even better solution would probably be to leave out all forms in the static view, just have a single css class button/link next to each item, and let jquery fetch the relevant view for the clicked item. I am not sure how to do that with MVC 3+jQuery though.
Another update:
I discovered Ajax.Actionlink, which did exactly what I wanted!
I found out how to do it, and it turned out to be real simple!
I created two partial views.
One for rendering each static item. I used used Ajax.ActionLink with InsertionMode "replace", and set the parent of the item as the target
The second for rendering the form. Here I used Ajax.Beginform with similar options.
On successfully saved data, I returned the static view, on failure, I returned the partial view with the ajax form again.
I'm happy I found a MVC-centric way to do it (although it is fun creating custom stuff with jQuery)
It sounds like you need an inline editing plugin for jQuery. I would try jEditable. I have not used it myself but appears to have extensive docs.
this entry might help: code + video + explanation ;)
http://ricardocovo.wordpress.com/2011/04/03/asp-mvc3-editing-records-with-jqueryui-dialogs-and-ajaxforms/
-covo
2/28: Seems the Go uri is only if you create your own persisten layer. I'm going to try and use a link on my form to do this. If I can figure out how to find the form_id of the current form.
Original Question:
I'm trying to restrict who can delete a form instance. It seems if people can get to the form-runner summary page, they can click the delete button and delete a form (even if they are not allowed to do any "/orbeon/fr/hr/expense-report/edit/*" options.
Anyone found a way around this issue. I wonder if we could use the GO button on the form /edit/ view to build our own delete feature.
If I look at the page source from the hr/expense-report/edit/f36b446c3ddbf7c63ec033d5c6fa7ce4 view, that the from does have the details to the actual form instance.
Example:
form id="xforms-form" class="xforms-form xforms-initially-hidden xforms-layout-nospan" action="/orbeon/fr/Test/Hidden_Search/edit/f36b446c3ddbf7c63ec033d5c6fa7ce4"
I wonder if that information could be passed to the "GO" button, if I have that on my page?
Right now, if users can access the Form Runner summary page, they can also access the "delete" button. Showing the "delete" button on the summary page for some users but not others, requires a change to Form Runner, which shouldn't very complicated.
For instance, if you only want the "delete" button to be shown for users with the role can-delete, on this xforms:bind of fr/summary/view.xhtml add the attribute:
relevant="xxforms:is-user-in-role('can-delete')"