Develop Reference

How Do I Pass Parameters To An OnClick Event Generated By a Dynamic Table Inside a Web Socket Event Using An EventListener

I have seen this issue on this site, as well as, scouring through the internet but feel that this case is unique. I have a couple of things going on here. The first is that this page accepts web socket messages. Next, I'm creating a table dynamically with the last cell using onClick. To further complicate matters I am trying to pass a parameter to my function called by onClick. If I don't pass any parameters it works fine. When someone clicks on the image I want to pass the original JSON to my function. This, of course, does not work. The web browser console shows evt and p1 as undefined. Even though, I have added EventListener for the click action. My guess is that I am passing parameters incorrectly in my EventListener but there is so much going on that I'm not sure what is causing the issue. Does anyone know why my clickMessageOne function is not being called?
window.addEventListener("load", init, false);
window.addEventListener("click", function (e) {clickMessageOne(e, p1)}, false); // doesn't work
<script language="javascript" type="text/javascript">
function init()
{
doConnect()
}
function doConnect()
{
websocket = new WebSocket("ws://192.168.1.198:8000/");
websocket.onopen = function(evt) { onOpen(evt) };
websocket.onclose = function(evt) { onClose(evt) };
websocket.onmessage = function(evt) { onMessage(evt) };
websocket.onerror = function(evt) { onError(evt) };
}
function onOpen(evt)
{
console.log("connected\n");
}
function onClose(evt)
{
console.log("disconnected\n");
}
function clickMessageOne(txt)
{
console.log("clickMessageOne");
// txt should be original json
console.log(txt);
}
function onMessage(evt)
{
console.log("incomingJSON: " + evt.data + '\n');
var recvObj = JSON.parse(evt.data);
if (recvObj.code == "test")
{
var table = document.getElementById("incomingTable");
var row = table.insertRow(1);
// 7 columns
var id = row.insertCell(0)
var testOneCell = row.insertCell(1);
var testTwoCell = row.insertCell(2);
var testThreeCell = row.insertCell(3);
var testFourCell = row.insertCell(4);
var testFiveCell = row.insertCell(5);
var testSixCell = row.insertCell(6);
var testSevenCell = row.insertCell(7);
var testEightCell = row.insertCell(8);
id.innerHTML = ""
testOneCell.innerHTML = "Incoming";
testTwoCell.innerHTML = recvObj.number;
testThreeCell.innerHTML = "";
testFourCell.innerHTML = recvObj.time;
testFiveCell.innerHTML = "";
testSixCell.innerHTML = recvObj.textOne;
testSevenCell.innerHTML = recvObj.textTwo;
console.log(evt.data) // prints JSON correctly
testEightCell.innerHTML = "<center><img src='test.png' onclick='clickMessageOne(evt.data)'></center>";
}
}
function onError(evt)
{
websocket.close();
}
window.addEventListener("load", init, false);
window.addEventListener("click", function (e) {clickMessageOne(e, p1)}, false); // doesn't work
function doDisconnect() {
websocket.close();
}
</script>

Remove dynamically created elements by class name Javascript

So, in plain terms I am creating a Chrome Extension that so far can only save links from the internet but not delete them. What I want to add is a "remove" button for deleting unwanted links. So far I haven't got that to work.
The buttons I want to remove are added using JavaScript. Each new block of HTML features a "remove" button but clicking that button does nothing. I have tried binding listeners to each element using a for loop but that doesn't seem to work.
The code runs without errors and I'm certain that the issue is a slight oversight but I have only just started using JavaScript so I'm lost for solutions at the moment.
I have included all the code because I don't want to leave out anything that might be imperative to finding a solution.
It starts with the code for adding a link, followed by removing a single link and then removing all links at once. Thank you all for any help, really want to get this working.
https://github.com/mmmamer/Drop Repository for the rest of the code. Mainly popup.html and popup.css.
var urlList = [];
var i = 0;
document.addEventListener('DOMContentLoaded', function() {
getUrlListAndRestoreInDom();
// event listener for the button inside popup window
document.getElementById('save').addEventListener('click', addLink);
});
function addLink() {
var url = document.getElementById("saveLink").value;
addUrlToListAndSave(url);
addUrlToDom(url);
}
function getUrlListAndRestoreInDom() {
chrome.storage.local.get({
urlList: []
}, function(data) {
urlList = data.urlList;
urlList.forEach(function(url) {
addUrlToDom(url);
});
});
}
function addUrlToDom(url) {
// change the text message
document.getElementById("saved-pages").innerHTML = "<h2>Saved pages</h2>";
var newEntry = document.createElement('li');
var newLink = document.createElement('a');
var removeButton = document.createElement('button');
removeButton.textContent = "Remove";
//removeButton.createElement('button');
removeButton.type = "button";
removeButton.className = "remove";
newLink.textContent = url;
newLink.setAttribute('href', url);
newLink.setAttribute('target', '_blank');
newEntry.appendChild(newLink)
newEntry.appendChild(removeButton);
newEntry.className = "listItem";
document.getElementById("list").appendChild(newEntry);
}
function addUrlToListAndSave(url) {
urlList.push(url);
saveUrlList();
//}
}
function saveUrlList(callback) {
chrome.storage.local.set({
urlList
}, function() {
if (typeof callback === 'function') {
//If there was no callback provided, don't try to call it.
callback();
}
});
}
// remove a single bookmark item
document.addEventListener('DOMContentLoaded', function() {
getUrlListAndRestoreInDom();
var allButtons = document.getElementsByClassName('remove');
function listenI(i) {
allButtons[i].addEventListener('click', () => removeMe(i));
}
for (var i = 0; i < allButtons.length; i++) {
listenI(i);
}
});
function removeMe(i) {
var fullList = documents.getElementsByClassName('listItem');
listItem[i].parentNode.removeChild(listItem[i]);
}
//remove all button
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("remove-all").addEventListener('click', function() {
var removeList = document.getElementsByClassName("listItem");
while(removeList[0]) {
removeList[0].parentNode.removeChild(removeList[0]);
}
})
});

