title: AJAX not working occasionally
body: <p>I am trying to make a chrome extension which fetches IDs of Youtube videos, but am facing a problem. For first execution, the AJAX call gives me an error, but for all subsequent calls, works just fine. This happens every time I open the extension. I am new to the scene, and hence, please excuse me for any rookie mistakes. My code :-</p>
  
  <pre><code>function getIDs(data){
      var items = [];
      for(i in data.items){
          items.push(data.items[i].id.videoId.toString());
      }
      for(i in items){
          $('&lt;p&gt;'+items[i]+'&lt;/p&gt;&lt;br&gt;').appendTo('#results');
      }
  }
  
  function getVideo(searchQuery){
      searchQuery = searchQuery.replace(/ /g,'+');
      var queryURL = 'https://www.googleapis.com/youtube/v3/search?q='+searchQuery+'&amp;key=AIzaSyDq5SqWuQIEfIx7ZlQyKcQycF24D8mW798&amp;part=snippet&amp;maxResults=3&amp;type=video';
      $.ajax({
          url: queryURL,
          dataType: 'json',
          success: function(data) {   
              getIDs(data);
          },
          error: function(ts){
              alert(ts.responseText);
          }
      });
  }
  
  document.addEventListener('DOMContentLoaded',function(){
      var button = document.getElementById('search');
      var div = document.getElementById('results');
      button.addEventListener('click',function(){
          var input = document.getElementById('input');
          var result = input.value;
          getVideo(result);
      });
  });
  </code></pre>
  
  <p>I can't for the life of me figure out what is wrong. Thanks for the help in advance.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I forgot to mention, but it gives me an undefined error. Sorry !!</p>