.change()

Hi All,

This is an html page in sharepoint.

Can someone please explain why my "$("#txtDeliverableName").change(function())" is not working and how to fix it?

After it gets populated with list data and I make a selection, the alert that I have in it does not fire.  
If I switch the .change function to another dropdown that's manually populated and I make a change, it fires.  Why is that?  Thanks!

<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>&nbsp;</td>
				</tr>
				<tr>
								<td style="width: 313px">End Date</td>
								<td>&nbsp;</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>&nbsp;</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="button" id="SubmitButton" value="Submit" onclick="SubmitButtonClick(this)" />
								&nbsp;</td>
				</tr>
</table>


<!-- 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">

$(document).ready(function() {
alert("Hello World: "+$("#drpdContract").val());
//alert($().SPServices.SPGetCurrentSite());

	// Gets the current sites URL
	currSiteUrl = $().SPServices.SPGetCurrentSite();
	alert(currSiteUrl);
//ContractPerformer List (Contractor Name)
//Contracts (Performer)
//
//
//
//
//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\""
	});


$("#txtDeliverableName").change(function(){
alert("YEP..chage");
	// Loading dialog box
	//$("#dialog2").css("display","inline");
	//$("#dialog2").dialog("open");
	var qry = "<query><Query><Where><Eq><FieldRef Name='Title'/><Value Type='Text'>" + $("#txtDeliverableName").val() + "</Value></Eq></Where></Query></query>";
	GetListData("Contract Performer",qry,"GetPerformerName",true);

})



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) 
{
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);
	});
	
	//$("#dialog2").css("display","none");
	//$("#dialog2").dialog("close");
}






function SubmitButtonClick(element)
{
alert("HELLO");
//alert("Deliverable name is: "+txtDeliverableName);
	//var txtDeliverableName = $("#txtDeliverableName").val();
	/*var drpFY = $("#drpdFYi").val();
	var drpdActivity = $("#drpdActivity").val();
	var drpdFunction = $("#drpdFunction").val();
	var txtProject = $("#txtProject").val();
	var drpdGovtLead = $("#drpdGovtLead").val();
	var txtProduct = $("#txtProduct").val();
	var drpdPerformer = $("#drpdPerformer").val();
	var drpdPerformerPoc = $("#drpdPerformerPoc").val();
	var textADescription = $("#textADescription").val();
	var drpdStatus = $("#drpdStatus").val();
	var drpdAotDesignator = $("#drpdAotDesignator").val();
	var drpdRealm = $("#drpdRealm").val();
	var txtPlanned = $("#txtPlanned").val();
	var txtStaffMonths = $("#txtStaffMonths").val();
	var txtPlannedFunding = $("#txtPlannedFunding").val();
	var drpdContract = $("#drpdContract").val();*/
	
	
}



})



</script>

Open in new window

LVL 5
IsaacSharePoint Client Side DeveloperAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
GaryConnect With a Mentor Commented:
txtDeliverableName is an input not a dropdown.
0
 
Rainer JeschorCommented:
Hi,
the change function will be called when the field is loosing its focus (e.g. using the tab key to go to the next field).
Which SharePoint version/edition?
How do you embed/show this HTML page in SHarePoint?
Thanks and HTH
Rainer
0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
Hi,

It's SharePoint 2010 and it's just a html page in my document library for now. Eventually, I want to embed it in a web part page.

I copied and modified the code from another working file that had it working.  Also, when I use the function on "drpdPerformerPoc", it works. When I select 'test', the .change() would fire and when I selected the blank option, it would fire again. There was no tabbing involved.  It seems to work only on dropdowns with values manually entered as opposed to dropdowns populated from a list.
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
GaryCommented:
A dropdown is different from an input box
For a dropdown the change event fires instantly because you cannot actually edit the value whereas in an input there is no point firing a change event until you lose focus at which point you can assume you have finished changing the value.
0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
GaryC123, do you know why my dropdown is not firing?
0
 
GaryCommented:
Which dropdown? When I tested they were working.
0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
txtDeliverableName is the one that's not firing.  You probably manually added the <option> values and that's probably why it works for you.  I am populating it from a list and when I make selections from txtDeliverableName, nothing happens.  Any ideas?
0
 
IsaacSharePoint Client Side DeveloperAuthor Commented:
Geeeez.....I worked too long yesterday. I was up till 12:30 am going crazy...Thank you very,very much. :)  may all your dreams come true. :)

Maybe you can help me with my other question titled "Submit button error"

Thx again!
0
 
GaryCommented:
Already am...
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.