0

Today I got requirement to get the list data using rest and bind to html drop down . I am getting the information by filtering it from browser

(_api/web/lists/GetByTitle('Tabletop%20Sessions')/items?Select=Title";)

. As this is my first program can any one help me what's wrong in my below code in binding the data to drop-down.

<style type="text/css">
 .textbox{
     font-family : inherit;
     font-size   : 100%;width: 275px;
     border: 4px solid #F7F9FA;
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     border-radius: 3px;
     -moz-box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.06) inset, 0 0 1px #95a2a7 inset;
     -webkit-box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.06) inset, 0 0 1px #95A2A7 inset;
     box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.06) inset, 0 0 1px #95A2A7 inset;
     height: 30px;
     width: 275px;
     display: block;
 }
.fontsize{
    font-style: arial;font-size:17px;
}
.select{
    width: 285px;height: 25px;
}
</style>

<script src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js" type="text/javascript"> </script>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"> </script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js "></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 <link rel="stylesheet" href="/resources/demos/style.css">

<body>
<table>
<tr>
   <td colspan="2"><img align="right" src=" Image URL"/>
</td>
</tr>
<tr>
   <td colspan="2"><img src=""/>
</td>
</tr>

</tr>
<tr>
 <td class="fontsize">Months:</td>
 <td>
       <select id="drbfunction" class="select">
       <option selected="selected">Select</option>
       </select>
 </td>
</tr>
<tr>
 <td class="fontsize"><br>Programes:</td>
 <td><br>
       <select id="drbprogrames" class="select">
       <option selected="selected">Select</option>

</tr>
</table>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js "></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script>
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', getprogrames);
function getprogrames(sender, args)
{
    alert("in Programes");
    var userid = _spPageContextInfo.userId;
    var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Tabletop%20Sessions')/items?Select=Title";
    var requestHeaders = { "accept": "application/json;odata=verbose" };
    $.ajax({
        url: requestUri,
        contentType: "application/json;odata=verbose",
        headers: requestHeaders,
        success: onprogramQuerySucceeded (data) {
         var listData = data.d.results;
         var itemCount = listData.length;
         var processedCount = 0;
         var functions = document.getElementById("drbprogrames");
         for (var i = 0; i < result.length; i++)
           {
               var option = document.createElement('option');
               option.text = option.value = result[i].Title;
               functions.add(option);
           }
      },
        error: function (data) {
           alert(failure(data));
       }
    });
}

</script>

3 Answers 3

0

Can you try the following please:

for (var i = 0; i < result.length; i++)
{
    //var option = document.createElement('option');
    //option.text = option.value = result[i].Title;
    //functions.add(option);

    $(functions).append("<option value='" + result[i].Title + "'>" + result[i].Title + "</option>";
}
0

If you know AngularJS then I will recommend using that. It will simplify a lot of things for you.

In your case you will call REST API with _api/web/lists/GetByTitle('Tabletop%20Sessions')/items?Select=Title,ID and store it in $scope variable.

$scope.dropDownOptions = response.data.d.results;

In you HTML portion you will write something like this

<select ng-options="item.Title for item in dropDownOptions"></select>
0

First of all you are loading multiple jQuery js files in your code. Minimize it only one.
Next, Correct your REST API Select parameter to $Select.
Lastly, as you are using jQuery then you can simply use it following way to populate the drop down.

SP.SOD.executeOrDelayUntilScriptLoaded(getPrograms, "sp.js");

function getPrograms(){
    $.ajax({
        method: "GET",
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Tabletop%20Sessions')/items?$Select=Title",
        contentType: "application/json;odata=verbose",
        headers:{
            "Accept":"appilcation/json;odata=verbose"
        },
        success: function(data){
            var results = data.d.results;
            var options = "";
            for(var i = 0; i < results.length; i++){
                options = options + "<option value='" + results[i].Title + "'>" + results[i].Title + "</option>";
            }
            $("#drbprograms").append(options);
        },
        error: function(err){
            console.log("failed");
            console.log(err);
        }
    });
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.