Problème affichage json

specha
Javascript

Bonjour,

J'ai fais un barre de recherche et j'essaie de mettre en place un auto-completion mais je sais pas pourquoi sa marche pas j'ai bien le retour json dans la console de Firebug sous la forme[{"nom":"la beaut\u00e9"},{"nom":"le paris"},{"nom":"le vertige"}] mais l'auto-complétion ne fonctionne pas .
logement.php

function logement(){
  $bdd = db_connect();

if(isset($_GET['query']) && !empty($_GET['query'])){

  $sql = "SELECT nom FROM logements WHERE nom LIKE :nom";
  $req = $bdd->prepare($sql);
  $req->bindValue('nom', (isset($_GET['query']) ?  '%' .$_GET['query'] . '%' : "" ), PDO::PARAM_STR);
  $req->execute();
  $result = $req->fetchAll(PDO::FETCH_OBJ);
  $req->closeCursor();

 echo json_encode($result);
       }
    }
logement();

custom.js

$(document).ready(function() {

var data = new Bloodhound({
           datumTokenizer: function (datum) {
                return Bloodhound.tokenizers.whitespace(datum.nom);
            },
          queryTokenizer: Bloodhound.tokenizers.whitespace,
          remote: {
            url : "logement.php?query=%QUERY", 
            wildcard : "%QUERY"
            },
        });
data.initialize();
$('#search').typeahead({
          hint: false,
          highlight: true,
          minLength: 1
        },
        {
          name: "data",   
          displayKey: "nom",
          source: data.ttAdapter(),
          limit:5,

        });
});

je voudrais faire une auto-completion du style https://twitter.github.io/typeahead.js/examples/

18 réponses

AlexJM
Réponse acceptée

Tu mets bien le header json ?

specha
Auteur

salut merci pour ta réponse mais ou je dois mettre header json puisque le je suis un peu perdu 

header('Content-type: application/ json; charset=UTF-8');

me sort une erreur ce qui normal puisque je renvois 2 fois le content-type

Sparkosis

Bonjour, ton header doit se trouver en début de page. ton code js à l'air correct a première vue, cela viendrais donc de ton php. A bientot

AlexJM

Tout d'abord charset=UTF-8 n'est pas obligatoire, ensuite il n'y a pas d'espace après le / c'est application/json et dernièrement il faut mettre une majuscule à Type : Content-Type

Quelle est l'erreur ?

specha
Auteur

je savais pas qu'ilvaut une majuscule Content-Type (bon à savoir) et pour l'erreur

Warning: Cannot modify header information - headers already sent by (output started at C:\wamp\www\site\admin\includes_adm\functions_adm_htm.php:179) in C:\wamp\www\site\admin\test.php on line 9

EDIT je viens de me rendre compte que il me parle de la ligne 179 mais a la ligne 179 j'ai juste 

 <?php  if (isset($_SESSION['login'])) {   //ligne 179

                                 echo $_SESSION['login'];
                            }
                           elseif (isset($_COOKIE['login'])) {
                               echo $_COOKIE['login'];
                                }
                          ?>
AlexJM

Ca veut dire que tu as affiché du texte avant d'utiliser la fonction header, peux-tu montrer ton code ?

specha
Auteur

J'ai épuré un par exemple j'ai enlevé des liens du coup la ligne 179 se trouve à la ligne 97.
functions_adm_htm.php

<?php
function htm_admin_header($messageFlash, $titlepage)
{
    global $language_adm;

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" lang="fr-FR">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<title><?php echo $language_adm['lien_haut_title']; ?></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script  type="text/javascript" src="assets/js/jquery-1.12.3.js"></script>
 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>  
   <!-- BOOTSTRAP SCRIPTS -->
   <!-- <script type="text/javascript" src="assets/js/npm.js"></script> -->
   <script type="text/javascript" src="assets/js/bootstrap.js"></script>
   <script type="text/javascript" src="assets/js/typeahead.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" ></script>

    <!-- CUSTOM SCRIPTS -->
  <script type="text/javascript" src="assets/js/custom.js"></script>
  <script type="text/javascript" src="assets/js/functions_js.js"></script>

<link href="assets/css/bootstrap_adm.css" type="text/css" rel="stylesheet" />
<link href="assets/css/style_adm.css" type="text/css" rel="stylesheet" />

</head>
<body>
     <div id="wrapper">
        <nav class="navbar navbar-default navbar-cls-top " role="navigation" style="margin-bottom: 0">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a  class="navbar-brand" href="index.php"><?php echo $language_adm['nom_site'];  ?> 

                </a>
            </div>

            <div class="notifications-wrapper">
             <ul class="dropdown-menu dropdown-tasks">

                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-user-plus"></i>  <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li><a href="#"><i class="fa fa-user-plus"></i> My Profile</a>
                        </li>
                        <li class="divider"></li>
                        <li><a href="./logout.php"><i class="fa fa-sign-out"></i> Logout</a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a class="dropdown-toggle"  target="_blank" href="../index.php">
                        <i class="fa fa-globe"></i><i class="fa fa-sign-in"></i>
                    </a>

                </li>
             </ul>

            </div>
        </nav>
        <!-- /. NAV TOP  -->

<nav  class="navbar-default navbar-side" role="navigation">
  <div class="sidebar-collapse">
      <ul class="nav" id="main-menu">
          <li>
              <div class="user-img-div">
                  <img src="assets/img/user.jpg" class="img-circle" />

              </div>

          </li>
           <li>
              <a  href="#"> <strong> 
              <?php  if (isset($_SESSION['login'])) {

                  echo $_SESSION['login'];
              }
               elseif (isset($_COOKIE['login'])) {
                  echo $_COOKIE['login'];
              }

                ?> </strong></a>
          </li>

          <li>
             <a href="categorie.php"><i class="fa fa-folder-o"></i><?php echo $language_adm['categorie']; ?></a>
          </li>

          <li>
              <a href="forms.html"><i class="fa fa-code "></i>Paramêtre<span class="fa arrow"></span></a>
                  <ul class="nav nav-second-level">
                      <li>
                           <a href="seo_url.php"><i class="fa fa-cogs "></i> Seo et Url</a>
                      </li>
                      <li>
                          <a href="pack.php"><i class="fa fa-sitemap "></i>Pack</a>
                      </li>

                  </ul>
          </li>     

      </ul>
  </div>

</nav>

       <!--haut de page coloone droite -->
       <div id="page-wrapper" class="page-wrapper-cls">
            <div id="page-inner"> <?php echo $messageFlash?>

                <div class="row">
                    <div class="col-md-12">
                        <h1 class="page-head-line"><?php echo htmlspecialchars($titlepage) ?></h1>
                    </div>
                </div>

                <div class="col-md-12">
                    <ul class="breadcrumb">
                        <li><a href="index.php">Accueil</a>
                        </li>
                        <li><a href="javascript:window.history.go(-1)">Retour</a></li>
                    </ul>
                </div> 

<?php

}

