Nereid address edit example

gistfile1.mustache

{% extends 'address.jinja' %}

{% from '_helpers.jinja' import render_field %}

{% block breadcrumb %}
{{ super() }}
{% if address %}
<li  class="active"><span class="divider">/</span><a>Edit Address</a></li>
{% else %}
<li class="active"><span class="divider">/</span>New Address</li>
{% endif %}
{% endblock %}



{% block scripts %}
<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){
  // Register on change event

  $("select#country").change(function(){
    $.getJSON("{{ url_for('nereid.website.subdivision_list') }}",
      {country: $(this).val()}, function(data){
      var options = '';
      $.each(data.result, function(index, map){
          options += '<option value="' + map.id + '" code="' + map.code + '">' + map.name + '</option>';
      });
      $("select#subdivision").html(options);
      $("select#subdivision option[value='{{ form.subdivision.data }}']").attr('selected', true);
    });
  });

 // Onload trigger the change as country comes packed with form
  $("select#country").triggerHandler("change")
  // Use client side validation on the form
  $("form#edit-address").validate({
    errorElement: "span",
    //wrapper: "li",
    errorPlacement: function(error, element) {
      error.addClass('help-inline');
      error.insertAfter(element);
    },
    highlight: function(element, errorClass) {
      $(element).parents("div.control-group").addClass("error");
    },
    unhighlight: function(element, errorClass) {
      $(element).parents("div.control-group").removeClass("error");
    },
    submitHandler: function(form) {
      $("form#registration button.cont").button('loading');
      form.submit();
    }
  });
  $("button.address-submit").click(function() {
    $(this).button('loading');
    $(this).parent("form").submit();
  });

});
</script>
{% endblock %}

{% block main %}
<ul class="unstyled">
  <li class="account-wrapper">
    <div class="page-header">
      <h3>
        <i class="icon-map-marker"></i> {% trans %}Edit Address{% endtrans %} <small>Fields marked with (<span>*</span>) are requried.</small>
      </h3>
    </div>

    <form class="form-horizontal" 
        action="{{ url_for('party.address.edit_address', address=address) }}" 
        method="post" id="edit-address">
  
      <fieldset>
        {{ render_field(form.name, placeholder=_("John Doe"), class_="span5") }}
        {{ render_field(form.street, placeholder=_("1600 Amphitheatre Parkway"), class_="span5") }}
        {{ render_field(form.streetbis, placeholder=_("Mountain View")) }}
        {{ render_field(form.city, placeholder=_("California")) }}
        {{ render_field(form.zip, placeholder=_("33130")) }}

        {# Subdivision is a unique case where we render a select #}
        {% set field = form.subdivision %}
        <div class="control-group">
          <label class="control-label" for="{{ field.name }}">{{ field.label.text }}</label>
          <div class="controls">
            <select name="{{ field.name }}" id="{{ field.id }}" selected_id="{{field.data}}">
            </select> 

            {% if field.description %}
            <br/><span class="help-inline">{{ field.description }}</span>
            {% endif %}
            
            {% for error in field.errors %}
            <br/><span class="help-inline">{{ error }}</span>
            {% endfor %}

          </div>
        </div>

        {{ render_field(form.country) }}
        <button class="btn btn-success cont" value="" type="submit"
          data-loading-text="{% trans %}Updating Address{% endtrans %}">
          <i class="icon-ok icon-white"></i>
          {% trans %}Save Address{% endtrans %}
        </button>
      </fieldset>
    </form>
  </li>
</ul>
{% endblock %}