Question

Note: I have a workaround to this problem, but I’d prefer to comma-separate the values as I describe below rather than separating them with spaces (which is what my workaround does).

I have an ASP.NET website that allows instructors to choose from a DropDownList of preset comments and apply these comments to students in their classes. I display the students and comments inside a GridView, and use a Label to display any comments that already exist in the database (removing them from the DropDownList in the process). When an instructor selects one of these comments and clicks a button, my jQuery function:

1. Pulls the selected value and text out of the option (provided it isn’t the default option).
2. Checks Label.children().length, and appends a “, ” to the text if it’s greater than zero.
3. Creates a <span> tag with a hidden field containing the value and text.
4. Appends the text inside the span.
5. Closes the span.
6. Attaches an onclick event to the span.
7. Removes the original option from the DropDownList.

The span tag’s onclick event does the reverse of what I describe above — it pulls the value and text out and re-creates the option inside the drop-down menu. Additionally, it replaces strings like “, , ” with “, ” in the parent Label. I’ve found that when I replace these strings (which lie outside the spans I’ve attached the onclick events to) that the onclick events go away.

I’m familiar with .live(), but because each row in this GridView contains a unique reference to the particular student and class currently in use, I can’t know the values that each row needs to pass into the funciton ahead of time. Is there any solution to this problem other than my described workaround or re-attaching the onclick event?

Answer 1

Here’s an idea: Wrap the commas in <span>s with some class like ‘separator’. Then, when you remove an item, you can check to see if it’s the first thing in the list, and if so, remove the subsequent seperator, and if not, remove the previous one. So we’ll say you have an html structure like so:

<span id="myLabel">
    <span class="comment">You're great!</span><span class="separator">, </span><span class="comment">You're mediocre!</span><span class="separator">, </span><span class="comment">You suck!</span>
</span>

Here’s a click function that should remove the commas properly, while maintaining the onclick events:

$('.comment').click(function() {
    //decide which comma to remove
    if ($(this).prevAll('.comment').size() == 0) {
        //this is the first comment, remove the next comma and this comment
        $(this).next('.separator').remove().end().remove();
    } else {
        //this is not the first comment, remove the previous comma and this comment
        $(this).prev('.separator').remove().end().remove();
    }
});

Here’s a live demo showing that this works: http://jsfiddle.net/yWet5/

Sorry if I’ve misunderstood any part of your problem.