Formulaire Ajax

Version imprimable

Formulaire Ajax

Bonjour,
je souhaite alimenter ma base de données via un formulaire.
L'insertion se fait mais la page ne se rafraichit pas. J'entends par là que les valeurs du champs reste présente et que l'on peut les insérer à nouveau en validant.
Je pensais pouvoir régler le problème en utilisant field.Clear() mais ça ne fonctionne pas.
Voici mon code
mon formulaire

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
<?include "_debut.php";?>
<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="scripts/art_nat.js"></script>
<div id="Content">
	<h1>Artistes</h1>
 
		<div class="block">
		<form method="post" action="newArtist.php" name="monForm" id="monForm" enctype="multipart/form-data">
			<table>
				<tr>
					<th>Ajouter Artiste </th>
					<td><input type="textarea" name="art_name" /></td>
				</tr>
				<tr>
					<th></th>
					<td><input type="submit" value="Valider" id="go" /></td>
 
				</tr>
			</table>
		</form>
		</div>
		<br />
	<div class="block">
		<div id="arts"></div>
	</div>
 
</div>
<?include "_fin.php";?>

Mon php gérant l'insertion

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
<?php include_once("connexion.php"); ?>
<?php
mysql_select_db($database, $base);
 
if(!empty($_POST['art_name'])){
$query_artist = sprintf("INSERT INTO artists(art_name) VALUES('%s');", $_POST['art_name']);
$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 '{"arts":'.json_encode($result).'}';
}
}
else{
    echo json_encode("Une erreur s'est produite lors de l'enregistrement de l'artiste.");
}
 
?>

et pour finir mon javascript

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
var artists = {
 
    justAdded : null,
 
    init : function(){
        if($('monForm') && $('go')){
            Event.observe(
                $('go'),
                'click',
                function(evt){
                    Event.stop(evt);
                    var url = $('monForm').action;
 
                    new Ajax.Request(url, {
                      method: 'post',
                      parameters : $('monForm').serialize(true),
                      onSuccess: function(transport){
                        artists.justAdded = transport.responseText.evalJSON();
                        if(!Object.isString(artists.justAdded)){
							artists.writeArtistsTable(artists.justAdded.arts);
							$('art_name').clear();
                        }
                        else if(Object.isString(artists.justAdded)){
                            $('arts').innerHTML = artists.justAdded;
                        }
                    }
                    });	
                }
            );
        }
    },
 
	writeArtistsTable : function(justAdded){
	  var table = new Element('table');
	  var tr0 = new Element('tr');
	  var th0 = new Element('th').update("ID");
	  var th1 = new Element('th').update("Artiste");
	  var th2 = new Element('th', {'colspan': '2'}).update("Action");
	  tr0.insert(th0);
	  tr0.insert(th1);
	  tr0.insert(th2);
	  table.insert(tr0);
	  justAdded.each(function(elt){
	    var tr1 = new Element('tr');
	    var td1 = new Element('td').update(elt.art_id);
	    var td2 = new Element('td').update(elt.art_name);
	    var td3 = new Element('td');
	    var imgModif = new Element('img', {'src': 'modifier.png', 'alt': 'modifier', 'title': 'modifier', href: '/art_nat.php?modif=elt.art_id'});
	    td3.insert(imgModif);
	    var td4 = new Element('td');
	    var imgSuppr = new Element('img', {'src': 'supprimer.png', 'alt': 'supprimer', 'title': 'supprimer', href: '/art_nat.php?suppr=elt.art_id'});
	    td4.insert(imgSuppr);
	    tr1.insert(td1);
	    tr1.insert(td2);
	    tr1.insert(td3);
	    tr1.insert(td4);
	    table.insert(tr1);
	    });
	     $('arts').appendChild(table);
	    }
 
}
 
document.observe('dom:loaded', artists.init);

Etant novice, je suis à votre écoute concernant toutes les améliorations que je pourrais apporter à mon code.

Merci d'avance.

Bonjour,

ça n'est pas super "propre", mais pour vider les données contenues dans votre formulaire, vous pouvez toujours utiliser la fonction reset :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
new Ajax.Request(url, {
	method: 'post',
	parameters : $('monForm').serialize(true),
	onSuccess: function(transport) {
		artists.justAdded = transport.responseText.evalJSON();
		if(!Object.isString(artists.justAdded)) {
			artists.writeArtistsTable(artists.justAdded.arts);
			$('monForm').reset();
		}
		else if(Object.isString(artists.justAdded)) {
			$('arts').innerHTML = artists.justAdded;
		}
	}
});

