Question

I’m not very good yet in javascript, so I need some assistance. I started using the jQuery Autosuggest Plugin, which allows me to add tags (somewhat like stackoverflow tagging). What I want to do is, generate a checkbox for every selected tag. For this reason, I’ve modified the plugin, so that it wraps each tag name in a <span class="tag tag_name">tag_name</span>, so It’s easier to get the tag, which I do like this: $(".tag").attr("class").replace("tag ", "");. Anyhow, I’ve written up a script, that generates a check-box, but the problem is, that it only generates a checkbox for the first tag, and it keeps generating that every 2 seconds. Also, I’m worried that the script might be a bit too much on preformance? Here is the script:

$(document).ready(function(){
    var done = {};
    $("input[type=text]").autoSuggest("get.php", {searchObjProps:"name", selectedItemProp:"name", asHtmlID: "1"});
    var timer = setInterval(function(){
        if(!done[city]){
            var city = $(".mestoJe").attr("class").replace("mestoJe", "");
            done[city] = true;
        }
        var nr = 0;
        $.each(done, function(i, j){
            if(j != 2){
                var tmp = $('<input type="checkbox" value="'+nr+'" name="city[]">'+i+'<br />');
                $("#checkboxes").append(tmp);
                j = 2;
                nr++;
            }
        });
    },2000);

});

Any help will be appreciated!

Answer 1

In this line of your script:

var city = $(".mestoJe").attr("class").replace("mestoJe", "");

you are calling .replace() to remove the class name, but not assigning it back to anything so nothing is actually changing. .replace() returns the replaced string – it does not modify the one passed in.

To actually change the classname and thus advance to the next city the next time the timer fires, you would have to use something like this:

var firstCity = $(".mestoJe").get(0);
var city = firstCity.className = firstCity.className.replace("mestoJe", "");

If you don’t change the class name, then this line of code will generate the exact same result and the exact same city name every time:

var city = $(".mestoJe").attr("class").replace("mestoJe", "");

In addition, you are starting a 2 second internval timer and never stopping it so it goes on forever.

You are also referencing:

if(!done[city]){

before you’ve ever defined city.