11548 sujets

JavaScript, DOM et API Web HTML5

[Jquery UI Dialog][Résolu] pas de transfert de données

Bonjour/ bonsoir,

Dans ce plugin, je fais appel à un fichier:
$('#clear_btn').click(function(){
        var monUrl = 'confirm_delete.php';
        $('#confirmDelete').load(monUrl, '', function(){
            $(this).dialog({
                width:400,
                modal:true,
                buttons: {
                    'Ok': function(){
                        $('#form_confirmDelete').bind('submit', function(){
                            ...
                            $.post('ctrl_fiches.php', $(this).serialize(), function(data){
                                ...
                                alert(data);
                            });
                            return false;
                        });
                    },
                    'Non !': function(){
                        $(this).dialog('close');
                    }
                ...
    });

'confirm_delete.php' est un fichier à part entière, avec un formulaire minimaliste:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
...
<body class="popup">
...
<form id="form_confirmDelete" name="form_confirmDelete">
          <input name="whatBtn" type="hidden" id="whatBtn" value="delete" class="btnAlert"/>
<!--<input type="submit" name="valid_btn" id="valid_btn" value="Ok" />-->
</form>
...

Quand je clique sur le bouton 'Ok' de la fenêtre modale, rien ne se passe. Le formulaire n'est pas envoyé. Mais si j'active le bouton de type 'submit', les données passent et j'ai bien un retour (après avoir cliqué en premier temps sur le bouton 'ok')...
Comment faire ?
Merci,
Comment faire pour envoyer ce formulaire par ajax, soit en utilisant le bouton 'Ok' de UI Dialog, soit en passant par un bouton intégré directement dans le formulaire... Mais je ne peux pas d'un point de vue utilisateur me servir des deux pour envoyer ces données...
merci,
Salut,

Dans ton appel load(), tu n'inclus pas l'html reçu, donc déjà il faut faire ça :


$('#clear_btn').click(function(e){ 
	var monUrl = 'confirm_delete.php'; 
	$('#confirmDelete').load(monUrl, function(response, status) {
	  if (status == "success") {
	  	$('#confirmDelete').html(response);
		$(this).dialog({ 
			// options du dialog()
			}
		});
	  }
	});
	e.preventDefault();
});



Par contre, j'ai testé le bind du submit() sur la form, et ça ne fonctionne pas. Mais, vu que la form ne fait pas partie du DOM et qu'elle y est insérée après coup, alors il faudrait utiliser la fonction delegate() (ou live(), mais live() est moins souple).
J'ai testé avec live() ça ne marchait pas non plus, à tester avec delegate() donc…

Sinon, pas besoin de faire un submit d'une form. Vu que tu charges dynamiquement le contenu de #confirmDelete, il n'y a aucun intérêt à conserver une hiérarchie d'actions HTML (j'entend par là que conserver cette hiérarchie permettrait de garder le submit() possible, même si javascript est désactivé). Donc tu peux très bien faire un appel ajax directement :


$('#clear_btn').click(function(e){ 
	var monUrl = 'confirm_delete.php'; 
	$('#confirmDelete').load(monUrl, function(response, status) {
		if (status == "success") {
			$('#confirmDelete').html(response);
				$(this).dialog({ 
				width:400, 
				modal:true, 
				buttons: { 
					'Ok': function(){
						var myVariables = $('#form_confirmDelete').serialize()
						$.ajax({
							url:'ctrl_fiches.php',
							data : myVariables,
							success: function(data){
								alert(data);
							}
						});
					}, 
					'Non !': function(){ 
						$(this).dialog('close'); 
					}
				}
			});
		}
		
	});
	e.preventDefault();
});
Ca marche ! Cool !
Dans ma version, l'HTML était pourtant bien inclu (puisque je le voyais dans la DIV). Mais sans doute pas de la bonne façon...
Grand merci à toi...
Modifié par albius (12 Jul 2011 - 11:30)
Sujet clos
Aller à