Fonction n'est pas une fonction
Résolu
Bonjour,
Je suis en train de développer une application de galerie d'image en ajax, dans la partie "autocomplete", il me dit que "autocomplete n'est pas une fonction.
Voici mes sources :
1 - index.php
2 - galerie.js
3 - autocomplete.php
L'erreur semble se trouver à la ligne suivante :
<input name="saisie_search" type="text" id="saisie_search" onkeyup="autocomplete(this.value)" />
Je ne vois pas ou j'ai pu faire une erreur ?
Je suis en train de développer une application de galerie d'image en ajax, dans la partie "autocomplete", il me dit que "autocomplete n'est pas une fonction.
Voici mes sources :
1 - index.php
<?php
include_once('../Scripts/connect.php');
$titre = 'Galerie - Images';
$sql = "SELECT * FROM rubrique ORDER BY ch_rub_label ASC";
$rubs = $DB->query($sql);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//FR"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="galerie.js"></script>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?= $titre; ?></title>
<link rel="stylesheet" href="../css/reset.css" />
<link rel="stylesheet" href="../css/layout.css" />
<link rel="stylesheet" href="../css/display.css" />
<link rel="stylesheet" href="../css/infos.css" />
</head>
<body>
<div class="content">
<div id="header">
<div id="logo">
<img src="../images/logo.png" width="160" height="30" alt="logo" />
</div>
<h1>Galerie d'images</h1>
</div>
<div id="sidebar">
<h2>--- Catégorie</h2>
<select name="categorie" id="categorie" onchange="charge_galerie(this.options[this.selectedIndex].value)">
<option value="none">Sélectionnez une catégorie...</option>
<?php
while ($rub = $rubs->fetch(PDO::FETCH_OBJ)) :
echo '<option value="'.$rub->ch_rub_folder.'">'.$rub->ch_rub_label.'</option>';
endwhile;
?>
<option value="search">Choisissez...</option>
</select>
<div id="input_search">
<input name="saisie_search" type="text" id="saisie_search" onkeyup="autocomplete(this.value)" />
<input type="button" value="Envoi" />
</div>
<div id="informations">
<h2>--- Informations</h2>
<div id="texte">
<img id="infos_thumb" src="../images/fruits/thumbs/citron.jpg" width="90" height="68" alt="thumb">
<p id="ch_img_id">2</p>
<p id="ch_img_fichier">Citron.jpg</p>
<p id="ch_img_orientation">Paysage</p>
<p id="ch_img_larg">450</p>
<p id="ch_img_haut">299</p>
<hr />
<p class="modifiable" id="ch_img_titre">Lorem ipsum dolor sit</p>
<p class="modifiable" id="ch_img_sousTitre">Lorem ipsum dolor</p>
<hr />
<p class="modifiable" id="ch_img_description">Citron vert (lime)</p>
<p class="modifiable" id="ch_img_texte">Lorem ipsum dolor sit amet, consectetur....</p>
<hr />
<p class="modifiable" id="ch_img_keywords">Amaury,le Cour, Amaury le Cour,Ajax</p>
</div>
</div>
</div>
<div id="maincontent">
<h2>--- Planche contact</h2>
<div id="planche-contact"></div>
</div>
<div id="footer">
<div class="vcard">
<p class="sujet">Ajax par la pratique</p>
<p class="org">Amaury le Cour</p>
<p class="street-address">4 rue d' Hendaye</p>
<p class="locality">Nantes</p>
<p class="postal-code">97200</p>
<p class="country-name">France</p>
</div>
</div>
</div>
</body>
</html>
2 - galerie.js
// --------------------------------------------------------
// Galerie --- place_diapo()
// --------------------------------------------------------
function charge_galerie(arg) {
if (arg != 'search') {
affiche_masque_input_search(false)
var objxhr = xhr_connect()
if (objxhr) {
objxhr.onreadystatechange = function() {
if (objxhr.readyState == 4) {
if (objxhr.status == 200) {
reset_galerie()
bloque_editable()
prepare_modification_informations()
var retour = objxhr.responseXML
place_galerie(retour)
}
}
}
var sql = "ch_img_rubId=" + arg
objxhr.open("POST", "charge_galerie.php", true)
objxhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
objxhr.send(sql)
} else {
alert("Soucis d'XMLHttpRequest")
}
} else {
affiche_masque_input_search(true)
}
}
function reset_galerie() {
pc = document.getElementById('planche-contact')
while (pc.firstChild) {
pc.removeChild(pc.firstChild)
}
}
function place_galerie(arg) {
var diapos = arg.getElementsByTagName('image')
var nb_diapo = diapos.length
for (var i = 0; i < nb_diapo; i++) {
var dia_temp = diapos[i]
var img = dia_temp.getElementsByTagName('ch_img_fichier')[0].firstChild.nodeValue
var infos = dia_temp.getElementsByTagName('ch_img_id')[0].firstChild.nodeValue
var folder = dia_temp.getElementsByTagName('ch_img_rubId')[0].firstChild.nodeValue
var orientation = dia_temp.getAttribute('orientation')
place_diapo(img, infos, folder, orientation)
}
}
// --------------------------------------------------------
// Diapositives
// --------------------------------------------------------
function place_diapo(arg, src, folder, orientation ) {
var pc = document.getElementById('planche-contact')
var div = document.createElement('div')
var img = document.createElement('img')
img.alt = folder
img.className = orientation
img.src = "../images/" + folder + "/thumbs/" + arg
div.appendChild(img)
div.src = src
div.onclick = function () {
//alert(this.src)
permute_dia_selected(this)
searchInfos(this.src)
}
pc.appendChild(div)
}
var dia_selected = null
function permute_dia_selected(arg) {
if (dia_selected != null) {
dia_selected.style.backgroundImage = 'url(../images/diapo.png)';
}
arg.style.backgroundImage = 'url(../images/diapo-selected.png';
dia_selected = arg
}
// --------------------------------------------------------
// Gestion des informations
// --------------------------------------------------------
function searchInfos(arg) {
var objxhr = xhr_connect()
if (objxhr) {
objxhr.onreadystatechange = function() {
if (objxhr.readyState == 4) {
if (objxhr.status == 200) {
bloque_editable()
var retour = objxhr.responseText
details_JSON(retour)
}
}
}
var sql = "ch_img_id=" + arg
objxhr.open("POST", "charge_details.php", true)
objxhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
objxhr.send(sql)
} else {
alert("Soucis d'XMLHttpRequest")
}
}
function details_JSON(arg) {
var temp = null
//alert(arg)
var datas = eval('('+arg+')')
for (var i in datas.image) {
//alert(i + " = " + datas.image[i])
temp = document.getElementById(i)
switch (i) {
case "ch_img_fichier" :
var infos_thumb = document.getElementById('infos_thumb')
infos_thumb.src = "../images/"+datas.image.ch_img_rubId+"/thumbs/"+datas.image.ch_img_fichier
default :
if (temp != null) {
temp.innerHTML = datas.image[i]
temp.id_update = datas.image['ch_img_id'];
}
}
}
}
// --------------------------------------------------------
// Mode Editable
// --------------------------------------------------------
function prepare_modification_informations() {
var infos = document.getElementById('informations')
var p = infos.getElementsByTagName('p')
var nb_p = p.length
for (var i = 0; i < nb_p; i++) {
p[i].firstChild.nodeValue = " "
if (p[i].className == "modifiable") {
p[i].onclick = function() {
rend_editable(this)
}
}
}
img = document.getElementById('infos_thumb');
img.src = " "
}
var old_editable = null
function bloque_editable() {
if (old_editable != null) {
var p = document.createElement('p')
p.className = "modifiable"
p.id = old_editable.id
p.id_update = old_editable.id_update
var txt_temp = old_editable.value
var txt_cnt = document.createTextNode(txt_temp)
p.appendChild(txt_cnt)
p.onclick = function() {
rend_editable(this)
}
old_editable.parentNode.replaceChild(p, old_editable)
old_editable = null
}
}
function rend_editable(arg) {
bloque_editable()
var textarea = document.createElement('textarea')
textarea.className = "champ_editable"
textarea.id = arg.id
textarea.id_update = arg.id_update
var txt_cnt = document.createTextNode(arg.firstChild.nodeValue)
textarea.appendChild(txt_cnt)
if (textarea.attachEvent) {
textarea.attachEvent('onchange', update_datas);
} else if (textarea.addEventListener) {
textarea.addEventListener('change', update_datas, false);
}
arg.parentNode.replaceChild(textarea, arg)
old_editable = textarea
}
function update_datas() {
var sql = "ch_img_id=" + this.id_update
sql += "&" + this.id + "=" + this.value
update_datas_base(sql)
}
function update_datas_base(arg) {
var objxhr = xhr_connect()
if (objxhr) {
objxhr.onreadystatechange = function() {
if (objxhr.readyState == 4) {
if (objxhr.status == 200) {
}
}
}
objxhr.open("POST", "update_db.php", true)
objxhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
objxhr.send(arg)
} else {
alert("Soucis d'XMLHttpRequest")
}
}
// --------------------------------------------------------
// Autocompplete
// --------------------------------------------------------
function affiche_masque_input_search(arg) {
var input_search = document.getElementById('input_search')
input_search.style.display = (arg == true) ? 'block' : 'none';
}
function autocomplete(arg) {
var objxhr = xhr_connect()
if (objxhr) {
objxhr.onreadystatechange = function() {
if (objxhr.readyState == 4) {
if (objxhr.status == 200) {
alert(objxhr.responseText)
}
}
}
var sql = "str=" + arg
objxhr.open("POST", "autocomplete.php", true)
objxhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
objxhr.send(sql)
} else {
alert("Soucis d'XMLHttpRequest")
}
}
// --------------------------------------------------------
// OBJET XML HTTP Request
// --------------------------------------------------------
function xhr_connect() {
xhr = false
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest
} else if (window.ActiveXObject) {
var reussi = false
var iexhr = array( "Msxml2.XMLHTTP.7.0","Msxml2.XMLHTTP.6.0","Msxml2.XMLHTTP.5.0",
"Msxml2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP" )
for (var i = 0; i < iexhr.length && ! reussi; i++) {
try {
xhr = new ActuveXObject(iexhr[i])
reussi = true
} catch(e) {}
}
}
return xhr
}
3 - autocomplete.php
<?php
include_once('../Scripts/connect.php');
$sql = "SELECT * FROM images ORDER BY ch_img_titre ASC";
$result = $DB->query($sql);
$str = strtoupper($_POST['str']);
$json = '{"suggest": [';
$stock = array();
while ($item = $result->PDO::FETCH_OBJ) :
$str_titre = substr(strtoupper($item->ch_img_titre),0,strlen($str));
if ($str_titre == $str ) :
$titre = htmlentities($item->ch_img_titre);
$rubrique = htmlentities($item->ch_img_rubId);
$objet = '{"titre":' . $titre . '","rubrique":"' . $rubrique . '"}';
array_push($stock, $objet);
endif;
endwhile;
$json .= implode(",", $stock);
$json .= ']}';
echo $json;
?>
L'erreur semble se trouver à la ligne suivante :
<input name="saisie_search" type="text" id="saisie_search" onkeyup="autocomplete(this.value)" />
Je ne vois pas ou j'ai pu faire une erreur ?
