CODEWITHSUNDEEP
jquerycordova
andymoyle
andymoyle

Reputation: 438

jQuery append not in order

I'm using append() to help parse some json in a cordova app. Here's he code snippet

 renderRotaView: function() {
        $('.tab-button').removeClass('active');
        $('#rota-tab-button').addClass('active');
        $('#title').html('Rota');
        $('#rendered').html('<div id="content"><table>');
        $.getJSON('https://www.thegatewaychurch.info/wp-admin/admin-ajax.php',{ action: "ca_rota", service_id: 1 }, function(data) {
                $.each(data, function(arrayIndex, userObject){
                        $('#rendered').append('<tr><td>' + userObject.job+'</td><td>'+ userObject.people + '</td></tr>');
                });

        });
        $('#rendered').append('</table></div>');
    }

Which results in

<div id="rendered"><div id="content">
<table></table>
</div>
<tr><td>Trailer</td><td>#</td></tr>
<tr><td>Setup</td><td>#</td></tr>
<tr><td>Welcome </td><td>#</td></tr>
<tr><td>Hotspot</td><td>#</td></tr>
<tr><td>Worship Leader</td><td>#</td></tr>
<tr><td>Singers</td><td>#</td></tr>
<tr><td>PA</td><td>#</td></tr>
<tr><td>Preacher</td><td>#</td></tr>
<tr><td>Catering</td><td>#</td></tr>
<tr><td>Livewires 0-3s</td><td>#</td></tr>
<tr><td>Livewires 3+</td><td>#</td></tr>
<tr><td>Explorers  Infant</td><td>#</td></tr>
<tr><td>Explorers Juniors</td><td>#</td></tr>
<tr><td>Youth</td><td>#</td></tr>
</div>

So the append inside the .getJSON is not in the middle. What am I doing wrong please?

Upvotes: 1

Views: 611

Answers (3)

user6748331
user6748331

Reputation:

Just move last line (.append) inside .getJSON callback:

renderRotaView: function() {
        $('.tab-button').removeClass('active');
        $('#rota-tab-button').addClass('active');
        $('#title').html('Rota');
        $('#rendered').html('<div id="content"><table>');
        $.getJSON('https://www.thegatewaychurch.info/wp-admin/admin-ajax.php',{ action: "ca_rota", service_id: 1 }, function(data) {
                $.each(data, function(arrayIndex, userObject){
                        $('#rendered table').append('<tr><td>' + userObject.job+'</td><td>'+ userObject.people + '</td></tr>');
                });
                $('#rendered').append('</table></div>');
        });
    }

Upvotes: 0

gaetanoM
gaetanoM

Reputation: 42054

My proposal is to create the new dom elements on the fly using jQuery:

var data = [{"job": "Trailer", "people": "Andy Moyle, Maarten Klem"}, {
  "job": "Setup",
  "people": "Andy King, Jenny King"
}, {"job": "Welcome ", "people": "Adam Dixon, Ivory Dixon"}, {
  "job": "Hotspot",
  "people": "Baptisms"
}, {"job": "Worship Leader", "people": "Matt Weatherill"}, {
  "job": "Singers",
  "people": "Tammy Dixon"
}, {"job": "PA", "people": "Maarten Klem"}, {"job": "Preacher", "people": "Liz Hentschel"}, {
  "job": "Catering",
  "people": "Kath Blacklock, Kay Taylor"
}, {"job": "Livewires 0-3s", "people": "Parents"}, {
  "job": "Livewires 3+",
  "people": "Jo Bruce, Ruth Duncombe"
}, {"job": "Explorers Infant", "people": "Pat Amos, Jenny"}, {
  "job": "Explorers Juniors",
  "people": "Gav Raynor, Caleb Vonk"
}, {"job": "Youth", "people": "Baptisms"}];

$('#rendered').append($('<div/>', {id: 'content'})
              .append($('<table/>')
              .append($('<tbody/>'))
             )
        );
$.each(data, function (arrayIndex, userObject) {
  $('#rendered table tbody').append($('<tr/>')
       .append($('<td/>', {text: userObject.job}))
       .append($('<td/>', {text: userObject.people})));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="rendered"></div>

Upvotes: 0

Nalin Aggarwal
Nalin Aggarwal

Reputation: 888

It's becuase you are appending it within div $('#rendered'). Change this to $('#rendered table'). Use the below code

renderRotaView: function() {
        $('.tab-button').removeClass('active');
        $('#rota-tab-button').addClass('active');
        $('#title').html('Rota');
        $('#rendered').html('<div id="content"><table>');
        $.getJSON('https://www.thegatewaychurch.info/wp-admin/admin-ajax.php',{ action: "ca_rota", service_id: 1 }, function(data) {
                $.each(data, function(arrayIndex, userObject){
                        $('#rendered table').append('<tr><td>' + userObject.job+'</td><td>'+ userObject.people + '</td></tr>');
                });

        });
        $('#rendered').append('</table></div>');
    }

Upvotes: 2

Related Questions