Django Formsets, reordering elements on client side, form display and submission - Wufoo kind of interface

[AJ]

I am trying to create an application which is like Wufoo. Where you have various type of form elements and any number of them on the front end. Each type being a Model of its own in Django models. Here is the full question. In all honesty I am stuck with Formsets or having JSON objects of the form data but still stuck and merging them so that the user is not constrained in separate sections for each model formset. Any help will be appreciate a lot. 

Should I just go with constructing my own form using the objects returned for each Model? That still poses the problems of merging and sorting different models.

I have a three models like this:

class Document(models.Model):
    name = models.CharField(max_length=1000, blank=False, null=False)
    user = models.ForeignKey(User, unique=False)
class Name(models.Model):
    name = models.CharField(max_length=1000, blank=False, null=False)
    user = models.ForeignKey(User, unique=False)
    doc = models.ForeignKey(Document, unique=False)
class Text(models.Model):
    name = models.CharField(max_length=1000, blank=False, null=False)
    text = models.TextField()
    user = models.ForeignKey(User, unique=False)
    doc = models.ForeignKey(Document, unique=False)

 

I am using Formsets to create as many forms of name and Text for one Document. Here is something I have in the template:

<form action="" method="POST">{% csrf_token %}
   
    <h2>Text Items</h2>
    {{ text_formset.management_form }}
    {{ name_formset.management_form }}
    {% for form in text_formset.forms %}
        <div class="Items">
            {{ form.as_p }}
            <p style=""><a class="delete" href="#">Delete</a></p>
        </div>
    {% endfor %}
    <h2>name Items</h2>
    {% for form in name_formset.forms %}
        <div class="item">
            {{ form.as_p }}
            <p style=""><a class="delete" href="#">Delete</a></p>
        </div>
    {% endfor %}
      <input type="submit" value=" Submit " />
</form>

 

I am using formsets so the form classes look like:

    class DocumentForm (ModelForm):
        class Meta:
            model = Document
    class TextForm (ModelForm):
        class Meta:
            model = Text
    class nameForm (ModelForm):
        class Meta:
            model = name


 

I have to give the users to be able to reorder the elements according to their wish on the front-end side. Something like Wufoo forms where you can drag them. I can use jQuery draggable etc. to achieve that but

• I am stuck on how to have Django be aware of the changes.
• I want to be able to mix-up the name and Text. (Say, one name followed by two texts etc.). The current formset method only allows a contiguous set of each.

Approaches that I have thought are building, modifying forms on the client side by having the view return the JSON object but I am not sure how well Django will play with that. I want to be able to use the CSRF security facility.

• By constructing my own form on the front end using the JSON returned by Django server, will I still be able to use that?
• When the user modifies the form by dragging the elements, and their hidden order values change, not sure how to resubmit the form.

I tried to combine the formset objects but could not sort the formsets. In my view I have

text_formset = TextFormSet(prefix="doc_text", initial=text_initial_data)
    name_formset = NameFormSet(prefix="doc_name", initial=name_initial_data)
    complete_formset = list(text_formset) + list(name_formset)

 

Sorting:

    def doc_edit_sorter(left, right):
        return cmp(left.WHATHERE, right.WHATEHERE)