Affichage avec jQuery

Version imprimable

Voir 40 message(s) de cette discussion en une page

Bonjour

Voici mon code :

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
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
<!DOCTYPE HTML>
<html lang="fr-FR">
<head>
<meta charset="Cp1252">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.0.custom.min.js"></script>
<link rel="stylesheet" href="css/humanity/jquery-ui-1.10.0.custom.css" />
 
<script type="text/javascript">
$(document.ready)(function(){
	function add_user(titre,ville){
		$.ajax({
			type:"POST";
			url:"add_user.php";
			data:"titre="+titre+"&ville="+ville,
			error:function(){
				alert("Erreur");
			},
			success:function(){
				alert("Enregistrement effectué");
			}
		});
	}
 
	$("#form").dialog({
		autoOpen:false,
		height:500,
		width:400,
		modal:true
		buttons:{
			Valider:function(){
				add_user($('#titre').val(),$('#ville').val());
				$(this).dialog("close");
			}
		}
	});
});
</script>
</head>
<body>
<div id="form">
<form action="form_ins.php" method="post" action="dialog html">
	<label for="titre">Titre :</label>
    			<input type="text" id="titre" name="titre"/>
 
    			<label for="ville">Ville :</label>
    			<input type="text" id="ville" name="ville"/>
 
				<input type="submit" name="enregistrer" value="Enregistrer" />
 
</form>
</div>
 
</body>
</html>

20/02/2013, 07h45
Bovino

Code:

$(document.ready)

:roll:

C'est nouveau ça...
:fleche: Qu'est-ce que la notion de Ready ?...
20/02/2013, 13h47
Vanessa48

Non j'ai trouvé celadans un tutoriel Javascript.
C'est pour attendre que la form soit chargée pour agir dessus (avant d'éxécuter le javascript)
C'est pas bon ?
20/02/2013, 13h58
Bovino

Ca m'étonnerais fortement qu'un quelconque tuto indique cette syntaxe.
Toujours est-il que le lien que j'ai donné répond clairement à la question.

Bonjour,

Non ce n'est pas bon. Ce qui est bon c'est :
Code:

1 2 3 4 5 6 $(document).ready(function() { // Ici tu executes la/les fonction nécessaire. // Par exemple check_formulaire(); });

Effectivement, j'ai fait une erreur en copiant le code
Apres avoir modififiée comme ceci :

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
29
<script type="text/javascript">
$(document).ready(function(){
	function add_user(titre,ville){
		$.ajax({
			type:"POST";
			url:"add_user.php";
			data:"titre="+titre+"&ville="+ville,
			error:function(){
				alert("Erreur");
			},
			success:function(){
				alert("Enregistrement effectué");
			}
		});
	}
 
	$("#form").dialog({
		autoOpen:false,
		height:500,
		width:400,
		modal:true
		buttons:{
			Valider:function(){
				add_user($('#titre').val(),$('#ville').val());
				$(this).dialog("close");
			}
		}
	});
});

</script>
Je lance l'appli et j'ai un affichage classique html
et pourtant les fichiers sont bien chargés
Je n'y comprends plus rien, de quoi cela provient-il

Lorsque ton document est chargé

Code:

$(document).ready

Tu cree un fonction add_user, mais cette fonction peut etre cree avant, ce qu'il faut, c'est que tu la lance lorsque ton document est chargé.

Par exemple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 // Je cree la fonction add_user function add_user = function(titre, ville) { // Ici je met les actions qu'effectue ma fonction } // A present je lance ma fonction add_user("moi", "la ou je suis"); //Mais si je veux lancer ma fonction uniquement lorsque la page est charge, je ne dois pas faire comme ci dessus, mais faire : $(document).ready(function() { add_user("moi", "la ou je suis"); }

20/02/2013, 16h00
Vanessa48
Si je remplace mon code par:
Code:

1 2 3 4 $(document).ready(function() { add_user("moi", "la ou je suis"); }
quand je lance l'appli cela devrait m'afficher : moi, la ou je suis

Si oui, cela ne me l'affiche pas
20/02/2013, 16h12
Vanessa48
Si je revois le tuto, avec ce code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <script type="text/javascript"> $(document).ready(function(){ $("#form").dialog({ autoOpen:false, height:360, width:300, modal:true }); }); </script>
Quand il teste l'appli la boite de dialogue s'affiche
Et moi avec le meme code elle ne s'affiche pas
je vois vraiment pas pourquoi
20/02/2013, 16h25
Bovino

Si j'en crois le code de ton premier message, il n'y a aucun élément dans ta page avec l'id "form"... :roll:

Il serait peut-être bon de commencer par les bases avant de vouloir s'attaquer à UI...
20/02/2013, 16h33
SpaceFrog

Code:

autoOpen:false,

soit ...
mais tu l'ouvres où ?
20/02/2013, 16h44
Vanessa48

Excuse moi cette ligne est supprimée, mais qu'elle soit à true ne change rien
20/02/2013, 16h49
Bovino

Citation:

Envoyé par Bovino

il n'y a aucun élément dans ta page avec l'id "form"... :roll:

Re-:roll:

Si :

Code:

1
2
3
4
5
6
7
8
9
<div id="form">
<form action="form_ins.php" method="post" action="dialog html">
<label for="titre">Titre :</label>
<input type="text" id="titre" name="titre"/>
<label for="ville">Ville :</label>
<input type="text" id="ville" name="ville"/>
 <input type="submit" name="enregistrer" value="Enregistrer" />
</form>
</div>

20/02/2013, 17h29
Bovino

Arf... :oops:

Bon... ben j'ai plus qu'à aller me cacher de honte alors... :aie:
20/02/2013, 17h33
Vanessa48

Non car faut dire que j'alimente le débat
Mais je ne sais plus quoi faire car sur le tuto ca fonctionne et j'ai repris txto le code
c'est une vrai galère
21/02/2013, 18h35
tepaze

Bonsoir,

Je pense qu'avant de reprendre un tuto sans vraiment le comprendre, tu aurais tout intérêt à lire les cours, du moins les premiers, sur javascript qui sont proposés sur ce site par exemple. Ainsi tu comprendrais l'utilisation des fonctions, ce qui te faciliterait grandement la vie...
Les bases de JS ne sont pas vraiment compliquées, et elle sont quasi commune à tous les langage...
25/02/2013, 08h23
Vanessa48

Bonjour

Je les ai lues, néanmoins je ne trouve pas le problème

Voir 40 message(s) de cette discussion en une page