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>
