Блог

Мне нужен индикатор выполнения при отправке формы через ajax, но проблема в том, что если форма отправлена, индикатор выполнения не работает, и когда отображается индикатор выполнения, форма не отправляется.Я не могу понять, что происходит.Когда я скрываю (данные: {tenure_id ,срок выполнения} ), отображается индикатор выполнения, но форма не отправлена.

Форма

 <?php

use yiihelpersHtml;
use yiiwidgetsActiveForm;
use yiihelpersArrayHelper;
use appmodelsTenure;
use appmodelsSectors;

/* @var $this yiiwebView */
/* @var $model appmodelsBillGenerate */
/* @var $form yiiwidgetsActiveForm */
?> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="bill-generate-form">

    <div class="card mb-4">
        <div class="card-header">
            Bill Genrate
        </div>
        <div class="card-body">
            <?php $form = ActiveForm::begin(['id' => 'create']); ?>
            
            <?= $form->field($model, 'tenure_id')->dropDownList(
            ArrayHelper::map(tenure::find()->all(),'id', 'tenure_name'),
            ['prompt'=>'Select Tenure','id' => 'tenure_i'])?>
              
            <div class="form-group">
                    <label for="date">Due Date</label>
                    <input type="Date" class="form-control" name ="due-date" id="date">
                </div>
             

            <?= Html::submitButton(Yii::t('app', 'Genrate Bill'), ['class' => 'btn btn-primary','id' =>'save']) ?>
            <?php ActiveForm::end(); ?>
        </div>
    </div>
</div>

 


 <div class="form-group" id="process" style="display:none;">
        <div class="progress">
       <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="">
    </div>

</div>


<script>
 
     $(document).ready(function(){
      
      $('#create').on('submit', function(event){
       event.preventDefault();
        
     
        $.ajax({

         url:'<?= Yii::$app->homeurl?>bill-generate/create?tenure_id=25amp;due-date=2021-02-11',
         method:"GET",

         //data: {tenure_id ,due-date},

         beforeSend:function()
         {

          $('#save').attr('disabled', 'disabled');
          $('#process').css('display', 'block');
         },

         success:function(data)
         {

          var percentage = 0;

          var timer = setInterval(function(){
           percentage = percentage   20;
           progress_bar_process(percentage, timer);
          }, 1000);

         }
        })
       
      });

      function progress_bar_process(percentage, timer)
      {
       $('.progress-bar').css('width', percentage   '%');
       if(percentage > 100)
       {
        clearInterval(timer);
        $('#create')[0].reset();
        $('#process').css('display', 'none');
        $('.progress-bar').css('width', '0%');
        $('#save').attr('disabled', false);
        setTimeout(function(){
         $('#success_message').html('');
        }, 5000);
       }
      }

     });
</script>
 

Используйте опцию данных ajax. Вы можете отправить объект данных на сервер с помощью data опции в ajax. Не рекомендуется передавать строку запроса в URL.

Ваш код должен быть примерно таким..

 $.ajax({
    url: "<?= Yii::$app->homeurl?>bill-generate/create",
    type: "get",
    data: { 
        tenure_id: 25, 
        due-date: 2021-02-11
    },
    beforeSend:function(){
        $('#save').attr('disabled', 'disabled');
        $('#process').css('display', 'block');
    },
    success: function(response) {
        //Do Something
    },
    error: function(xhr) {
        //Do Something to handle error
    }
});