Search code examples
javascriptdjangodraggablewufoo

A web interface (draggable elements, remembering state) similar to Wufoo

The question I have is very specific. I wanted to have an app where I can create forms, as on Wufoo, with easy to use interface. Which means, draggable elements.

My problem is that I cannot figure out how will the state be saved in the database once the use changes the ordinal position of the form elements. I can do the front-end side, and there are libraries available for that but how do I save a particular instance of the form in the backend so that the next time use logs in, the order is same.

I would love to use Django for this app. So, the basic classes I can think of are:

class Form(models.Model):
  """...objects..."""


class TextField(models.Model):
  """...objects..."""
  #FK to Form()


class TitleArea(models.Model):
  """...objects..."""
  #FK to Form()

I can also have specific ID's on the elements in the HTML form:

<input id="Field2" name="Field2" type="text"/>

How do they (Wufoo) do this? Is my Model not correct? I know it is naive. Thanks.

Solution

  • hidden input fields for the win.

    suppose:

    $("#submitForm").click(function() {
    // Check out the state of the union and change the hidden fields accordingly..
    // Something like:
    for (var i = 0; i < $(".orderedElements").length; i++) {
        $("#ordered-" + ((Number) i + 1)).attr('value', $(".orderedElements").eq(i).attr('id'));
    }
});

    If you catch my drift.