How to create an AJAXified form within the Zend Framework - ajax

I'm trying to create a contact form. However at the top of the form the user can select using radio buttons whether he's contacting the technical department or the marketing department. Depending on which he selects, the entire form changes.
How would this be implemented within the Zend Framework? I'm already extending Zend_Form to make my forms. Also I'm working within the MVC style and would rather not break out of it.
Right now I simply do
echo $this->form;
in the view to render the form. I'm guessing that when the visitor clicks on one of the radio buttons, the controller will need to set a different form, but I'm not too sure how to go about that without re-rendering the entire page.
Thanks!
EDIT
I'm now thinking just setting something like this in the controller:
$this->view->contactFormTechDep = $formTechDep;
$this->view->contactFormMarketingDep = $formMarketingDep;
and render both, but hiding one all using Javascript.

I think you just need to show/hide the content of the form with JavaScript, not with php.
(with jQuery this can easyli be done)
But you'll have to keep in mind to be unobtrusive for users without javascript enabled

Related

Can I create quiz GUI with Django-Forms?

I'm new to django, and I'm working on a quiz project. The idea is to create something similar to this (http://www.stylemint.com/quiz). Basically, there will be a question on each page and the user clicks on an image with the answer. I was planning on using a django form with a radio select input type, however, I'd like the image to act as the radio button (ie, be clickable) and also a click on the image will take you to the next question (instead of having to click submit after each). Is this possible with django, or do I need java?
it's perfectly possible - if you just want a series of images, and clicking on them to take you to the next question you might achieve that by:
Having multiple input fields of type "image" which all submit the form. If you go down that route you'll have to template the forms out yourself or make your own widget.
Using javascript to replace radio buttons with images dynamically. If you do that, it'd be a good idea to make it fall back to a straight list selection for people who don't have javascript.
Ignoring forms altogether and just using a view with a parameter of what the choice is.
Yes, it's completely possible. My suggestion is if you want to save the result in the db use model and model form in django. So, my next suggestion is you can customize model field for combine radio button functionality and image together. But actually you must programming and use a little jquery and javascript to do it.
You may want to see:
https://docs.djangoproject.com/en/dev/topics/forms/modelforms/
https://docs.djangoproject.com/en/dev/howto/custom-model-fields/

How to Handle Mutiple Model Bound Forms

I am buiding a UI screen for editing the details of an Ecommerce Order. The model for my view (OrderModel) has everything I need (in properties that are also ViewModels), but the UI isn't designed to be able to edit all of it at once.
For example, one part of the UI is for customer data..another for order details, and another for tracking information, each having their own "Save" buttons.
I realize that I could use one giant form and use hidden form fields to populate the non-editable fields, making each "Save" button post all the data, but that smells bad.
I'd like to segment the editable chunks into smaller ViewModels that are posted and validated individually while retaining the strong typing but I'm unsure of how to achieve this in MVC3. Will I need partial views that are called from the primary view?
FYI, I'm using ASP.NET MVC 3 with Razor syntax and client side FluentValidation.
Partial Views are a good solution. You can pass different ViewModels to each partial view. But if only sections of the overall view are updated at a time I would not do a post back on the whole page. Instead I would use Ajax calls using JQuery/Javascript to update the individual information back to the controller. I would also look into something like Knockout.js to handle the data binding on the page.

How to add a new item to a dropdownlist in a create form in MVC 3?

I have a Form to create a new model object and persist it. That form is displayed in a lightbox or popup.
Some fields are dropdownlist showing related info that lives in another table (other model object related to the main model).
What I need to achieve is without leaving the creation form, create a new item of the related type and update the DropDownList in order to continue filling fields and finaly submit the form.
I have done this in winforms but not really sure which is the best approach in MVC 3:
Trigger another popup with a small form?
Use some kind of editable dropdownlist?
Place a small hidden form right next/after the DDL to allow entering the info to create an item in DDL (and to DB also)?
What do you thing is the best option?
Thanks!
There is no editable dropdown list in HTML. There are some toolkits that simulate it, but in general these are clumbsy and really complex. It's a lot easier to stick with basic controls.
You would proably do best to have a small + sign next to the field, and then popup an editing field that inserts the element into the combobox and sends it to the controller via ajax to add to the database.
An alternative to a second pop up is having a toggle add button. When toggled, then show a small area where you can enter the name. Using ajax, save the name, and then refresh your dropdown. This works well if you only have a few attributes to fill in.

MVC3: Showing entity relationships in a view

I am new to ASP.NET MVC and I have a question regarding viewing entity relationships.
Say I have an entity called 'Person'. This holds the usual data relating to a person (Name, Email, etc). I also have a 'Notes' entity. Under EF, a 'Person' can have many 'Notes'.
I have a Person controller where I can view and preform CRUD operations on a Person object.
I can show the notes in the view easily but what is the best way to allow a user to add/edit/delete these notes from the Person view? I am hoping to do this using AJAX and not have the user move to a completely different page to add/edit/delete a note.
Thanks in advance,
ViperMAN.
When they edit a note, popup a jQuery dialog pointing to your URL to edit or have a separate Ajax.BeginForm() on the page that the details go into. When they finish the edit call a method to refresh the notes.
So:
1. In your Notes grid (or whatever)
you have an edit link for each note called "edit"
this link looks something like the following:
This one actually uses 'notes' : )
http://www.iwantmymvc.com/dialog-form-with-jqueryui-and-mvc-3
ASP.NET MVC | Problem about showing modal dialog using jQuery dialog widget
ASP.NET MVC modal dialog/popup best practice
Also beware of this scenario for multiple links:
MVC3 - Only first row link works well with Jquery Modal Dialog
Now the urls you use to populate the dialogs would be for example
/Note/Edit/10
One thing to note - jQuery validation needs to know about these new items that are being loaded via ajax into the DOM , so in your partial view you need to tell jQuery validation to include the new items - I'll edit in a bit to add this, have to grab it from another machine.

