Bonjour, 

Je travaille actuellement sur un projet où l'utilisateur doit signer afin de valider sa présence.

Le souci c'est que je suis obliger de refresh le navigateur afin de pouvoir enfin signer.

Ne sachant pas d'où ce problème peut venir, quelqu'un aurait une idée ? 

Bonjour,

Il va falloir plus d'info. Là tu donnes rien comme information ca va être difficile de t'aider.

L'utilisateur cliquer sur un bouton "signature" qui ouvre une boite modal. 

De là on affiche un canvas où l'utilisateur va pouvoir signer.

Partant de là, je suis confronté à un souci c'est qu'il m'est impossible de signer si je ne fais pas F12.

En me renseignant, il me semble qu'il faudrait initialiser le canvas : signature = new Signature(canvas); au moment de l'ouverture de la boite modal mais cela ne fonctionne pas. 

Donc si je résume j'ai actuellement 4 fichiers : 

- La page html ou l'on affiche le tout

- Un Js avec tout ce qui concerne les boites modal : 

$('.simplemodal-open').click(function(){ 
	
		var nom = document.getElementById("nom").value; 
		
		if(nom  !== ''){
			
			$("#sample").modal({ 
				onOpen: function (dialog) { 
				dialog.overlay.fadeIn('slow', function () { 
					dialog.data.hide(); 
					dialog.container.fadeIn('slow', function () { 
						dialog.data.slideDown('slow'); 
					});
				});
				},
				onClose: function (dialog) { 
					dialog.data.fadeOut('slow', function () { 
						dialog.container.hide('slow', function () { 
							dialog.overlay.slideUp('slow', function () {
								$.modal.close(); 
							});
						});
					});
			}});
			
		}else {
			alert('Impossible');
		}
		
	});

- 2 Js pour ce qui concerne la signature

var wrapper = document.getElementById("signature"),
    clearButton = wrapper.querySelector("[data-action=clear]"),
    saveButton = wrapper.querySelector("[data-action=save]"),
	returnButton = wrapper.querySelector("[data-action=return]"),
	statButton = wrapper.querySelector("[data-action=stat]"),
    canvas = wrapper.querySelector("canvas"),
    signaturePad;

function resizeCanvas() {

    var ratio =  Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
	canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
}

window.onresize = resizeCanvas;
resizeCanvas();

signature = new Signature(canvas);

clearButton.addEventListener("click", function (event) {
    signature.clear();
});

saveButton.addEventListener("click", function (event) {
    if (signature.isEmpty()) {
        alert("Veuillez signer avant d'enregistrer");
    } else {
		var nom = document.getElementById("nom").value; 
		var signatureF = signature.toDataURL();
		
		//window.open(signature.toDataURL());
		$.ajax({
			type:"POST",
            url: /Ajax/validSignature/",
			data : {"Nom":nom,"Signature":signatureF},
			dataType: "json",
            success: function(data) {
				alert("sa fonctionne");	   
            }
        }); 
		
    }
	signature.clear();
	 
});

L'autre fichier étant le plugin de la signature

Est-ce que c'est plus clair?