chrome.storage.local.get() is asynchronous. So when you try to add the event listeners to the Remove buttons, they're not in the DOM yet.
You can add the listener in the addUrlToDom() function instead. That way you'll also add the event listener when you create new buttons.
function addUrlToDom(url) {
// change the text message
document.getElementById("saved-pages").innerHTML = "<h2>Saved pages</h2>";
var newEntry = document.createElement('li');
var newLink = document.createElement('a');
var removeButton = document.createElement('button');
removeButton.textContent = "Remove";
//removeButton.createElement('button');
removeButton.type = "button";
removeButton.className = "remove";
newLink.textContent = url;
newLink.setAttribute('href', url);
newLink.setAttribute('target', '_blank');
newEntry.appendChild(newLink)
newEntry.appendChild(removeButton);
removeButton.addEventListener("click", function() {
var anchor = this.previousElementSibling;
var url = anchor.getAttribute("href");
removeUrlAndSave(url);
this.parentNode.remove();
});
newEntry.className = "listItem";
document.getElementById("list").appendChild(newEntry);
}
function removeUrlAndSave(url) {
var index = urlList.indexOf(url);
if (index != -1) {
urlList.splice(index, 1);
saveUrlList();
}
}

Multiple event listeners for a class

I am trying to make multiple drag and drop areas. I am trying to add listeners for a "drop-zone" class (for every element with this class).
var dropZone = document.getElementById('some_area'); // ok
// var dropZone = document.getElementByClassName('drop-zone'); // not working
dropZone.addEventListener('dragover', function(e) {
e.stopPropagation();
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
});
dropZone.addEventListener('drop', function(e) {
var target_img = $(this).find('img');
e.stopPropagation();
e.preventDefault();
var files = e.dataTransfer.files; // Array of all files
for (var i=0, file; file=files[i]; i++) {
if (file.type.match(/image.*/)) {
var reader = new FileReader();
reader.onload = function(e2) { // finished reading file data.
var img = document.createElement('img');
img.src= e2.target.result;
target_img.attr('src',e2.target.result);
target_img.addClass('full-preview');
}
reader.readAsDataURL(file); // start reading the file data.
} } });

You need to query for all elements that have the specific class.
// Returns a list of the elements within the document
// that match the specified 'drop-zone' class.
var dropZones = document.querySelectorAll('.drop-zone');
for (var i = 0; i < dropZones.length; i++) {
// Add the event listeners for each element of the list.
dropZones[i].addEventListener('dragover', function (e) {
// ...
});
dropZones[i].addEventListener('drop', function (e) {
// ...
});
}

How to change ckeditor dialog default tab?

the code is worked , but only work on first time
if (dialogName == 'image') {
dialogDefinition.removeContents('upload');
dialogDefinition.removeContents('advanced');
dialogDefinition.removeContents('Link');
var infoTab = dialogDefinition.getContents('info');
infoTab.remove('txtAlt');
infoTab.remove('txtBorder');
infoTab.remove('txtHSpace');
infoTab.remove('txtVSpace');
infoTab.remove('cmbAlign');
dialogDefinition.onLoad = function () {
this.selectPage('Upload');
};
}
If I do not refresh the page , click the "image" button twice not be "Upload".
Need some help ,tks

you can put this code in config.js:
CKEDITOR.on('dialogDefinition', function (ev) {
// Take the dialog window name and its definition from the event data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if (dialogName == 'link') {
dialogDefinition.removeContents('advanced'); //remove advanced tab
var infoTab = dialogDefinition.getContents('info');
var urlField = infoTab.get('url');
urlField['default'] = 'www.ireadhome.com'; //set default value for the url field
}
});

HTML5 and File API in Chrome problem

I'm trying to get this piece of code work in Chrome (latest build 10.0.648.205) and it works as expected in Firefox. Here, the e.target.result of the showImage function is empty. Can anyone tell me what Am I doing wrong?
$(function () {
var dropbox = document.getElementById("dropimage");
dropbox.addEventListener("dragenter", function (e) {
this.className = "over";
e.preventDefault();
e.stopPropagation();
}, false);
dropbox.addEventListener("dragover", function (e) {
e.preventDefault();
e.stopPropagation();
}, false);
dropbox.addEventListener("dragleave", function (e) {
var target = e.target;
if (e && e === dropbox) {
this.className = "";
}
e.preventDefault();
e.stopPropagation();
}, false);
dropbox.addEventListener("drop", function (e) {
e.stopPropagation();
e.preventDefault();
var files = e.dataTransfer.files;
var count = files.length;
if (count > 0) {
handleFiles(files)
}
}, false);
function handleFiles(files) {
$("#droplabel").html("Processing...");
file = files[0];
var reader = new FileReader();
reader.onloadend = showImage;
reader.readAsDataURL(file);
}
function showImage(e) {
$("#playerImage").attr("src", e.target.result);
$("#droplabel").html("Done");
}
});
HTML is straight-forward (I took the lines that include the scripts for simplicity):
<html>
<body>
<img id="playerImage"/>
<div id="dropimage">
<span id="droplabel">Drop file here...</span>
</div>
</body>
</html>
Also, if I try to change the dropbox.addEventListener for jQuery's $.bind, it doesn't do anything at all. Any thoughts?

The problem was that I was opening the html as a file. Chrome doesn't like that, so I resolved the problem by placing my html file in the wwwroot folder and opening it using a localhost/dnd.html address.