Button click to display a table from mysql in ibm mobile first

Question

I am in process of learning so kindly help me to do how the retrieval of table from mysql in ibm mobile first by just clicking an button from my html page. I have tried but not working help please

<!DOCTYPE HTML>
<html>
        <head>
            <meta charset="UTF-8">
            <title>vikdemodb</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
            <!--
                <link rel="shortcut icon" href="images/favicon.png">
                <link rel="apple-touch-icon" href="images/apple-touch-icon.png"> 
            -->
            <link rel="stylesheet" href="css/main.css">
            <script>window.$ = window.jQuery = WLJQ;</script>
        </head>
        <body style="display: none;">
            <!--application UI goes here-->
            <div id="header">
            <h1>database Demo</h1>
        </div>          
        <div id="wrapper">
            <input type="button" id="databasecon" value="click me to get data from db" /><br />

        </div>          

            <script src="js/initOptions.js"></script>
            <script src="js/main.js"></script>
            <script src="js/messages.js"></script>
        </body>
</html>

My main.js

function wlCommonInit(){



        $('#databasecon').click(loadSQLRecords);


}
function loadSQLRecords(){
    var invocationData = {
        adapter : 'vikadap',
        procedure : 'getstudinfo',
        parameters : []
    };

    WL.Client.invokeProcedure(invocationData,{
        onSuccess : loadSQLQuerySuccess,
        onFailure : loadSQLQueryFailure
    });
}

function loadSQLQuerySuccess(result){

    window.alert("success");
    console.log("Retrieve success" + result);
    console.log(result.invocationResult.resultSet); 
}

function loadSQLQueryFailure(result){
    WL.Logger.error("Retrieve failure");
}

Answer 1

You have a button in your HTML:

<input type="button" id="databasecon" value="click me to get data from db" />

You handle this button in wlCommonInit() :

$('#databasecon').click(loadSQLRecords);

In loadSQLRecords() you call an adapter procedure to retrieve data from the database. If this operation succeeds then it calls the loadSQLQuerySuccess callback function.

It is this function that you are supposed to handle the display of the response from the backend (your database). But what are you doing? You only print to the console the response. You do not handle at all, displaying it in the application - in the HTML.

So in your HTML, you need to prepare a place holder that you will append the result into. For example: <table id="mytable"></table>

Then you need to populate the table with the data...

So in loadSQLQuerySuccess , you could for example do the following... this is where you need to learn HTML and JavaScript to accomplish what YOU want it to look like :

function loadFeedsSuccess(result) {
    if (result.invocationResult.resultSet.length > 0) 
        displayFeeds(result.invocationResult.resultSet);
    else 
        loadFeedsFailure();
}

function loadFeedsFailure() {
    alert ("failure");
}

function displayFeeds(result) {
    for (var i = 0; i < result.length; i++) {
        $("#mytable").append("<tr><td>" + result[i].firstName + "</td></tr>");
        $("#mytable").append("<tr><td>" + result[i].lastName + "</td></tr>");   
    }
}

Note that you need to create your own code in the for loop to make it look like how you want it to look, and of course append your own properties from the database, instead of "firstName" and "lastName".

Button click to display a table from mysql in ibm mobile first

Question

1 answers

solution1
0 ACCPTED 2015-10-12 08:41:29

Button click to display a table from mysql in ibm mobile first

Question

1 answers

solution1 0 ACCPTED 2015-10-12 08:41:29

solution1
0 ACCPTED 2015-10-12 08:41:29