débutant, UI Tabs et formulaire

**nkordiko** · 22/03/2010, 19h11

Bonjour,
Avant toutes choses je tiens à vous dire que je suis novice en jquery/php/mysql donc mes questions vont peut être sembler être absurdes pour certains.
Je viens de lire les recommandations du forum et il n'est pas indiqué si il faut faire une discussion par difficulté que l'on rencontre ou si on peut tout grouper dans une même discussion. Voilà pourquoi je me suis permis d'aborder plusieurs sujets dans cette discussion. Si il faut j'éditerais ce poste.

Je souhaite alimenter une base de données mysql via un formulaire que voici.

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>More Than Talk Admin</title>
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/ui/jquery-ui.js"></script>
		<script type="text/javascript" src="js/ui/jquery.ui.tabs.js"></script>
 
		<script type="text/javascript" src="js/index.js"></script>
		<link media="all" type="text/css" href="css/index.css" rel="stylesheet">
		<link media="all" type="text/css" href="css/themes/base/jquery-ui.css" rel="stylesheet">
		<link media="all" type="text/css" href="css/themes/base/ui.tabs.css" rel="stylesheet">
	</head>
<body>
<div id="mainContainer">
	<div id="tabs" class="ui-tabs">
	    <ul class="ui-tabs-nav">
 
	        <li><a href="#artistes"><span>Artistes</span></a></li>
	        <li><a href="#singles"><span>Singles</span></a></li>
	        <li><a href="#albums"><span>Albums</span></a></li>
	        <li><a href="#tracks"><span>Tracks</span></a></li>
	        <li><a href="#playlist"><span>Playlist</span></a></li>
	    </ul>
 
	    <div id="artistes" class="ui-tabs-panel">
	        <form id="formArtists" action="newArtist.php" method="post">
	        	Entrez le nom de l'artiste à ajouter : 
	        	<input type="text" name="artist" value="" />
	        	<input class="submitButton" type="submit" value="Valider" />
	        </form>
	        <div id="artistResponse">
	        	<p id="intro">Vous venez d'insérer l'artiste <span class="insertedArtistName"></span>, ID n°<span class="insertedArtistId"></span>.<br /><br />
 
	        	Vous pouvez <a id="modifyArtist" href="#">modifier</a> ou <a id="deleteArtist" href="#">supprimer</a> cette entrée.
	        	</p>
 
	        	<div id="modifyArtistBloc">
 
	        		<form id="formArtistModify" action="updateArtist.php" method="post">
			        	Modifiez le nom de l'artiste : 
			        	<input class="artistModifyField" type="text" name="artist" value="" />
			        	<input class="artistIdField" type="hidden" name="artist_id" value="" />
 
			        	<input class="submitButton" type="submit" value="Modifier" />
			        	<input class="cancelButton" type="button" value="Annuler" />
			        </form>
 
			        <p class="modifyConfirmation">L'artiste <span class="modifiedArtistName"></span>, ID n°<span class="modifiedArtistId"></span> a bien été modifié.</p>
	        	</div>
 
	        	<div id="deleteArtistBloc">
	        		<form id="formArtistDelete" action="deleteArtist.php" method="post">
 
			        	Etes-vous sûr de vouloir supprimer l'artiste <span class="deletedArtistName"></span>? 
			        	<input class="artistIdField" type="hidden" name="artist_id" value="" />
			        	<input class="submitButton" type="submit" value="Supprimer" />
			        	<input class="cancelButton" type="button" value="Annuler" />
			        </form>
 
			        <p class="deleteConfirmation">L'artiste <span class="deletedArtistName"></span>, ID n°<span class="deletedArtistId"></span> a bien été supprimé.</p>
	        	</div>
 
	        </div>
	    </div>
	    <div id="singles" class="ui-tabs-panel">
			<form id="formSingles" action="newSinglesTest.php" method="post">
	        	Entrez le single à ajouter : 
	        	<input type="text" name="single" value="" />
	        	<input class="submitButton" type="submit" value="Valider" />
	        </form>
			<div id="singleResponse">
	        	<p id="introSingle">Vous venez d'insérer l'artiste <span class="insertedSingleName"></span>, ID n°<span class="insertedSingleId"></span>.<br /><br />
 
	        	Vous pouvez <a id="modifySingle" href="#">modifier</a> ou <a id="deleteSingle" href="#">supprimer</a> cette entrée.
	        	</p>
 
	        	<div id="modifySingleBloc">
 
	        		<form id="formSingleModify" action="updateSingles.php" method="post">
			        	Modifiez le Single : 
			        	<input class="singleModifyField" type="text" name="single" value="" />
			        	<input class="singleIdField" type="hidden" name="single_id" value="" />
 
			        	<input class="submitButton" type="submit" value="Modifier" />
			        	<input class="cancelButton" type="button" value="Annuler" />
			        </form>
 
			        <p class="modifySingleConfirmation">Le Single <span class="modifiedSingleName"></span>, ID n°<span class="modifiedSingleId"></span> a bien été modifié.</p>
	        	</div>
 
	        	<div id="deleteSingleBloc">
	        		<form id="formSingleDelete" action="deleteSingle.php" method="post">
 
			        	Etes-vous sûr de vouloir supprimer le Single <span class="deletedSingleName"></span>? 
			        	<input class="singleIdField" type="hidden" name="single_id" value="" />
			        	<input class="submitButton" type="submit" value="Supprimer" />
			        	<input class="cancelButton" type="button" value="Annuler" />
			        </form>
 
			        <p class="deleteSingleConfirmation">Le Single <span class="deletedSingleName"></span>, ID n°<span class="deletedSingleId"></span> a bien été supprimé.</p>
	        	</div>
 
	        </div>
	    </div>
	    <div id="albums" class="ui-tabs-panel">
	        Contenu Albums
	    </div>
	    <div id="tracks" class="ui-tabs-panel">
	        Contenu Tracks
	    </div>
 
	    <div id="playlist" class="ui-tabs-panel">
	        Contenu Playlists
	    </div>
	</div>
 
