begin process at 2012 05 29 12:05:03
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

Framework

 > 

Prototype, Script.Aculo.us

 > 

Insertion et Creation d'un tableau dynamique


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Insertion et Creation d'un tableau dynamique

vendredi 20 mars 2009 à 23:01:47 | Insertion et Creation d'un tableau dynamique

Nats3

Bonjour avant toutes choses je tiens à m'excuser des possibles erreurs que je vais effectuer concernant ma requête sur le forum (c'est mon premier post). J'espère que vous ne m'en tiendrez pas rigueur.

Mon problème est le suivant. Je viens de me mettre à l'ajax et à prototype.

Je souhaite insérer une ligne dans ma base de données avec prototype par l'intermédiaire d'un formulaire que voici:

<formaction="artists2.php"method="post"enctype="multipart/form-data">

<table>
<tr>
<th>Ajouter Artiste </th>
<td><inputtype="textarea"name="art_name" /></td>
</tr>
<tr>
<th></th>
<td><inputtype="submit"value="Valider" /></td>
</tr>
</table>
</form>

Dans le <head> bien sur j'ai

<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="scripts/artists2.js"></script>

A l'insertion de mon artiste un tableau doit se créer dynamiquement pour m'afficher mon insertion avec deux liens images (une image pour modifier, l'autre pour supprimer).

Dans mon html je cree un <div id="artists"> ou le tableau devra être créé.

Voici mon artists2.js

var artist = {
response: null,
responseArtist: null,
// la fonction init doit initialiser, pas lancer de requete aJAX
init:function(){
// on recupere le formulaire
var theForm = $$("form").first();
// On attache un listener sur l'evenement submit
theForm.observe("submit", function(e){
// Comme on bind la fonction sur le formulaire, this est le formulaire
var url = 'getArtistAdded.php';
new Ajax.Request(url, {
method: 'get',
// On serialize le formulaire pour avoir les valeurs saisies
parameters : this.serialize(true),
onSuccess: function(transport){
artist.responseArtist = transport.responseText.evalJSON();
if (artist.responseArtist.artist[0] !=false){
artist.writeArtistTable(artist.responseArtists.artist);
} else {
$('artist').innerHTML = "Veuillez entrer un artiste";
}
}
});
}.bindAsEventListener(theForm));
},

writeArtistTable : function(response){
var table = new Element('table', {'id': 'tbArtist'});
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);
response.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: 'artist2.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: 'artist2.php?suppr=elt.art_id'});
td4.insert(imgSuppr);
tr1.insert(td1);
tr1.insert(td2);
tr1.insert(td3);
tr1.insert(td4);
table.insert(tr1);
});
$('artist').appendChild(table);
}
};
Event.observe(window, 'load', artist.init);


Pour finir mon php pour inserer l'artiste (getArtistAdded.php)

<?phpinclude_once("connexion.php"); ?>
<?php
mysql_select_db($database, $base);
 
function remplaceBR($chaine)
{
$chaine = str_replace("\r\n","<br>",$chaine);
$chaine = str_replace("\n","<br>",$chaine);
return$chaine;
}
 
if(isset($_POST['art_name'])){
$name = strip_tags($_POST['art_name']);
// Premiere insertion sans l'id
$texte = remplaceBR($texte);
$query01="INSERT INTO artists(art_id, art_name) VALUES ('NULL', '$name')";
$result01=mysql_query($query01);
$id=mysql_insert_id();

// On recupere l'id de l'artiste pour l'afficher
$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();
}
?>
 
<?php
do{
$result[] = $row_artist;
}while($row_artist = mysql_fetch_object($artist));
echo '{"artist":'.json_encode($result).'}';
?>

Le problème vient forcement d'artists.js car quand je mets le lien du php pour inserer getArtistAdded.php dans l'action du formulaire l'insertion se passe sans problème.

Concretement, il ne passe rien, je n'ai aucun message d'erreur

Je vous remercie d'avance pour votre aide et surtout votre compréhension ajax et prototype sont tout nouveau pour moi.
samedi 21 mars 2009 à 19:15:08 | Re : Insertion et Creation d'un tableau dynamique

jdmcreator

Bonjour, Malheureusement je crois que tu es beaucoup meilleur que moi en Javascript. Mais comme je ne voyais aucune réponse, je vais essayer de t'aider.

