this code works when alert-ing variable, but not works if not

Question

<script type="text/javascript">
    function get_test_json(){
        var HTML = "";
        var ClientHTML = "";
        var nomor = 1;
        HTML = '<table data-role="table" id="table-custom-2" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-theme="a" data-column-btn-text="Pilih Kolom" data-column-popup-theme="a">';
        HTML += "<thead>";
        HTML += '<tr class="ui-bar-a">';
        HTML += '<th data-priority="2">No</th>';
        HTML += '<th data-priority="3">Foto</th>';
        HTML += '<th>Nama</th>';
        HTML += '<th data-priority="5">Keterangan</th>';
        HTML += '</tr>';
        HTML += '</thead>';
        HTML += '<tbody>';
        $.getJSON("http://localhost/JSON_test/my_json_list.php", function(person){
            $.each(person, function(key, value){
                $.each(value, function(names, specs){
                    ClientHTML += '<tr>'; 
                    ClientHTML += '<th>'+nomor+'</th>'; 
                    ClientHTML += '<td><img src="" alt="" height="" width=""></td>'; 
                    ClientHTML += '<td>'+names+'</td>'; 
                    ClientHTML += '<td><a href="http://localhost/4r.mobile.kemensos/profil_peneliti.html">'+specs+'</a></td>'; 
                    ClientHTML += '</tr>';
                    nomor = nomor+1;
                });
            });
        });
        alert(ClientHTML); // this is the problem
        HTML += ClientHTML;
        HTML += '</tbody>';
        HTML += '</table>';
        document.getElementById("test").innerHTML = HTML;
    }
    </script>

the ClientHTML variable is null when i remove the alert.
i'm sorry for my bad english and some dump code, i'm newbie here
thanks for your help

Very common problem: http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call — elclanrs, Jul 17 '13 at 04:27
See this answer: http://stackoverflow.com/questions/13306067/javascript-variable-empty-without-previous-alert-messge — Ryan.B, Jul 17 '13 at 04:31

score 1 · Answer 1 · answered Jul 17 '13 at 04:30

That is a not problem with alert and non alert----its matter of time.

 $.getJSON("http://localhost/JSON_test/my_json_list.php", function(person){
            $.each(person, function(key, value){
                $.each(value, function(names, specs){
                    ClientHTML += '<tr>'; 
                    ClientHTML += '<th>'+nomor+'</th>'; 
                    ClientHTML += '<td><img src="" alt="" height="" width=""></td>'; 
                    ClientHTML += '<td>'+names+'</td>'; 
                    ClientHTML += '<td><a href="http://localhost/4r.mobile.kemensos/profil_peneliti.html">'+specs+'</a></td>'; 
                    ClientHTML += '</tr>';
                    nomor = nomor+1;
                     HTML += ClientHTML;
                   HTML += '</tbody>';
                   HTML += '</table>';
                  document.getElementById("test").innerHTML = HTML;
                });
        });
    });

you have todo your operations after you complete the ajax request .

thanks for your answer man but your code not works, i think it's because you put my closed table and tbody tag inside $.each — Muhammad Zaid Taufiq, Jul 17 '13 at 04:45

James · Accepted Answer · 2013-07-17T05:08:31.957

I believe this will work. Just seperate them into two functions.

<script>
function get_test_json(){
  var nomor = 1;
  var ClientHTML = "";
  $.getJSON("http://localhost/JSON_test/my_json_list.php", function(person){

        $.each(person, function(key, value){
            $.each(value, function(names, specs){
                ClientHTML += '<tr>'; 
                ClientHTML += '<th>'+nomor+'</th>'; 
                ClientHTML += '<td><img src="" alt="" height="" width=""></td>'; 
                ClientHTML += '<td>'+names+'</td>'; 
                ClientHTML += '<td><a href="http://localhost/4r.mobile.kemensos/profil_peneliti.html">'+specs+'</a></td>'; 
                ClientHTML += '</tr>';
                nomor++;
            });
        });


        get_next(ClientHTML);
    });


}

function get_next(ClientHTML){
    var HTML = "";
    HTML += '<table data-role="table" id="table-custom-2" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-btn-theme="a" data-column-btn-text="Pilih Kolom" data-column-popup-theme="a">';
    HTML += "<thead>";
    HTML += '<tr class="ui-bar-a">';
    HTML += '<th data-priority="2">No</th>';
    HTML += '<th data-priority="3">Foto</th>';
    HTML += '<th>Nama</th>';
    HTML += '<th data-priority="5">Keterangan</th>';
    HTML += '</tr>';
    HTML += '</thead>';
    HTML += '<tbody>';

    HTML += ClientHTML;
    HTML += '</tbody>';
    HTML += '</table>';
    document.getElementById("test").innerHTML = HTML;

    $('#table-custom-2').table('refresh');
}
</script>

Thanks man for the answer, but it still has a problem if i use your code, the problem is my jquery mobile css of table doesn't work :( — Muhammad Zaid Taufiq, Jul 17 '13 at 04:58
@MuhammadZaidTaufiq have you tried calling `$('#table-custom-2').table('refresh');` at the end of the last function — James, Jul 17 '13 at 05:02
@MuhammadZaidTaufiq You probably need to refresh the table inorder for the jquery mobile styling to work — James, Jul 17 '13 at 05:07
WOW, You're so great man! it works, and now my "Pilih Kolom" button not works again, do you know why? but i will mark this answered by you :) — Muhammad Zaid Taufiq, Jul 17 '13 at 05:15
@MuhammadZaidTaufiq where is that button? in the table or someplace else on the page — James, Jul 17 '13 at 05:17
no no no, that's my bad, i have tried both of your answered comment, and it COMPLETELY WORKS! THANKS AGAIN MAN! GOD BLESS YOU! — Muhammad Zaid Taufiq, Jul 17 '13 at 05:20

this code works when alert-ing variable, but not works if not

2 Answers2