Solved

onchage event

Posted on 2015-02-23
7
41 Views
Last Modified: 2015-02-26
So, the onchage event that I have in my drop down is not firing.  Any ideas?

function getGroups(){
  $().SPServices({
            operation: "GetGroupCollectionFromWeb",
            webURL: siteURL,
            async: false,
            completefunc: function (xData, Status) {
              //console.log(xData.responseXML);
              $(xData.responseXML).find("Group").each(function() {
                //var names = $(this).attr("LoginName");
                var id = $(this).attr("ID");
                
                $("#WSOutput").append("<option value="+ $(this).attr("Name") +">" + $(this).attr("Name") + "</option>");
                
              });
            }
        });
		
		//Capture selected value
		var groupSelection =  document.getElementById("WSOutput").value; //ADDED
		
		console.log("selected value: "+groupSelection);
		//Call getGroupUsers() function to filter
		getGroupUsers(groupSelection); //ADDED
}

//returns users from group
function getGroupUsers(group){
		//var dfd = $.Deferred();
		alert(group);
	console.log("In getGroupUsers function");
		($().SPServices({
			operation: "GetUserCollectionFromGroup",
			groupName: group, //ADDED
			async: true
		})).done(function(responseXML, status){
			var d = [];

			var nodes = $(responseXML).SPFilterNode("User")
			if (nodes.length > 0){
				nodes.each(function(){
					var uId = $(this).attr("ID");
					var uName = $(this).attr("Name");
					var uLoginName =$(this).attr("LoginName");	
					var uEmail = $(this).attr("Email");
					//var uTitle = $(this).attr("Title");
					console.log("uEmail");
					//alert("I'm in");	
					$("#users").append("<table id='uTbl'><tr><td>" + uId + "</td><td>" + uName + "</td><td>" + "<a href='mailto:" + uEmail + "'>"+ uEmail +"</a></td></tr></table>");	
				});
			}
		});
}	

});
</script>
<style>
#uTbl  {
	width:100%;
	border-collapse: collapse;
	table-layout: fixed;
}
table#uTbl, #uTbl td {
	border:1px solid #ccc;
}
#uTbl td {
	padding: 5px;
}

</style>
<select id="WSOutput" onchange="getGroups()"> //ADDED EVENT
<select id="nameSelect">
<div id="users"></div>

<div id="myOutDiv"></div>

Open in new window

0
Comment
Question by:Isaac
  • 3
  • 2
  • 2
7 Comments
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 40626718
Hi,
hm, have you closed the select tag?
Can you please simply try to replace
<select id="WSOutput" onchange="getGroups()"> //ADDED EVENT
<select id="nameSelect">

Open in new window

with
<select id="WSOutput" onchange="getGroups()" /> //ADDED EVENT
<select id="nameSelect" />

Open in new window


Javascript / jQuery can be very picky as soon as the HTMLDOM is not valid.

HTH
Rainer
0
 
LVL 5

Author Comment

by:Isaac
ID: 40626913
Closed it but that didn't work.
0
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 40626956
Hi,
hm, could you perhaps attach the complete generated HTML source?
Second question: why do you want to call the getGroups function in the onchange? Shouldnt this be the getGroupUsers? Because in the latter one you build up the select and multiple calls will simply append the same groups again and again.
Thanks.
Rainer
0
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40627011
Might sound obvious, but in the code you posted, you don't have any <options> in the <select>, meaning there's nothing to change it to: it's never going to fire a change() event!
0
 
LVL 5

Author Comment

by:Isaac
ID: 40627021
Here's what I'm trying to do,

I want to show users in a group based on the selection of a group from a drop down box.

@Chris, <options> is dynamically added.

Here's the page http://isaac.issharepoint.com/practice/Web%20Part%20Pages/test.aspx
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 40627025
On the page you posted, the <select> is not dynamically populated - it's empty!
0
 
LVL 44

Accepted Solution

by:
Rainer Jeschor earned 500 total points
ID: 40627049
Hi,
thanks. Due to missing credentials, the SPServices call does not return anything.

BTW, when using IE 11 to open the page, I get two Javascript errors:
Line 824: var logoImg = documentGetElementsByName('onetidHeadbnnr0');
There is a missing "." and should be
var logoImg = document.GetElementsByName('onetidHeadbnnr0');

And the next one a couple of lines later:
MoveSiteTitle(); - this function cannot be found.

HTH
Rainer
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
This article discusses how to create an extensible mechanism for linked drop downs.
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…

856 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