ajax - AJAX 代码仅在 iPad 上不起作用

Question

我们创建了一个活动签到页面，非营利组织可以在其中添加志愿者参加活动。该页面在 iPad 以外的所有平台上都运行良好。（iPhone Safari 正在运行。）

在 iPad 上，单击id=add-volunteer按钮无效。期望的行为是单击按钮将志愿者姓名添加到注册志愿者列表中，并将用户信息保存在后端。（其他后端任务，例如发送邀请电子邮件也应该在后端进行。）

HTML

<form id="form-add" method="post">
<input type="hidden" name="csrfmiddlewaretoken">


<div class="row one-margin-bottom center">
  <div id="new-volunteers" class="small-12 medium-8 small-centered columns">
    <h6 class="left">Add volunteer</h6>

    <div class="row">
      <div class="input-right small-6 columns">
        <input class="center" id="new-firstname" name="user_firstname" placeholder="First name" type="text" required="">
      </div>

      <div class="input-right small-6 columns">
        <input class="center" id="new-lastname" name="user_lastname" placeholder="Last name" type="text" required="">
      </div>

      <div class="input-right small-12 medium-12 columns">
        <input class="lead center" id="new-email" name="user_email" placeholder="Email address" type="email" required="">
      </div>
    </div>

    <div class="no-margin-top qtr-margin-bottom checkbox center">

      <input type="checkbox" name="invite-optin" id="invite-optin" class="custom-checkbox" checked="">
      <label for="invite-optin">Invite volunteer to openCurrents</label>
    </div>

    <a id="add-volunteer" class="half-margin-bottom button round small secondary">
      Add volunteer
    </a>
  </div>
 </div>
</form>

<form id="form-checkin" method="post">
  <input type="hidden" name="csrfmiddlewaretoken">

<div class="row">
  <div class="small-12 medium-8 small-centered columns">
    <h6 class="left half-margin-bottom">Registered volunteers</h6>

    <div class="row">
      <div class="left small-8 columns">
        <p class="small-text half-margin-top half-margin-bottom"><strong>Name / Email</strong></p>
      </div>

      <div class="right small-4 columns">
        <p class="small-text half-margin-top half-margin-bottom"><strong>Check in</strong></p>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div id="registered-volunteers" class="small-12 medium-8 small-centered columns">


    </div>
  </div>
</form>

<div class="row">
  <a href="/org-admin/" class="button round small secondary">
    Back to org home
  </a>
</div>

JS

let onCheckClick = function(event) {
  let name = event.target.name;
  let elem = $(`#${name}`);
  let userid = elem.val();
  let isChecked = elem.prop("checked");

  $.ajax({
    url: "{% url 'openCurrents:event_checkin' event_id %}",
    type: 'POST',
    data : {
      csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[1].value,
      userid: userid,
      checkin: isChecked
    },
    dataType : "json",
    context: document.body
  }).done(function( data ){
    // console.log('checkin request:');
    // console.log(data);
    if (isChecked) {
      let dt = new Date();
      $(`#vol-status-${userid}`).text(`${dt.toLocaleTimeString()}`);
      $(`#vol-status-${userid}`).show();
    }
    else {
      $(`#vol-status-${userid}`).text(`${data.responseText} min.`);
    }
  }).fail(function (data) {
    // console.log('checkin error:')
    // console.log(data);
    elem.prop('checked', false);
    $('#live-dashboard-error').slideDown();
  });;
};

$(document).ready(function(){
  // bind all existing checkbox to checkin
  $("input[name^='vol-checkin']").click(onCheckClick);

  $("#add-volunteer").click(function(event){
    if ($(this).attr('disabled') === 'disabled') {
      $('#live-dashboard-checkin-disabled').slideDown();
      return;
    }

    if ($('#new-firstname').val() == '' || $('#new-lastname').val() == '' || $('#new-email').val() == '') {
      $('#vol-error').slideDown();
    } else if ( !(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test($('#new-email').val() ))  ) {
      $('#vol-error').slideUp();
      $('#email-error').slideDown();
    } else {
      $('#vol-error').slideUp();
      $('#email-error').slideUp();

      let new_firstname = $('#new-firstname').val();
      let new_lastname = $('#new-lastname').val();
      let new_email = $('#new-email').val();
      let invite_optin = $('#invite-optin').prop('checked');
      let process_signup_url;
      let form_data = {
        csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value,
        user_firstname: new_firstname,
        user_lastname: new_lastname,
        user_email: new_email.toLowerCase()
      };

      if (invite_optin) {
        process_signup_url = "{% url 'openCurrents:process_signup' endpoint=True verify_email=True %}"
        form_data['org_admin_id'] = {{ user.id }};
      }
      else {
        process_signup_url = "{% url 'openCurrents:process_signup' endpoint=True verify_email=False %}"
      }

      form_data['signup_status'] = 'vol'

      $.ajax({
        url: process_signup_url,
        type: 'POST',
        data: form_data,
        dataType : "json",
      }).done(function( data ) {
        // console.log('signup response:')
        // console.log(data);
        let userid = data;

        let form_data = {
          csrfmiddlewaretoken: document.getElementsByName('csrfmiddlewaretoken')[0].value,
          userid: userid
        }

        $.ajax({
          url: "{% url 'openCurrents:event_register_live' eventid=event.id %}",
          type: 'POST',
          data: form_data,
          dataType : "json",
        }).done(function( data ) {
          //console.log('register_live response:')
          //console.log(data);
          // hide any error messages present
          $('#vol-exist').slideUp();
          $('#live-dashboard-error-register').slideUp();
          $('#live-dashboard-error').slideUp();
          $('#vol-error').slideUp();
          $('#email-error').slideUp();
          $('#live-dashboard-not-in-progress').slideUp();

          if (data.event_status >= 0) {
            $('#registered-volunteers').prepend(`
              <div class="row"> \
                <div class="left small-9 columns"> \
                  <p class="half-margin-top"> \
                    ${new_firstname} \
                    ${new_lastname} \
                  </p> \
                </div> \

                <div class="right small-3 columns"> \
                    <input {% if checkin_disabled %}disabled{% endif %} type="checkbox" id="vol-checkin-${userid}" name="vol-checkin-${userid}" value="${userid}" class="hidden checkin-checkbox"/> \

                    <label class="checkin-checkbox-icon" for="vol-checkin-${userid}"> \
                      <i class="fa fa-lg fa-check-circle"></i> \
                    </label> \
                </div> \
              </div> \
            `)

            // clear form inputs
            $('#new-firstname').val('');
            $('#new-lastname').val('');
            $('#new-email').val('');
            $('#invite-optin').attr("checked", true);

            // bind new checkbox to checkin
            $(`input[name='vol-checkin-${userid}']`).click(onCheckClick);
            if (data.event_status == 1) {
              $(`input[name='vol-checkin-${userid}']`).trigger('click')
            } else {
              $('#live-dashboard-not-in-progress').slideDown();
            }
          }
          else {
            $('#new-firstname').val('');
            $('#new-lastname').val('');
            $('#new-email').val('');
            $('#invite-optin').attr("checked", true);
            $('#vol-exist').slideDown();
          }
        }).fail( function (data) {
          // console.log('register_live error:')
          // console.log(data);
          $('#live-dashboard-error').slideDown();
        });
      }).fail(function (data) {
        // console.log('signup error:')
        // console.log(data);
        $('#live-dashboard-error').slideDown();
      });

    }
  });

标签： ajaxipad