</div>
</body>
</html>

J'arrive bien à insérer mon artiste grâce à mon php que voici.

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
<?php include_once("connexion.php"); ?>
<?php
mysql_select_db($database, $base);
 
if(!empty($_POST['artist'])){
$query_artist = sprintf("INSERT INTO artists(art_name) VALUES('%s');", $_POST['artist']);
$artist = mysql_query($query_artist, $base);
 
 
if($artist == true){
    $id = mysql_insert_id();
    $query_artist = sprintf("SELECT * FROM artists WHERE art_id = $id");
        $artist = mysql_query($query_artist, $base) or die(mysql_error());
        $row_artist = mysql_fetch_assoc($artist);
        $result = array();
        
        do {  
        $result[] = $row_artist;
    } while ($row_artist = mysql_fetch_object($artist));
                echo '{"artist":'.json_encode($result).'}';
}
}
else{
    echo json_encode("Veuillez Entrer Un Artiste");
}
?>

Une fois l'artiste inséré j'ai deux liens qui apparaissent (modification/ suppression)
un click fait apparaitre un champ texte qui récupère la valeur de l'artiste précédemment.

Code :

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

1
2
<input class="artistModifyField" type="text" name="artist" value="" />
<input class="artistIdField" type="hidden" name="artist_id" value="" />

Ma modification n'est pas prise en compte.
Voila la ligne que j'ai dans mon php

Code :

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

sprintf("UPDATE artists SET art_name = '".$_POST['artist']."' WHERE art_id = '".$_POST['artist_id']."'");

J'ai le même problème à la suppression que j'ai mis en place de la même façon.
voilà mon message d'erreur

mysql_fetch_assoc(): supplied argument is not a valid MySQL result resource

Mon deuxième soucis concerne mon js qui gère l'affichage des différents blocs suite à l'insertion. Par défaut seul le champ d'insertion doit être visible cela marche très bien pour le tab artists. Par contre quand je vais dans le tab single tous mes blocs s'affichent et une fois que je valide j'ai le json à l'écran qui justifie bien que l'insertion a été effectuée mais tous mes autres éléments disparaissent.

Voici le js pour le tab artist

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
$(document).ready(function(){
	moreThanTalk.init();
});
 
