I've created a 'Create a New Folder' button, with (2) text input fields.
- <#txtCompanyId> is an autocomplete text field
- <#txtFolderName> is a free-text field
- <"#btnSubmit> is the submit button
The user is required to (1) Name the folder, (2) associate it with a company, and (3) press 'Create Folder' button. When testing this, the folder is created successfully, the 'Name' populates correctly, BUT the the 'CompanyId' input filed does NOT render text, instead, its renders the following:
System.Collections.Generic.Dictionary`2[System.String,System.Object]
Below is the script I'm using, followed by some screenshots. I'm stumped, so any insight would be unbelievably helpful. thanks!
<div>
<span>Name Your Folder Below</span><br/>
<input type="text" id="txtFolderName" placeholder="Name the Folder..."/>
<input type="text" id="txtCompanyId" placeholder="Add a Company..."/ />
<input type="button" id="btnSubmit" value="Create Folder"
onClick="window.location.href=window.location.href;"/>
</div>
<div id="divResults"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function () {
bindButtonClick();
});
function bindButtonClick() {
$("#btnSubmit").on("click", function () {
createFolder();
});
}
function createFolder() {
var folderName = $("#txtFolderName").val();
var clientContext = new SP.ClientContext();
var oWebsite = clientContext.get_web();
var oList = oWebsite.get_lists().getByTitle("SourcesLibrary");
var folderCreateInfo = new SP.ListItemCreationInformation();
folderCreateInfo.set_underlyingObjectType(SP.FileSystemObjectType.folder);
folderCreateInfo.set_leafName(folderName);
var companyId = $("#txtCompanyId").val($.cookie(companyTag));
this.oListItem = oList.addItem(folderCreateInfo);
this.oListItem.set_item("CompanyId", companyId);
this.oListItem.update();
clientContext.load(oList);
clientContext.executeQueryAsync(
Function.createDelegate(this, this.onQuerySucceeded),
Function.createDelegate(this, this.onQueryFailed)
);
}
function onQuerySucceeded() {
$("#divResults").html("Folder successfully created!");
}
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() +
'\n' + args.get_stackTrace());
}
</script>
<script type="text/javascript">
$(document).ready(function()
{
var soapEnv = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'><soapenv:Body> <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'><listName>Companies</listName><viewFields><ViewFields><FieldRef Name='Title' /> </ViewFields></viewFields> </GetListItems> </soapenv:Body> </soapenv:Envelope>";
//Make a call to the List WebService using the SOAP envelope described above.
//The URL is fixed to a Specific Site Root. Feel free to change this
//to your own fixed root or do some jscript voodoo to figure out where
//Of course in 2010 you can do this with the Client Object Model, or hit
//the list rest Service and return json, so enabling jsonp cross site calls.
$.ajax({
url: "https://MYSITENAME.sharepoint.com/_vti_bin/lists.asmx",
type: "POST",
dataType: "xml",
data: soapEnv,
contentType: "text/xml; charset=\"utf-8\"",
success: function( xmlResponse ) {
var domElementArray=$( "z\\:row", xmlResponse );
var dataMap = domElementArray.map(function()
{
return {
value: $(this).attr('ows_Title') ,
id: $(this).attr('ows_Title')
};
});
var data = dataMap.get();
//Find the Sharepoint Portal Search Box (this is a poor selector, but it is not properly named by sharepoint, well it is but INamingContainer gets in the way)
$( "#txtCompanyId" ).autocomplete(
{ source: data
});
}
});//.ajax
});//docReady
</script>
Screenshots