[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

onchage event

Posted on 2015-02-23
7
Medium Priority
?
66 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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
LVL 45

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 45

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 2000 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

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn how to dynamically set the form action using jQuery.
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…
Suggested Courses

591 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