Solved

JQuery cascading drop down

Posted on 2013-05-19
7
512 Views
Last Modified: 2013-05-22
I am trying to create a cascading drop down but I'm not sure why it's not working correctly.
If the user makes a selection in the "Performer" drop down, the "Contract" and "Performer POCs" fields should filter based on that selection.  That does not happen though.  All the values get returned.

Here's an image of my form:
The red lettering you see is the name of the list it comes from.
image

Here's the code:
<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;
	}
	
</style>
<table class="formtbl" 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 value=""></option>
									</select>
								</td>
				</tr>
				<tr>
								<td style="width: 313px">Contract</td>
								<td>
											<select name="Select10" id="drpdContract" multiple>
												<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>

<!-- 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/style/jquery-ui-LatestVersion.css">

<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	
GetListData("Contract Performer","","GetPerformerName",true);
	

}) //Close Main Function

$("#drpdPerformer").change(function(){	
	var queryThis = "<query><Query><Where><Eq><FieldRef Name='Contractor Name'/><Value Type='Lookup'>" + $("#drpdPerformer").val() + "</Value></Eq></Where></Query></query>";
	GetPerformerStaff(queryThis);
	
	var ctrQuery = "<query><Query><Where><Eq><FieldRef Name='Performer'/><Value Type='Lookup'>" + $("#drpdPerformer").val() + "</Value></Eq></Where></Query></query>";
	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: currSiteUrl + "/_vti_bin/lists.asmx",
        type: "POST",
		async: isAsync,
        dataType: "xml",
        data: soapEnv,
        complete: function(xData, status){
			if(CompleteMethod == "GetPerformerName")
				GetPerformerName(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 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_Title")+"'>"+$(this).attr("ows_Title")+"</option>";					
		$("#drpdContract").append(appendThis);
      });
     }
  });	
}

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 SubmitButtonClick(element)
{

	$().SPServices(
				{
					operation: "UpdateListItems",
					listName: "Deliverables",
					async: false,					
					updates: "<Batch OnError='Continue' PreCalc='TRUE'>" +
						"<Method ID='1' Cmd='New'>" +
							"<Field Name='Title'>"+$("#txtDeliverableName").val()+"</Field>" +
							"<Field Name='Activity'>" + $("#drpdActivity").val() + "</Field>" +
							/*"<Field Name='AOTDesignator'>" + $("#drpdAotDesignator").val() + "</Field>" +
							"<Field Name='CompletionDate'>" + $("#CompletionDate").val() + "</Field>" +
							"<Field Name='Contract'>" + $("#Contract").val() + "</Field>" +
							"<Field Name='EndDate'>" + $("#EndDate").val() + "</Field>" +
							"<Field Name='StartDate'>" + $("#StartDate").val() + "</Field>" +
							"<Field Name='Description'>" + $("#Description").val() + "</Field>" +
							"<Field Name='GovernmentLead'>" + $("#GovernmentLead").val() + "</Field>" +
							"<Field Name='Product'>" + $("#Product").val() + "</Field>" +
							"<Field Name='Status'>" + $("#Status").val() + "</Field>" +
							"<Field Name='Function'>" + $("#Function").val() + "</Field>" +					
							"<Field Name='FY'>" + $("#FY").val() + "</Field>" +
							"<Field Name='Performer'>" + $("#Performer").val() + "</Field>" +	
							"<Field Name='PerformerPOCs'>" + $("#PerformerPOCs").val() + "</Field>" +				
							"<Field Name='Planned'>" + $("#Planned").val() + "</Field>" +	
							"<Field Name='PlannedFunding'>" + $("#PlannedFunding").val() + "</Field>" +					
							"<Field Name='Project'>" + $("#Project").val() + "</Field>" +
							"<Field Name='Realm'>" + $("#Realm").val() + "</Field>" +
							"<Field Name='StaffMonths'>" + $("#StaffMonths").val() + "</Field>" + 		*/		
						"</Method>" +
					"</Batch>",
					completefunc: function(xData, Status) 
					{
						//SaveRisks();
					}
	
	
});

}
</script>

Open in new window

0
Comment
Question by:Isaac
  • 4
  • 3
7 Comments
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 39179712
Hi,
from the very first look (and its quite late), you have a malformed query format:
var queryThis = "<query><Query><Where><Eq><FieldRef Name='Contractor Name'/><Value Type='Lookup'>" + $("#drpdPerformer").val() + "</Value></Eq></Where></Query></query>";

Open in new window

should not contain the double query tag and should be
var queryThis = "<Query><Where><Eq><FieldRef Name='Contractor Name'/><Value Type='Lookup'>" + $("#drpdPerformer").val() + "</Value></Eq></Where></Query>";

Open in new window

