Exécuter deux fonctions pour un bouton

Version imprimable

Bonjour,

je vous explique mon problème , j'ai une form pour upload un fichier et une textarea avec du texte .

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
function nouvellePublication(){
	//fintest
	var publication = $("#publication").val();
	$('#picture_post').submit();
	if(publication != ""){
		var dataArray = $("#img_input_title").val().split('\\');
		var data ={ name : dataArray[dataArray.length-1]};
		alert( dataArray[dataArray.length-1]);
		data = { post : publication,hasPicture : 1 };
		$.ajax({
			url : "nouvelle_publication.php",
			data : data,
			complete : function(xhr, result){
				if(result != "success") return; 
				var response = xhr.responseText;
				$("#publication").val("");
			}
		});
	}
}
</script>

Voici mon code JS , maintenant le code HTML

Code:

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
<table id="post_border" >
	<tr>
		<td>
			<textarea id="publication" cols="65" rows="4" maxlength="255" placeholder="Exprimez-vous"></textarea>
		</td>
	</tr> 
	<tr>
		<td id="submit_post">
			<input type="button" value="Publier" onclick="javascript:nouvellePublication()"/>
		</td>
	</tr>
</table>
</div>
<div id="tab2">
	<table id="post_border">
		<tr>
			<td>
				<form enctype="multipart/form-data" method="post" action="upload_picture.php" id="picture_post" >
					<input type="hidden" name="MAX_FILE_SIZE" value="2000000" />
		                        <input class="picture_description" name="picture_title_input" type="text" size="65" value="Titre" onfocus="javascript:if(this.value=='Titre')this.value='';" onblur="javascript:if(this.value=='')this.value='Titre';" />
		                         <textarea class="picture_description" name="picture_description" cols="65" rows="2" maxlength="255" placeholder="Description"></textarea>
					<input id="img_input_title" name="uploaded_picture" type="file" size="40"/> (2Mo max.)
					<input type="button" value="Publier"/>
				</form>
			</td>
		</tr>
	</table>
</div>

Le seul problème que j'ai , et quand j'ai rajouter le submit dans ma fonction nouvellePublication , quand je clique sur le premier bouton publier , le submit s'execute mais le reste ne s'affiche pas,il ne faut pas tenir compte du deuxieme bouton publier , j'aimerai que les deux traitements se fasse sur le premier.

Merci de votre aide

Cordialement,
Ketaaa

27/04/2013, 11h29
danielhagnoul

Il y a 2 fois <table id="post_border">, un ID doit être unique !
27/04/2013, 14h12
ketaaa
apres correction de l'id qui était une erreur de ma part , les deux fonctions ne s’exécute toujours pas , quand je met le
Code:

1 2 $("#picture_post").submit();
dans ma fonction "nouvellePublication()" , le submit() est fait mais le reste ne s’exécute pas.

Merci d'avance
27/04/2013, 18h06
mainContainer

Hello,

tu envoies bien ton formulaire avec submit(), mais pas en AJAX puisque tu ne bloque pas le comportement par défaut de ce dernier (de plus submit() n'a aucun callback).

explore donc malsup's form plugin (méthodes ajaxForm et ajaxSubmit)
27/04/2013, 19h25
NoSmoking

Bonjour,
si tu submit(), tu recharges la page.
27/04/2013, 19h36
ketaaa

je vais essayer de me renseigner alors , n’hésitez pas si vous avez d'autre conseil a me donner merci beaucoup
27/04/2013, 19h48
ketaaa

Citation:

Envoyé par NoSmoking

Bonjour,
si tu submit(), tu recharges la page.

Merci je comprends alors pourquoi ca ne marche pas , donc si j'ai bien compris je dois executer ma fonction ajax dans un callback?

un callback te permet juste d'obtenir une réponse de la méthode employée.

Pour reprendre la doc de Malsup:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 // prepare Options Object var options = { target: '#divToUpdate', url: 'comment.php', success: function() { alert('Thanks for your comment!'); }, error: function() { alert('Error while sending the form!'); } }; // pass options to ajaxForm $('#myForm').ajaxForm(options);
Lorsque tu invoque la méthode ajaxForm(), tu peux gérer le statut lors de son execution avec les callbacks success et error

29/04/2013, 18h44
ketaaa

Merci beaucoup , j'y suis arrivé , je passe donc ce post en résolu