2
votes

Comment s'inscrire à l'événement onClick d'un élément de bouton Fermer

J'utilise une action d'interface utilisateur dans serviceNow pour appeler une fenêtre contextuelle GlildeModalForm. Cette fenêtre a un X (bouton de fermeture) que je dois attraper lorsque l'utilisateur appuie sur ce bouton. Je n'ai pas de commentaires sur ce clic sur ce bouton et je dois l'attraper

J'ai vu un exemple sur la communauté ServiceNow où vous pouvez vous inscrire à une fonction de rappel, mais il n'est utilisé qu'après avoir soumis le formulaire.

<button data-dismiss="GlideModal" class="btn btn-icon close icon-cross" 
id="x_58872_needit_cascadesequence_closemodal">                 <span 
class="sr-only">Close</span>                
</button>

En utilisant l'inspecteur d'éléments de mon navigateur, je peux voir que le bouton Fermer est défini comme ci-dessous:

var modalForm = new GlideModalForm('Create User Member' , tableName );
modalForm.setOnloadCallback(formOnLoadCallback);
modalForm.setCompletionCallback(formAfterSubmitCallback);
modalForm.render();

function formOnLoadCallback() {
//Access GlideModal g_form to set field for the new record
var d_form = window.frames["dialog_frame"].g_form;
d_form.setValue('field', g_form.getValue('field'));
d_form.setValue('field', g_form.getValue('field'));
}

function formAfterSubmitCallback(action_verb, sys_id, table, displayValue) {
//Get the newly created record sys_id and then set e.g a value to the starting record
g_form.setValue('field', sys_id);
//Save the record
g_form.save();
}

J'aurais besoin de trouver cela bouton du script ci-dessus, puis inscrivez-vous à son onClick, puis dans onClick même je voudrais simplement envoyer une alerte de message de perte de données potentielle

Merci pour l'aide à ce sujet

javascript servicenow

0 commentaires

3 Réponses :

0
votes

Vous pouvez créer une fonction onclick comme suit:

html:

function myFunction() {
  alert("I am an alert box!");
}

JavaScript:

<button data-dismiss="GlideModal" class="btn btn-icon close icon-cross" 
id="x_58872_needit_cascadesequence_closemodal" onclick="myFunction()">                 
  <span class="sr-only">Close</span>                
</button>

1 commentaires

Je ne peux pas faire cela car je n'ai aucun contrôle sur le code HTML qui génère ce bouton

1
votes

Puisque les événements de clic remontent dans le DOM, vous pouvez simplement enregistrer un écouteur de clic sur le document . L'objet événement est automatiquement passé à la fonction de gestionnaire que vous passez à addEventListener () . Dans le gestionnaire, vous pouvez vérifier si l'événement de clic a été déclenché sur un élément qui a data-dismiss="GlideModal":

document.addEventListener('click', function(e) {
  if (e.target.matches('[data-dismiss="GlideModal"] span') {
    alert ('Close modal clicked');
  }
})

C'est ce qu'on appelle un événement délégué écouteur car l'écouteur n'est pas enregistré sur l'élément sur lequel vous prévoyez que l'événement se produira, mais plus haut dans l'arborescence DOM. Cela a également l'avantage de fonctionner pour les éléments créés dynamiquement (comme supposément votre HTML modal).

Modifier: Je viens de vérifier le code HTML que vous avez affiché. Vous devrez peut-être vérifier si le clic provient de la span à l'intérieur du bouton, plutôt que du bouton lui-même:

document.addEventListener('click', function(e) {
  if (e.target.matches('[data-dismiss="GlideModal"]') {
    alert ('Close modal clicked');
  }
})

6 commentaires

Merci pour votre réponse. Comme je n'ai pas de contrôle du composant créé sur le DialogForm lors de sa création, ma méthode Servicenow, dans quelle partie de mon script dois-je placer le code que vous mentionnez? Dans mon script d'action d'interface utilisateur ServiceNow?

Mettez-le simplement dans n'importe quel script exécuté pendant le chargement de la page.

si j'ai le bouton id = "submit_button" et que l'événement onClick appelle déjà une méthode sous la forme buiild que j'obtiens, y a-t-il un moyen d'ajouter le gestionnaire d'événements à l'id du bouton? Comment puis-je modifier votre échantillon pour obtenir un identifiant de bouton correspondant?

Ne faites pas cela, cela fonctionne de manière beaucoup plus fiable lorsqu'il est implémenté en tant qu'écouteur délégué.

donc cela signifie que je dois placer cet écouteur dans mon script d'action serviceNow Ui correct?

Je ne sais rien de serviceNow et de tout ce que vous avez. Comme je l'ai dit, placez-le simplement à n'importe quel endroit qui assure l'exécution pendant le chargement de la page. Cela ne concerne en aucun cas serviceNow, mais uniquement le DOM.

1
votes

SerivceNow GlideModalForm étend GlideModal qui prend en charge l'enregistrement des événements via la méthode on . Il y a 2 événements pris en charge qui peuvent fonctionner pour ce que vous voulez:

closeconfirm : appelé par la méthode destroy , peut être utilisé pour annuler la destruction
beforeclose : appelé une fois que la fenêtre a déjà été masquée

Je pense que vous pouvez simplement utiliser l'événement closeconfirm pour savoir quand la fermeture se produit, vous n'avez pas nécessairement besoin de vous soucier de l'annulation de l'action, et elle se déclenchera dès que l'utilisateur cliquera sur le bouton, mais avant que la fenêtre ne soit supprimée. Notamment, cependant, cela se déclenchera probablement également lorsque l'utilisateur cliquera sur le bouton "Fermer" (pas sur le X) qui s'affiche éventuellement via la préférence modale: myGlideModal.setPreference ('sysparm_button_close', ' Fermer ')

Voici un exemple approximatif:

var myGlideModal = new GlideModal(...);
dd.on("beforeclose", function (){ /* do stuff, maybe return false to cancel */ });

1 commentaires

merci d'essayer