BlockUI Jquery PLugin не работает в моей форме AJAX - PullRequest
Новая
       26

BlockUI Jquery PLugin не работает в моей форме AJAX

0 голосов
/ 30 октября 2018

Я работаю над формой, с помощью которой я отправляю в бэкэнд (сборку с Laravel), используя AJAX. Я хочу, чтобы когда пользователь нажимал кнопку отправки, вызывался плагин blockUI jquery и показывался спиннер. После ответа от сервера спиннер из blockUI должен остановить и перенаправить пользователя на другую страницу. Проблема в том, что пользовательский интерфейс блока не загружается на веб-странице. Я добавил тег сценария jquery и blockUI внизу страницы, но все еще не работает ..

Сценарии добавлены внизу страницы 

<!--Jquery-->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <!-- Block U.I plugin-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.70/jquery.blockUI.min.js"></script>

Форма отправляется 

<form method="POST" action="#" id="form" data-parsley-validate>
    <!-- CSRF TOKEN-->
      <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <!-- END CSRF TOKEN-->
    <div class="form-line registar2 love">
        <input id="passport" type="text-area" class="form-input" name="passport" value="{{ old('passport') }}" autofocus required data-parsley-passport= ''>
            <label> Passport</label>
            <div class="error-label"></div>
            <div class="check-label"></div>
             @if ($errors->has('passport'))
                <span class="help-block">
                    <strong>{{ $errors->first('passport') }}</strong>
                </span>
            @endif
   </div>

    <div class="form-line registar2 move" >
      <input id="kra" type="text-area" class="form-input" name="kra" value="{{ old('kra') }}" maxlength="12" required data-parsley-kra = ''>
      <label>KRA Pin *</label>
      <div class="error-label">Field is required!</div>
      <div class="check-label"></div>
      @if ($errors->has('kra'))
        <span class="help-block">
            <strong>{{ $errors->first('kra') }}</strong>
        </span>
      @endif
    </div>

    <div class="form-line registar2 love {{ $errors->has('residence') ? ' has-error' : '' }}">
      <input id="residence" type="text-area" name="residence" class="form-input" required>
      <label>Current Residential Address *</label>
      <div class="error-label">Field is required!</div>
      <div class="check-label"></div>
      @if ($errors->has('residence'))
        <span class="help-block">
            <strong>{{ $errors->first('residence') }}</strong>
        </span>
      @endif
    </div>
 <button type="submit" class="form-b3c love" id="pay"> Proceed to Payament</button>

</form>

Код AJAX 

<script>
    // Get the form via its id
    var form = $('#form');

    $( "form" ).submit(function( event ) {
      //let keyword is used as a local scope
      let form = $( this )
      let formData = new FormData(form[0]);
      event.preventDefault();
      console.log(formData);

      //Check for Parsley validation method
      form.parsley().validate();

      //Returns true if Parsley validation has no errors
      if (form.parsley().isValid()){
        //Call blockU.I plugin
        $.blockUI({ message: ' loading...' });
        $.ajax({
            type: "POST",
            data:formData,
            processData: false,
            contentType: false,
            url: "saveAdd",
            success: function(response){
                //Unblock BlockUI
                $.unblockUI();
                //Page to redirect to
                window.location.href="payment" ;
            },
            failure: function(errMsg) {
                alert(errMsg);
            }
        });
      }
    });
</script>
...