jeudi 21 avril 2016

JQuery Mobile - create dynamical buttons which call a function with one parameter(button id)

My goal is to copy this app to store my friends with their names and shoesize. The last days I searched a lot about how to store data local on my mobile device. At the end, i decided to use SQLite which works with blackberry, since I'm using Intel XDK right now and test with my Blackberry Classic (Android Apps).

I found a pretty example with SQLite and JQuery (link above). Now i try to understand the code and rewrite it to JQuery Mobil. After i changed the code i am still able to store data into database and also delete entries. But i cant edit the data. The data is fetched from database with an index. If i push the edit button the data should be showed in my input-boxes, but this doesnt happen.

The edit-button is dynamical created in the "showRecords" function (also the name, shoesize and delete-button). The data should be displayed in the input-boxes when the "loadRecord" function is called. But this doesnt work.

Can you pls take a look at those two function, why i can delete a database entrie, but cant get the vales from the database to edit it.

BTW: in the "showRecord" function i want to create one entrie with name, shoesize, delete and edit button. maybe you can help me with this too, how i can write this in a better way.

You can find the whole project here in github (first time i use this too :D )

function showRecords() // Function For Retrive data from Database Display records as list
{
    $("#results").html('')
    db.transaction(function (tx) {
        tx.executeSql(selectAllStatement, [], function (tx, result) {
            dataset = result.rows;
            for (var i = 0, item = null; i < dataset.length; i++) {
                item = dataset.item(i);
                //Create Name+Shoesize
                var data_entry = '<li>' + '<h2>' + item['username'] + ' , ' + item['useremail'] + ' </h2>' + ' </li>';
                $("#results").append(data_entry);
                //Create Delete Button
                $('<div/>', {
                    //'id': 'delete' + i,
                    'class': 'ui-btn ui-btn-inline',
                    'text': 'Delete',
                }).on('click', function () {
                    deleteRecord(item['id']);
                }).appendTo("#results");
                //Create Edit Button
                $('<div/>', {
                    //'id': 'edit' + i,
                    'class': 'ui-btn ui-btn-inline',
                    'text': 'Edit',
                }).on('click', function () {
                    loadRecord(i);
                }).appendTo("#results");
            };

        });
    });
 function loadRecord(i) // Function for display records which are retrived from database.
{
    var item = dataset.item(i);
    $("#username").val((item['username']).toString());
    $("#useremail").val((item['useremail']).toString());
    $("#id").val((item['id']).toString());
}

Aucun commentaire:

Enregistrer un commentaire