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.
Related
I'm trying to make something like this:
an html form with 5 button (each one with a differn value). if you click one of this button will be dispayed an text input (with a default value depending to the clicked button value, so the buttons call an ajax/javscript function to generate the default value) and a submit button.
I'm unable to create this type of form. have any suggestion for me ? Thx in advance.
I wouldn't use CakePHP's AJAX features, just write it yourself. Cake's features are useful in limited situations (e.g. pagination) but as soon as you need flexibility, it becomes a limiting factor. I believe the JsHelper is actually being removed in future versions.
To get this done without Cake, take a look at http://jsfiddle.net/mjxWg/8/. It's not a complete working example (e.g. there is no <form> tag), but it should show you enough to get started on your own.
I am loading a Razor View via AJAX and putting the content into a div on a page.
If I want to send some arbitrary data from the view to our AJAX framework, is there a recommended HTML tag to do this with? A hidden field sounds like the wrong this to use for this. I could use an empty div with custom data- attributes, but again, a div sounds wrong.
My data isn't relevant to any element within this view, more related to the view itself.
Yes - this is simply a question of systematics and aesthetics.
I use data-* attributes, and try to find and attach them to already existing related elements. This convention is also used by asp.net mvc framework itself - when link target needs to be loaded, data-ajax-* is attached to anchors. When you need to set update target of form submit, you attach data-ajax-* to form, so in most cases it is possible to find good candidate for it. If it is not possible in any particular case, I do not see problems using body instead.
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.
I'm trying to build a fairly complex form which as a couple of cascading selects - i.e. the user selects a value in one combo and the other combo is populated according to their first selection.
I've followed a tutorial on how to handle the cascading but the problem I have is that I now have nested forms (the code in the tutorial uses forms inside partial views to POST to a controller action to load the 2nd combo). I have my main form on which I want to collect the input values but also the nexted forms for the cascading select boxes. The problem I have is that the cascading selection doesn't post to the correct controller action, but instead posts to my main (outer) form's action.
I understand this is the correct behaviour for a browser (as nested forms apparently aren't supported) but what's the correct way to implement this?
The correct way is to only have one form. Then use AJAX to populate the cascading drop down list. The are 100s of examples online how to do this with JSON
use this to have multiple submit buttons on one form which each have different controller actions to post to:
http://iwayneo.blogspot.co.uk/2013/10/aspnet-mvc-action-selector-with-list.html
as for cascading stuff - i would focus on populating these without Ajax 1st - then you can worry about adding this sort of flare - if it doesn't work without JS anyway you're in a bad place.
I would have the 1st dropdown populated when you initially load the form and have a "next" button to populate the next dropdown in the cascade. this submit can use the method above to post to an action which then populates the second data set based on the selection of the 1st dropdown.
make sense?
Then how you ajax that after the point is up to you but you'll have a very solid foundation to build up stuff like that as you will have it working in the minimal tech scenario.
w://
I'm using the jQuery Form plugin and more specifically the ajaxForm method to hijack a normal form and post it using ajax. I have a form with lots of rows. Each row has edit and delete options and each section has an add option. Hijacking the form I can work out on the server whether to add, edit or delete but would like the ability to know which button was pressed in the success method back in my JS. Is this possible?
I know there are two params: responseText and statusText and that I can work out the button type in beforeSubmit but I need it when the data is returned which button has been pressed. The reason is that I want to display a form in a light box for edit and add but for delete I want to do something different. It seems a bit naff to check the data coming back to look for a certain string (not to mention flakey and unmaintainable).
Anyone know of a simple solution?
Look at the beforeSubmit option: it's a function that will get called, well, before submit. More importantly, it provides the data. You could look at the data and set a flag that would then be used within the success function. This isn't beautiful, but better than being coupled to the server's behavior.
In this situation, I have often just created two different forms-- one for update and one for delete. Then, instrument them separately.