How do I process a complex graphical UI element in a django form?

I have a few complex GUI elements (like a custom calendar with many days that can be highlighted) that appear along with standard django form input fields. I want to process the data I/O from these complex forms along with the Django forms.
Previously I would use AJAX requests to process these custom GUI elements on my HTML form after the Django form was saved or rendered, but this leads to a host of problem and customized AJAX coding. What is a good way to handle complex interactions widgets in a Django form?
Not sure if I understand completely, but you could have the value of your UI saved into a hidden element on the form via javascript. This can either be done as they select the values in the UI or when they submit the form. Pseudo-code assuming JQuery using submit() to save before the submit data is sent:
$('#myForm').submit(function(){
// get the value of your UI
var calendarValue = calendarWidget.getValue()
// #calendarData is the hidden field
$('#calendarData').val(calendarValue)
})
This obviously requires JS, but so does using your UI element.
Your question is very vague so I suggest you read the Django documentation on writing a custom field and hopefully that will help you get started. You might also want to investigate writing a custom widget. Unfortunately the documentation is bit lacking on that, but a Google search brings up several useful blog posts, including this one.
You have three options depending on how you output your Django Form subclass to the HTML page.
The first doesn't involve Form at all. Any html form inputs will end up in request.POST, so you can access them there. True, they won't be bound to your Form subclass, so you would have to manually inject the value either using a custom form constructor, or by setting some property on your Form object after instantiating it with request.POST. This is probably the least desirable option, but I mention it in case your use-case really doesn't support anything else.
The second is an option if you manually output the form fields in your HTML (ie: using {{ myform.field }} rather than just {{ myform }}. In this case, make a hidden variable to contain the value of your calendar GUI tool (chances are, your GUI tools already offer/require one). Add this hidden field, with the right name and ID, to the Form subclass itself, making sure it has a hidden django form widget. If necessary, use javascript as Rob suggests to populate the hidden field. When the form is posted, it will get bound to your form subclass as normal because, this time, you have a field on your Form subclass with that name. The machinery for clean() will work as normal.
The third, and best option, is to write a custom django field; Andrew's post has the link. Django fields have the ability to specify js and css requirements, so you can automatically encapsulate these dependencies for any page that uses your calendar widget.

Resources