11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

J'utilise un script d'auto complétion sur mon site que j'ai trouvé ici: http://www.paperblog.fr/578676/wordpress-autocompletion-du-champ-de-recherche/

à la base c'est pour wordpress et je l'ai adapté pour qu'il fonctionne pour ma boutique oscommerce, l'auto complétion fonctionne bien le problème est que si je clique sur le nom d'un produit pour me rendre sur la page de ce produit le lien ne fonctionne qu'avec opéra tout les autres navigateur que j'ai pu tester je vois bien le lien quand je passe la souris sur le nom du produit mais quand je clique rien ne ce passe !

mais sous opéra sa fonctionne Smiley eek

alors je ne comprend pas pour quoi pourtant c'est un script php qui génère les lien il ne devrais pas y avoir de souci, j'ai aussi regardé avec firebug la requète ajax ce fait correctement et je n'ai aucun erreur concernant le lien.

Voici le code javascript:


var myAjax = ajax();

function ajax() {
        var ajax = null;
        if (window.XMLHttpRequest) {
                try {
                        ajax = new XMLHttpRequest();
                }
                catch(e) {}
        }
        else if (window.ActiveXObject) {
                try {
                        ajax = new ActiveXObject("Msxm12.XMLHTTP");
                }
                catch (e){
                        try{
                                ajax = new ActiveXObject("Microsoft.XMLHTTP");
                        }
                        catch (e) {}
                }
        }
        return ajax;
}

function parti(){
        document.getElementById('tag_update').style.display = "none";
}

function request(str) {
	//N'oubliez pas de modifier le chemi du fichier au besoin.
        myAjax.open("POST", "gettags.php");
        myAjax.onreadystatechange = result;
        myAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        myAjax.send("keywords="+str);
}

function result() {
        if (myAjax.readyState == 4) {
                var liste = myAjax.responseText;
                var cible = document.getElementById('tag_update').innerHTML = liste;
                document.getElementById('tag_update').style.display = "block";
        }
}

function selected(choice){
        var cible = document.getElementById('tag_update');
        cible.value = choice;
        document.getElementById('tag_update').style.display = "none";
}


et le fichier php:



require('connect.db.php');
if (isset($_POST['keywords'])) {
        $keywords = htmlentities($_POST['keywords']);
} else  $keywords ='';

		$query = "SELECT products_name, products_id from products_description WHERE products_name LIKE '$keywords%'";
		$result = tep_db_query($query) or die();

					echo '<ul>';
	while ($data = mysql_fetch_array($result)){
		      echo '<li>
		      				<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $data['products_id']) . '" onclick="selected(this.innerHTML);">'.htmlentities($data['products_name']).'</a></li>';
	}
					echo '</ul>';



Merci
Modifié par knostra67 (24 Jan 2010 - 19:10)
Salut,

comme tout le monde n'a pas forcément un OsCommerce sous la main c'est un peu dur de tester. Smiley murf

Dit autrement : sans page en ligne je ne vois pas d'issue.


Au passage ce n'est pas htmlentities qu'il faut appliquer sur ta variable $_POST mais mysql_real_escape_string.
Oups! désolé


Je vais tout de suite allez voir la différence entre htmlentities et mysql_real_escape_string Smiley cligne

merci
Modifié par knostra67 (29 Jan 2010 - 00:57)
Il me semble que le problème vient du fait que le clic naturel sur le lien est bloqué par l'évènement onclick et l'appel à la fonction selected... qui se vautre.

D'ailleurs le selected(this.innerhtml) me semble étrange : pourquoi ne pas faire tout simplement
echo '<li><a href="#" onclick="selected(\''.htmlspecialchars($data['name']).'\');">'.htmlspecialchars($data['name']).'</a>
J'ai testé en modifiant par ton code ou en supprimant tout bêtement la fonction selected mais sa ne prend pas, pourtant je vois bien en bas de mon navigateur le lien qui est exact et qui change sur chaque passage de la souris sur le nom d'un produit mais le clic ne fonctionne pas sauf sous opéra c'est bizarre ça quand même !!!