The same applied for the second query.
Could you please retest and post any results?
I would have to repro on my local dev but that will take until tomorrow afternoon.
BTW: which SharePoint version/edition?
HTH
Rainer
0
 
LVL 5

Author Comment

by:Isaac
ID: 39179738
I'm using SP 2010.
Those changes produced the same result.
0
 
LVL 44

Accepted Solution

by:
Rainer Jeschor earned 500 total points
ID: 39182454
Hi,
OK, I did a repro on my dev system (took me 1,5 hours to walk through the code and to create the necessary lists and settings).
These are the issues:
1. No ";" after the initial jQuery functions
2. Tripled "<query>" elements in the SPServices calls (so not only remove one as mentioned yesterday but all "<query>" in your query string variable as you add the "<query>" element later on in the function call as well)
3. Wrong field name in the Performer Staff query
Assuming that you did not rename the column after creation, your field name should be "Contractor_x0020_Name" and not "Contractor Name")

Please remember: CAML queries take the internal names of the fields, not the title/display value.

Here is the part which works on my machine (just tested the three drop-downs):
<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	
GetListData("Contract Performer","","GetPerformerName",true);
	

});
 
 //Close Main Function
$("#drpdPerformer").change(function(){	
	var queryThis = "<Where><Eq><FieldRef Name='Contractor_x0020_Name'/><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: currSiteUrl + "/_vti_bin/lists.asmx",
        type: "POST",
		async: isAsync,
        dataType: "xml",
        data: soapEnv,
        complete: function(xData, status){
			if(CompleteMethod == "GetPerformerName")
				GetPerformerName(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 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_Title")+"'>"+$(this).attr("ows_Title")+"</option>";					
		$("#drpdContract").append(appendThis);
      });
     }
  });	
}

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 SubmitButtonClick(element)
{

	$().SPServices(
				{
					operation: "UpdateListItems",
					listName: "Deliverables",
					async: false,					
					updates: "<Batch OnError='Continue' PreCalc='TRUE'>" +
						"<Method ID='1' Cmd='New'>" +
							"<Field Name='Title'>"+$("#txtDeliverableName").val()+"</Field>" +
							"<Field Name='Activity'>" + $("#drpdActivity").val() + "</Field>" +
							/*"<Field Name='AOTDesignator'>" + $("#drpdAotDesignator").val() + "</Field>" +
							"<Field Name='CompletionDate'>" + $("#CompletionDate").val() + "</Field>" +
							"<Field Name='Contract'>" + $("#Contract").val() + "</Field>" +
							"<Field Name='EndDate'>" + $("#EndDate").val() + "</Field>" +
							"<Field Name='StartDate'>" + $("#StartDate").val() + "</Field>" +
							"<Field Name='Description'>" + $("#Description").val() + "</Field>" +
							"<Field Name='GovernmentLead'>" + $("#GovernmentLead").val() + "</Field>" +
							"<Field Name='Product'>" + $("#Product").val() + "</Field>" +
							"<Field Name='Status'>" + $("#Status").val() + "</Field>" +
							"<Field Name='Function'>" + $("#Function").val() + "</Field>" +					
							"<Field Name='FY'>" + $("#FY").val() + "</Field>" +
							"<Field Name='Performer'>" + $("#Performer").val() + "</Field>" +	
							"<Field Name='PerformerPOCs'>" + $("#PerformerPOCs").val() + "</Field>" +				
							"<Field Name='Planned'>" + $("#Planned").val() + "</Field>" +	
							"<Field Name='PlannedFunding'>" + $("#PlannedFunding").val() + "</Field>" +					
							"<Field Name='Project'>" + $("#Project").val() + "</Field>" +
							"<Field Name='Realm'>" + $("#Realm").val() + "</Field>" +
							"<Field Name='StaffMonths'>" + $("#StaffMonths").val() + "</Field>" + 		*/		
						"</Method>" +
					"</Batch>",
					completefunc: function(xData, Status) 
					{
						//SaveRisks();
					}
	
	
});

}
</script>

Open in new window


HTH
Rainer
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 39182493
Add-on:
due to the malformed query element you got all results in your GetListitems
0
 
LVL 5

Author Comment

by:Isaac
ID: 39184047
You're AWESOME!  Thanks!  

Thanks for taking the time to put this on your dev machine.  It is much appreciated.  Please don't delete it because I still need to add functionality to the form and may need your help.

Thanks again!
0
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 39189294
Hi,
glad that this worked. Could you please mark this question as answered?
Thanks.
KR
Rainer
0
 
LVL 5

Author Closing Comment

by:Isaac
ID: 39189431
Oops! Thought I did...
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

932 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

7 Experts available now in Live!

Get 1:1 Help Now