How to load Images from google custom search API onclick instead of onload

Question

var url = "https://www.googleapis.com/customsearch/v1?key= Your API Key &cx=005124428384360536924:rstfldysumw&q=funny&searchType=image&safe=high";
$(function () {
  var jqxhr = $.getJSON(url, function () {
    console.log("success");
  }).done(function (data) {
    for (var i = 0; i < 4; i++) {
      var item = data.items[i];    									
      document.getElementById("content11").innerHTML += "
" 
          + "
 "
          + item.title+"";
    }               
  }).fail(function (data) {
    console.log("error");
  });
});

button#findNow {
  height: 40px;
  width: 154px;
  margin: 20px;
  border-radius: 5px;
}

Hello Friends, I am new in google custom search API and jquery.

This code is perfect on page load but i want to load images on button click. How to load images on button click i tried other peoples code but it can't do what i want.

I want to get the URL of images from custom search and display that images in html.

so, please help me

prasanth · Accepted Answer

Add the json calling function inside the button click.And passing the input string to the URL

$('#findNow').on('click',function(){
 document.getElementById("content11").innerHTML ="";
var a =$('#search1').val();
var url = "https://www.googleapis.com/customsearch/v1?key= Your API Key &cx=005124428384360536924:rstfldysumw&q="+a+"&searchType=image&safe=high";
  var jqxhr = $.getJSON(url, function() {
    console.log("success");
  }).done(function(data) {
    for (var i = 0; i < 4; i++) {
      var item = data.items[i];
      
      document.getElementById("content11").innerHTML += "
" + "
 " + item.title + "";
    }
  }).fail(function(data) {
    console.log("error");
  });
})

button#findNow {
  height: 40px;
  width: 154px;
  margin: 20px;
  border-radius: 5px;
}

How to load Images from google custom search API onclick instead of onload

Answers (1)

Related Questions