I am trying to dynamically populate a dropdown list based on the information in a Sharepoint list. I know I can add the list to the page and hide it, but what I want is to populate the list using client scripting language and not have the list exist on the current page. I assume an ajx approach, but not sure how to acplish this. I am restricted to not having SP Designer or Visual Studio. So can this be acplished using a webpart or a simple content editer with client scripting code/ajax. If so how?

I am trying to dynamically populate a dropdown list based on the information in a Sharepoint list. I know I can add the list to the page and hide it, but what I want is to populate the list using client scripting language and not have the list exist on the current page. I assume an ajx approach, but not sure how to acplish this. I am restricted to not having SP Designer or Visual Studio. So can this be acplished using a webpart or a simple content editer with client scripting code/ajax. If so how?

• javascript
• sharepoint-2007
• drop-down-menu

4 Answers 4

For SharePoint 2007, you can use the GetListCollection method.

See:

• Calling the SharePoint Web Services with jQuery
• Using Sharepoint’s GetListCollection

Take a look at Ribbon customizations - dropdown controls, Client Object Model and JavaScript Page Components. A lot of the code is for the Ribbon, but the loadCurrentWebLists and getDropdownItemsXml demonstrate what you are trying to do. You can also look at SharePoint 2010: Use ECMAScript to manipulate (Add/Delete/Update/Get) List Items and OM model Javascript. These deal with List Items, but you should be able to adapt them for Lists.

Can you try the SPServices library for 2007?

Here is how i use it for the user information list which is the list of all users with permissions to that site. The select: function(e, ui){} is the function which is called when you select something from the autoplete box.

<link href="../css/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui.js"></script>
<script type="text/javascript" src="../js/jquery.SPServices-0.5.8.js"></script>

<script type="text/javascript">
$(document).ready (function() {
    $().SPServices({
        operation: "GetListItems",
        async: true,
        listName: "User Information List",
        CAMLViewFields: "<ViewFields>" +
            "<FieldRef Name='Title' />" +
            "<FieldRef Name='MobilePhone' />" +
            "<FieldRef Name='Picture' />" +
            "<FieldRef Name='SPSResponsibility' />" +
            "<FieldRef Name='Name' />" +
            "</ViewFields>",
        pletefunc: AttachMembersAutoComplete
    });
});

function AttachMembersAutoComplete(xmlResponse) {
    var domElementArray = $( "[nodeName=z:row]", xmlResponse.responseXML );

    var dataMap = domElementArray.map(function() {
        return {
            value: $(this).attr('ows_Title'),
            mobile: $(this).attr('ows_MobilePhone'),
            picture: $(this).attr('ows_Picture'),
            askmeabout: $(this).attr('ows_SPSResponsibility'),
            name: $(this).attr('ows_Name')
        };
    });

    var data = dataMap.get();

    $("input#inputMembersAutoComplete").autoplete({
        source: data,
        select: function(e, ui){

            window.alert(ui.item['askmeabout'] + "\n" + ui.item['name']);

            if(ui.item['picture'] != undefined) {
                var tmpPicture = ui.item['picture'];
                var maIndex = tmpPicture.indexOf(',');
                tmpPicture = tmpPicture.substr(0,maIndex);
            }else{
                var tmpPicture = "/_layouts/images/person.gif";
            }

            var tmpHTML = "<div>";
            tmpHTML += "<a href='/Person.aspx?accountname=" + ui.item['name'] + "' >";
            tmpHTML += "<p>"+ ui.item['value'] + "  " + ui.item['mobile'] + "</p>";
            tmpHTML += "</a>";
            tmpHTML += "<img src='"+ tmpPicture + "' />";
            tmpHTML += "</div>";

            $("#person_info").html(tmpHTML);
        }
    });
}
</script>