Append to div with jquery

Question

I have the following HTML code. It is a popup with a collapsible listitems inside:

<div data-role="popup" id="wavelistPopup" class="ui-content">
    <div id="wavlistContainer" data-role="collapsible-set" data-theme="c" data-content-theme="c" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" style="margin:0; width:250px;">
        <div data-role="collapsible" data-inset="false">
            <h2>Wave1</h2>
            <ul data-role="listview">
                <li>Entfernung: </li>
                <li>Von Autor:</li>
                <li>Schwierigkeit:</li>
                <li>Beschreibung:</li>
                <li><a data-rel="dialog">Erfahrungsberichte</a></li>
                <li><a data-rel="dialog">Wissenswertes</a></li>
                <li><a data-rel="dialog">&Auml;hnliche Waves</a></li>
            </ul>
            <button>Sync</button>
            <button>L&ouml;schen</button>
        </div><!-- /collapsible -->

    </div><!-- /collapsible set -->
</div><!-- /popup -->

Now I want to add another collapsible to the wavlistcontainer with the following code:. To do that, I first make a ajax call and work in the callback function.

function populateWaveList(){
    console.log("populateWaveList");
    requestWavesInArea(position.position.coords.latitude, position.position.coords.longitude,  
            position.position.coords.latitude+5, position.position.coords.longitude+5, 10, 
            function(waves){ //after AJAX call
            console.log(waves);
                for(var wavei in waves){ // for every element to add
                    var content = "";
                    var wave = waves[wavei];
                    console.log(wave);
                    var content =+ jQuery('somestring';     '<div data-role="collapsible" data-inset="false">'+
                                '<h2>'+wave.name+'</h2>'+
                                '<ul data-role="listView">'+    
                                        '<li>Entfernung von Autor: '+'...'+'</li>'+
                                        '<li>Autor: '+wave.creatorname+'</li>'+
                                        '<li>Beschreibung: '+wave.description+'</li>'+
                                        '<li>Umfang: '+'...'+'</li>'+
                                        '<li>Terrain: '+wave.terrainType+'</li>'+
                                        '<li>Autor: '+wave.creatorname+'</li>'+
                                        '<li>Schwierigkeit: '+wave.difficulty+'</li>'+
                                        '<li>ID: '+wave.waveId+'</li>'+
                                        '<li>Datum: '+wave.created+'</li>'+
                                    '</ul>'+
                                    '<button disabled="disabled">Sync</button>'+
                                    '<button disabled="disabled">L&ouml;schen</button>'+
                                '</div>');
                    console.log(content); // returns 'false'
                    $('#wavelistContainer').append(content);
                }
                $('#wavelistPopup').popup('open', { x : 460, y : 180 });
    });
}

When I print the content, i get false which greately confuses me. Can anyone help me with this please?

Thank you

If you change the question using the answers, they get irrelevant... This is not how you should use SO... — Denys Séguret
– Denys Séguret, Commented Oct 17, 2012 at 15:47

Denys Séguret · Accepted Answer · 2012-10-17 15:51:16Z

1

Two problems :

you're using =+ instead of +=
you convert to soon the html to a jquery object

This line :

var content =+ 'somestring';

is the same as

var content = 0 + 'somestring';

and so produces NaN.

Instead of

content =+  jQuery('<div data-role="collapsible" data-inset="false">'+

do

content +=  '<div data-role="collapsible" data-inset="false">'+

Note that you should also, for better performances, build only one content string and add it only once (declare it before the loop, and append it after the loop).

edited Oct 17, 2012 at 15:51

answered Oct 17, 2012 at 15:44

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Denys Séguret Over a year ago

I don't think you can get false if you build it with var content = ""; content += 'somestring';. Check the code you run.

MJVDM Over a year ago

I edited my code accordingly. Now I have the problem that the created elements are not collapsible. they are displayed directly.

Denys Séguret Over a year ago

You don't even show the code responsible of the collapse... How could I fix it ?

MJVDM Over a year ago

what do you mean. I tried to recreate the code above dynamically.

StaticVariable · Accepted Answer · 2012-10-17 15:47:06Z

1

You have problem your code

    content =+  jQuery('<div data-role="collapsible" data-inset="false">'+
--------------^-----^
                                    '<h2>'+wave.name+'</h2>'+
                                    '<ul data-role="listView"'>+    
--------------------------------------------------------------^

should be

content +='<div data-role="collapsible" data-inset="false">'+
                                    '<h2>'+wave.name+'</h2>'+
                                    '<ul data-role="listView">'+

answered Oct 17, 2012 at 15:47

StaticVariable

5,2934 gold badges26 silver badges46 bronze badges

4 Comments

MJVDM Over a year ago

I edited my code accordingly. Now I have the problem that the created elements are not collapsible. they are displayed directly.

StaticVariable Over a year ago

@MJB the code looks fine...Hard to figure out what's the problem..Check that all div are closing properly..?

MJVDM Over a year ago

there is only one div, the div that closes the collapsible, and it's closed.

StaticVariable Over a year ago

@MJB i have no idea about that

Collectives™ on Stack Overflow

Append to div with jquery

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related