Link to home
Create AccountLog in
Avatar of Isaac
IsaacFlag for United States of America

asked on

populating drop down with jquery (SharePoint 2010)

Hi All,

I'm trying to populate a drop down from a SharePoint list using jquery webservices but when I do, the values in my drop down duplicate whenever I make a selection.  Please help!

User generated imageHere's the code
<table style="width: 100%">
				<tr>
								<td colspan="2">New Deliverable</td>
				</tr>
				<tr>
								<td style="width: 313px">Deliverable Name</td>
								<td><input name="DeliverableName" type="text" id="txtDeliverableName" /></td>
				</tr>
				<tr>
								<td style="width: 313px">FY</td>
								<td>
								  <select name="Select1" id="drpdFY">
									<option></option>
								  </select>
								</td>
				</tr>
				<tr>
								<td style="width: 313px">Activity</td>
								<td>
								  <select name="Select2" id="drpdActivity">
									<option></option>
								  </select>
						        </td>
				</tr>
				<tr>
								<td style="width: 313px">Function</td>
								<td>
									<select name="Select3" id="drpdFunction">
									  <option></option>
									</select>
								</td>
				</tr>
				<tr>
								<td style="width: 313px; height: 29px;">Project</td>
								<td style="height: 29px"><input name="Text2" type="text" id="txtProject" /></td>
				</tr>
				<tr>
								<td style="width: 313px">Government Lead</td>
								<td>
									<select id="drpdGovtLead">
									  <option></option>
									</select>
								</td>
				</tr>
				<tr>
								<td style="width: 313px">Product</td>
								<td><input type="text" id="txtProduct" /></td>
				</tr>
				<tr>
								<td style="width: 313px">Performer</td>
								<td>
									<select name="Select5" id="drpdPerformer">
									  <option></option>
									</select>
								</td>
				</tr>
				<tr>
								<td style="width: 313px">Contract</td>
								<td>
												<select name="Select10" id="drpdContract">
												<option></option>
												</select></td>
				</tr>				
				<tr>
								<td style="width: 313px">Performer POCs</td>
								<td>
									<select name="Select6" id="drpdPerformerPoc">
									  <option></option>
									  <option>test</option>
									</select>
								</td>
				</tr>
				<tr>
								<td style="width: 313px">Description</td>
								<td><textarea name="TextArea1" cols="20" rows="2" id="textADescription"></textarea></td>
				</tr>
				<tr>
								<td style="width: 313px">Start Date</td>
								<td><input type="text" id="StartDate" /></td>
				</tr>
				<tr>
								<td style="width: 313px">End Date</td>
								<td><input type="text" id="EndDate" /></td>
				</tr>
				<tr>
								<td style="width: 313px">Status</td>
								<td>
									<select name="Select7" id="drpdStatus">
									   <option></option>
									</select>
								</td>
				</tr>
				<tr>
								<td style="width: 313px">Completion Date</td>
								<td><input type="text" id="CompletionDate" /></td>
				</tr>
				<tr>
								<td style="width: 313px">AOT Designator</td>
								<td>
									<select name="Select8" id="drpdAotDesignator">
										<option></option>
									</select>
								</td>
				</tr>
				<tr>
								<td style="width: 313px">Realm</td>
								<td>
												<select name="Select9" id="drpdRealm">
												<option></option>
												</select></td>
				</tr>
				<tr>
								<td style="width: 313px">Planned</td>
								<td>

												<input name="Text4" type="text" id="txtPlanned" /></td>
				</tr>
				<tr>
								<td style="width: 313px">Staff Months</td>
								<td>

												<input name="Text6" type="text" id="txtStaffMonths" /></td>
				</tr>
				<tr>
								<td style="width: 313px; height: 29px;">Planned Funding</td>
								<td style="height: 29px">

												<input name="Text5" type="text" id="txtPlannedFunding" /></td>
				</tr>			
				<tr>
								<td colspan="2">
								<input type="submit" id="SubmitButton" value="Submit" onclick="SubmitButtonClick(this)" />
								&nbsp;</td>
				</tr>
</table>
<!--- </form> -->

<!-- Begin Javascript and JQuery -->
<script type="text/javascript" src="../jquery-1.8.2.min.js" language="javascript"></script>
<script type="text/javascript" src="../jquery.SPServices-0.7.2.min.js" language="javascript"></script>
<script type="text/javascript" src="../jquery-ui-LatestVersion.js" language="javascript"></script>
<script type="text/javascript">

$(function() {
    $( "#StartDate" ).datepicker();
	$( "#EndDate" ).datepicker();
	$( "#CompletionDate" ).datepicker();
  });
  
$(document).ready(function() {
 
	// Gets the current sites URL
	currSiteUrl = $().SPServices.SPGetCurrentSite();

//Get Contract Performer data to populate drop down list
        var soapEnv3 =
        "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'>" +
            "<soapenv:Body>" +
                "<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'>" +
                    "<listName>Contract Performer</listName>" +
                    "<viewFields>" +
                        "<ViewFields>" +
                        "</ViewFields>" +
                    "</viewFields>" +
                "</GetListItems>" +
            "</soapenv:Body>" +
        "</soapenv:Envelope>";
        $.ajax(
	{
	    url: currSiteUrl + "/_vti_bin/lists.asmx",
	    async: true,
	    type: "POST",
	    dataType: "xml",
	    data: soapEnv3,
	    complete: GetPerformerName,
	    contentType: "text/xml; charset=\"utf-8\""
	});


	
	
	

}) //Close Main Function

$("#drpdPerformer").change(function(){
	GetListData("Contract Performer","","GetPerformerName",true);
})

//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: currSiteUrl + "/_vti_bin/lists.asmx",
        type: "POST",
		async: isAsync,
        dataType: "xml",
        data: soapEnv,
        complete: function(xData, status){
		//alert(CompleteMethod);
			if(CompleteMethod == "GetPerformerName")
				GetPerformerName(xData,status);				
		},
        contentType: "text/xml; charset=\"utf-8\""
    });	
}

function GetPerformerName(xData, status) 
{
//alert(xData.responseXML.xml);
	//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");
		//alert("Title: "+Title);
		var appendThis = "<option value='"+Title+"'>"+Title+"</option>";					
		$("#drpdPerformer").append(appendThis);
	});
}

Open in new window

Avatar of Rainer Jeschor
Rainer Jeschor
Flag of Germany image

Hi,
you will have to reset the option list before you append new entries. I added the lines in your function code and also add an empty option as first element:
function GetPerformerName(xData, status) 
{
	// Reset the option list
	$("#drpdPerformer").find('option').remove();
	// If wanted add an empty option at the beginning
	$("#drpdPerformer").append('<option></option>');
	//alert(xData.responseXML.xml);
	//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");
		//alert("Title: "+Title);
		var appendThis = "<option value='"+Title+"'>"+Title+"</option>";					
		$("#drpdPerformer").append(appendThis);
	});
}

Open in new window


BTW, you should think of using a debug div element on your page to display debug output there. alerts are sometimes interfering with other page scripts.

HTH
Rainer
ASKER CERTIFIED SOLUTION
Avatar of Manoj Patel
Manoj Patel
Flag of India image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of Isaac

ASKER

Hi,

RainerJ, Your solution worked but whatever I selected reverted to the empty selection.

manojce, Your solution produced duplicates.

Any suggestions?
Hi,
question: so you do not plan to get this dropdown filtered by the selection of the other dropdown?Why would you then call the GetPerformer function each time the dropdown changes?
Workaround would be to store the existing selected value, remove the options, call the getitems to fill the list and then set the value (select the right option) back-but this look wrong. Will the list of performers be the same for all cases? Then simply fill it in the document.ready event.
Thanks and HTH
Rainer
Avatar of Isaac

ASKER

>>question: so you do not plan to get this dropdown filtered by the selection of the other dropdown?<<
No. 2 other drop downs will be filtered based on the selectiion of the dropdown,"Performer".

In the html form, "Contract" will populated with corresponding value based on what's selected in the "Performer" dropdown.  Also, "Performer POCs" will be rendered with corresponding values as checkboxes based on the "Performer" dropdown.  Here's what it looks like in InfoPath (unfortunately, can't use this anymore so decided to do it in jquery):

User generated image
>>Why would you then call the GetPerformer function each time the dropdown changes?<<
All I was trying to do was populate the "Performer" drop down so that the user can make a selection.

Any ideas?
Avatar of Isaac

ASKER

Got the code working with a little tweaking