How to remove jQuery [object Object] message

Question

I created a java variable called 'html' in which I add a div with anchor inside using jQuery which I use for a revel modal popup. When I launch the site the modal works fine but I get this [object Object] message next to it and I don't really know why. Is there a way to remove it or do I need to modidy the code? You can find an example here Website Example by clicking on any marker. I am using ajax jquery 1.8.0.

        html = '<div id="infoWindow">';
        if (paddimg) {var html = html + '<a class="infoa" data-reveal-id="modal2" href="#" data-animation="fade"></a>'};
        if (paddimg) {var div = $('<div id="modal2" class="modal"><p>Public address: '+padd+'</p><br/><img width="200px" src="'+paddimg+'"><a class="close-reveal-modal">&#215;</a></div>')};
        $('body').append(div);                      
        if (paddimg) {var html = html + div};
        var html = html + '<\/div>';

There are a lot of things wrong with this before we can even start to help. Firstly, `html` is a `javascript` variable not a `java` variable. Secondly, you only need to use `var` to declare `html` once, all of the others are redundant — RossBille, Jun 12 '14 at 07:08
notice you have 3 seperate conditions, testing for the same thing.. why are you appending div to body? look at answer below, i tried to make sense and rewrite your logic — webkit, Jun 12 '14 at 07:14
The reason I append div to body is so that I can place the modal popup anywhere on the screen rather than inside the infowindow div. I also get modal-background problems if I leave it inside (see [Modal appears under background](http://stackoverflow.com/questions/10636667/bootstrap-modal-appearing-under-background). I will try the answers later today and let you know. Thanks — user3716388, Jun 12 '14 at 09:31

score 0 · Answer 1 · answered Jun 12 '14 at 07:10

this is your immediate problem:

if (paddimg) {var html = html + div};

you are using div as a string

maybe try this:

html = $('<div id="infoWindow"></div>');
if (paddimg) {
    var _a = $('<a class="infoa" data-reveal-id="modal2" href="#" data-animation="fade"></a>')
    var div = $('<div id="modal2" class="modal"><p>Public address: ' + padd + '</p><br/><img width="200px" src="' + paddimg + '"><a class="close-reveal-modal">&#215;</a></div>')
    html.append(_a).append(div);
} else {
    $('body').append(div);
}

RossBille · Accepted Answer · 2014-06-12T21:43:44.207

Your problem is you have a JQuery object, var div = $('<div id="modal2" class="modal"><p>Public address: '+padd+'</p><br/><img width="200px" src="'+paddimg+'"><a class="close-reveal-modal">×</a></div>') (regardless of how valid it is) and you are concatenating it to a string if (paddimg) {var html = html + div};

you would see the same [object Object] if you just printed div to the console

without seeing the rest of your code (or really understanding why you have done things like this) I assume this segment should look like :

html = '<div id="infoWindow">'
if (paddimg) {
    html = html + '<a class="infoa" data-reveal-id="modal2" href="#" data-animation="fade"></a>'
    var div = '<div id="modal2" class="modal"><p>Public address: '+padd+'</p><br/><img width="200px" src="'+paddimg+'"><a class="close-reveal-modal">&#215;</a></div>'
    $('body').append(div)
}
html = html + '<\/div>'

Works now, thanks! The only thing that needs to be removed from your code is the **html = html + div** line otherwise div doesn't append to the body. — user3716388, Jun 12 '14 at 14:58

How to remove jQuery [object Object] message

2 Answers2