JSFiddle - React, Tailwind, and code Playground

by ysuper

HTML

{% extends 'admin/model/list.html' %}

{% block body %}
{{ super() }}

<div class="modal fade" tabindex="-1" role="dialog" id="changeModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <a href="{{ url }}" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></a>
        <h4 class="modal-title">批次更新【狀態碼、出通單號、領料單號】</h4>
      </div>
      <div class="modal-body">
        {% if change_modal %}
        {{ lib.render_form(change_form, cancel_url=url, action=url_for('maintain_form.update_view', url=url)) }}
        {% endif %}
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
{% endblock body %}

{% block tail %}
{{ super() }}
<script>
  {
    %
    if change_modal %
  }
  $(document).ready(function() {
    $("#changeModal").modal('show')
    $("#sale_number").attr("placeholder", "留空可保留原值(不覆蓋)")
    $("#receive_number").attr("placeholder", "留空可保留原值(不覆蓋)")
  }); {
    % endif %
  }

  $(".btn.btn-primary").click(function() {
    {
      %
      if status_sale %
    }
    if ($("#status").val() == '結單' && $("#sale_number").val() == "") {
      alert("請填寫【Sale Number 出通單號】!")
      $("#sale_number").focus()
      event.preventDefault();
      return
    } {
      % endif %
    } {
      %
      if status_receive %
    }
    if ($("#status").val() == '結單' && $("#receive_number").val() == "") {
      alert("請填寫【Receive Number 領料單號】!")
      $("#receive_number").focus()
      event.preventDefault();
      return
    } {
      % endif %
    }
  });

</script>
{% endblock tail %}