Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

JQuery cascading drop down

Posted on 2013-05-19
7
Medium Priority
?
523 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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
Veeam Task Manager for Hyper-V

Task Manager for Hyper-V provides critical information that allows you to monitor Hyper-V performance by displaying real-time views of CPU and memory at the individual VM-level, so you can quickly identify which VMs are using host resources.

 
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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

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

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In case you ever have to remove a faulty web part from a page , add the following to the end of the page url ?contents=1
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)
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…

604 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