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
<?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 ?
Afficher la suite
