asked on

.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

Rainer Jeschor

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

Isaac

ASKER

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.

Gary

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.

Isaac

ASKER

GaryC123, do you know why my dropdown is not firing?

Gary

Which dropdown? When I tested they were working.

Isaac

ASKER

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?

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Isaac

ASKER

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!

Gary

Already am...