J'essaie d'obtenir une boîte de confirmation pour apparaître uniquement si un utilisateur a apporté une modification du formulaire à l'intérieur de la fenêtre magnifique <form class="validate" action="/whatever.asp" method="post">
<label>Notes</label>
<textarea class="form-control input-sm required" name="Notes" id="Notes" rows="3"></textarea>
</form>
3 Réponses :
J'ai fait un codépen pour ce que je crois que vous essayez d'accomplir.
http://codepen.io/gbhojraj/pen/vavprm?editors=1010 p>
Le code correspondant est comme suit: P>
$('#open-popup').magnificPopup({
type:'iframe',
callbacks: {
open: function() {
contents = $('#Notes').val();
$.magnificPopup.instance.close = function () {
if(contents != $('#Notes').val()){
if (!confirm("Are you sure?")) {
return;
}
}
$.magnificPopup.proto.close.call(this);
};
}
J'ai besoin que cela soit générique - ne spécifie pas un champ. Le code doit fonctionner pour n'importe quel domaine. Voir mon exemple de liaison ci-dessus. N'oubliez pas que le formulaire est également dans la popup iframe, est le rappel hors de portée alors ??
Essayez d'exécuter console.log (this) dans le rappel de votre code. Je peux voir mon élément de formulaire dans ceci.content . Si vous le pouvez, vous pouvez ensuite exécuter votre liaison générique de l'intérieur de cet élément.
Cela a les mêmes problèmes que ceux ci-dessous - l'IFrame le gâche. Avoir un exemple de travail complet?
Selon le code ci-dessus, j'ai fait un exemple adapté à votre cas. Cela signifie qu'il fonctionnera pour toute entrée de texte aswell que textarea.
$('#open-popup').magnificPopup({
type:'iframe',
iframe: {
markup: '<form class="validate" action="/whatever.asp" method="post"><label>Notes</label><textarea class="form-control input-sm required" name="Notes" id="Notes" rows="3"></textarea></form>'
},
callbacks: {
change: function() {
var $form = $(this.content[0]),
values = {},
changed = [];
$form.find('input[type=\'text\'], textarea').each(function() {
values[this] = this.value;
});
$form.on('change', function(e) {
var input = e.target,
index = changed.indexOf(input);
if (input in values) {
if (input.value !== values[input] && index === -1) {
changed.push(e.target);
} else if (e.target.value === values[e.target] && index !== -1) {
changed.splice(index, 1);
}
}
});
$.magnificPopup.instance.close = function () {
if (changed.length && !confirm('Are you sure?')) {
return;
}
$.magnificPopup.proto.close.call(this);
};
}
}
});
Utilisez une entrée cachée comme celle-ci puis dans vos javacrips Utilisez ceci: p> puis appelez: p> $('#open-popup').magnificPopup({
type:'iframe',
callbacks: {
open: function() {
$.magnificPopup.instance.close = function () {
if($('#hf1').val() != $('#hf2').val()){
if (!confirm("Are you sure?")) {
return;
}
}
$.magnificPopup.proto.close.call(this);
}
, iframe: {
markup: '<form class="validate" action="/whatever.asp" method="post">'+
'<label>Notes</label><textarea class="form-control'+
'input-sm required" name="Notes" id="Notes" rows="3">'+
'</textarea></form>'
}
});
Cela ne fonctionnera pas car le contenu de la popup est dans un iframe - il perd la portée du parent. Le problème ici semble être que vous devez vérifier les changements de contenu à l'intérieur d'une iframe qui ne parle pas de la page mère. Sauf si vous avez cela en train de travailler à travers un exemple?
Pourriez-vous poster un exemple sur le jsfiddle? Ou au moins afficher le balisage HTML de votre formulaire.
posté encore plus de détails.