making a variable a class in javascript

Question

In my application, I have some tags that look like this

x Beer x Wine x Gummy Bears

If you click on the 'x' it's supposed to delete the tag.

The tags are created as you see below, with a link around the 'x'. The code inside the <%= %> is ruby. The parameterize method will, for example, make the Gummy Bears tag like 'Gummy-bears'.

<a href="#" class="link tag" data-span="<%= tag.name.parameterize %>"data-question="<%= @question.id %>" data-tag="<%= tag.name%>" >x</a>

<span class="<%=  tag.name.parameterize %>"><%= tag.name %></span>

I have JavaScript click events set up on the 'x' link. I am able to remove the 'x' immediately upon the click, but I can't get the actual tag name removed until a page refresh, which is not what I want. In order to get the tag.name removed immediately, I created a span class around the tag name that's the same as one of the html data attributes on the 'x' link. I saved the data attribute to a variable (this.span)

   this.spanVariable = $(r.target).attr("data-span");  #gets the tag.name parameterize from the data-span

For example, if it was the Gummy Bear tag that was clicked, this.spanVariable would now be 'Gummy-Bear'.

and then I would like to empty the html of the class 'Gummy-Bear', so I want to do something like this to evaluate the javascript variable so it becomes the class. I thought I could evaluate javascript inside of #{} but I guess not :(

   $('.#{this.spanVariable}').html('');

Is there a way to accomplish what I'm trying to do, basically make the variable evaluate so it can become the class that's also a jquery object (i.e. i can call jquery methods on).

You could simply use a checkbox and a label for less headaches and style if necessary. — elclanrs
– elclanrs, Commented Mar 27, 2013 at 6:28
You could put them together (they do belong together): jsfiddle.net/userdude/qPuRH — Jared Farrish
– Jared Farrish, Commented Mar 27, 2013 at 6:47
@elclanrs would you mind showing how to do it with checkboxes? — BrainLikeADullPencil
– BrainLikeADullPencil, Commented Mar 27, 2013 at 6:55

philwills · Accepted Answer · 2013-03-28 05:43:41Z

1

Try this:

$('.' + this.spanVariable).remove();

This way should avoid race conditions, call some ajax, and do stuff when it returns:

$('.xclass').click(function(e) {
  var spanVariable = $(this).data("span");
  $.ajax("/my/server/endpoint?tag=" + spanVariable, {
    dataType: 'json',
    success: function(result) {
      $('.' + result.spanVariable).remove();
      $('.tag[data-span=' + result.spanVariable + ']').remove();
    },
    error: function() {
      console.log('Couldn't remove the tag...');
    }
  }
});

edited Mar 28, 2013 at 5:43

answered Mar 27, 2013 at 6:37

philwills

9954 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

BrainLikeADullPencil Over a year ago

This works, however, with the other solutions available, I don't think this way is the best way (totally my fault), because if a user tries to click on multiple tags in a short period of time, I'm wondering if spanVariable might change rapidly before server side code responds etc.

philwills Over a year ago

This is all client-side... Also, if your worried about that, use a local variable instead of object...

philwills Over a year ago

If you're using the object to update stuff on the server side, maybe you should consider tracking the tags with an array, instead. That way the server doesn't need to try to keep up with the client.

BrainLikeADullPencil Over a year ago

Thanks for the suggestion. In one method (the method you see in the OP), I get the data from the click event,and then call a method that does the ajax request to remove the tag server side. On the successful response, another method is called which removes the tag from the client (i.e. once I know it's been removed server side). How might I track position in the array doing it that way?

philwills Over a year ago

I'm not sure how you've implemented the call to the server, but I'm updating my answer with something that might work...

|

mplungjan · Accepted Answer · 2013-03-27 06:37:02Z

1

Are you perhaps mixing server and client side? Try

$('.'+this.spanVariable).empty();

answered Mar 27, 2013 at 6:37

mplungjan

180k29 gold badges183 silver badges246 bronze badges

1 Comment

BrainLikeADullPencil Over a year ago

You're right. I confused server and client side. This works, however, with the other solutions available, I don't think this way is the best way (totally my fault), because if a user tries to click on multiple tags in a short period of time, I'm wondering if spanVariable might change rapidly before server side code responds etc, and then desired effect won't be achieved.

Collectives™ on Stack Overflow

making a variable a class in javascript

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related