Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>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).</p> <p>Here's a working example: <strong>popup.html</strong></p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="popup.js"&gt;&lt;/script&gt; &lt;link rel="stylesheet" type="text/css" href="popup.css"&gt; &lt;/head&gt; &lt;body onload="search()"&gt; &lt;input id="query" value="Hello World"&gt;&lt;input type="button" value="go" onclick="search()"&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>popup.js</strong></p> <pre><code>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&amp;" + "api_key=90485e931f687a9b9c2a66bf58a3861a&amp;" + "text="+encodeURI(query)+"&amp;" + "safe_search=1&amp;" + // 1 is "safe" "content_type=1&amp;" + // 1 is "photos only" "sort=relevance&amp;" + // 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--&gt;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"; } </code></pre> <p><strong>popup.css</strong></p> <pre><code>body { min-width:357px; overflow-x:hidden; } img { margin:5px; border:2px solid black; vertical-align:middle; width:75px; height:75px; } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POAdd search box for getting started search box
      singulars
      1. PTQuestion
    1. PTAnswer
    1. UScsguimaraes
    1. UScsguimaraes
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POAdd search box for getting started search box
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    1. COhello, thank u for ur help, a small problem happened when I click on go button the popup window reload with the same thumbnails even after I change the value of the text field, when I repeat the process again the go button stops submitting and nothing happens...
      singulars
      1. PO
      1. USYa Basha
    2. COReally strange. Here it's is reloading for the first submit and working properly for subsequent submissions and I don't know why. So I've just removed the form and put the search call on the onclick event.
      singulars
      1. PO
      1. UScsguimaraes
    3. COhi, if u check above, I have added the code I use inside showPhotos(). I use jQuery 1.6.4, I don't get it why this happen, try to figure out
      singulars
      1. PO
      1. USYa Basha
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload