Solved

SP list not updating with spservices

Posted on 2013-06-01
2
824 Views
Last Modified: 2013-06-02
Please help!!

Not sure why it's not updating.  A list item is suppose to update based on an id from the querystring.  I get a javaScript error but I'm unable to capture the error b/c it flashes and then disappears after I click the submit button.

<style>
table.formtbl {
		background:#ebf4fb;
		font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
		font-size:12px;
	}
	table.formtbl input{
		float:left;
		font-size:12px;
		padding:4px 2px;
		border:solid 1px #aacfe4;
		width:200px;
	}
	
	.bgColor {
	background-color:white;
	text-align:right
	}
	
	.bgColorElement {	
		background-color:white;
	}
	
</style>

<table border="0" style="width: 45%">
<tr>
<td style="background-color:#eeeeee">
	<table class="formtbl" style="width: 100%" cellspacing="1" cellpadding="2">
					<tr>
									<td colspan="2" style="width:313px;font-weight:bold;text-align:left"><h2>
									Edit Deliverable</h2></td>
					</tr>
					<tr>
									<td style="width: 313px;font-weight:bold" class="bgColor">Deliverable Name</td>
									<td class="bgColor"><input name="DeliverableName" type="text" id="txtDeliverableName"></td>
					</tr>
					<tr>
									<td style="width: 313px;font-weight:bold" class="bgColor">FY</td>
									<td class="bgColorElement">
									  <select name="FY" id="drpdFY">
									    <option value=""></option>
										<option value="2013">2013</option>
										<option value="2014">2014</option>
										<option value="2015">2015</option>
									  </select>
									</td>
					</tr>
					<tr>
									<td style="width: 313px;font-weight:bold" class="bgColor">Activity</td>
									<td class="bgColorElement">
									  <select name="Activity" id="drpdActivity">
									 	<option value=""></option>
										<option value="Aerial Networking">Aerial Networking</option>
										<option value="AISR Comms">AISR Comms</option>
										<option value="Cross-Cutting">Cross-Cutting</option>
										<option value="Maritime Networking">Maritime Networking</option>
										<option value="SATCOM and Terminals">SATCOM and Terminals</option>
										<option value="Tactical Networking">Tactical Networking</option>
										<option value="Other">Other</option>
									  </select>
							        </td>
					</tr>
					<tr>
									<td style="width: 313px;font-weight:bold" class="bgColor">Function</td>
									<td class="bgColorElement">
										<select name="Function" id="drpdFunction">
										  <option value=""></option>
										  <option value="AoAs">AoAs</option>
										  <option value="Assessments">Assessments</option>
										  <option value="Long-Range Plans and Resource Allocatiion">Long-Range Plans and Resource Allocatiion</option>
										  <option value="Portfolio Mgt and Systems Eng.">Portfolio Mgt and Systems Eng.</option>
										  <option value="Program Oversight">Program Oversight</option>
										  <option value="Technical Oversight">Technical Oversight</option>
										  <option value="OTHER">OTHER</option>										  										  										  										  										  										  
										</select>
									</td>
					</tr>
					<tr>
									<td style="width: 313px; height: 29px;font-weight:bold" class="bgColor">Project</td>
									<td style="height: 29px" class="bgColorElement"><input name="Project" type="text" id="txtProject"></td>
					</tr>
					<tr>
									<td style="width: 313px;font-weight:bold" class="bgColor">Government Lead</td>
									<td class="bgColorElement">
										<select id="drpdGovtLead">
										  <option value=""></option>
										  <option value="Pino">Pino</option>
										  <option value="Greenfield">Greenfield</option>
										  <option value="Myers">Myers</option>
										  <option value="Chartier">Chartier</option>
										  <option value="Yarbrough">Yarbrough</option>
										  <option value="Brown">Brown</option>
										  <option value="Cardwell">Cardwell</option>
										  <option value="Corbett">Corbett</option>										  										  										  										  										  										  										  
										</select>
									</td>
					</tr>
					<tr>
									<td style="width: 313px;font-weight:bold" class="bgColor">Product</td>
									<td class="bgColorElement"><input type="text" name="Product" id="txtProduct"></td>
					</tr>
					<tr>
									<td style="width: 313px;font-weight:bold" class="bgColor">Performer</td>
									<td class="bgColorElement">
										<select name="Select5" id="drpdPerformer">
										  <option value=""></option>
										</select>
									</td>
					</tr>
					<tr>
									<td style="width: 313px;font-weight:bold" class="bgColor">Contract</td>
									<td class="bgColorElement">
												<select name="contract" id="drpdContract" multiple>
													<option value=""></option>
												</select>
									</td>
					</tr>				
					<tr>
									<td style="width: 313px;font-weight:bold" class="bgColor">Performer POCs</td>
									<td class="bgColorElement">
										<select name="performerPOC" id="drpdPerformerPoc">
										  <option value=""></option>
										</select>
									</td>
					</tr>
					<tr>
									<td style="width: 313px;font-weight:bold" class="bgColor">Description</td>
									<td class="bgColorElement"><textarea name="description" cols="20" rows="2" id="textADescription"></textarea></td>
					</tr>
					<tr>
									<td style="width: 313px;font-weight:bold" class="bgColor">Start Date</td>
									<td class="bgColorElement"><input type="text" name="txtStartDate" id="StartDate"></td>
					</tr>
					<tr>
									<td style="width: 313px;font-weight:bold" class="bgColor">End Date</td>
									<td class="bgColorElement"><input type="text" name="dteEndDate" id="EndDate"></td>
					</tr>
					<tr>
									<td style="width: 313px;font-weight:bold" class="bgColor">Status</td>
									<td class="bgColorElement">
										<select name="status" id="drpdStatus">
										   <option value=""></option>
										   <option value="Completed">Completed</option>
										   <option value="In Progress">In Progress</option>
										   <option value="Not Started">Not Started</option>
										</select>
									</td>
					</tr>
					<tr>
									<td style="width: 313px;font-weight:bold" class="bgColor"><span style="display:none" id="showCompletionDatelabel">
									Completion Date</span></td>
									<td class="bgColorElement">
									<span style="display:none" id="showCompletionDate">
										<input type="text" name="txtCompletionDate" id="CompletionDate">
									</span>
									</td>
					</tr>
					<tr>
									<td style="width: 313px;font-weight:bold" class="bgColor">AOT Designator</td>
									<td class="bgColorElement">
										<select name="AotDesignator" id="drpdAotDesignator">
											<option value=""></option>
											<option value="Yes">Yes</option>
											<option value="No">No</option>
										</select>
									</td>
					</tr>					
					<tr>
									<td style="width: 313px;font-weight:bold" class="bgColor"><span style="display:none" id="showRealmLabel">Realm</span></td>
									<td class="bgColorElement">
									<span style="display:none" id="showRealmDrpd">
													<select name="Realm" id="drpdRealm">
													<option value=""></option>
													<option value="Acquisition">Acquisition</option>
													<option value="Requirements">Requirements</option>
													<option value="Oversight">Oversight</option>
													<option value="Technical Design/Demo">Technical Design/Demo</option>
													<option value="Critical Change">Critical Change</option>													
													</select>
									</span>
									</td>
					</tr>
					<tr>
									<td style="width: 313px;font-weight:bold" class="bgColor">Planned</td>
									<td class="bgColorElement">
	
													<input name="planned" type="text" id="txtPlanned"></td>
					</tr>
					<tr>
									<td style="width: 313px;font-weight:bold" class="bgColor">Staff Months</td>
									<td class="bgColorElement">
	
													<input name="StaffMonths" type="text" id="txtStaffMonths"></td>
					</tr>
					<tr>
									<td style="width: 313px; height: 29px;font-weight:bold" class="bgColor">Planned Funding</td>
									<td style="height: 29px" class="bgColorElement">
	
													<input name="Text5" type="text" id="txtPlannedFunding"></td>
					</tr>			
					<tr>
									<td colspan="2" class="bgColorElement">
									<input type="submit" id="SubmitButton" value="Submit" onclick="SubmitButtonClick(this)">
									&nbsp;</td>
					</tr>
	</table>
</td>
</tr>
</table>

<!-- Begin Javascript and JQuery -->
<script type="text/javascript" src="http://win-2n0d15326id:11275/CNportal/js/jquery-1.8.2.min.js" language="javascript"></script>
<script type="text/javascript" src="http://win-2n0d15326id:11275/CNportal/js/jquery.SPServices-0.7.2.min.js" language="javascript"></script>
<script type="text/javascript" src="http://win-2n0d15326id:11275/CNportal/js/jquery-ui-LatestVersion.js" language="javascript"></script>
<link rel="stylesheet" type="text/css" href="http://win-2n0d15326id:11275/CNportal/Styles/jquery-ui-LatestVersion.css">

<script type="text/javascript">

$(function() {

    $( "#StartDate" ).datepicker();
	$( "#EndDate" ).datepicker();
	$( "#CompletionDate" ).datepicker();

  });
  

$(document).ready(function() {
 	var cid = getUrlVars()["cid"];
	//alert("ID: "+cid);
	currSiteUrl = $().SPServices.SPGetCurrentSite();
	
//Get Contract Performer data to populate drop down list	
GetListData("Contract Performer","","GetPerformerName",true);
	
var soapEnv1 =
        "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'>" +
            "<soapenv:Body>" +
                "<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'>" +
                    "<listName>Deliverables</listName>" + 
                    	"<query><Query><Where><Eq><FieldRef Name='ID' /><Value Type='Counter'>"+cid+"</Value></Eq></Where></Query></query>" +                       
                    "<viewFields>" +
                        "<ViewFields>" +
                        "</ViewFields>" +
                    "</viewFields>" +
                "</GetListItems>" +
            "</soapenv:Body>" +
        "</soapenv:Envelope>";
        $.ajax(
		{
			url: currSiteUrl + "/_vti_bin/lists.asmx",
			async: true,
			type: "POST",
			dataType: "xml",
			data: soapEnv1,
			complete: GetDeliverableData,
			contentType: "text/xml; charset=\"utf-8\""
		});

	// Gets the current sites URL
	var currSiteUrl = $().SPServices.SPGetCurrentSite();
});

$("#drpdPerformer").change(function(){	
	var queryThis = "<Where><Eq><FieldRef Name='ContractorName'/><Value Type='Lookup'>" + $("#drpdPerformer").val() + "</Value></Eq></Where>";
	GetPerformerStaff(queryThis);
	
	var ctrQuery = "<Where><Eq><FieldRef Name='Performer'/><Value Type='Lookup'>" + $("#drpdPerformer").val() + "</Value></Eq></Where>";
	GetContracts(ctrQuery);
});

//Gets list data
function GetListData(ListName,Query,CompleteMethod,isAsync)
{
	var soapEnv =
        "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'>" +
            "<soapenv:Body>" +
                "<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'>" +
                    "<listName>"+ListName+"</listName>" + Query	+				
                    "<viewFields>" +
                        "<ViewFields>" +
                        "</ViewFields>" +
                    "</viewFields>" +
                "</GetListItems>" +
            "</soapenv:Body>" +
        "</soapenv:Envelope>";				
    $.ajax(
	{
        url: "http://win-2n0d15326id:11275/CNportal/_vti_bin/lists.asmx",
        type: "POST",
		async: isAsync,
        dataType: "xml",
        data: soapEnv,
        complete: function(xData, status){
		//alert(CompleteMethod);
			if(CompleteMethod == "GetPerformerName")
				GetPerformerName(xData,status);	
			//if(CompleteMethod == "GetPerformerStaff")
			//	GetPerformerStaff(xData,status);
		},
        contentType: "text/xml; charset=\"utf-8\""
    });	
}

function GetPerformerName(xData, status) 
{
	//Iterates through each row and returns information - Populates the "Performer" dropdown with values from the Objectives list
    $(xData.responseXML).find("z\\:row").each(function() 
	{  	
		var Title = $(this).attr("ows_Title");
		var appendThis = "<option value='"+Title+"'>"+Title+"</option>";					
		$("#drpdPerformer").append(appendThis);		
	});
}

function GetDeliverableData(xData,status) 
{
//alert(xData.responseXML.xml);
	//alert("Hello");
	$(xData.responseXML).find("z\\:row").each(function() 
	{  	
		var Title = $(this).attr("ows_Title");
		//alert("Title: "+Title);
		$("#txtDeliverableName").val(Title);
		
		var FY = $(this).attr("ows_FY");
		$("#drpdFY").val(FY);
		
		var Activity = $(this).attr("ows_Activity");
		$("#drpdActivity").val(Activity);
		
		var Function = $(this).attr("ows_Function");
		$("#drpdFunction").val(Function);
		
		var Project = $(this).attr("ows_Project");
		$("#txtProject").val(Project);
		
		var GovtLead = $(this).attr("ows_GovtLead");
		$("#drpdGovtLead").val(GovtLead);
		
		var Product = $(this).attr("ows_Product");
		$("#txtProduct").val(Product);
		
		var Performer = $(this).attr("ows_Performer");
		$("#drpdPerformer").val(Performer);		
		
		var Contract = $(this).attr("ows_Contracts");
		$("#drpdContract").val(Contract);
		
		var PerformerPoc = $(this).attr("ows_PerformerPOCs");
		$("#drpdPerformerPoc").val(PerformerPoc );
		
		var Description = $(this).attr("ows_Description");
		$("#textADescription").val(Description);
				
		var StartDate = $(this).attr("ows_StartDate");
		$("#StartDate").val(StartDate);
		
		var EndDate =  $(this).attr("ows_EndDate");
		$("#EndDate").val(EndDate );
		
		var CompletionDate = $(this).attr("ows_CompletionDate");
		$("#CompletionDate").val(CompletionDate);

		var Planned = $(this).attr("ows_Planned");
		$("#txtPlanned").val(Planned);
		
		var staffMonths = $(this).attr("ows_StaffMonths");
		$("#txtStaffMonths").val(staffMonths);
		
		var status = $(this).attr("ows_Status");
		$("#drpdStatus").val(status);
		
		var Designator = $(this).attr("ows_AOTDesignator");
		$("#drpdAotDesignator").val(Designator);
		
		var PlannedFund = $(this).attr("ows_PlannedFunding");
		$("#txtPlannedFunding").val(PlannedFund);		
		
		var PerformerPOC = $(this).attr("ows_PerformerPOCs");
		$("#drpdPerformerPoc").val(PerformerPOC);

		
	});
}

function GetPerformerStaff(qry) 
{
	$("#drpdPerformerPoc").find('option').remove();
	$("#drpdPerformerPoc").append('<option></option>');
	
	$().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "Performer Staff",
    CAMLViewFields: "<ViewFields></ViewFields>",
    CAMLQuery:"<Query>" +
                  qry +
               "</Query>",

    completefunc: function (xData, Status) {


      $(xData.responseXML).SPFilterNode("z:row").each(function() {
      
		var appendThis = "<option value='"+$(this).attr("ows_Title")+"'>"+$(this).attr("ows_Title")+"</option>";					
		$("#drpdPerformerPoc").append(appendThis);

      });
     }
  });
}

function GetContracts(qry) 
{
	$("#drpdContract").find('option').remove();
	$("#drpdContract").append('<option></option>');
	
	$().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "Contracts",
    CAMLViewFields: "<ViewFields></ViewFields>",
    CAMLQuery:"<Query>" +
                  qry +
               "</Query>",
      completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {      
		var appendThis = "<option value='"+$(this).attr("ows_ContractName")+"'>"+$(this).attr("ows_ContractName")+"</option>";					
		$("#drpdContract").append(appendThis);

      });

     }

  });
	
}

function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

function SubmitButtonClick(element)
{
alert("HELLO");
var DeliverableName = $("#txtDeliverableName").val();
	var FY = $("#drpdFY").val();
	var Activity = $("#drpdActivity").val();
	var Function = $("#drpdFunction").val();
	var Project = $("#txtProject").val();
	var Product = $("#txtProduct").val();
	var GovtLead = $("#drpdGovtLead").val();
	var Performer = $("#drpdPerformer").val();
	var PerformerPOC = $("#drpdPerformerPoc").val();
	var Description = $("#textADescription").val();
	var StartDate = $("#StartDate").val();
	var EndDate = $("#EndDate").val();
	var CompletionDate = $("#CompletionDate").val();
	if (CompletionDate=="")
	{
		CompletionDate = "NA";
	}
	var Planned = $("#txtPlanned").val();
	var staffMonths = $("#txtStaffMonths").val();
	var status = $("#drpdStatus").val();
	var Designator = $("#drpdAotDesignator").val();
	var Contract = $("#drpdContract").val();
	var PlannedFund = $("#txtPlannedFunding").val();
	var Realm = $("#drpdRealm").val();

$().SPServices({
					operation: "UpdateListItems",
					listName: "Deliverables",
					ID: cid,
					valuepairs:[["Title", DeliverableName],["FY", FY],["Activity", Activity],["Function", Function],["Project", Project],["Product", Product],["GovtLead", GovtLead],["Performer", Performer],["PerformerPOCs", PerformerPOC],["Description", Description],["StartDate", StartDate],["EndDate", EndDate],["CompletionDate", CompletionDate],["Planned", Planned],["StaffMonths", staffMonths],["Status", status],["AOTDesignator", Designator],["Contracts", Contract],["PlannedFunding", PlannedFund],["Realm", Realm]],					
					completefunc: function(xData, Status) 
					{
				alert("Sending the xml request to the server was: " + status);
				alert("Sharepoint processing of the message returned: " + xData.responseText);
					}
		});
}			

/*
function UpdateCurrentResultList(itemValue,itemID,k)
	{
		$().SPServices({
			operation: "UpdateListItems",
			//async: false,
			listName: "Current Results List",
			ID: itemID,
			valuepairs: [["CurrentResultQtr"+k,itemValue]],		
		completefunc: function(xData, status){
				//alert("Sending the xml request to the server was: " + status);
				//alert("Sharepoint processing of the message returned: " + xData.responseText);
		}
		});
	}			
*/
</script>

Open in new window

0
Comment
Question by:Isaac
2 Comments
 
LVL 44

Accepted Solution

by:
Rainer Jeschor earned 500 total points
ID: 39214149
Hi,
hm, would be hard to analyze from our Experts point of view as it depends a lot on the existing data and list definition.
So debugging would primarily be possible on your side.
You have to options:
1. Using IE9/10 and the developer tools (built-in)

or / and (I would prefer to say AND)
2. Using a proxy tool like Fiddler
With Fiddler you can track exactly what has been sent and what has been the response. The call from SPServices will go to the lists.asmx and you should be able to see the XML response of the web service call. Normally you get an error code and a more or less self explaining error message.

How to test/debug SPServices - Listservice calls?
In general before I implement the form logic (and more complicated stuff like change events ..., I create a simple form with two textareas and a button. In the first textarea I paste/write the complete  CAML document which will be sent by SPServices, the second one displays the response:
<div><textarea id="Testing" cols="80" rows="20">HEREGOESYOURCAMLXML</textarea>
<div><textarea id="TestResponse" cols="80" rows="20"></textarea>
<button id="SubmitTest" onclick="SubmitTestCAML()">Test</button></div>

<script type="text/javascript" src="/_LAYOUTS/RainerJScripts/jquery-1.8.3.min.js" language="javascript"></script>
<script type="text/javascript" src="/_LAYOUTS/RainerJScripts/jquery.SPServices-0.7.2.min.js" language="javascript"></script>
<script type="text/javascript">
function SubmitTestCAML()
{
	var updtText = $("#Testing").val();
	$().SPServices(
		{
			operation: "UpdateListItems",
			listName: "YourTargetList",
			async: false,					
			updates: updtText,
			completefunc: function(xData, Status) 
			{
				var debugResponse = $().SPServices.SPDebugXMLHttpResult({
					node: xData.responseXML
				});
				$("#TestResponse").val(debugResponse);
				//alert(xData.responseXML);
			}
		});
}
</script>

Open in new window

Sometimes it is easier to start with only the required fields and then go further step by step (field by field) especially for more complicated field types like dates, lookups, peoplepicker ...

Perhaps you can post the array of data you send - I assume either the cid is empty OR its simply a wrong format of the lookup values - which need to be in the format
lookupitemid#;lookupcolumnvalue

http://sympmarc.com/2011/07/08/updating-a-lookup-column-using-sharepoints-lists-web-service/

HTH
Rainer
0
 
LVL 5

Author Comment

by:Isaac
ID: 39215293
Thanks for the debugging suggestion.  I found out that the problem was where I placed
"var cid = getUrlVars()["cid"];"   When I placed it after the opening <script> tab, it worked.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
These days socially coordinated efforts have turned into a critical requirement for enterprises.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

759 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now