Добавить окно поиска для начала поиска - PullRequest
Новая
       0

Добавить окно поиска для начала поиска

2 голосов
/ 03 октября 2011

Я хочу добавить окно поиска для примера начала работы (Hello, World) для расширений chrom http://code.google.com/chrome/extensions/getstarted.html, Мне удалось добавить окно поиска, чтобы я мог изменить слово / слова, которые используются для получения разных миниатюр ( "текст = привет% 20world").

Проблема, с которой я столкнулся, заключается в том, как обновить содержимое новыми миниатюрами, например:

.

Если я хочу найти слово jer Jerusalem и нажать кнопку «Перейти», содержимое (миниатюры) будет обновлено новыми миниатюрами для Иерусалима

Нужно ли использовать AJAX? Пожалуйста, объясните.

Спасибо за любую помощь.

==================== Я включил jquery в popup.html

Внутри функции showPhotos () я сделал следующее: 

function showPhotos() {
//Remove previous thumbs if any
for (var i = document.images.length; i-- > 0;) document.body.removeChild(document.images[i]);

var photos = req.responseXML.getElementsByTagName("photo");
for (var i = 0, photo; photo = photos[i]; i++) {
    var img = document.createElement("image");
    var span = document.createElement("span");
    var span1 = document.createElement("span");

    $(span1).attr('id', 'innerSpan');
    $(span1).attr('style', 'text-align:center;color:#ffffff;');
    $(span1).addClass('tooltip black bottom center w100 slide-up');
    $(span1).html('<i>' + photo.getAttribute("title") + '</i>');

    $(span).addClass('savytip');
    $(span).attr('id', 'outerSpan');

    $(img).attr('src', constructImageURL(photo));

    $(span1).appendTo(span);
    $(img).appendTo(span);

    $(span).appendTo('body');
}}

Расширение просто работает в первый раз, и кнопка «Перейти» перестает отвечать. Где же ошибка в моем коде?

1 Ответ

3 голосов
/ 03 октября 2011

В этом примере уже используется AJAX, он же XHR (XMLHttpRequest).Все, что вам нужно сделать, это поместить запрос внутрь функции, чтобы иметь возможность вызвать его снова позже.Также Вам необходимо удалить предыдущие превью, прежде чем добавлять новые (см. Первую строку функции 'showPhotos').

Вот рабочий пример: popup.html 

<html>
<head>
    <script type="text/javascript" src="popup.js"></script>
    <link rel="stylesheet" type="text/css" href="popup.css">
</head>
<body onload="search()">
    <input id="query" value="Hello World"><input type="button" value="go" onclick="search()">
</body>
</html>

popup.js 

function search() {
    request(document.getElementById('query').value);
    return false;
}

function request(query) {
    window.req = new XMLHttpRequest();
    req.open(
    "GET",
    "http://api.flickr.com/services/rest/?" +
        "method=flickr.photos.search&" +
        "api_key=90485e931f687a9b9c2a66bf58a3861a&" +
        "text="+encodeURI(query)+"&" +
        "safe_search=1&" +  // 1 is "safe"
        "content_type=1&" +  // 1 is "photos only"
        "sort=relevance&" +  // another good one is "interestingness-desc"
        "per_page=20",
    true);
    req.onload = showPhotos;
    req.send(null);
}

function showPhotos() {
  //Remove previous thumbs if any
  for(var i=document.images.length;i-->0;) document.body.removeChild(document.images[i]);

  var photos = req.responseXML.getElementsByTagName("photo");
  for (var i = 0, photo; photo = photos[i]; i++) {
    var img = document.createElement("image");
    img.src = constructImageURL(photo);
    document.body.appendChild(img);
  }
}

// See: http://www.flickr.com/services/api/misc.urls.html
function constructImageURL(photo) {
  return "http://farm" + photo.getAttribute("farm") +
      ".static.flickr.com/" + photo.getAttribute("server") +
      "/" + photo.getAttribute("id") +
      "_" + photo.getAttribute("secret") +
      "_s.jpg";
}

popup.css 

body {
  min-width:357px;
  overflow-x:hidden;
}

img {
  margin:5px;
  border:2px solid black;
  vertical-align:middle;
  width:75px;
  height:75px;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...