Solved

.change()

Posted on 2013-05-11
9
365 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
 
LVL 5

Author Comment

by:Isaac
ID: 39159486
GaryC123, do you know why my dropdown is not firing?
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
jquery, dropdown 4 38
custom jquery validation method 11 16
Bootstap Icons 3 22
Retrieve values of an HTML form using JQUERY 2 18
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
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)

747 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

9 Experts available now in Live!

Get 1:1 Help Now