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 += "<br><div class='c'>"
+ "<div class='b'><img src="+ item.link +" height=200px width=200px /></div><div class='a mn-video-title'> "
+ item.title+"</div></div>";
}
}).fail(function (data) {
console.log("error");
});
}); button#findNow {
height: 40px;
width: 154px;
margin: 20px;
border-radius: 5px;
}<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#" xml:lang="en-gb" lang="en-gb" slick-uniqueid="3" xmlns="http://www.w3.org/1999/xhtml">
<?php include 'header.php'; ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div id="lan_flanger">
<div id="lan_musictted">
<div id="rt-showcase">
<div class="clear"></div>
<div id="rt-maintop">
<div class="rt-container">
<div class="rt-grid-10 rt-alpha">
<div class="rt-block lan_album">
<div class="module-surround">
<div class="module-title mn-vidio">
<h2 class="title">TOP IMAGES</h2>
<form id="search-form" name="search-form">
<div style="margin-left:10px;" class="col-md-10"><input type="text" class="form-control sc" placeholder="Search...." id="search1" value="Funny" /></div>
<div class="col-md-2 md">
<span class="input-group-btn">
<button class="btn btn-info btn-md sc" style="margin-left:3px;" type="button" id="findNow" value="Search" >
Search <i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</form>
</div>
<div class="module-content">
<div class="content">
<div id="content11" style="display: inline-flex; margin-bottom: 15px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<?php include 'footer.php'; ?>
<div class="gf-menu-toggle" style="display: none;"></div>
<div class="gf-menu-device-wrapper-sidemenu">
<div class="gf-menu-device-container responsive-type-panel">
<div class="gf-menu-device-container-wrapper"></div>
</div>
</div>
</body>
</html>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
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 += "<br><div class='c'>" + "<div class='b'><img src=" + item.link + " height=200px width=200px /></div><div class='a mn-video-title'> " + item.title + "</div></div>";
}
}).fail(function(data) {
console.log("error");
});
})button#findNow {
height: 40px;
width: 154px;
margin: 20px;
border-radius: 5px;
}<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#" xml:lang="en-gb" lang="en-gb" slick-uniqueid="3" xmlns="http://www.w3.org/1999/xhtml">
<?php include 'header.php'; ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<div id="lan_flanger">
<div id="lan_musictted">
<div id="rt-showcase">
<div class="clear"></div>
<div id="rt-maintop">
<div class="rt-container">
<div class="rt-grid-10 rt-alpha">
<div class="rt-block lan_album">
<div class="module-surround">
<div class="module-title mn-vidio">
<h2 class="title">TOP IMAGES</h2>
<form id="search-form" name="search-form">
<div style="margin-left:10px;" class="col-md-10"><input type="text" class="form-control sc" placeholder="Search...." id="search1" value="Funny" /></div>
<div class="col-md-2 md">
<span class="input-group-btn">
<button class="btn btn-info btn-md sc" style="margin-left:3px;" type="button" id="findNow" value="Search" >
Search <i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</form>
</div>
<div class="module-content">
<div class="content">
<div id="content11" style="display: inline-flex; margin-bottom: 15px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<?php include 'footer.php'; ?>
<div class="gf-menu-toggle" style="display: none;"></div>
<div class="gf-menu-device-wrapper-sidemenu">
<div class="gf-menu-device-container responsive-type-panel">
<div class="gf-menu-device-container-wrapper"></div>
</div>
</div>
</body>
</html>