• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2677
  • Last Modified:

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!

duplicatesHere'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

0
Isaac
Asked:
Isaac
  • 3
  • 2
1 Solution
 
Rainer JeschorCommented:
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
0
 
manojceCommented:
Hi,

Add below changed 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\""
	});


	
        // Get Performer Data AND Bind DDL
        GetListData("Contract Performer", "", "GetPerformerName", true);
	

    }) //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);
        });
    }
    </script>

Open in new window


Let me know if you have any query.

Thanks,
0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
Hi,

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

manojce, Your solution produced duplicates.

Any suggestions?
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
Rainer JeschorCommented:
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
0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
>>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):

CDD
>>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?
0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
Got the code working with a little tweaking
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now