[jQuery] [Youtube Api Data V3] Problème avec la récupération des donnés d'une recherche youtube.

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
VinceGh
Messages : 3
Enregistré le : 05 sept. 2017, 21:26

[jQuery] [Youtube Api Data V3] Problème avec la récupération des donnés d'une recherche youtube.

Message par VinceGh » 05 sept. 2017, 21:29

Bonjour,

Je souhaite créer une page web qui permet d'afficher les résultats d'une recherche youtube à partir d'un mot clé. Le problème est que lorsque que j'entre le mot clé et que le lance la requête, il ne se passe rien : aucun résultats affiché et aucune erreur dans la console alors que l'ai codé. Voici le code :

Ficher index.html

Code : Tout sélectionner

<!DOCTYPE html>
<html>
    <head>
        <title>SearchVideo</title>
        <link rel="stylesheet" href="css/style.css">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script src="js/script.js"></script>
    </head>
    <body>
        <div id="container">
            <header>
                <h1>Search<span>Video</span></h1>
                <p>Search all youtube video</p>
            </header>
            <section>
                <form id="search-form" name="search-form"  onsubmit="event.preventDefault(); return search();">
                    <div class="fieldcontainer">
                        <input type="search" id="query" class="search-field" placeholder="Search YouTube...">
                        <input type="submit" name="search-btn" id="search-btn" value="">
                    </div>
                </form>
                <ul id="results"></ul>
                <div id="buttons"></div>
            </section>
            <footer>
                <p>Copyright &copy; 2017 All Rights Reserved</p>
            </footer>
        </div>
    </body>
</html>

Fichier style.css (c'est au cas ou mais je pense qu'il ne sert à rien)

Code : Tout sélectionner

*{
    padding:0;
    margin:0;
}

body{
    font-family:"Segoue", sans-serif;
    line-height:1.6em;
    color:#666;
    background:#e1e1e1 url(../img/creampaper.jpg);
    font-size:14px;
}
a{
    color:#333;
    text-decoration:none; 
}

#container{
    width:740px;
    background:#fff;
    margin:auto;
}
.clearfix{
    clear: both;
}
header{
    padding: 30px 20px;
    background: #f4f4f4;
}
header hl{
    color: #000;
    margin-bottom:5px;
}
header span{
    color:#dd2826;
}
section{
    padding:30px 20px 20px 20px
}
footer{
    padding:20px;
    background: #f4f4f4;
    text-align: center
}

#search-form{
    display: block;
    margin-bottom: 15px;
}

.fieldcontainer{
    display: block;
    position: relative;
    width: 90%;
    margin: 0 auto;
}

.search-field{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    width: 45%;
    padding: 11px 7px;
    padding-right: 43px;
    background: #fff;
    color: #000000;
    border: 1px solid #c8c8c8;
    font-size: 1.6em;
    border-bottom-color: #d2e2e7;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    -moz-box-shadow:inset 0 1px 2px rgb(0,0,0,0.1), 0 0 0 6px #f0f0f0;
    -webkit-box-shadow:inset 0 1px 2px rgb(0,0,0,0.1), 0 0 0 6px #f0f0f0;
    box-shadow:inset 0 1px 2px rgb(0,0,0,0.1), 0 0 0 6px #f0f0f0;
}

#search-btn{
    position:absolute;
    background:url(../img/search.png) top left no-repeat;
    background-size: 100% 100%;
    right:360px;
    top:5px;
    height:35px;
    width:35px;
    border:0;
    cursor:pointer;
    zoom:1;
    filter:alpha(opacity=65);
    opacity:0.65;
}

#search-btn:hover{
    filter: alpha(opacity=90);
    opacity: 0.9;
}

Fichier script.js (qui contient la function de requête vers youtube)

Code : Tout sélectionner

//Searchbar Handler
$(function(){
    var searchField = $('#query');
    var icon = ('#search-btn');

    // Focus Event Handler
    $(searchField).on('focus',function(){
        $(this).animate({
            width:'100%'
        }, 400);
        $(icon).animate({
            right:'10px'
        }, 400);
    });

    //Blur Evend Handler
    $(searchField).on('blur', function(){
        if(searchField.val() == ''){
            $(searchField).animate({
                width:'45%'
            }, 400, function(){});
            $(icon).animate({
                right:'360px'
            }, 400, function(){});
        }
    })
});


