?
Solved

code debug, js

Posted on 2012-04-10
7
Medium Priority
?
276 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 1600 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 400 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 34

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
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
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 34

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 34

Author Comment

by:Mike Eghtebas
ID: 37833028
Proculopsis,

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

Mike
0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

590 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