D'abord inputtype=textarea n'existe pas. Je ne sais pas si c'était volontaire mais la balise approprié est &lttextarea&gt;Je ne connais pas non plus l'Ajax ni Prototype ni le PhP

Mais je me suis inspiré d'un document sur Internet sur la fonction createElement pour créer ceci :

<html> <head> <title>Titre</title> </head> <script type="text/javascript"> var mon_div = null; var nouveauDiv = null; function ajouteTableau() { // crée un tableau // et lui donne un peu de contenu nouveauTable = document.createElement("table"); nouveauTable.innerHTML = "<tr><td><input type=button value=Modifier onclick=\"alert('fonction modifier')\"><input type=button value=Supprimer onclick=\"if(confirm('Voulez-vous vraiment supprimer le tableau ?'))alert('fonction supprimer')\"></td></tr><tr><td><font style='text-decoration:underline;'>Mon artiste : "+document.getElementById('art_name').value+"</font><br></td><tr><td>Info sur l'artiste</td></tr>"; nouveauTable.border='1'; nouveauTable.style.border='3px solid red'; // ajoute l'élément qui vient d'être créé et son contenu au DOM mon_div = document.getElementById("org_div1"); document.body.insertBefore(nouveauTable, mon_div); } </script> <body> <div id='org_div1'></div> <table> <tr> <th>Ajouter Artiste </th> <td><textarea name="art_name" id=art_name></textarea></td> </tr> <tr> <th></th> <td><input type="button" onclick="ajouteTableau();" value="Valider" /></td> </tr> </table> </body> </html>

Je ne crois pas avoir répondu à ton problème mais si cela peut t'aider, c'est déjà cela ;). Sinon, je ne suis pas sûr de bien le comprendre.

Le document est ici : https://developer.mozilla.org/fr/DOM/document.createElement

------JDMCreator
lundi 23 mars 2009 à 08:53:15 | Re : Insertion et Creation d'un tableau dynamique

Nats3

Merci je vais vérifier mon code avec les éléments que tu m'as apporté.


Cette discussion est classée dans : insert, var, id, element, artist


Répondre à ce message

Sujets en rapport avec ce message

compter le nombre de radio button [ par misterdarth ] Bonjour,Lors de la saisie d'un formulaire, je cherche à tester certains champs afin de m'assurer que l'utilisateur n'a pas mis n'importe quoi.Dans ce Verifier si un element existe . [ par svanwan ] Bonjour, J'ai créé un menu en arborescence sous php qui change selon des criteres, chaque element du menu a un id, et j'aimerai pouvoir savoir si un recuperation coordonnees image pour base de données [ par elodielole ] Slt à tous j'ai donc un gros pbe ça fait plusieurs jour que je bosse dessus, en fait j'aimerais pouvoir recuperer les coordonnées dans ma table d'une Script Menu qui marche que sur une page . . . [ par Ma2004 ] Bonjour !J'ai une petite question sur un script que je lance pour un menu sur ma page d'accueil (c'est une frame sur la page index). Ce menu étant ide Javascript et firefox [ par sfergant ] Bonjour,Je me permets de poster ce message parce que j'ai un soucis avec le navigateur Firefox.Voici mon source :<bl Deux codes IDENTIQUES ne fonctionnent pas pareil [ par zeguizmo ] Salut, Desolé pour la section mais je n'ai rien pigé alors j'ai mis au mieux ... Je commence a devenir chèvre la. J'utilise un code (que je donnerais récupérer les paramètres d'une URL [ par sheep974 ] bonjour, je débute en js et je bloque à un endroit:j'ai une url : http://localhost/works/index_beta.php?var=trucj'ai sur cette page un tableau de vale Scrolling horizontal [ par chabgyver ] Bonsoir,La portion de code ci-dessous permet de faire un scrolling vertical d'une page à l'intérieur d'une iframe, en tout cas, sur 2 de mes sites, ça Gestion des evenements claviers [ par keub51 ] Bonjour, je travaille actuellement sur un framework de javascript. il me sert a afficher une pop-up. je souhaite que cette pop up se ferme avec la tou pb className sous IE7 [ par kakol ] Bonjour,Voici mon problème : j'ai un tableau nommé "table1". Lorsque je clique sur une ligne, j'applique un style "highlight" de ma feuille css qui pe


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,780 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales