CODEWITHSUNDEEP
javascriptnode.jssocketssocket.io
baao
baao

Reputation: 73211

socket.io gives two responses, but only one is excpected

I'm writing a program which makes use of socket.io. In this particular part, I'm sending a request and handle the answer.

CLIENT SIDE:

// ....
socket.emit('opendrow', a.id);
socket.on('opendrowresponse', function(msg) {

console.log(msg);
cell.innerHTML = msg;
// ....

SERVER SIDE HANDLE:

// ....
socket.on('opendrow',function(msg) {
    console.log(msg);
    connection2.query('SELECT * FROM testpreis WHERE id = '+msg, function(err,rows,fields) {
    if (err) throw err;
         io.to(socket.id).emit('opendrowresponse',rows)
    });
});
// ....

The client side code is within a click function:

var plusrow = document.getElementsByClassName('plusrow');
for (var i = 0;i<plusrow.length;i++) {
plusrow[i].addEventListener('click', collapse);
}

The collapse function basically extends a table, sends the request and inserts the response in the created table row.

I get this response on the first click on "plusrow":

Array [ Object ]

which is the expected response.

But then, if I click on another table row, I get two resultsets with the same content

Array [ Object ]
Array [ Object ]

and for every consecutive click, I get an Array of objects more though only one Array is expected.
The response is correct, so if I request eg. id 50, there are two responses for id 50, or three times for 50, depending on how many clicks I made before.

I've checked server side console and did a console.log of the requested id:

socket.on('opendrow',function(msg) {
    console.log(msg);

and the response for this is as expected only one id, eg.

51

I don't think that the rest of the collapse function has something to do with it, but here it is:

function collapse() {
var table = document.getElementById('pricingtable');
var a = this;
var aclassName = a.className.replace(' openchild','');
console.log(a.className);

console.log(a.className.indexOf('openchild'));


if (a.className.indexOf('openchild') >= 0) {
var childtodel = document.getElementById(a.id+'sub');
console.log(childtodel.rowIndex);
table.deleteRow(childtodel.rowIndex);
a.className = aclassName;
}
else {

document.getElementById(a.id).className += ' openchild';
console.log (a.id);
console.log(a.parentNode.rowIndex);

var element =  table.insertRow(a.parentNode.rowIndex + 1);
element.id = a.id+'sub';
//element.innerHTML = 'sdfalkj';
var cell = element.insertCell(0);
cell.colSpan = 8;
socket.emit('opendrow', a.id);
socket.on('opendrowresponse', function(msg) {

console.log(msg);
cell.innerHTML = msg;

});

}

}

Can somebody explain why there is not only one response, but consecutive more per click?

What should I change?

Upvotes: 1

Views: 146

Answers (1)

srquinn
srquinn

Reputation: 10481

Event delegation could save you from this mess. Basically, you add the event listener to a parent object and respond to events as they bubble up.

http://davidwalsh.name/event-delegate

I can't identify the exact spot in your code that is causing the behavior, but my gut tells me its the for loop where you are attaching event listeners. For loops are the usual culprit for unexpected ++ behavior.

Upvotes: 1

Related Questions