append webmethod results to a listbox using javascript

Question

i'm trying to update a listbox using ajax/jquery/webmethod. from inspecting network activity in developer tools in chrome, i can see that the webmethod is returning values, but those values are not being appended to the listbox. so i guess that the problem must be with my javascript code. could someone take a look at the code and tell me why this isn't working? the listbod is called ListBox1 and is in the Homepage.aspx page.

$(function updateListbox() {
var lBox = $('select[id$=ListBox1]');
setInterval(function () {
    $.ajax({
        beforeSend: function (req) {
            req.setRequestHeader("Accept", "application/json");
        },
        type: "POST",
        url: "Homepage.aspx/getCurrentList",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            var results = data.d;
            if (results.length > 0) {
                var updatedList = [];
                for (var i in results) {
                    updatedList.push(results[i]);
                }
                $(lBox).append(updatedList.join(''));
            }
            else alert("No new items to update...");
        }
    });
}, 5000);

});

[WebMethod()]
    public static string[] getCurrentList()
    {
        int count = 0; 
        for(int i = 0; i < Global.ListUsers.Count(); i++)
            count++;

        string[] results = new string[count];

        for (int i = 0; i < count; i++)
           results[i] = Global.ListUsers[i].Username.ToString();                                          

        return results;
    }

Carl Sharman · Accepted Answer · 2012-04-24T11:15:54.113

1

If you want to iterate through an array of items, you want:

for (var i = 0; i < results.length; i++) {

What you have will iterate through the properties of the results object.

Also, I'm not sure about the way you're populating the select. Try this:

for (var i = 0; i < results.length; i++) {
    lBox[0].options[i] = new Option(results[i], results[i], true, false)
}

edited Apr 24 '12 at 11:15

answered Apr 23 '12 at 11:42

Carl Sharman

4,435
1
30
29

i tried as you suggested, but the results are still not being appended to the listbox. any other ideas? – MattSull Apr 23 '12 at 12:36
that's working now, thanks a lot! one small problem, the first user i log in appears twice in the listbox, and subsequent users appear once as desired. do you have any idea what could be causing this? it may down to a bug somewhere else in the app. – MattSull Apr 23 '12 at 17:22
1

Well, I think that the code I pasted should be 'lBox[0].options[i] = ...' and not 'lBox[0].options[i + 1] = ...'. Other than that, I can't see anything else in your code that might cause that. – Carl Sharman Apr 24 '12 at 08:13
1

Do you use the developer tools in your browser? You can use these to view the raw JSON that gets returned from your webmethod, and this will help you work out whether the problem is client or server side. – Carl Sharman Apr 24 '12 at 08:15
yeah i use developer tools in chrome, and it was showing just the two logged in users with the JSON response, so the problem must have been with the [i + 1] as you mentioned above. thanks for clearing that up and thanks for the help in general. – MattSull Apr 24 '12 at 08:38
i'm having another problem now - it's to do with the AutoPostBack property of the listbox. i had this problem initially when i was using an update panel and timer from the AJAX extensions in visual studio, and was told to write my own script and use a web method to overcome it. i'm getting this error when i select an item (a user) from the listbox: 'Cannot insert the value NULL into column 'Username', table 'E:\ITERATION 4\PROJECT\PROJECT\APP_DATA\DATABASE.MDF.dbo.User'; column does not allow nulls. INSERT fails. The statement has been terminated.' – MattSull Apr 24 '12 at 13:23

append webmethod results to a listbox using javascript

1 Answers1