CODEWITHSUNDEEP
javascriptjqueryhtmljquery-ui
chaitanya
chaitanya

Reputation: 1601

unable to populate a select dropdown list using jquery

I am using websql to store some data for a web app. Now I am trying to retrieve it and populate it into a select dropdown box. I used the html function to set the values. But for some reason, the select dropdown box does not get populated.

HTML file

HTML File

Here is the Javascript file


var dbConnection=null;
var dbName='ExpensesAppDb';
var dbVersion='1.0';
var dbDisplayName='Expenses Application Database';
var dbSize=1024*1024*5;
var categoryTable="categories";
var name="name";
var _id="id";
var categoryTableQuery="create table "+categoryTable+"("+_id+" integer primary key,"
+ name +" text)";
var options="";

$(function()
{
dbConnection=openDatabase(dbName,dbVersion,dbDisplayName,dbSize);
createCategoryTable();
init();
fetchCategories();
});

createCategoryTable=function()
{
dbConnection.transaction(function(tx){
 tx.executeSql(categoryTableQuery,[],
 function(){alert('Category Table created');},
 function(tx,error){ alert(error.message);});
});
};

insertCategory=function(aName)
{
dbConnection.transaction(function(tx){
    tx.executeSql("insert into "+categoryTable+"("+name
    +") values(?)",[aName],
    function(tx,result)
    {

    },
    function()
    {

    }
)
    });
        };


fetchCategories=function()
{
dbConnection.transaction(function(tx){
    tx.executeSql("SELECT "+_id+","+name +" FROM "+categoryTable, [],
    function(SQLTransaction, data){
    for (var i = 0; i "+aName+""
}

function populateCategoryList()
{
 $('#expensesCategory').html(options);
 $("#expensesName").val("Hello");
}

function init()
{
    insertCategory("Food");
    insertCategory("Rent");
    insertCategory("Gas");
    insertCategory("Entertainment");
}

PS: How does one show the source of the HTML File over here. I guess the engine was parsing the html file.

Upvotes: 1

Views: 717

Answers (1)

chaitanya
chaitanya

Reputation: 1601

I figured it out. I had to refresh the display state of the selection box by using $("#expensesCategory").selectmenu('refresh', true);

Upvotes: 1

Related Questions