Discussion :

[Toufik83]

Salut,

Je rencontre actuellement un problème que je n'arrives pas à résoudre.

Le code de mon fichier js 1:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
var openVals = JSON.stringify( editor.get() );
....
editor
	.on( 'preClose', function ( e,event_ ) {
		console.log('preClose from Editor, data :',openVals);
		// On close, on vérifies si les valeurs ont changées
		if ( openVals !== JSON.stringify( editor.get() ) ) {
			return confirm( 'Vous avez des changements non enregistrés. êtes vous sûr de vouloir quitter ?');
		}
        } )

Le code du déclencheur de l'événement "preClose" (qui est dans un autre fichier js, c'est un plugin que je suis entrain de créer...) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
Editor.mask.on('click',function(e){
	e.preventDefault();
        //déclencher l'événement "preClose"
        formBubble.trigger('preClose',e);
        /* Je cherche à récupérer la valeur de confirm() ici, si true ou false */
	if(/*la valeur de confirm==true*/){//on exécute ces instructions
           Editor.formBubble
	   .html('')
	   .css({"left":0,"right":0,"width":'auto',"height":'auto'}).hide(function(){
	        Editor.mask.hide();
	        Editor.unsetData();
	    });
       }
       else{//on exécute d'autres instructions}
});

Actuellement, je reçois bien l'alerte de confirm(), mais quand je clic sur "Cancel", le script continue à exécuter les instructions, alors que je veux qu'il le fasse seulement au moment d'un clic sur "Ok".

[NoSmoking]

Bonjour,
tes deux actions/fonctions n'évoluent pas dans le même contexte et c'est simplement parce que confirm bloque le script que tu obtiens un résultat.

Pourquoi « trigger » un événement et ne pas simplement faire une fonction confirmClear par exemple qui te retourne le bouton choisi ?

[Toufik83]

Salut,

Merci NoSmoking d'avoir pris le temps de me répondre.

Pourquoi « trigger » un événement et ne pas simplement faire une fonction confirmClear par exemple qui te retourne le bouton choisi ?

Parce que simplement je voudrais faire comme leur exemple de DataTable Editor.

Comme tu vois dans l'exemple, si on sélectionne une ligne dans le tableau puis on clique sur le bouton Edit et on change la valeur d'un champ puis après on essaie de fermer la fenêtre modal, le confirm() s'affiche pour nous informer qu'ils y a eu des changements non enregistrés.

La ligne 41 du code en dessous de l'exemple montre bien qu'ils utilisent la réponse renvoyée par confirm() même si que les deux fonctions ne sont pas dans le même contexte.

[NoSmoking]

La ligne 41 du code en dessous de l'exemple montre bien qu'ils utilisent la réponse renvoyée par confirm() même si que les deux fonctions ne sont pas dans le même contexte.

Pas facile de s'y retrouvé, je n'ai pas trouvé de sources exploitables mais ... on peut supposer que ce n’est pas exactement ce qui se passe.

Dans le on -> preClose le retour false signifie que le « handler en fille d'attente suivant » ne doit pas être exécuté.
Si le retour est true alors le « handler en fille d'attente suivant » est exécuté et donc on passe dans le on -> close.

Tu peux observer cela en mettant des console.log, par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
editor
  .on('open', function() {
    // Store the values of the fields on open
    openVals = JSON.stringify(editor.get());
 
    editor.on('preClose', function() {
      console.log("editor preClose:", arguments)
      // On close, check if the values have changed and ask for closing confirmation if they have
      if (openVals !== JSON.stringify(editor.get())) {
        return confirm('You have unsaved changes. Are you sure you want to exit?');
      }
    })
  })
  .on('postCreate postEdit close', function() {
    console.log("editor close:", arguments)
    editor.off('preClose');
  });

Tu peux retrouver le code de cette gestion dans le code jQuery, c'est la méthode dispatch qui gère cela.

Voilà le code concerné, issu de jQuery JavaScript Library v3.3.1

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
	dispatch: function( nativeEvent ) {
 
		// Make a writable jQuery.Event from the native event object
		var event = jQuery.event.fix( nativeEvent );
 
		var i, j, ret, matched, handleObj, handlerQueue,
			args = new Array( arguments.length ),
			handlers = ( dataPriv.get( this, "events" ) || {} )[ event.type ] || [],
			special = jQuery.event.special[ event.type ] || {};
 
		// Use the fix-ed jQuery.Event rather than the (read-only) native event
		args[ 0 ] = event;
 
		for ( i = 1; i < arguments.length; i++ ) {
			args[ i ] = arguments[ i ];
		}
 
		event.delegateTarget = this;
 
		// Call the preDispatch hook for the mapped type, and let it bail if desired
		if ( special.preDispatch && special.preDispatch.call( this, event ) === false ) {
			return;
		}
 
		// Determine handlers
		handlerQueue = jQuery.event.handlers.call( this, event, handlers );
 
		// Run delegates first; they may want to stop propagation beneath us
		i = 0;
		while ( ( matched = handlerQueue[ i++ ] ) && !event.isPropagationStopped() ) {
			event.currentTarget = matched.elem;
 
			j = 0;
			while ( ( handleObj = matched.handlers[ j++ ] ) &&
				!event.isImmediatePropagationStopped() ) {
 
				// Triggered event must either 1) have no namespace, or 2) have namespace(s)
				// a subset or equal to those in the bound event (both can have no namespace).
				if ( !event.rnamespace || event.rnamespace.test( handleObj.namespace ) ) {
 
					event.handleObj = handleObj;
					event.data = handleObj.data;
 
					ret = ( ( jQuery.event.special[ handleObj.origType ] || {} ).handle ||
						handleObj.handler ).apply( matched.elem, args );
 
					if ( ret !== undefined ) {
						if ( ( event.result = ret ) === false ) {
							event.preventDefault();
							event.stopPropagation();
						}
					}
				}
			}
		}
 
		// Call the postDispatch hook for the mapped type
		if ( special.postDispatch ) {
			special.postDispatch.call( this, event );
		}
 
		return event.result;
	},

Dans ton cas tu devrais peut être mettre ton appel à ta fonction dans le on -> preClose

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
editor.on('preClose', function() {
  console.log("editor preClose:", arguments)
  // On close, check if the values have changed and ask for closing confirmation if they have
  if (openVals !== JSON.stringify(editor.get())) {
    if (confirm('You have unsaved changes. Are you sure you want to exit?')) {
      // appel de ta fonction si quitte
      return true;
    }
    else {
      // appel de ta fonction si on ne quitte pas
      return false;
    }
  }
})

[EDIT] ajout return true/false dans fonction pour propager l'événement

[Toufik83]

Enfin ,j'ai réussi à créer mon propre plugin de DataTable Editor qui fonctionne comme je veux.

Dès que j'ai vu que leur éditeur n'était pas gratuit (juste une période d'essaie de 15 jours), j'ai pris la tâche comme un défi, et apparemment c'est fait.