Récupération de données du fichier php

[cylvain]

Bonjour,

Du côté client de mon site, j'ai un éditeur html, avec des éléments drag and drop tel que "header", "paragraph".....
Je voudrais ajouter à cette barre un nouvel élément qui une fois mis dans mon container m'ouvre un pop up avec un champ de référence à remplir, celui-ci récupérerait les informations de ma requête formulé dans mon ficher .php et les afficherait dans mon container.
Je rencontre plusieurs problèmes à mon projet

Dans mon fichier html pour afficher mon element drag and drop

Code: Tout sélectionner

<div class="box box-element" data-type="Chien">
                                    <a href="#close" class="remove btn btn-danger btn-xs"><i class="glyphicon glyphicon-remove"></i></a>
                                    <a class="drag btn btn-default btn-xs"><i class="glyphicon glyphicon-move"></i></a>
                                    <span class="configuration">
                                        <a class="btn btn-xs btn-warning settings"  href="#" ><i class="fa fa-gear"></i></a>
                                    </span>

                                    <div class="preview">
                                        <i class="fa fa-gear fa-2x"></i>
                                        <div class="element-desc">Chien</div>
                                    </div>
                                    <div class="view">
                                    <div id="results">
                                    </div>   
                                        <br/>
                                        <br/>
                                    </div>
                                </div>

Puis pour afficher mon champ dans la boite de dialogue une fois mis dans ma page

Code: Tout sélectionner

<div class="form-group">

             <form action="" method="post">

              <input class="form-control" type="text" id="lof" name="lof" placeholder="N° LOF du chien">

               </form>
               </div>

Puis dans mon fichier .js pour récupérer les éléments dans ma bdd et les afficher

Code: Tout sélectionner

$(document).ready( function() {
      $("#lof").keyup(function() {
        var lof = $('#lof').val();
        $.post('bdd.php', {'lof':lof}, function(data) {
            $('#results').html(data); // affichage des résultats dans le bloc
        });
         });
          });

Problèmes

1) le champ lof apparait dans tout mes éléments
2) lorsque je tape un lof dans le champ, la réponse s'affiche dans mon icône drag and drop, donc je dois la remettre dans la page pour afficher le résultat.
3) l'affichage se fait mais j'ai tout les résultats qui forme ma référence du lof
ex : n°52
affichage : chien 5, chien 2, chien 25 et chien 52.

Pour le problème 1 et 2 je pense que cela provient d'une div pour le problème 3 je pense utiliser un mauvais script.

Est ce que quelqu'un à une idée?

Merci

[Galdon]

Pourrais-tu reproduire ta page de test sur https://jsbin.com/ ou https://jsfiddle.net/ pour qu'on puisse tester en live et rendre tout ça plus concret ?

Si tu as de l'ajax tu peux les remplacer par des données en dur (des bouchons), directement en javascript (var bouchon = {name:"Lorem ipsum",...}).

[cylvain]

Bonjour,


Vous pouvez voir l'application http://s595535565.onlinehome.fr l'application, pour tester un numero de lof :307266

Mon fichier index http://s595535565.onlinehome.fr/ind

Mon fichier app http://s595535565.onlinehome.fr/app
et ma requête php http://s595535565.onlinehome.fr/php[/url]

c'est plus simple pour moi,

le problème le plus important est que lorsque je tape ma référence, il faut que je re-glisse un élément "chien" dans mon container et il m'affiche toute les résultat qui constitue les nombres et non pas que la référence tapée.


Merci pour votre aide

[Galdon]

Je ne trouve pas le callback qui réagit au clic sur le bouton Apply changes.

Est-ce que tu t'es basé sur un exemple ou un projet existant pour développer cette interface d'administration ? Si oui, est-ce qu'il y a une documentation de l'API ?

[cylvain]

Bonjour,

Ce n'est pas moi qui est développé cette appli, j'ai rajouté juste des éléments, il n'y a rien sur l'API dans la doc, par contre pour le bouton Apply changes il agit avec un confirm.unbind.

[Galdon]

Dans ce cas ça risque d'être un peu long, à mon avis il faut commencer par faire un peu de "reverse engineering" pour comprendre le fonctionnement de la création des différents éléments dans la "grille", en utilisant un debugger pas à pas (comme celui fourni avec le navigateur chrome, qui est vraiment pratique), et chercher comment sont créés les nouveaux éléments lors du drag & drop.

Il y a peut-être un élément "modèle" caché qui est simplement cloné lors du drag & drop, et modifié involontairement par ton code, ce qui fait que ton code affecte le modèle au lieu de "l'instance" du bloc.

[cylvain]

Ok,
Effectivement dans le fichier on retrouve

Code: Tout sélectionner

var clone = part.clone();
    var confirm = $('#applyChanges');

et

Code: Tout sélectionner

var clonedPart = clone.find('div.view').html();

puis dans les "case" nous retrouvons cette commande

Peut être faudrait il que j'adapte mon

Code: Tout sélectionner

$(document).ready( function() {
      $("#lof").keyup(function() {
        var lof = $('#lof').val();
        $.post('bdd.php', {'lof':lof}, function(data) {
            $('#results').html(data); // affichage des résultats dans le bloc
        });
         });
          });

dans une case sur le même schéma que les autres ....
comme tu as pu t'en apercevoir je ne suis pas à l'aise avec le concept java, en tout cas merci beaucoup, pour le temps que tu as passé sur mon problème.
Encore merci.

[cylvain]

Salut,
j'ai lu pas mal de topiques notamment sur l’objet XMLHttpRequest
je vais essayer de voir cela

par contre j'ai testé autre chose, tu peux le voir http://s595535565.onlinehome.fr/catalogueB/

j'ai fait une barre de recherche dans ma barre latérale

Code: Tout sélectionner

                        <ul class="nav nav-list">
                            <li class="nav-header"><i class="fa fa-search"></i>  RECHERCHER</li>
                            <li class="nav-header">
                                <form action="" method="post">
                                    <div class="form-group">
                                        <input class="form-control" type="text" id="lof" name="lof" placeholder="N° LOF du chien">
                                    </div>
                                </form>
                            </li>
                        </ul>

Puis j'ai mis ma div dans l'élément drag & drop "chien"

Donc maintenant lorsque j'entre une reference dans ma barre de recherche (ex:663573) et que je glisse mon élément chien dans la page cela fonctionne, par contre j'ai toujours le problème que cela m'affiche tout les chiens qui dont les chiffres de la référence les compose!
pour avoir la reference exact il faut que je face "espace" après avoir tapé la référence puis un effacement de cet espace.

Tu n'aurais pas une idée pour éviter cela? il faudrait que ca me prenne la référence exacte.


Merci

[Galdon]

pour avoir la reference exact il faut que je face "espace" après avoir tapé la référence puis un effacement de cet espace.

Ça c'est à cause du paramètre de la clause LIKE dans la requête SQL (http://s595535565.onlinehome.fr/php) :

Code: Tout sélectionner

$pdo_select->execute(array(
    ':lof' => '%'.$lof.'%'
));

Il faut enlever les % (en MySQL c'est un métacaractère qui veut dire "n'importe quel caractère, 0-n fois", ça équivaut à .* dans une regex pcre) pour que ça cherche le code exact :

Code: Tout sélectionner

$pdo_select->execute(array(
    ':lof' => $lof
));

[cylvain]

Merci

pour ton aide, ton forum fait parti de mes favoris à présent


Merci encore pour toute tes explications ainsi que le temps que tu as perdu à chercher.

Merci