Formulaire Ajax

**nkordiko** · 05/11/2009, 17h11

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 :

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
<?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 :

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
<?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 :

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
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.

**Arnaud F.** · 05/11/2009, 23h20

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 :

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

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

**nkordiko** · 10/11/2009, 11h24

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

**gwyohm** · 12/11/2009, 19h35

Code :

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

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

?

**nkordiko** · 13/11/2009, 10h38

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 :

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
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

**nkordiko** · 13/11/2009, 11h41

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 :

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

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

**gwyohm** · 13/11/2009, 12h13

Dans le cas 1,

Code :

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

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 :

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

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

**nkordiko** · 13/11/2009, 12h46

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

Formulaire Ajax [Prototype]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager