Call Javascript function to get resultset of sql query and print them in html table

Question

I am using Phonegap and jquery-Mobile-1.4.5 to create a cross platform App. Since I am a Java developer , Java script is a very new concept for mine. I am creating a simple app where I have one html table where I want to show a select query from a database table . From here I found how to send a callback to functions. But my problem is ,

onload is not calling my showContact(resultSet) function
How can I print the resultSet in the <tbody> tag, I do not want to use javascript concatenation inside the showContact(resultSet) function.

Part of my index.html file

<table data-role="table" id="table-custom-2"  onload="showContact(resultSet)" >
            <thead>
                <tr class="ui-bar-d">
                    <th>Id</th>
                    <th>Name</th>
                    <th>Number</th>
                </tr>
            </thead>
            <tbody>

                <!--Print the resultSet data with a for loop here-->
            </tbody>

        </table>

My javascript code

function showContact(resultSet){

             var db= window.openDatabase("appDb","1.0","appDb",200000);

                selectRow("SELECT * FROM contact;", function(resultSet) {
                    console.log(resultSet);

                //Don't want to access the <table> from here
                  });
        }

        /** Select Row from Table **/ 
        function selectRow(query, callBack){ 
           var result = [];
           db.transaction(function (tx) {
              tx.executeSql(query, [], function(tx, rs){
                 for(var i=0; i<rs.rows.length; i++) {
                    var row = rs.rows.item(i)
                    result[i] = { id: row['id'],
                                  name: row['name'],
                                  number: row['number']
                    }
                 }
                 callBack(result); 
              }, errorHandler);
           });
        }

You can use a template system like mustache to render javascript objects into html code github.com/janl/mustache.js — Emanuel Ralha
– Emanuel Ralha, Commented Feb 5, 2015 at 14:41
For 1: Look for errors in the console log to troubleshoot. Also consider not putting calls in onload, but using addEventListener instead. For 2: You'll need to either use a templating solution like @EmanuelRalha suggests, or use the JavaScript DOM API (e.g., createElement, createTextNode and insertAfter) to build up your table rows and append them to your tbody. The DOM API is a little tricky to get used to, but if you've worked with XML docs in Java, the concepts are similar. — Palpatim
– Palpatim, Commented Feb 5, 2015 at 15:43
@Palpatim : Thanks , can you give an example how to call addEventListener in this scenario — web2dev
– web2dev, Commented Feb 5, 2015 at 19:07
For cleanliness, refactor showContact to not take a parameter, but rather retrieve it upon invocation. Then you can have this in your script code: document.getElementById('table-custom-2').addEventListener('load', showContact); BTW, since you never showed where resultSet is coming from, that could be a source of bugs as well. Make sure you know it's initialized when you invoke showContact — Palpatim
– Palpatim, Commented Feb 5, 2015 at 22:20

Lepanto · Accepted Answer · 2015-02-05 15:52:23Z

0

You can frame the data you get from DB in a table row and assign it to the table body. See following code,

You can call the function selectrow() when the page loads

<table data-role="table" id="table-custom-2">
<thead>
    <tr class="ui-bar-d">
        <th>Id</th>
        <th>Name</th>
        <th>Number</th>
    </tr>
</thead>
<tbody id="contactlist">
<!--Print the resultSet data with a for loop here-->
</tbody>
</table>

<script>
$(document).ready(function($) {
    var db= window.openDatabase("appDb","1.0","appDb",200000);
    selectrow();
}); 

function selectrow(){
    db.transaction(function (tx) {
        tx.executeSql("SELECT * FROM contact", [], function(tx, rs){
            var output = '';
            for(var i=0; i<rs.rows.length; i++) {
                var row = rs.rows.item(i)
                output += '<tr><td>' + row['id'] + '</td><td>' + row['name'] + '</td><td>' + row['number'] + '</td></tr>';
            }
            $('#contactlist').html(output);

        }, errorHandler);
    });
}
</script>

answered Feb 5, 2015 at 15:52

Lepanto

1,3981 gold badge8 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

web2dev Over a year ago

Thanks , but you might have missed what I really meant , I don't want to use concatenation inside selectRow

Lepanto Over a year ago

@Nusrat In that case, you can use Angular JS to pass the data you get in selectrow() function and build the contact list. Check this link

Collectives™ on Stack Overflow

Call Javascript function to get resultset of sql query and print them in html table

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related