Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<span id="taglabel_123" title="Automatically extracted Tag|This tag was extracted automatically from the specified document. To confirm and add it to this API, please verify it by clicking on the add button. Clicking again, removes the corresponding tag." class="ctip tag_unconfirmed">
<strong>Value</strong><br />Description
</span>
<script>
$("#taglabel_123").click(function (){
var myclass = $("#taglabel_123").attr("class");
if(myclass == "tag_unconfirmed") {
$("#taglabel_123").removeClass("tag_unconfirmed");
$("#taglabel_123").addClass("tag");
$("#taginput_123").attr("name", "concepts[]");
} else {
$("#taglabel_123").removeClass("tag");
$("#taglabel_123").addClass("tag_unconfirmed");
$("#taginput_123").attr("name", "");
}
});
</script>
@kswedberg
Copy link

kswedberg commented Mar 4, 2011

Hi there,
given the class name of the span — "ctip tag_unconfirmed" — the conditional will never evaluate to true (unless you're removing "ctip" elsewhere:

if(myclass == "tag_unconfirmed") {

you could do this instead:

if ( ("#taglabel_123").is('.tag_unconfirmed')

that will test if the class is one of any of the classes.

@jnjcub
Copy link

jnjcub commented Jun 13, 2011

was this resolved ? i have the same problem. It seemed that the click event is gobbled up by the cluetip

@kswedberg
Copy link

kswedberg commented Jun 15, 2011

@jnjcub,
I'm not sure I follow. The problem with the above code is that it is trying to match the class to "tag_confirmed" when the element has a second "ctip" class on it. For the record, I'd probably rewrite it to be something like this:

    <span id="taglabel_123" title="Automatically extracted Tag|This tag was extracted automatically from the specified document. To confirm and add it to this API, please verify it by clicking on the add button. Clicking again, removes the corresponding tag." class="ctip tag_unconfirmed">
      <strong>Value</strong><br />Description
    </span>
    <script>
      $("#taglabel_123").click(function () {
        var unconfirmed = /tag_unconfirmed/.test(this.className);
        $(this).toggleClass('tag', unconfirmed).toggleClass("tag_unconfirmed");
        $("#taginput_123").attr("name", unconfirmed ? "concepts[]" : "");
      });
    </script>

If you're having a problem with clicking, make sure that the clickThrough property of the cluetip options map is set to true.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment