Home/ Questions/Q 6637991
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T23:22:54+00:00

I want to add a search box for getting started example (Hello, World) on

  • 0

I want to add a search box for getting started example (Hello, World) on chrom extensions http://code.google.com/chrome/extensions/getstarted.html, I was able to add a search box so I can change the word/s are used to get different thumbnails (“text=hello%20world”).

The problem I faced is how to refresh the contents with a new thumbnails, for ex.:

If I want to search for word jerusalem and click go button the contents (thumbnails) will be updated with a new thumbnails for jerusalem

Do I need to use AJAX? Please explain.

Thanx for any help.

====================
I included jquery in popup.html

Inside showPhotos() function I did the following:

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');
}}

The extension just work for the first time and the go button stop responding, where is the wrong in my code?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This example is already using AJAX, aka XHR(XMLHttpRequest).
    All you need to do is put the request inside a function to be able to call it again later.
    Also You’ll need to remove the previous thumbs before appending the new ones(see the first line of ‘showPhotos’ function).

    Here’s a working example:
    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;
}
    • 0