0

I am working on a simple Flask app which utilizes Bootstrap modal forms, initiated by JavaScript.

Using Flask-WTF with some field validation, I am able to submit forms fine as long as all the required fields are filled out.

However if there is a validation error, when corrected, the form does not properly submit.
I get a '405 - Method not allowed' because it tries to post back to itself.

I'm not understanding why I'm losing my "url" variable as it's being set to null. Any insight is much appreciated.

Script:

    $(document).ready(function() {
  // add device button opens modal containing device form loaded via ajax
    $('#addSiteBtn').click(function() {
      var url = "{{ url_for('core.add_site') }}";
      $.get(url, function(data) {
        $('#siteDialog .modal-content').html(data);
        $('#siteDialog').modal();

        $('#submit').click(function(event) {
          event.preventDefault();
          $.post(url, data=$('#siteForm').serialize(), function(data) {
            if (data.status == 'ok') {
              $('#siteDialog').modal('hide');
              location.reload();
            }
            else {
              $('#siteDialog .modal-content').html(data);
            }
          });
        })
      });
    });
  });

View:

@core.route('/sites/add/', methods=['GET', 'POST'])
@login_required
def add_site():

    add_site = True
    site_form = SiteForm()

    if site_form.validate_on_submit():
        site = Site(name = site_form.name.data,
                    descr = site_form.description.data,
                    addr_01 = site_form.address_01.data,
                    addr_02 = site_form.address_02.data,
                    city = site_form.city.data,
                    state = site_form.state.data,
                    zip = site_form.zip.data,
                    phone = site_form.phone.data,
                    fax = site_form.fax.data
                    )

        try:
            db.session.add(site)
            db.session.commit()
            flash('Site successfully added.')
        except:
            flash('Error: Site already exists.')

        #return redirect(url_for('core.list_sites', page=1))
        return jsonify(status='ok')

    return render_template('core/sites/add-edit-site.html',
                            add_site = add_site,
                            site_form = site_form,
                            title = "Add Site")

Form:

{% import "bootstrap/wtf.html" as wtf %}

  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="close">
      <span aria-hidden="true">&times;</span>
    </button>
    <h3 class="modal-title">
    {% block title %}
    {{ title }}
    {% endblock %}
  </h3>
  </div>
  <div class="modal-body">
    <form id="siteForm" name="siteForm" class="form" method="post">
    {{ wtf.quick_form(site_form) }}
    </form>
  </div>
Oluwafemi Sule
  • 36,144
  • 1
  • 56
  • 81
Brian K.
  • 13
  • 4

2 Answers2

0

Run the debugger in your IDE, set a breakpoint in add_site () and go line by line to figure out why your function is returning null. My guess is something near your validation code...

John R
  • 1,505
  • 10
  • 18
0

I'm a beginner and ran into exactly the same issue. After researching online it seems after the first submit the Jquery does not run correctly on subsequent submits.

In your script replace the following:

$('#submit').click(function(event) {

with:

$(document).on('click', 'input[name="submit"]', function(event) {

More info here - Jquery Event Not Triggering for DOM Elements Created after page load

br0cky
  • 223
  • 3
  • 11