test.php

<?php
session_start();
require_once('includes_adm/all_functions_adm.php');
$message = "";
$title = "test";
htm_admin_header($message, $title);
htm_form();

htm_form.php

<?php
function htm_form($result){
?>
<form  method="POST" action="<?php $_SERVER['PHP_SELF'] ?>">
<div class="tab-content col-md-10 well">
        <div class="tab-pane active" id="tab_a">
             <h4>Information sur le menu</h4>
            <div class="col-lg-3">
                <select name="resultat">
                   <?php foreach ($resultas $results) : ?>
                    <option><?php echo htmlspecialchars($results['nom']) ?></option>
                  <?php endforeach ; ?>
                </select>
            </div>
            <div class="input-group input-group-lg" id="searchTop">
              <input id="search" class="form-control" type="text" name="search" aria-describedby="sizing-addon1" placeholder="Rechercher Titre " autocomplete="off">
                  <span class="input-group-addon pushsearch" id="sizing-addon1">
                      <i class="glyphicon glyphicon-search "></i>
                  </span>

            </div>
            <div class="col-lg-12">
              <label for="nom">Nom du menu</label>
              <input id="nom" type="text" class="form-control" name="nom">
              <label for="description">Description</label>
              <textarea id="description" name="description" cols="0" rows="15"></textarea>
            </div>
 <?php         
}
AlexJM

C'est logement.php que j'ai besoin pour voir ou tu as mis la fonction header ;)

AlexJM

C'est test.php la page affichée dans le navigateur c'est ca ?

specha
Auteur

je me me suis planté j'aiposter la mauvaise page logement.php c'est juste un page qui fait appel la requête sql que je passe a test.php

htm_form.php

<?php
function htm_form(){
?>
<form  method="POST" action="<?php $_SERVER['PHP_SELF'] ?>">
<div class="tab-content col-md-10 well">
        <div class="tab-pane active" id="tab_a">
             <h4>Information sur le menu</h4>
            <div class="input-group input-group-lg" id="searchTop">
              <input id="search" class="form-control" type="text" name="search" aria-describedby="sizing-addon1" placeholder="Rechercher Titre " autocomplete="off">
                  <span class="input-group-addon pushsearch" id="sizing-addon1">
                      <i class="glyphicon glyphicon-search "></i>
                  </span>

            </div>
            <div class="input-group input-group-lg" id="searchTop">
              <input id="search" class="form-control" type="text" name="search" aria-describedby="sizing-addon1" placeholder="Rechercher Titre " autocomplete="off">
                  <span class="input-group-addon pushsearch" id="sizing-addon1">
                      <i class="glyphicon glyphicon-search "></i>
                  </span>

            </div>
            <div class="col-lg-12">
              <label for="nom">Nom du menu</label>
              <input id="nom" type="text" class="form-control" name="nom">
              <label for="description">Description</label>
              <textarea id="description" name="description" cols="0" rows="15"></textarea>
            </div>
 <?php         
}

test.php

<?php
session_start();
require_once('includes_adm/all_functions_adm.php');
$message = "";
$title = "test";
htm_admin_header($message, $title);
header('Content-Type: application/json');
logement();
htm_form();
AlexJM

Attend je comprends plus trop. Test.php c'est la page affichée dans le navigateur c'est ca ?

specha
Auteur

oui c’est ça, logement.php c'est juste une requête sql donc la page est pas affiché

AlexJM

dans test.php tu n'as pas besoin d'appeler ni logement ni le header, ca il faut juste les mettre dans le fichier appelé en ajax

specha
Auteur

ok mais du coup tu me parlais du header json, je vois pas ou je peux déclarer à par de la balise meta.

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
AlexJM

Le header json c'est pour le fichier appelé en json ;) la page html affichée reste telle qu'elle

specha
Auteur

je sais pas je pense avoir une ereur de conception puisque j'ai mis le header json dans logement.php mais ca marche pas

specha
Auteur

enfaite non tu as bien raison c'est bien ca j'avais juste fais une erreur de frappe un grand merci a toi

AlexJM

De rien ;)