10/11/2009, 11h24
nkordiko

Parfait mon problème est résolu au niveau des infos contenu dans le formulaire.
Par contre quand je ne rentre rien dans le champ artiste, mon message d'erreur s'affiche correctement, mais si par la suite j'entre un artiste le message d'erreur ne disparait pas mais la nouvelle insertion a lieu en dessous correctement.
J'aimerais savoir comment faire pour que lorsque l'on clique sur valider la page se rafraichisse afin d'éviter se problème.

Merci d'avance

Code:

1
2
3
4
5
6
7
8
9
10
11
onSuccess: function(transport) {
  $('arts').innerHTML = "";
  artists.justAdded = transport.responseText.evalJSON();
  if(!Object.isString(artists.justAdded)) {
    artists.writeArtistsTable(artists.justAdded.arts);
    $('monForm').reset();
  }
  else if(Object.isString(artists.justAdded)) {
    $('arts').innerHTML = artists.justAdded;
  }
}

Parfait gwyohm, je vois que tu es toujours présent pour me donner un coup de main.
Un problème en amenant un autre, je n'arrive pas à faire fonctionner mes liens href sur des images en utilisant la DOM.
Je te joins les deux façons que j'ai tenté en espèrant que tu puisses m'éclairer.
Les deux images sont dans un tableau créé dynamiquement suite à l'insertion d'un artiste dans une base de données.
Voici la fonction contenu dans le js qui entraine cette création

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
writeArtistsTable : function(justAdded){
	  var table = new Element('table');
	  var tr0 = new Element('tr');
	  var th0 = new Element('th').update("ID");
	  var th1 = new Element('th').update("Artiste");
	  var th2 = new Element('th', {'colspan': '2'}).update("Action");
	  tr0.insert(th0);
	  tr0.insert(th1);
	  tr0.insert(th2);
	  table.insert(tr0);
	  justAdded.each(function(elt){
	    var tr1 = new Element('tr');
	    var td1 = new Element('td').update(elt.art_id);
	    var td2 = new Element('td').update(elt.art_name);
	    var td3 = new Element('td');
	    var imgModif = new Element('img', {'src': 'modifier.png', 'alt': 'modifier', 'title': 'modifier'});
	    var imgModifLink = new Element('a',{'class':'imgModif','href':'/art_nat.php?modif='+elt.art_id}).update(imgModif);
	    td3.insert(imgModif);
	    var td4 = new Element('td');
	    var imgSuppr = new Element('img', {'src': 'supprimer.png', 'alt': 'supprimer', 'title': 'supprimer', href: '/art_nat.php?suppr=elt.art_id'});
	    td4.insert(imgSuppr);
	    tr1.insert(td1);
	    tr1.insert(td2);
	    tr1.insert(td3);
	    tr1.insert(td4);
	    table.insert(tr1);
	    });
	     $('arts').innerHTML = "";
	     $('arts').appendChild(table);
	    }

Merci d'avance

Voici ce que je pensais être correct mais qui ne fonctionne toujours pas au niveau de la création dynamique de l'image et du lien href sur l'image que voici
Code:

1 2 3 var imgModif = new Element('img', {'src': 'modifier.png', 'alt': 'modifier', 'title': 'modifier'}); var imgModifLink = new Element('a',{'class':'imgModif','href':'/art_nat.php?modif='+elt.art_id}); imgModifLink.appendChild(imgModif);

Dans le cas 1,

Code:

1
2
3
4
var td3 = new Element('td');
var imgModif = new Element('img', {'src': 'modifier.png', 'alt': 'modifier', 'title': 'modifier'});
var imgModifLink = new Element('a',{'class':'imgModif','href':'/art_nat.php?modif='+elt.art_id}).update(imgModif);
td3.insert(imgModif);

tu n'inseres pas imgModifLink au td...

Dans le cas 2,
passe par les méthodes prototype :

Code:

1
2
3
4
var imgModif = new Element('img', {'src': 'modifier.png', 'alt': 'modifier', 'title': 'modifier'});
var imgModifLink = new Element('a',{'class':'imgModif','href':'/art_nat.php?modif='+elt.art_id});
td3.insert(imgModifLink);
imgModifLink.insert(imgModif);

13/11/2009, 12h46
nkordiko

C'est Résolu Gwyohm.
Merci Beaucoup. Vu que je suis sur un gros projet que je crois que je serais amené à te re solliciter ;)