var moreThanTalk = {
	$submitArtist : null,
	$formArtists : null,
	$artistResponse : null,
	$modifyArtistLink : null,
	$deleteArtistLink : null,
	$modifyArtistBloc : null,
	$formArtistModify : null,
	$modifyConfirmation : null,
	$formArtistDelete : null,
	$deleteConfirmation : null,
 
	init : function(){
		$("#tabs").tabs();
		this.initArtistManager();
	},
 
	initArtistManager : function(){
		this.$formArtists = $("form#formArtists");
		this.$submitArtist = this.$formArtists.find("input.submitButton");
		this.$artistResponse = $("#artistResponse");
		this.$modifyArtistLink = $("#modifyArtist");
		this.$deleteArtistLink = $("#deleteArtist");
		this.$modifyArtistBloc = $("#modifyArtistBloc");
		this.$deleteArtistBloc = $("#deleteArtistBloc");
		this.$formArtistModify = $("form#formArtistModify");
		this.$formArtistDelete = $("form#formArtistDelete");
		this.$modifyConfirmation = this.$artistResponse.find(".modifyConfirmation");
		this.$deleteConfirmation = this.$artistResponse.find(".deleteConfirmation");
 
		this.$submitArtist.click(function(event){
			event.preventDefault();
			moreThanTalk.$artistResponse.hide();
			moreThanTalk.$modifyConfirmation.hide();
			moreThanTalk.$formArtistDelete.hide();
			moreThanTalk.$deleteConfirmation.hide();
			ajaxRequest(moreThanTalk.$formArtists, "moreThanTalk.handleArtistsResponse(response)");
		});
 
		this.$modifyArtistLink.click(function(event){
			event.preventDefault();
			moreThanTalk.$modifyConfirmation.hide();
			moreThanTalk.$deleteArtistBloc.hide();
			moreThanTalk.$formArtistModify.show();
			moreThanTalk.$modifyArtistBloc.show();
		});
 
		this.$deleteArtistLink.click(function(event){
			event.preventDefault();
			moreThanTalk.$modifyArtistBloc.hide();
			moreThanTalk.$deleteArtistBloc.show();
			moreThanTalk.$formArtistDelete.show();
		});
 
		this.$deleteArtistBloc.find(".submitButton").click(function(event){
			event.preventDefault();
			moreThanTalk.$modifyArtistBloc.hide();
			ajaxRequest(moreThanTalk.$formArtistDelete, "moreThanTalk.handleArtistsDeleteResponse(response)");
		});
 
		this.$modifyArtistBloc.find(".submitButton").click(function(event){
			event.preventDefault();
			ajaxRequest(moreThanTalk.$formArtistModify, "moreThanTalk.handleArtistsModifyResponse(response)");
		});
 
		this.$modifyArtistBloc.find(".cancelButton").click(function(event){
			event.preventDefault();
			moreThanTalk.$modifyArtistBloc.hide();
		});
 
		this.$deleteArtistBloc.find(".cancelButton").click(function(event){
			event.preventDefault();
			moreThanTalk.$deleteArtistBloc.hide();
		});
 
	},
 
	handleArtistsResponse : function(json){
		var datas = json.artist[0];
		this.$artistResponse.find(".insertedArtistName, .deletedArtistName").text(datas.art_name);
		this.$artistResponse.find(".insertedArtistId, .deletedArtistId").text(datas.art_id);
		this.$artistResponse.find(".artistModifyField").val(datas.art_name);
		this.$artistResponse.find(".artistIdField").val(datas.art_id);
		$("#intro").show();
		this.$artistResponse.show();
	},
 
	handleArtistsModifyResponse : function(json){
		var datas = json.artist[0];
		this.$artistResponse.find(".modifiedArtistName, .deletedArtistName").text(datas.art_name);
		this.$artistResponse.find(".modifiedArtistId").text(datas.art_id);
		this.$formArtistModify.hide();
		this.$modifyConfirmation.show();
	},
 
	handleArtistsDeleteResponse : function(json){
		this.$formArtistDelete.hide();
		this.$deleteConfirmation.show();
		$("#intro").hide();
	}
}
 
function ajaxRequest(formObj, callback){
	$.ajax({
	   type: "POST",
	   url: formObj.attr('action'),
	   data: formObj.serialize(),
	   dataType : "json",
	   success: function(response){
	     eval(callback);
	   }
	 });
}

Le js pour le tab Single

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
$(document).ready(function(){
	moreThanTalk.init();
});
 
