Fonction Init Javascript non prise en compte
Posté : 27 janv. 2010, 11:25
Bonjour,
J'alimente une base de données mysql à l'aide d'un formulaire, des scripts php et ajax.
Une fois l'insertion effectuée je fais afficher un tableau récapitulatif en ajax. Cette méthode a déjà fonctionné mais là elle ne fonctionne plus pour une raison que j'ignore. J'ai remarqué que ma fonction d'init declenchant le reste de mon script n'est pas prise en compte. Ce qui bloque l'execution du script vu que celle ci depend de la fonction d'init.
Voila Mon formulaire
[javascript]var single = {
// le single inséré
singleAdded: null,
// le div conteneur
container: null,
// fonction d'init
init: function() {
var sbmButton = $("go");
var frm = $("formSingle");
if(sbmButton && frm) {
sbmButton.observe("click", single.postSingle);
}
},
// poste un single au script php. L'url est l'action du formulaire
postSingle: function(e) {
// on stoppe l'événement
e.stop();
// nouvelle requête ajax
new Ajax.Request($("formSingle").action, {
method: "post",
parameters: $("formSingle").serialize(true),
// on externalise le call back pour plus de lisibilité
onSuccess: single.single_callBack
});
},
// call back retour ajax
single_callBack: function(response) {
// on evalue le JSON
var singleSql = response.responseText.evalJSON();
// si le résultat est de type string, c'est un message d'erreur
if(Object.isString(singleSql)) {
// on affiche une erreur
single.writeError(singleSql);
}
else {
// reinit du formulaire
$("formSingle").reset();
// le json retourné est de la forme {sgle:[{single_id: "id", single_name: "name", single_art: "id", etc...}]}
single.singleAdded = singleSql.sgle[0];
// on dessine le single
single.drawSingle();
}
},
// ecriture d'un message d'erreur
writeError: function(message) {
// on obtient le conteneur et on l'update avec le message
single.getContainer().update(message);
},
// on créé le tableau du single
drawSingle: function() {
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').update("Single");
var th3 = new Element('th').update("Pochette");
var th4 = new Element('th').update("Année de Sortie");
var th5 = new Element('th', {colspan: '2'}).update("Action");
tr0.insert(th0).insert(th1).insert(th2).insert(th3).insert(th4).insert(th5);
table.insert(tr0);
var sql = single.singleAdded;
var tr1 = new Element('tr');
var td0 = new Element('td').update(sql.single_id);
var td1 = new Element('td').update(sql.art_name);
var td2 = new Element('td').update(sql.single_name);
var td3 = new Element('td').update(sql.single_cover);
var td4 = new Element('td').update(sql.single_release_date);
var td5 = new Element('td');
var imgModif = new Element('img', {src: 'modifier.png', alt: 'modifier', title: 'modifier'});
var imgModifLink = new Element('a',{"class":'imgModif',id: 'modif', href:''});
imgModifLink.observe("click", modifArtist.drawArtModifier);
td5.insert(imgModifLink);
imgModifLink.insert(imgModif);
var td6 = new Element('td');
var imgSuppr = new Element('img', {src: 'supprimer.png', alt: 'supprimer', title: 'supprimer'});
var imgSupprLink = new Element('a',{"class":'imgSuppr', id: 'suppr', href:''});
imgSupprLink.observe("click", supprArtist.drawArtSupprimer);
td6.insert(imgSupprLink);
imgSupprLink.insert(imgSuppr);
tr1.insert(td1).insert(td2).insert(td3).insert(td4).insert(td5).insert(td6);
table.insert(tr1);
// on obtient le conteneur
var container = single.getContainer();
// on enlève tout ce qu'il contient
container.childElements().invoke("remove");
// on update à vide et on insère la table
$('sgle').innerHTML = "";
container.update("").insert(table);
},
// renvoie le conteneur
getContainer: function() {
// si il est null
if(! single.container) {
// on le créé en deux fois
var block = new Element("div", {"class": "block"});
$("Content").insert(block);
single.container = new Element("div", {"id": "sgle"});
block.insert(single.container);
}
// on le renvoie
return single.container;
}
};
document.observe('dom:loaded', function() { single.init();});[/javascript]
Je vous remercie d'avance
J'alimente une base de données mysql à l'aide d'un formulaire, des scripts php et ajax.
Une fois l'insertion effectuée je fais afficher un tableau récapitulatif en ajax. Cette méthode a déjà fonctionné mais là elle ne fonctionne plus pour une raison que j'ignore. J'ai remarqué que ma fonction d'init declenchant le reste de mon script n'est pas prise en compte. Ce qui bloque l'execution du script vu que celle ci depend de la fonction d'init.
Voila Mon formulaire
<?include "_debut.php";?>
<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="scripts/getArtist.js"></script>
<script type="text/javascript" src="scripts/singles.js"></script>
<div id="Content">
<h1>Singles</h1>
<div class="block">
<form action="newSingle.php" method="post" name="formSingle" id="formSingle" enctype="multipart/form-data">
<table>
<tr>
<th>Selectionnez Votre Artiste</th>
<td><select id="artistes" name="artists" /></td>
</tr>
<tr>
<th>Entrez Le Single</th>
<td><input type="text" name="single_name" /></td>
</tr>
<tr>
<th>Pochette Single</th>
<td><input type="file" name="single_cover" size="50" /></td>
</tr>
<tr>
<th>Année de Sortie</th>
<td><input type="text" name="single_release_date" /></td>
</tr>
<tr>
<th></th>
<td><input type="submit" value="Valider" id="go" /></td>
</tr>
</table>
</form>
</div>
<br />
</div>
<?include "_fin.php";?>
Voici le Js avec avec au début la fonction d'initialisation[javascript]var single = {
// le single inséré
singleAdded: null,
// le div conteneur
container: null,
// fonction d'init
init: function() {
var sbmButton = $("go");
var frm = $("formSingle");
if(sbmButton && frm) {
sbmButton.observe("click", single.postSingle);
}
},
// poste un single au script php. L'url est l'action du formulaire
postSingle: function(e) {
// on stoppe l'événement
e.stop();
// nouvelle requête ajax
new Ajax.Request($("formSingle").action, {
method: "post",
parameters: $("formSingle").serialize(true),
// on externalise le call back pour plus de lisibilité
onSuccess: single.single_callBack
});
},
// call back retour ajax
single_callBack: function(response) {
// on evalue le JSON
var singleSql = response.responseText.evalJSON();
// si le résultat est de type string, c'est un message d'erreur
if(Object.isString(singleSql)) {
// on affiche une erreur
single.writeError(singleSql);
}
else {
// reinit du formulaire
$("formSingle").reset();
// le json retourné est de la forme {sgle:[{single_id: "id", single_name: "name", single_art: "id", etc...}]}
single.singleAdded = singleSql.sgle[0];
// on dessine le single
single.drawSingle();
}
},
// ecriture d'un message d'erreur
writeError: function(message) {
// on obtient le conteneur et on l'update avec le message
single.getContainer().update(message);
},
// on créé le tableau du single
drawSingle: function() {
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').update("Single");
var th3 = new Element('th').update("Pochette");
var th4 = new Element('th').update("Année de Sortie");
var th5 = new Element('th', {colspan: '2'}).update("Action");
tr0.insert(th0).insert(th1).insert(th2).insert(th3).insert(th4).insert(th5);
table.insert(tr0);
var sql = single.singleAdded;
var tr1 = new Element('tr');
var td0 = new Element('td').update(sql.single_id);
var td1 = new Element('td').update(sql.art_name);
var td2 = new Element('td').update(sql.single_name);
var td3 = new Element('td').update(sql.single_cover);
var td4 = new Element('td').update(sql.single_release_date);
var td5 = new Element('td');
var imgModif = new Element('img', {src: 'modifier.png', alt: 'modifier', title: 'modifier'});
var imgModifLink = new Element('a',{"class":'imgModif',id: 'modif', href:''});
imgModifLink.observe("click", modifArtist.drawArtModifier);
td5.insert(imgModifLink);
imgModifLink.insert(imgModif);
var td6 = new Element('td');
var imgSuppr = new Element('img', {src: 'supprimer.png', alt: 'supprimer', title: 'supprimer'});
var imgSupprLink = new Element('a',{"class":'imgSuppr', id: 'suppr', href:''});
imgSupprLink.observe("click", supprArtist.drawArtSupprimer);
td6.insert(imgSupprLink);
imgSupprLink.insert(imgSuppr);
tr1.insert(td1).insert(td2).insert(td3).insert(td4).insert(td5).insert(td6);
table.insert(tr1);
// on obtient le conteneur
var container = single.getContainer();
// on enlève tout ce qu'il contient
container.childElements().invoke("remove");
// on update à vide et on insère la table
$('sgle').innerHTML = "";
container.update("").insert(table);
},
// renvoie le conteneur
getContainer: function() {
// si il est null
if(! single.container) {
// on le créé en deux fois
var block = new Element("div", {"class": "block"});
$("Content").insert(block);
single.container = new Element("div", {"id": "sgle"});
block.insert(single.container);
}
// on le renvoie
return single.container;
}
};
document.observe('dom:loaded', function() { single.init();});[/javascript]
Je vous remercie d'avance