function search(){
    // clear Results
    $('#results').html('');
    $('#buttons').html('');

    //Get Form Input
    q = $('#query').val();
    // Run GET Request on API
    $.get(
      "https://www.googleapis.com/youtube/v3/search",{
          part: 'snippet, id',
          q: q,
          type: 'video',
          key: 'AIzaSyAvwn7gqVOb0XTJFsJg2PKQEBgk3VJ-JHc'},
          function(data){
            var nextPageToken = data.nextPageToken;
            var prevPageToken = data.prevPageToken;

            console.log(data);

            $.each(data.items, function(i, items){
              var output = getOutput(items);

              // Display Result
              $('#results').append(output);
            });
          }  
    );
}

// Build Output

function getOutput(items) {
    var videoId = items.id.videoId
    var title = items.snippet.title;
    var description = items.snippet.description;
    var thumb = items.snippet.thumbnails.high.url;
    var ChannelTitle = items.snippet.ChannelTitle;
    var videoDate = items.snippet.publishedAt;

    // Build Output String
    var output = '<li>' +
    '<div class="list-left">' +
    '<img scr="'+thumb+'">' +
    '<div/>' +
    '<div class="list-right">' +
    '<h3>'+title+'</h3>'
    '<small>By <span class="cTtitle">'+ChannelTitle+'</span> on '+videoDate+'<small>'+
    '<p>'+description+'</p>'+
    '</div>' +
    '</li>' +
    '<div class="clearfix"></div>' +
    '';

    return output;
}
Merci à l'avance pour votre aide.
Cordialement
Modifié en dernier par VinceGh le 06 sept. 2017, 17:30, modifié 1 fois.

Avatar du membre
Frosty
Messages : 82
Enregistré le : 20 juil. 2017, 13:23
Localisation : Grenoble

Re: [jQuery] [Youtube Api Data V3] Problème avec la récupération des donnés d'une recherche youtube.

Message par Frosty » 06 sept. 2017, 12:18

Salut

J'ai mis tout le code dans un JSfiddle pour tester, j'ai pu faire une version qui fonctionne :
https://jsfiddle.net/FrostyZ/nr1y2Lu1/2/

Principalement au niveau du "onsubmit" du formulaire il fallait rajouter une instruction event.preventDefault() sinon le formulaire se "soumet" sans que la requete Ajax ne soit exécutée.
Voir : https://stackoverflow.com/questions/866 ... submission

VinceGh
Messages : 3
Enregistré le : 05 sept. 2017, 21:26

Re: [jQuery] [Youtube Api Data V3] Problème avec la récupération des donnés d'une recherche youtube.

Message par VinceGh » 06 sept. 2017, 17:26

Merci pour ton aide Froty,
Je l'ai essayé et ça fonctionne, mais le problème est qu'il y a que le titre qui s'affiche. Je comprends pas pourquoi la miniature ne s'affiche pas. Pourtant je l'ajoute bien avec : <img scr=" '+thumb+' "/>, ligne 73 dans le script.js. C'est bizarre.

J'ai aussi mis à jour le code dans le premier post avec le lien que tu m'a donné.

Avatar du membre
Frosty
Messages : 82
Enregistré le : 20 juil. 2017, 13:23
Localisation : Grenoble

Re: [jQuery] [Youtube Api Data V3] Problème avec la récupération des donnés d'une recherche youtube.

Message par Frosty » 06 sept. 2017, 18:50

Attention c'est pas <img scr=... /> mais <img src=... />

VinceGh
Messages : 3
Enregistré le : 05 sept. 2017, 21:26

Re: [jQuery] [Youtube Api Data V3] Problème avec la récupération des donnés d'une recherche youtube.

Message par VinceGh » 06 sept. 2017, 19:33

Merci, j'avais pas vu mon erreur...

Répondre