2
votes

Yii2 - Message d'avertissement avant de soumettre

J'ai un formulaire avec deux champs "a" et "b" quand en action mise à jour si le champ "b" change l'événement "beforeSubmit" une alerte Modal Bootstrap est envoyée à l'utilisateur sans aucun bouton OK ou CANCEL , seulement des informations pendant 5 secondes, après ce temps enregistre automatiquement si le champ "b" a été réellement changé, sinon change sauvegarde sans fenêtre modale d'alerte.

Comment envoyer cette condition depuis le contrôleur pour voir où j'ai le javascript? peut-être avec ajax? mais comment?

   Controller.php  
 $('#form').on('beforeSubmit', function(e) {
    if(old_B_attribute != current_B_attribute){ //example
        $('#modal').modal('show');
    }
});
   _form.php  
  XXX

php ajax alert yii2 before-save

4 commentaires

pas clair ce que vous demandez, vous pouvez également appeler $ model-> getDirtyAttributes () qui est réellement utilisé lors de la sauvegarde ou de la mise à jour d'un enregistrement pour déterminer quels champs ont été réellement modifiés.

@MuhammadOmerAslam j'ai besoin d'afficher le modal d'avertissement avant de soumettre uniquement lorsque le champ "b" a été modifié

ok, et que doit-il se passer après l'affichage du modal d'avertissement, y a-t-il une sorte de boutons OK et CANCEL sur la fenêtre modale qui décideront quoi faire? vous devez ajouter toutes les informations dans la question, sur quand le formulaire doit-il être soumis et quand non? que doit-il se passer si aucune valeur n'est modifiée, que doit-il se passer lorsque l'un des boutons OK ou CANCEL (s'il y en a) est cliqué

@MuhammadOmerAslam, sans aucun bouton OK ou CANCEL , seulement des informations pendant 5 secondes, après ce temps enregistre automatiquement si le champ "b" a effectivement été changé, sinon changement sauvegarde sans fenêtres modales d'alerte.

3 Réponses :

0
votes

votre demande ne peut pas être effectuée côté client par beforeSubmit.Parce que vous devez décider du côté serveur.

Côté client, vous pouvez utiliser

$(document).on("beforeValidate", "form", function(event, messages, deferreds) {
//   #code
// console.log('BEFORE VALIDATE TEST');
}).on("afterValidate", "form", function(event, messages, errorAttributes) {
// console.log('AFTER VALIDATE TEST');
 //#code
});

Ensuite, décidez dans la méthode des règles .

Côté serveur, vous pouvez également décider des événements suivants: (Pour ce que vous voulez) Â beforeValidate, Â afterValidate, beforeSave, afterSave, ...

1 commentaires

Je ne comprends pas comment vérifier s'il doit afficher modal ou non (si le champ "b" n'est pas réellement changé) côté client

1
votes

Vous souhaitez demander à l'utilisateur si les valeurs d'attribut ont réellement été modifiées avant de soumettre le formulaire.

Comment j'irais pour cela

Créez une action distincte dans mon contrôleur actionAttributeDirty () qui validerait si l'attribut sélectionné a réellement été modifié.
Ensuite, utilisez un Html :: button () normal plutôt qu'un Html :: submitButton () pour le formulaire.
Ajoutez un champ masqué pour contenir les enregistrements actuels id dans le formulaire.
Liez l'événement click au bouton qui enverra un appel ajax à actionAttributeDirty () avec le id de l'enregistrement actuel. li>
Utilisez ensuite la fonction de réussite pour afficher la fenêtre modale et utilisez setTimeout avec $ .yiiActiveForm ('submitForm') pour déclencher l'envoi du formulaire après 5 secondes. li>

Donc, dans l'ordre similaire indiqué ci-dessus,

actionAttributeDirty

$("#form").on('keypress','input',function(e){
    e.preventDefault();
    if(e.keyCode===13){
        $("#save-now").trigger('click');
    }
});

Votre formulaire doit avoir les boutons suivants ainsi que d'autres champs,

$js = <<< JS
    $('#save-now').on('click', function(e) {
        e.preventDefault();
        let form = $("#form");

        $.ajax({
            url:'/site/attribute-dirty',
            method:'post',
            data:form.serialize(),
        }).done(function(response){
            if(response.changed){
                $('#modal').modal('show');
                setTimeout(function(){form.yiiActiveForm('submitForm');}
                , 5000);
            }else{
                form.yiiActiveForm('submitForm');
            }

        }).fail(function(response){
            console.log(response.responseText);
        });
    });
JS;

$this->registerJs($js, \yii\web\View::POS_READY);

cliquez Événement pour le bouton p>

Ajoutez ce qui suit en haut de votre vue là où vous avez le formulaire.

Remarque: changez l ' url de l'appel ajax ' / site / attribute-dirty ' en conséquence où vous copiez le actionAttributeDirty () je suppose que vous le copiez dans le contrôleur de site.

$form = \yii\widgets\ActiveForm::begin(['id' => 'form']);
echo \yii\helpers\Html::hiddenInput('id', $model->id);
echo \yii\helper\Html::button('save', ['id' => 'save-now']);
\yii\widgets\ActiveForm::end();

4 commentaires

fantastique, toujours disponible pour vous aider, en gros vous avez écrit tout le code pour moi :) Merci! Je vois juste que soumettre avec la touche "Entrée" enregistre sans exécuter javascript car l'événement $ ('# save-now'). On ('click', function (e) {} ..

Je ne pense pas qu'il devrait même soumettre le formulaire en appuyant sur le bouton Entrée @Moutinho avez-vous changé le type de bouton en bouton normal?

voir la section EDIT @Moutinho

oui je change le bouton en 'save-now']); ?> mais lorsque j'appuie sur Entrée, il est soumis ...

0
votes

si vous voulez afficher le modal de confirmation, j'utilise comme ci-dessous. vous pouvez changer selon vos besoins ou masquer la soumission après x secondes

  <button type="button" onclick="submit();">Confirm</button>

dans la soumission modale

  $(function() {
    submitting = false;
  });

  $("form").on("beforeSubmit", function (event, messages, errorAttributes) {
    if (typeof(errorAttributes) === "undefined" || errorAttributes.length === 0) {
      $('#modal-confirm').modal('show');
      return submitting;
    }
  });

  var submit = function() {
    submitting = true;
    $("form").yiiActiveForm('submitForm');
  }

0 commentaires