Solved

code debug, js

Posted on 2012-04-10
7
244 Views
Last Modified: 2012-04-11
On a webpage, I have two list boxes with the data on display:

________________
| Group 1       |
| Group 2       |
| Group 3       |  <--  id= "group"
| Group 4       |
----------------------
________________
| Sub G 1       |
| Sub G 2       |  <--  id= "subgroup"
| Sub G 3       |
| Sub G 4       |
----------------------

I have groupData.js to add the followings:

1. Using the following arrays upload (replace) the data in both group and subgroup list boxes:

var groupNames = ["Group 1x", "Group 2x", "Group 3x", "Group 4x"];
var subgroupNames = ["Sub G  1x", "Sub G 2x", "Sub G 3x", "Sub G 4x"];

2. Upon a click on the list boxes to execute:

alert("You have clicked on group control"); or
alert("You have clicked on sub group control");

as applicable.

It doesn't quite perform. Could you please take a look at it. I am new to js and trying to understand it.

Thank you.
designpalette.css
userinput.html
groupData.js
0
Comment
Question by:Mike Eghtebas
  • 3
  • 3
7 Comments
 
LVL 20

Accepted Solution

by:
Proculopsis earned 400 total points
ID: 37831547
Not sure if this is what you want but take a look at this jsfiddle.
0
 
LVL 20

Assisted Solution

by:BuggyCoder
BuggyCoder earned 100 total points
ID: 37832036
here you go:-

$('document').ready(function(){
$.each(groupNames,function(){
$('#group').append('</option>').text(this);
});

$.each(subgroupNames ,function(){
$('#subgroup').append('</option>').text(this);
});

$('#group').click(function(){alert('group is clicked');});
$('#subgroup').click(function(){alert('subgroup is clicked');});
});

Open in new window

0
 
LVL 33

Author Comment

by:Mike Eghtebas
ID: 37832923
HI  BuggyCoder,

What name should I be saving this file as?

Where and how do I include this in the html file?

Thanks,

Mike
0
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
LVL 20

Expert Comment

by:BuggyCoder
ID: 37832940
add it to head section of you aspx/html file as:-
<head>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$('document').ready(function(){
$.each(groupNames,function(){
$('#group').append('</option>').text(this);
});

$.each(subgroupNames ,function(){
$('#subgroup').append('</option>').text(this);
});

$('#group').click(function(){alert('group is clicked');});
$('#subgroup').click(function(){alert('subgroup is clicked');});
});
</script>
</head>

Open in new window


The first script reference is for JQuery File....
0
 
LVL 33

Author Comment

by:Mike Eghtebas
ID: 37832968
The first script reference is for JQuery File....

Do I need to build this file? If so what is its content?

Where do I introduce:

var groupNames = ["Group 1x", "Group 2x", "Group 3x", "Group 4x"];
var subgroupNames = ["Sub G  1x", "Sub G 2x", "Sub G 3x", "Sub G 4x"];
0
 
LVL 20

Expert Comment

by:BuggyCoder
ID: 37833024
0
 
LVL 33

Author Comment

by:Mike Eghtebas
ID: 37833028
Proculopsis,

I never have used this (your link type). It is very nice.

Mike
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Html5 Index on a table 7 25
SlickNav Menu Plugin Not appearing on mobile 6 30
Center div containing a script 6 14
asp.net mvc5 6 14
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.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
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)

785 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