Trying to get data from json through javascript and display on jquery mobile page

Question

I want get the data coming in JSON through a php url using JAVASCRIPT and displaying that data in JQuery mobile "li" tag(it'll be a complete category list) but using the code given below isn't displaying anthing. I'll be very thankful, I am stuck in this thing from last 8 hours.

<script>
                  var session_id = localStorage.getItem('session_id');
                  var user_id = localStorage.getItem('user_id');  
            $(document).ready(function() {
             //$('#output').html('somestuff');

                $('#loginForm').submit(function() {
                    //$('#output').html('Connecting....');
                    var postTo = 'http://localhost/categories.php';
                    //alert(postTo);
                    $.post(postTo,{userid: $('[name=user_id]').val() ,   sessionid:  $('[name=session_id]').val()} , 
                        function(data) {

                            if(data.status == 'true') {

                                $("#userdata tbody").html("");
                                $.getJSON(postTo,function(data){
                                $.each(data.members, function(i,user){
                                var tblRow =
                                "<li data-theme="e">"
                                 +"<a data-transition="flow" href="">"+user.category+"</a>"
                                  +"</li>";
                                $(tblRow).appendTo("#userdata tbody");
                                });
                                });


                            } else {

                                window.open("./MyApp.html","_self");
                            }

                        },'json');

                    return false;
                });
            });
            </script>

Answer 1

this $(tblRow).appendTo("#userdata tbody"); should be

something like

$("#userdata tbody").appendTo(tblRow);

Read more here about appending content to element

and

 var tblRow ="<li data-theme="e">"  
                             +"<a data-transition="flow" href="">"+user.category+"</a>"
                             +"</li>";

change it into

 var tblRow ='<li data-theme="e">' 
                             +'<a data-transition="flow" href="">'+user.category+'</a>'
                             +'</li>';

Check your console what it says to precise on your errors and where exactly it fails.

Refer this question for writing html with jQuery

Answer 2

You have a syntax error at +"<a data-transition="flow" href="">"+. "flow" is outside quotes (so it's counted as a var, but you didn't used "+") so you should only put single quotes before and after "flow". Same goes for the href.