Partage
  • Partager sur Facebook
  • Partager sur Twitter

autocomplete() + ajax fonctionne pas avec chrome

requete autocomplete() avec jquery UI

Sujet résolu
9 juillet 2018 à 11:53:34

Bonjour communauté openclassroom,

j' ai une question a vous poser.

j' ai une requête autocomplete() avec ajax dans un input type search qui va recuperer un tableau json ecris en php .

Ma requete fonctionne sur firefox mais sur chrome j ai cette erreur : Failed to load http://www.projet5batv.ovh/index.php?page=jasonFilms&term=l&maxRows=15: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://projet5batv.ovh' is therefore not allowed access.

Voici mon code :

jquery UI + autocomplete() +ajax

$( document ).ready(function() {

    $('#search').autocomplete({
        source : function(requete, reponse){ // les deux arguments représentent les données nécessaires au plugin
        $.ajax({
                url : 'http://www.projet5batv.ovh/index.php?page=jasonFilms', // on appelle le script JSON
                dataType : 'json', // on spécifie bien que le type de données est en JSON
                data : {
                    term:requete.term,
                    maxRows : 15
                    
                },
                
                success : function(donnee){
                    reponse(donnee);
                        
                }
            });
        },
        minLenght:1,
        select:function(event,ui){
            $(location).attr('href','index.php?page=infoMovies&title='+ ui.item.label);
        }
    });

});


requete PDO

   public function getFilmsAuto($term){
        $db=$this->dbConnect();
        $req = $db->prepare("SELECT ba_films.title FROM  ba_films WHERE ba_films.title LIKE :term");
        $req->execute(array('term' => '%'.$term.'%'));
        
        return $req;
        
    }

Mon controller qui encode le résultat en json

class PageHome{
        
        /* * data to jason for search bar * */
        public function jasonFilms($term){
            $mediaManager = new ced\stream\model\HomeManager;
                $postFilms = $mediaManager -> getFilmsAuto($term);
                $array =[];
                while($donnee = $postFilms->fetch()){ 
                    
                array_push($array,$donnee['title']);
 
                }

                echo json_encode($array);
        }
    }

Mon routeur

/*data json for search */
		elseif ($_GET['page'] == 'jasonFilms'){
			$home = new PageHome;
			$home-> jasonFilms($_GET['term']);
		}

et la vue

 <form method="get">
                                <div class="input-group w-100">
                                    <input type="search" name="search" id="search" class="form-control  ">
                                    
                                    <div class="input-group-append">
                                        <button type="submit" class="btn btn-warning" name="submit">
                                            <span><i class="fas fa-search text-dark"></i></span>
                                        </button>         
                                    </div>
                                </div>
                            </form> 

voici l adresse de mon site en ligne si vous voulez tester sur chrome et firefox

http://www.projet5batv.ovh/

Je vous remercie d' avance pour toute aide :)

  • Partager sur Facebook
  • Partager sur Twitter
9 juillet 2018 à 13:31:02

Bonjour,

Et avec ça ? :

url : 'index.php?page=jasonFilms', // on appelle le script JSON



  • Partager sur Facebook
  • Partager sur Twitter
12 juillet 2018 à 0:31:46

Merci a toi @philodick ca fonctionne ce qui est bizarre quand je la mettais comme ça en locale ça fonctionnai pas du coup j' avais  pas pensé a retester de cette façon la sous serveur . Sinon il me reste plus qu  a récupérer l id et non le titre pour une bonne redirection.

Je mets le sujet en résolu .

-
Edité par CédricGodard 12 juillet 2018 à 0:36:13

  • Partager sur Facebook
  • Partager sur Twitter