add.pt 3.48 KB
<html metal:use-macro="load: ../base.pt">
  <div metal:fill-slot="content">
    <div  class="panel panel-default">
      <div class="panel-heading">
          <h3 class="panel-title">${request.title}</h3>
      </div>
      <div class="panel-body">
        <form method="post" accept-charset="utf-8" id="myform" class="form-horizontal" enctype="multipart/form-data">
        <div class="alert alert-danger" tal:condition="form and form.error and True or False">
          <div class="error-msg-lbl">Kesalahan Pengisian Form</div>
          <p class="error-msg">${form.errormsg}</p>
        </div>
        <div class="form-group" tal:repeat="f form">
            <div id="item-${f.oid}" style="${f.widget.hidden and 'display:none;' or 'display:block;'}">
                <label for="${f.oid}" class="control-label col-md-2 ${f.required and 'required' or ''} " id="req-${f.oid}">
                        ${f.title}</label>

                <div class="col-md-3">
                    ${structure:f.serialize()}
                    <p id="error-${f.oid}" class="help-block" tal:condition="f.error"
                       tal:repeat="error f.error.messages()">
                       ${error}</p>
                </div>
            </div>
          </div>

          <div class="col-md-4">
            <label class="control-label col-md-3"></label>
            <button type="submit" class="btn btn-primary" id="simpan" name="simpan">Simpan</button>
            <button type="submit" class="btn btn-warning" id="batal"  name="batal">Tutup</button>
          </div>
        </form>
      </div>  <!--panel-body-->
    </div>
  </div>
  <div metal:fill-slot="scripts">
<script type="text/javascript">

      $(document).ready(function () {
         $('#pegawai_nm').typeahead({
            "hint"     : true,
            "highlight": true,
            "minLength": 1,
            "remote"   : {
                    url: "/pegawai/headofnama/act?term=%QUERY",
                    beforeSend: function () {
                        $('#pegawai_nm').addClass("loading");
                    },
                    filter: function(parsedResponse){
                        $('#pegawai_nm').removeClass('loading');
                        return parsedResponse;
                    }
            },
        },{
            "name"      : 'pegawai_nm',
            "displayKey": 'value',
          });

        $('#pegawai_nm').bind('typeahead:selected', function(obj, datum, name) {
          $('#pegawai_id').val(datum.id);
          $('#pegawai_nm').val(datum.nama);
          });

        $('#pangkat_nm').typeahead({
            "hint"     : true,
            "highlight": true,
            "minLength": 1,
            "remote"   : {
                    url: "/pangkat/hon/act?term=%QUERY",
                    beforeSend: function () {
                        $('#pangkat_nm').addClass("loading");
                    },
                    filter: function(parsedResponse){
                        $('#pangkat_nm').removeClass('loading');
                        return parsedResponse;
                    }
            },
        },{
            "name"      : 'pangkat_nm',
            "displayKey": 'value',
          });

        $('#pangkat_nm').bind('typeahead:selected', function(obj, datum, name) {
        $('#pangkat_id').val(datum.id);
          });

        $('#tmt').attr('readonly',false);
        $('#tmt').datepicker({
          changeMonth: true,
          changeYear: true,
        format:'dd-mm-yyyy'
        });

        });
    </script>
  </div>
</html>