var moreThanTalk = {
	$submitSingle : null,
	$formSingles : null,
	$singleResponse : null,
	$modifySingleLink : null,
	$deleteSingleLink : null,
	$modifySingleBloc : null,
	$formSingleModify : null,
	$modifySingleConfirmation : null,
	$formSingleDelete : null,
	$deleteSingleConfirmation : null,
 
	init : function(){
		$("#tabs").tabs();
		this.initSingleManager();
	},
 
	initSingleManager : function(){
		this.$formSingles = $("form#formSingles");
		this.$submitSingle = this.$formSingles.find("input.submitButton");
		this.$singleResponse = $("#singleResponse");
		this.$modifySingleLink = $("#modifySingle");
		this.$deleteSingleLink = $("#deleteSingle");
		this.$modifySingleBloc = $("#modifySingleBloc");
		this.$deleteSingleBloc = $("#deleteSingleBloc");
		this.$formSingleModify = $("form#formSingleModify");
		this.$formSingleDelete = $("form#formSingleDelete");
		this.$modifySingleConfirmation = this.$singleResponse.find(".modifySingleConfirmation");
		this.$deleteSingleConfirmation = this.$singleResponse.find(".deleteSingleConfirmation");
 
		this.$submitSingle.click(function(event){
			event.preventDefault();
			moreThanTalk.$singleResponse.hide();
			moreThanTalk.$modifySingleConfirmation.hide();
			moreThanTalk.$formSingleDelete.hide();
			moreThanTalk.$deleteSingleConfirmation.hide();
			ajaxRequest(moreThanTalk.$formSingles, "moreThanTalk.handleSinglesResponse(response)");
		});
 
		this.$modifySingleLink.click(function(event){
			event.preventDefault();
			moreThanTalk.$modifySingleConfirmation.hide();
			moreThanTalk.$deleteSingleBloc.hide();
			moreThanTalk.$formSingleModify.show();
			moreThanTalk.$modifySingleBloc.show();
		});
 
		this.$deleteArtistLink.click(function(event){
			event.preventDefault();
			moreThanTalk.$modifySingleBloc.hide();
			moreThanTalk.$deleteSingleBloc.show();
			moreThanTalk.$formSingleDelete.show();
		});
 
		this.$deleteArtistBloc.find(".submitButton").click(function(event){
			event.preventDefault();
			moreThanTalk.$modifySingleBloc.hide();
			ajaxRequest(moreThanTalk.$formSingleDelete, "moreThanTalk.handleSinglesDeleteResponse(response)");
		});
 
		this.$modifySingleBloc.find(".submitButton").click(function(event){
			event.preventDefault();
			ajaxRequest(moreThanTalk.$formSingleModify, "moreThanTalk.handleSinglesModifyResponse(response)");
		});
 
		this.$modifySingleBloc.find(".cancelButton").click(function(event){
			event.preventDefault();
			moreThanTalk.$modifySingleBloc.hide();
		});
 
		this.$deleteSingleBloc.find(".cancelButton").click(function(event){
			event.preventDefault();
			moreThanTalk.$deleteSingleBloc.hide();
		});
 
	},
 
	handleSinglesResponse : function(json){
		var datas = json.single[0];
		this.$singleResponse.find(".insertedSingleName, .deletedSingleName").text(datas.single_name);
		this.$singleResponse.find(".insertedSingleId, .deletedSingleId").text(datas.single_id);
		this.$singleResponse.find(".singleModifyField").val(datas.single_name);
		this.$singleResponse.find(".singleIdField").val(datas.single_id);
		$("#introSingle").show();
		this.$artistSingle.show();
	},
 
	handleSinglesModifyResponse : function(json){
		var datas = json.single[0];
		this.$singleResponse.find(".modifiedSingleName, .deletedSingleName").text(datas.single_name);
		this.$singleResponse.find(".modifiedSingleId").text(datas.single_id);
		this.$formSingleModify.hide();
		this.$modifySingleConfirmation.show();
	},
 
	handleArtistsDeleteResponse : function(json){
		this.$formSingleDelete.hide();
		this.$deleteSingleConfirmation.show();
		$("#introSingle").hide();
	}
}
 
function ajaxRequest(formObj, callback){
	$.ajax({
	   type: "POST",
	   url: formObj.attr('action'),
	   data: formObj.serialize(),
	   dataType : "json",
	   success: function(response){
	     eval(callback);
	   }
	 });
}

Pour Finir, je souhaite alimenter un select dans un formulaire à partir d'une base de données mysql avec jquery j'ai cherché dans les tutorials du site voir même sur le net mais je n'ai rien trouvé si quelqu'un pouvait me donner des pistes.

Merci d'avance.

**boboss123** · 25/03/2010, 09h20

Envoyé par nkordiko

Bonjour,
Je viens de lire les recommandations du forum et il n'est pas indiqué si il faut faire une discussion par difficulté que l'on rencontre ou si on peut tout grouper dans une même discussion. Voilà pourquoi je me suis permis d'aborder plusieurs sujets dans cette discussion.

il me semble plus approprié de faire un post par question car en général, ça devient vite le foutoire (difficile à suivre la discution), surtout que là, tu as des questions sur js et PHP

Je vais déja te réponde à une question. Pour remplir une listbox, on peut faire comme ça :

Code :

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

1
2
3
4
5
6
7
		// Création du select
		var select = $("<select></select>");
		for(var i=1; i<=nb_input; i++){
			$("<option value=\"" + i + "\">" + i + "</option>").appendTo(select);
		}
 
		$("#myInputSelect").html($(select).html()); // insertion dans la page web

**nkordiko** · 25/03/2010, 11h32

Merci Boboss123 pour tes conseils et ta réponse

débutant, UI Tabs et formulaire

jQuery

Vue hybride

Discussions similaires

Partager

Partager