Solved

.change()

Posted on 2013-05-11
9
367 Views
Last Modified: 2013-05-12
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

0
Comment
Question by:Isaac
  • 4
  • 4
9 Comments
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 39159420
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
 
LVL 5

Author Comment

by:Isaac
ID: 39159455
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
 
LVL 58

Expert Comment

by:Gary
ID: 39159471
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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
LVL 5

Author Comment

by:Isaac
ID: 39159486
GaryC123, do you know why my dropdown is not firing?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39159494
Which dropdown? When I tested they were working.
0
 
LVL 5

Author Comment

by:Isaac
ID: 39159502
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
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39159512
txtDeliverableName is an input not a dropdown.
0
 
LVL 5

Author Comment

by:Isaac
ID: 39159522
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
 
LVL 58

Expert Comment

by:Gary
ID: 39159523
Already am...
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

832 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