0

When I generate my HTML using jquery the css doesn't load and leaves me an awful display.

Here is the code that generates the HTML :

function createHtml(type,idx,name,data)
{
    switch(type)
    {
        case 'Temp + Humidity':
            var data = data.split(", ");
            $("#data").append('<li id="'+idx+'"><h2>' + name + ' :</h2><p style="color:coral;">' + data[0] + '</p><p style="color:lightblue;">' + data[1] + '</p></li>');
            break;

        case 'Wind':
            var data = data.split(";");
            $("#data").append('<li id="' + idx + '"><h2>' + name + ' :</h2><p>Direction :' + data[1] + ' Speed : ' + data[2] + '</p></li>');
            break;

        case 'Rain':
            $("#data").append('<li id="' + idx + '"><h2>' + name + ' :</h2><p>' + data + 'ml</p></li>');
            break;

        case 'General':
            $("#data").append('<li id="' + idx + '"><h2>' + name + ' :</h2><p>' + data + '</p></li>');
            break;

        case 'Thermostat':
            $("#data").append('<li id="' + idx + '"><h2>' + name + ' :</h2><p>' + data + '°C</p><div class="ui-btn-right" data-role="controlgroup" data-type="horizontal"><a class="ui-btn ui-corner-all ui-icon-minus ui-btn-icon-notext" onclick="tempSetMinus(this.id)" id="' + idx + 'Minus">Minus Icon</a><a class="ui-btn ui-corner-all ui-icon-plus ui-btn-icon-notext" onclick="tempSetPlus(this.id)" id="' + idx + 'Plus">Plus Icon</a></div></li>');
            break;

        case 'Air Quality':
            $("#data").append('<li id="' + idx + '"><h2>' + name + ' :</h2><p>' + data + '</p></li>');
            break;
        case 'Lux':
            $("#data").append('<li id="' + idx + '"><h2>' + name + ' :</h2><p>' + data + '</p></li>');
            break;
    }
}

And here is what I get:

enter image description here

And what I want:

enter image description here

Improve this question
4
  • can you provide a jsfiddle with your problem? Commented Feb 1, 2016 at 9:22
  • No, I can't because there isn't jquery-mobile with jsfiddle Commented Feb 1, 2016 at 9:28
  • $( "#data" ).listview( "refresh" ); api.jquerymobile.com/listview/#method-refresh Commented Feb 1, 2016 at 9:31
  • @saroten, you can manually add any external JS file / CSS you like by adding it in the left-hand pane. I've added it to this fiddle for you: jsfiddle.net/ss5jbcu9 Commented Feb 1, 2016 at 9:31
Related questions
4607
Setting "checked" for a checkbox with jQuery
1965
How to detect a mobile device using jQuery
3163
How can I upload files asynchronously with jQuery?
Load 7 more related questions Show fewer related questions

0

Reset to default

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.