Mon premier exemple en Jquery

Version imprimable

hello !

Je débute avec Jquery et comme premier exemple j'ai voulu jouer avec le selector <select>, donc j'ai crée mon fichier html :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <html> <head> <meta charset="utf-8"> <title>test</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.js"></script> <script type="text/javascript" src="test.js"></script> </head> <body> <select name="priority" id="priority" onchange="priority()"> <option value="4">Low</option> <option value="3" selected="selected">Normal</option> <option value="2">High</option> <option value="1">Emergency</option> </select> </body> </html>
pour faire fonctionner mon <select>, j'ai crée bien sur mon test.js :
Code:

1 2 3 4 5 6 7 8 $(function() { $('#priority').change(function(){ if($(this).val()=='1' && !confirm("Are you sure this is emergency?")){ $(this).val('3'); } }); });
Donc mon but est de faire apparaître le message "Are you sure this is emergency?" quand je selectionne "Emergency" dans mon html.

Le problème c'est que quand je selectionne, rien ne se passe :?

Une idée ??

merci :ccool:

Bonsoir

Code:

1
2
3
4
5
6
7
8
// Il n'y a pas de fonction priority !
 
<select name="priority" id="priority">
    <option value="4">Low</option>
    <option value="3" selected="selected">Normal</option>
    <option value="2">High</option>
    <option value="1">Emergency</option>
</select>

27/09/2012, 22h21
elpatriota

salut Daniel, merci pour ta réponse,

Enfaîte j'ai mis la fonction dans test.js ensuite je l'ai inclus dans mon html, j'ai essayé aussi de mettre mon script dans mon html via la balise <script> mais ça marche toujours pas :cry:

Ha !

Oui, je vois ! Il faut utiliser la bibliothèque jQuery pour faire du jQuery !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
    <title>test</title>
	<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
   	<script type="text/javascript" src="test.js"></script>
</head>
<body>
	<select name="priority" id="priority">
		<option value="4">Low</option>
		<option value="3" selected="selected">Normal</option>
		<option value="2">High</option>
		<option value="1">Emergency</option>
	</select>
</body>
</html>

jQuery UI est une bibliothèque qui utilise jQuery, exemple :

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
57
58
59
60
61
62
63
64
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/overcast/jquery-ui.css">
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css">
	<style>
		/* TEST */
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<h2><a href="http://www.developpez.net/forums/newreply.php?do=newreply&noquote=1&p=6883375">Lien</a></h2>
	<section class="conteneur">
 
<p>
	<label for="amount">Donation amount ($50 increments):</label>
	<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<div id="slider"></div>
 
	</section>
	<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
		<time datetime="2012-09-11T21:52:12.224+02:00" pubdate>2012-09-11T21:52:12.224+02:00</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
		<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier d’exercices</a>
		<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
		<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
	</footer>
	<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/i18n/jquery-ui-i18n.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
	<script src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
	<script>	
"use strict";
 
$(function(){
 
$( "#slider" ).slider({
	value:100,
	min: 0,
	max: 500,
	slide: function( event, ui ) {
		$( "#amount" ).val( "$" + ui.value );
	}
});
 
$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
 
});
 
$(window).load(function(){
 
});
	</script>
</body>  
</html>

jQuery API : http://api.jquery.com/

jQuery UI API : http://jqueryui.com/demos/

:faq: http://javascript.developpez.com/faq/jquery/

work like a charm !! merci daniel !!

En effet il manquait : <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script> :)

Sinon une dernière question :

J'aimerai ajouter a la fonction dans test.js un submit().

Exemple dans le formulaire html :

- si la valeur n'est pas null, exemple si je selectionne Low qui a une valeur 4.

- valide la sélection et envoie directement en utilisant un script php ... c'est comme si je mettais un onchange="submit(this.form)" dans la balise <select>, sauf que je veux le mettre dans la fonction présente dans mon test.js, j'ai essayé de mettre :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 $(function() { $('#priority').change(function(){ if($(this).val()=='1' && !confirm("Are you sure this is emergency?")){ } else { // si val est != '' on envoie la valeur de la sélection submit() } }); });
encore merci :ccool:

Bonjour

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
$('#priority').change(function(){
	var value = $( this ).val();
 
	if ( value == '1' && !confirm("Are you sure this is emergency ?" ) ){
		$( this ).val('3');
	}
 
	if ( value == '4' ){
 
		// le select n'est pas dans un form
		// on peut créer une transaction AJAX vers un fichier PHP sur le serveur
		// ici l'URL est "monphp.php"
		// je transmets value dans un paramètre qui porte le même nom
		// après traitement le fichier retourne (echo) ses données dans data
 
		// voir la FAQ : Comment dois-je formuler une requête AJAX ?
		// http://javascript.developpez.com/faq/jquery/?page=Ajax#AjaxRequest
 
		$.get( "monphp.php", { "value" : value }, function( data, textStatus, jqXHR ){
 
			// succès de la transaction, on doit traiter le contenu de data
 
		});
 
	}
});

28/09/2012, 19h17
elpatriota
Merci encore Daniel :ccool:

Enfaîte j'ai pu faire ma validation sans passer par un script php mais seulement avec submit(), donc j'ai ajouté un if a mon js pour lui dire : si la value n'est pas null valide la sélection ...
Si ça peut aider :
Code:

1 2 3 4 5 6 7 8 if($(this).val() !=' 1 ' ){ // $('#formm').submit(); // formm est l'id du formulaire ou se trouve mon select }
Merci encore et vive jquery :)