Forum Moderators: open

Message Too Old, No Replies

Javascript Menu Help Needed!

Javascript Menu Help Needed!

         

astrobody

1:20 am on Jul 9, 2003 (gmt 0)

10+ Year Member



I have a project I am working on for work.
I am not a beginner programmer, but I am pretty new at javascript.

I am supposed to make an interface where people can add/change/remove records from a database. I know how to do this and have done this many times with ASP.

HOWEVER... My boss wants me to create a dropdown with add/change/remove on it, when I click on the person in my menu. I can do this if I give all 250 users they're own menu but I think it's silly to not be able to pass some sort of a parameter to my links in that menu when it propagates.

Does anybody have any ideas?
Everytime I try to pass the parameters something in the program bombs, but if I hard code the information in, it works perfectly. I don't get it.

I can't seem to find any information online about this, so I am trying the message board here. Thanks for any help you can provide!

In case I am not clear in the way I worded it, you click on a person's name, then a css type menu appears with the three choices and you click on the appropriate link. When you click on Add, no parameters are needed, as it is a new record. When you click on Edit or Delete, it needs to pass the person's name so that my program can pull up the data or delete the user.

BlobFisk

8:31 am on Jul 9, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome to WebmasterWorld, astrobody!

When you say "passing the paramaters to my programme", do you mean via a form? Your dropdown list uses and onChange to make a layer (say) with the buttons become visible. And clicking the Edit or Delete button submits the form to the relevant ASP page?

astrobody

1:07 pm on Jul 9, 2003 (gmt 0)

10+ Year Member



I'm not using forms.
Basically, the ASP will build my javascript/html page from data obtained from a mySQL database. Each item in the list of names when clicked on, will bring up a css menu (not an html drop-down). The menu is small, and in order to keep it small, I'd like the menu to use the id of the item being clicked. It seems like I should be able to do it, just haven't gotten there yet.

moonbiter

2:51 pm on Jul 9, 2003 (gmt 0)

10+ Year Member



Hmm. This really isn't a css question. However, if I understand what you are asking correctly, here is an example of how to get the id from an element from an event handler. Note that for the purposes of this example, I assume your list of names is in the form of:

<ul id="listonames">
<li>Name one</li>
<li>Name two</li>
etc.
</ul>

(script)
window.onload = function() {
// this calls the parse_list function after
// the dom loads and passes it the list parent node
parse_list(document.getElementById('listonames'));
}

function parse_list(n) {
// this function parses the list and
// attaches and show_menu function
// onclick to every li element node in the list
if (n.nodeType == 1 /*Node.ELEMENT_NODE*/) {
if (n.nodeName == 'LI') {
n.attachEvent('onclick', show_menu);
}
}
var children = n.childNodes;
for (var i = 0; i < children.length; i++) {
parse_list(children[i]);
}
}

function show_menu(e) {
// Get the element that fired off the event
if (!e) {
e = window.event; // Get the event details for MSIE
}
var el = e.srcElement;

// The following alert shows the id of the source element.
// You should be able to take this id and plug it into your
// menu functions from here
alert(el.id);
}

astrobody

3:06 pm on Jul 9, 2003 (gmt 0)

10+ Year Member



Thank you, Moonbiter,but I think this is still much more complicated than I need it to be.

Is there a simple way to have a page with a list of names, but not create the menu until one of those names are clicked on?

If I read your code correctly, that is still going to build all the menus and just show or hide them depending on events.

The problem is, that I have 250 names and creating 250 hidden menus in the background really bogs down the process.

I just want to click on a name, have the javascript build the menu at that point, and then be able to select Add, Change, or Delete.

In all the attempts I've had at making the onClick fire up the menu creation, it seems to bomb out the page.

moonbiter

3:33 pm on Jul 9, 2003 (gmt 0)

10+ Year Member



I wouldn't bother to construct the menu dynamically, but just display/hide it whenever you need it.

All my example script does is go through every node in ul#listonames and attach the show_menu() function to the onclick event in every li element node. It does nothing to construct or position the menu itself.

The show_menu() function then just grabs the id of the li clicked to do with what you will. I would probably just put the value of this id into a global variable and then use that variable in the functions called by your menu.

So you could have one menu that is hidden at the bottom of your page with css "ul#menu { display: none }":

<ul id="menu">
<li onclick="addName()">add</li>
<li onclick="editName()">edit</li>
<li onclick="deleteName()">delete</li>
</ul>

Then you would modify show_menu() to absolutely position and change the display of the menu to "block". You would use the id held in the global variable to get the correct xy position for the menu, and it would also be used in the functions editName() and deleteName() to accomplish the actions you want.

I hope that makes sense.

[edit]Now that I think about it, it would probably be more efficient to use visibility rather than display, since you would be absolutely positioning the menu. IIRC, visibility is a little easier for a browser to render.[/edit]

astrobody

4:33 pm on Jul 9, 2003 (gmt 0)

10+ Year Member



Ok Moonbiter, so far so good. :-)

I understand what you are saying, but I don't believe that the menu example I downloaded off the web jives with your code. I got all the stuff you told me done and up and running using tables and <TD> instead of the listitems and it works fine.

However, I can't seem to get my menu to reappear on the click. If I can get that part working, I think I'll be on my way.

I really appreciate all your help. I've been stressing on this thing, and normally this stuff comes pretty easily to me.

moonbiter

5:14 pm on Jul 9, 2003 (gmt 0)

10+ Year Member



astrobody, stickymail me your example code and I'll see what I can see. Or, if it's short enough, post it. Hate to put too much code on the forum, though.