sa le fais aussi chez toi?

J'ai pas vraiment compris à quoi sert la fonction selected d'ailleurs .

merci
knostra67 a écrit :
J'ai pas vraiment compris à quoi sert la fonction selected d'ailleurs .
A alimenter l'INPUT de recherche avec la valeur sélectionnée.

Après quelques recherches le this.innerHtml semble effectivement compris par l'ensemble (en tout cas la majorité) des navigateurs donc ce que je te suggérais plus haut n'est pas indispensable.

Et pour vraiment être sûr que ça ne vient pas de là j'aurais purement et simplement viré le onclick="selected(...)
Comme dit plus haut j'ai fais le teste en supprimant la fonction selected du lien mais sans grand succès j'en suis au même point c'est agaçant quand sa ne veut pas prendre comme ça et qu'on ne voit pas de problème apparent Smiley smile

Tu peut faire un teste si tu veut je l'ai enlevé la fonction (code source) ce n'est pas elle qui est en cause.
Modifié par knostra67 (24 Jan 2010 - 14:30)
Une autre piste : il faudrait voir si cela ne vient pas de la fonction parti appelée sur le onblur qui prendrait le pas (donc supprimer onblur="..." le temps de faire le test).
Bien vu !!!!!!

c'était ça, en faite c'est moi qui est rajouter la fonction parti() pour faire disparaître la div de l'auto complétion si on ne clique pas sur un produit et qu'on souhaite rester sur la page sinon la div reste affiché et c'est gênant pour la navigation.

il va falloir que je trouve un autre moyen de cacher la div si on ne clique pas sur un produit Smiley decu

Est-ce qu'il est vraiment nécessaire de remettre la fonction selected() à ton avis ?


merci beaucoup pour ton aide
knostra67 a écrit :
il va falloir que je trouve un autre moyen de cacher la div si on ne clique pas sur un produit
Pourquoi ne pas mettre cet évènement sur le DIV contenant les liens ?

knostra67 a écrit :
Est-ce qu'il est vraiment nécessaire de remettre la fonction selected() à ton avis ?
Non puisque ça n'aurait un intérêt que si cette valeur était transmise par le formulaire de recherche alors que tu renvoies directement vers la page qui va bien.


Si tu considères que ce sujet est [Résolu] merci de l'indiquer en éditant ton premier post et en modifiant le titre. Smiley cligne
Déja un grand merci heyoan,

Par contre si je peux encore abuser un peut de ta patiente j'ai testé la fonction parti() sur la div contenant les liens mais sa ne fonctionne pas, il faut peut être pas mettre onblur ?

voila comment j'ai fais:
<div id="tag_update" onblur="parti();">


c'est surement un autre evenement qu'il faut mettre alors parce onblur vu que le focus est sur le champ et non pas sur la div sa ne fonctionne pas
knostra67 a écrit :
j'ai testé la fonction parti() sur la div contenant les liens mais sa ne fonctionne pas, il faut peut être pas mettre onblur ?
Effectivement le onblur ne peut pas fonctionner puisqu'à aucun moment la DIV ne prend le focus...

Une possibilité (qui pose peut-être des problèmes ergonomiques mais il me semble que non) serait de remettre l'appel de parti sur le onblur de l'INPUT de recherche sauf que le premier test serait de vérifier que l'on n'est pas en train de survoler les liens.

En résumé :
<script type="text/javascript">
var isListDisplayed = false;

function parti() {
	if(!isListDisplayed) document.getElementById('tag_update').style.display = "none";
}

function switchListDisplayed(booleen) {
	isListDisplayed = booleen;
}
</script>
...
<div id="tag_update" style="display:none" onmouseover="switchListDisplayed(true)" onmouseout="switchListDisplayed(false)">

Modifié par Heyoan (24 Jan 2010 - 19:07)
T'es un killer, c'est chaud le javascript je trouve pour moi.

en tous cas ta solution (que j'ai pas encore saisi mais je vais regarder ça) fonctionne à merveille !!!!!!


merci beaucoup et bonne soirée.