1

I am trying to pull data from a column in a list. The list is in the same domain as the page that I have embedded code in.

Here is the code, I have removed several of the functions that do not have anything to do with the code so if the HTML looks funny that is why.

Essentially, I am doing a SPServices call against the list "Master List" and then passing the results into an array. Once I have them in an array I then use the each function of JQuery to append them to a div.

I'm not seeing the new tags in the DIV, which leads me to believe I've messed something up. This is my first time using the SPServices library.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.1a/jquery.SPServices-0.7.1a.min.js"></script>

<div id="data">

    <form id="vendorFormMain" style="padding-bottom: 20px;">
        <fieldset style="width: 300px;">
            <legend>Search Vendors</legend>
            <label for="searchVendors" id='searchVendors" value="Search Vendors'>Search Vendors</label>
            <select id="searchVendors">
            </select>
        </fieldset>
    </form>


    <form id="categoriesForm" style="padding-bottom: 20px;">
        <fieldset id="categoriesSearch" >
            <legend>Categories</legend>
            <fieldset style="width: 300px;">
                <legend> Search Categories</legend>
                <label for="categories" id="categoriesLabel">Select Category</label>
                <select id="categories" style="padding-bottom: 5px;" >
                </select>
            </fieldset>
            <fieldset style="width: 300px;">
                <legend> Search Vendors</legend>
                <label for="vendors" id="vendorLabel">Select Vendor</label>
                <select id="vendors" style="padding-bottom: 5px;">
                </select>
            </fieldset>
        </fieldset>
    </form>

    <form id="vendorsData" style="padding-bottom: 20px;">
        <fieldset style="width: 300px;">
            <legend>Vendors</legend>
            <label for="contactCompany" style="width: 500px; clear: both;"> Company Name: </label>
            <input type="text" id="contactCompany" style="width: 100%; clear: both;" readonly="readonly"/><br/>
            <label for="contactName" style="width: 500px; clear: both;"> Contact Name:</label>
            <input type="text" id="contactName" style="width: 100%; clear: both;" readonly="readonly"/><br/>
            <label for="contactNumber" style="width: 500px; clear: both;"> Contact Number: </label>
            <input type="text" id="contactNumber" style="width: 100%; clear: both;" readonly="readonly"/><br/>
            <label for="contactEmail" style="width: 500px; clear: both;"> Email:</label>
            <input type="text" id="contactEmail" style="width: 100%; clear: both;" readonly="readonly"/><br/>
        </fieldset>
    </form>
</div>
<div id="resultarea">
    <p><strong>TEST</strong></p>
</div>
<script type="text/javascript">

    $(document).ready(function() {
        getCompanies();
    });


    function getCompanies() {
        // The Web Service method I am calling to read list items is 'GetListItems' 
        var method = "GetListItems";

        //The name of the List
        var list = "Master List";

        //Setting the fields I want to read from
        var fieldsToRead ="<ViewFields>" +
                            "<FieldRef Name='Company' />" +
                            "</ViewFields>";

        //Set the query to orderby the Company field
        var query = "<Query>" +
                        "<OrderBy>" + 
                            "<FieldRef Name='Company'/>" +
                        "</OrderBy>" +
                    "</Query>";

        //Here is my SPServices Call. I use the fields above for the call.
        $().SPServices({
            operation: method,
            async: false, 
            listName: list,
            CAMLViewFields: fieldsToRead,
            CAMLQuery: query,

            // Create a delegate with a callback that allows me to read values and write to array.
            completefunc: Function.createDelegate(this, window.callback)
        });
        window.callback = function (xData, status) {
            //Create a new array titled "aCompanies" to hold company data
            var aCompanies = new Array();
            //Use SPFilterNode to parse through each node and push the node to the array
            jQuery(xData.responseXML).SPFilterNode("z:row").each(function() {           
                aCompanies.push(jQuery(this).attr('Company'));
            });
            //Use Jquery Each method to loop through the array "companies"
            jQuery.each(aCompanies, function (i, val) {
                // add the results of the array to the display here div
                $("#resultarea").append("<p>" + val + "</p>");
            });
        };
    }
</script>
1

I was able to get it working. I found the SP.JS file in the Layout folder of Sharepoint. With this I was able to Google about Sharepoint s REST API with OData at https://msdn.microsoft.com/en-us/library/office/fp142385.aspx and about OData Query parameters at http://www.odata.org/documentation/odata-version-2-0/uri-conventions/#SelectSystemQueryOption . This allowed me to go and make my AJAX calls.

I was able to build out the AJAX call using a straight GET method and was then able to take the resulting data and parse it out using the JQuery Each function. I then was able to append this to my HTML.

The final code is below:

