appending html with jquery but don't get style

Question

i am adding some li's with js to my webpage, for this li i use some jquery mobile stylesheets: for loading the js i use this code:

$(document).bind('pageshow', function () {
    LoadLaadPalen.init();
}

then this code will be used:

var myData = [
    {"Identifier":1,"Naam":"NOT Given","Adres":"Kopenhagen 9","Postcode":"0000LL","Plaats":"NOT Given","Longitude":"0.00000","Latitude":"0.00000"},
    {"Identifier":2,"Naam":"NOT Given","Adres":"NOT Given 1","Postcode":"0000LL","Plaats":"Rotterdam","Longitude":"0.00000","Latitude":"0.00000"},
    {"Identifier":3,"Naam":"NOT Given","Adres":"NOT Given 6","Postcode":"0000LL","Plaats":"Rotterdam","Longitude":"0.00000","Latitude":"0.00000"},
    {"Identifier":4,"Naam":"NOT Given","Adres":"NOT Given 1","Postcode":"0000LL","Plaats":"Den Haag","Longitude":"0.00000","Latitude":"0.00000"},
    {"Identifier":5,"Naam":"NOT Given","Adres":"NOT Given 218","Postcode":"0000LL","Plaats":"Zoetermeer","Longitude":"0.00000","Latitude":"0.00000"}
];

$('.result').append("moi");

var items = [];
$.each(myData, function(index, element) {
    $('.greenfluxlist').append('<a href="#" rel="external"><li id="' + element.Identifier + '"><h3>' + element.Naam + '</h3><p>' + element.Adres +  '</p></li></a>');
});

And this must be appended to this section:

<div data-role="content" data-theme="a">
    <div id="laadpalen">
        <p><strong>Op deze locaties zijn laadpunten aanwezig:</strong></p>
        <div class="result">
            <ul class="greenfluxlist" data-role="listview" data-inset="true"></ul>
        </div>
    </div>
</div>

But unfortunately I see no style. i only see the bullets with text and a blue standard link.. And also if I am going to check the source code, there aren't any html li code but on the webpage i see them...

Check the DOM, not the 'source-code.' Right click the element(s) and select 'inspect element' (or similar). — David Thomas, Sep 14 '12 at 10:02
Hi! The style you mentionned is supposed to apply to which elements? — Littm, Sep 14 '12 at 10:12

Piotr Krysiak · Accepted Answer · 2012-09-14T12:01:24.407

3

Look at your < li> definition. It should start with < li>:

<li><a href="bmw.html">BMW</a></li>

Your formatting is not proper:

<a href="#" rel="external"><li id="' + element.Identifier + '"><h3>' + element.Naam + '</h3><p>' + element.Adres +  '</p></li></a>

Try to do it as I showed you:

<li><a class=contact href="#" id="' + data.response[key].id + '" ><h1>' + data.response[key].label + '</h1><p>'+ data.response[key].customer + '</p></a></li>

start with < li> not with href :P In case of problems check this out: jQuery docs. Remember to trigger and then refresh the list:

$('.greenfluxlist').trigger('create');
$('.greenfluxlist').listview('refresh');

edited Sep 14 '12 at 12:01

answered Sep 14 '12 at 10:39

Piotr Krysiak

2,815
3
23
35

i guess it has to make with the loading sequence – bdz Sep 14 '12 at 11:09
Did you add $('.greenfluxlist').trigger('create'); ? – Piotr Krysiak Sep 14 '12 at 11:12
I added $('.greenfluxlist').trigger('create'); and it worked, thanks! could you simple explain what trigger does?? – bdz Sep 14 '12 at 11:21
It makes all action happen. It is somekind of "applier" which applies your actions. I found it in translator: "haan van een vuurwapen":D – Piotr Krysiak Sep 14 '12 at 12:00

score 0 · Answer 2 · answered Sep 14 '12 at 10:04

Try to add something like this:

$('.greenfluxlist').listview('refresh');

I can provide you an example. First appending function:

function success(data)
            {
                var html ='';
                $.each(data.response, function(key, value) {
                html += '<li><a class=contact href="#" id="' + data.response[key].id + '" ><h1>' + data.response[key].label + '</h1><p>'+ data.response[key].customer + '</p></a></li>';
                $('#contact_listview').append($(html));
                html='';
                });
                $('#contact_listview').trigger('create');    
                $('#contact_listview').listview('refresh');
                $.hidePageLoadingMsg;
            }

And now the html definition:

<ul data-role="listview"  id="contact_listview" data-filter="true">

</ul>

it works in my file:P have you tried to edit my code for your purpose? — Piotr Krysiak, Sep 14 '12 at 10:22

appending html with jquery but don't get style

2 Answers2

Linked