Mon premier exemple en Jquery

**elpatriota** · 27/09/2012, 20h44

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**danielhagnoul** · 27/09/2012, 21h05

Bonsoir

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**elpatriota** · 27/09/2012, 21h21

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

**danielhagnoul** · 27/09/2012, 21h58

Ha !

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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/

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

**elpatriota** · 28/09/2012, 00h14

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**danielhagnoul** · 28/09/2012, 10h25

Bonjour

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
		});
 
	}
});

Mon premier exemple en Jquery

jQuery

Vue hybride

Discussions similaires

Partager

Partager