I am working with ckeditor. I am using below code. addEventListener
is not working here. I am not getting any error in console also.
function imageSelect(evt) {
alert('hello');
}
CKEDITOR.on( 'dialogDefinition', function( ev )
{
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( dialogName == 'image' )
{
dialogDefinition.addContents({
id : 'uploadTab',
label : 'Upload',
elements : [
{
type: 'text',
id: 'uploadField',
label: 'Search images',
onInput: function() {
var textBox = this.getInputElement();
var value = textBox.getValue();
if( value !== "") {
var URL = "https://pixabay.com/api/?key="+API_KEY+"&q="+encodeURIComponent(value);
var currentPage = 1;
var perPage = 100;
var totalPages = 0;
var totalHits = 0;
function showImages(data) {
if (parseInt(data.totalHits) > 0) {
totalHits = parseInt(data.totalHits);
totalPages = Math.ceil(totalHits / perPage);
var images = "";
$.each(data.hits, function (i, hit) {
images += "<img class='upload_image' src='" + hit.webformatURL + "' alt='" + hit.tags + "' width='50' height='60'>";
});
document.getElementById("upload_image_p").innerHTML = "";
document.getElementById("upload_image_p").innerHTML += "<div id='container'>"+ images +"</div>";
var imgs = document.getElementsByClassName('upload_image');
for (var i = 0; i < imgs.length; i++) {
imgs[i].addEventListener('click', imageSelect); //addEventListener is not working here
}
// show pagination buttons
var pagination = "<div id='pagination'>";
pagination += "<button id='prevBtn'>Prev</button>";
pagination += "<button id='nextBtn1'>Next</button>";
pagination += "</div>";
document.getElementById("container").innerHTML += pagination;
// add event listeners to pagination buttons
var prevBtn = document.getElementById('prevBtn');
var nextBtn1 = document.getElementById('nextBtn1');
prevBtn.addEventListener('click', function () {
currentPage--;
getImages(currentPage);
nextBtn1.disabled = false;
});
if (currentPage === 1) {
prevBtn.disabled = true;
}
nextBtn1.addEventListener('click', function () {
currentPage++;
getImages(currentPage);
prevBtn.disabled = false;
});
if (currentPage === totalPages) {
nextBtn1.disabled = true;
}
} else {
document.getElementById("container").innerHTML = "No hits";
}
}
function getImages(page) {
var pageURL = URL + "&page=" + page + "&per_page=" + perPage;
$.getJSON(pageURL, function (data) {
showImages(data);
});
}
// show loading icon
document.getElementById("upload_image_p").innerHTML = '<img src="./assets/img/loading_icon.gif">';
// fetch first page of images
getImages(currentPage);
}
else {
document.getElementById("upload_image_p").innerHTML = "";
document.getElementById("upload_image_p").innerHTML += '<img src="./assets/img/loading_icon.gif">';
}
}
},
{
type: 'html',
id: 'upload_html',
html: '<div id="upload_image_p"><img src="./assets/img/loading_icon.gif"></div>',
}
]
});
}
});