How to Make One Menu Choice Assign Three Variables in an HTML Page?

September 5, 2007 5:47 PM

I have what is to me an extremely complex thing that I would like JavaScript on a webpage to do. It's related to this question I asked previously, but I've added a new complication. I understand that this may sound fairly customized. I have a feeling, though, that for someone who programs Javascript, these issues are probably both extremely common and extremely simple, which is why I'm asking here ... since perfecting this quirk could really help my efficiency.

I manage my to-do list on a web application called Remember the Milk. Using their Quick Add bookmarklet as a guide, I built a larger-scale version for my personal use that would let me select various tags I wanted to use consistently from menus, rather than have to remember these tags wholesale.

The question mentioned above managed to help me with one requested improvement: the ability to not need a "concatenate" button to concatenate all the tags into the "tags" field, but instead for the page to do it automatically.

However, the other aspect of what I'd like it to do is slightly more complex.

I have a number of goals -- these could also be considered projects. Ideally, what I would like to do is make one selection: that of a goal (currently the "g" variable in the document). I would like the page to then do three things (preferably updating automatically, as it currently does, if I make a change) based on that selection.

I would like it to:

(1) Add " {SelectedGoalName}" (currently the "t" variable) to the end of the task's name.
(2) Add a tag to the task's tag list (currently the "tx" variable) that corresponds to the goal.
(3) Select the appropriate destination list ID (currently the "l" variable) that corresponds to that goal.

The SelectedGoalName would be the same as the text on the menu corresponding to the item chosen. The tag would be similar but not reliably identical to "SelectedGoalName" -- for example, it might be "Mowing" versus "g-mowing". The list ID is a seven-digit number used by Remember the Milk to identify lists.

An anonymized version of the page is at this URL. It's structurally identical; I just anonymized the locales and goals.

I know this is a complex one -- in fact, I'm unsure if this falls outside the bounds of what Ask Mefi does. But I also know that Mefites encompass many talents, so I'm hoping someone has this talent and can help me out? (I'm too poor at the moment to pay RentACoder.com.)

posted by WCityMike to computers & internet (10 comments total)

nuts.
posted by WCityMike at 8:46 PM on September 5, 2007

First, I'd recommend using a JavaScript library to take care of the tedious parts and let you focus on what you're trying to accomplish. There are several good choices; jQuery is one of the simpler ones and is my personal favorite.

Now, your page. I don't think this is as complicated as you fear. Using jQuery:

(1) Add " {SelectedGoalName}" (currently the "t" variable) to the end of the task's name.

  var goal = jQuery("#g").children(":selected").text();
  var newname = jQuery("#t").val() + " {" + goal + "}";
  jQuery("#t").val(newname);

(2) Add a tag to the task's tag list (currently the "tx" variable) that corresponds to the goal.

  var tag = jQuery("#g").val();
  var newtags = jQuery("#tx").val() + " " + tag;
  jQuery("#tx").val(newtags);

(3) Select the appropriate destination list ID (currently the "l" variable) that corresponds to that goal.

  jQuery("l").children().filter(function(option) {
    // Find the one that matches the selected goal:
    return option.text.toLowerCase() == tag;
  }).attr("selected", true); // Select the matching one.

Finally, you would wrap that all up in a function and attach it to the "onchange" handler of #g.

The above is off-the-cuff and untested. It might look a little mysterious at first if you're not used to jQuery. You could do the exact same thing without jQuery; it would just take a little more code. The basic idea is to take your descriptions and translate them into code: Find the elements you're interested in, extract the text or value, and stuff it into some other element.
posted by mbrubeck at 9:24 PM on September 5, 2007

I don't have much to add, other than that jquery really does make this sort of thing simple, and operates on a few fairly easy to grasp principles. It's well worth spending a few couple of hours to get the hang of it, if you want to do seemingly complex things, or plan on writing more js in the future.
posted by MetaMonkey at 1:18 AM on September 6, 2007

If either of you are still checking this thread -- I'm embarrassed to say this, but I don't know nearly anything about how to implement the solution you're speaking of. I'm not a programmer, and am mostly unfamiliar with Javascript; I can sort of blindly splice stuff together if I understand its meaning enough (the Javascript that concatenates is understandable even to someone who doesn't know Javascript, as it's basically "string variable plus string variable = concatenated string variable").

But I'm really unclear as to how I might implement the solutions you're speaking of, specifically those being implementing jQuery on this page, for example, or wrapping the examples you gave into a function.

If you're still checking this thread, would you be able to assist further in that regard?
posted by WCityMike at 7:23 AM on September 6, 2007

Here's a rough sketch of how you would include jQuery on your page, and then make that function run when #g's selection changes:

<script src="/path/to/jquery.js"></script>
<script>
  jQuery("#g").change(function() {
    var goal = jQuery("#g").children(":selected").text();
    // ... rest of the stuff from my comment above ...
  });
</script>

You can put this at the bottom of your page. (Or you can put it in the header and use jQuery.ready() to make it run after the page is loaded, but I'll leave that out for simplicity.)

But you really do need to know JavaScript if you want to keep going with this. If you don't want (or have time) to learn some programming yourself, you should try to find a programmer to work with. (Sorry, not me...)
posted by mbrubeck at 8:34 AM on September 6, 2007

Mbrubeck, thanks so much for what you posted. I believe I'm almost complete, as I've got most of it working. There are two things where I'm running into a slight quirkiness. If you or anyone else'd like to set me straight on them, that'd be great. If not, I'm nonetheless quite grateful for what you've given already.

The first quirk is that if I change the goal, it appends the tag and the " {Goal}" instead of replacing it. So it's possible to end up having a ton of tags on the variable.

The second quirk is that the one thing I can't seem to do is get the list-selection part of your code to work. I noticed that it was l and not #l -- so I tried leaving it as it was and also tried #l, but neither seemed to work.

Any idea, or is this sort of point the "you need to learn/get a programmer" point?

Again, my deep thanks for what you've provided already.
posted by WCityMike at 9:20 AM on September 6, 2007

The list-selection problem was because I didn't read the documentation for jQuery.filter() correctly. Here's the fix:

jQuery("#l").children().filter(function(i) {
  return this.text.toLowerCase() == tag;
}).attr("selected", true);

Replacing the tag (instead of appending to it) is doable, but it's more code than I'm going to try to write into this comment box. Yeah, this is where someone will need to apply some programming know-how.
posted by mbrubeck at 10:05 AM on September 6, 2007

*witnesses bookmarklet working perfectly aside from append-replace thingie*

*sniff*

A thing of beauty is a joy forever.

Thanks so much, mbrubeck. I really, really appreciate it!
posted by WCityMike at 10:26 AM on September 6, 2007

Does that mean I get "best answer"? :)
posted by mbrubeck at 12:28 PM on September 6, 2007

Yup. :)
posted by WCityMike at 12:30 PM on September 6, 2007