<div id="data">

    <form id="vendorFormMain" style="padding-bottom: 20px;">
        <fieldset style="width: 300px;">
            <legend>Search Vendors</legend>
            <label for="searchVendors" id='searchVendors" value="Search Vendors'>Search Vendors</label>
            <select id="searchVendors">
            </select>
        </fieldset>
    </form>


    <form id="categoriesForm" style="padding-bottom: 20px;">
        <fieldset id="categoriesSearch" >
            <legend>Categories</legend>
            <fieldset style="width: 300px;">
                <legend> Search Categories</legend>
                <label for="categories" id="categoriesLabel">Select Category</label>
                <select id="categories" style="padding-bottom: 5px;" >
                </select>
            </fieldset>
            <fieldset style="width: 300px;">
                <legend> Search Vendors</legend>
                <label for="vendors" id="vendorLabel">Select Vendor</label>
                <select id="vendors" style="padding-bottom: 5px;">
                </select>
            </fieldset>
        </fieldset>
    </form>

    <form id="vendorsData" style="padding-bottom: 20px;">
        <fieldset style="width: 300px;">
            <legend>Vendors</legend>
            <label for="contactCompany" style="width: 500px; clear: both;"> Company Name: </label>
            <input type="text" id="contactCompany" style="width: 100%; clear: both;" readonly="readonly"/><br/>
            <label for="contactName" style="width: 500px; clear: both;"> Contact Name:  </label>
            <input type="text" id="contactName" style="width: 100%; clear: both;" readonly="readonly"/><br/>
            <label for="contactNumber" style="width: 500px; clear: both;"> Contact Number: < </label>
            <input type="text" id="contactNumber" style="width: 100%; clear: both;" readonly="readonly"/><br/>
            <label for="contactEmail" style="width: 500px; clear: both;"> Email: </label>
            <input type="text" id="contactEmail" style="width: 100%; clear: both;" readonly="readonly"/><br/>
        </fieldset>
    </form>
</div>
<script type="text/javascript">

    $(document).ready(function () {
        getCategories();
        getVendorsSearch();
    });

    function getVendorsSearch() {
        $.ajax({
            url: "https://{main_url_here}/_api/web/lists/getbytitle('Master List')/items",
            type: "GET",
            headers: {
                "accept": "application/json;odata=verbose",
            },
            success: function (data) {
                $("#searchVendors").prepend('<option value="-1">-Select Vendor-</option>')
                    .val('-1');
                $.each(data.d.results, function (index, item) {
                    $("#searchVendors").append('<option value=' + item.Company + '>' + item.Company + '</option>');
                });
                $("#searchVendors").val("");
            },
            error: function () {
                alert("Error getVendorsSearch");
            }
        });
    };

    function getCategories() {
        $.ajax({
            url: "https://{main_url_here}/_api/web/lists/getbytitle('Master List')/items",
            type: "GET",
            headers: {
                "accept": "application/json;odata=verbose",
            },
            success: function (data) {
                $("#categories").prepend('<option value="-1">-Select Category-</option>')
                    .val('-1');
                $.each(data.d.results, function (index, item) {
                    $("#categories").append('<option value="' + item.Product_x0020_Focus + '">' + item.Product_x0020_Focus + '</option>');
                });
                $("#categories").val("");
            },
            error: function () {
                alert("Error getCategories");
            }
        });
    };

    $("#categories").change(function populateVendors() {
        var categoryType = $("#categories option:selected").val();
        getVendors(categoryType);
    });

    function getVendors(categoryType) {
        $.ajax({
            url: "https://{main_url_here}/_api/web/lists/getbytitle('Master List')/items?$filter=Product_x0020_Focus eq '" + categoryType + "'",
            type: "GET",
            headers: {
                "accept": "application/json;odata=verbose",
            },
            success: function (data) {
                $("#vendors").empty();
                $("#vendors").prepend('<option value="-1">-Select Vendor-</option>')
                    .val('-1');
                $.each(data.d.results, function (index, item) {
                    $("#vendors").append('<option value="' + item.Company + '">' + item.Company + '</option>');
                });
            },
            error: function () {
                alert("Error getVendors");
                alert(categoryType);
                alert(url);
            }
        });
    };


    $("#vendors").change(function displayVendorData() {
        var companyName = $("#vendors option:selected").val();
        getVendorData(companyName);
    });

    $("#searchVendors").change(function displaySearchVendorData() {
        var companyName = $("#searchVendors option:selected").val();
        getVendorData(companyName);
    });

    function getVendorData(companyName) {
        $.ajax({
            url: "https://{main_url_here}/_api/web/lists/getbytitle('Master List')/items?$filter=Company eq '" + companyName + "'",
            type: "GET",
            headers: {
                "accept": "application/json;odata=verbose",
            },
            success: function (data) {
                $.each(data.d.results, function (index, item) {
                    $("#contactCompany").val(item.Company);
                    $("#contactName").val(item.Contact_x0020_Name);
                    $("#contactNumber").val(item.Contact_x0020_Cell);
                    $("#contactEmail").val(item.Contact_x0020_E_x002d_Mail);
                });
            },
            error: function () {
                alert("Error getVendorData");
            }
        });
    };
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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