Jquery .html replacer just empties my selector, what's wrong!?

Question

$("#autoNames").html(function (index, html) {
                                    var begin = "<script language='javascript' type='text/javascript'> var names = [";
                                    var end = String('];' + '<' + '/' + 'script' + '>');
                                    var result = begin.concat(jsonService, end);
                                    $("#autoNames").html(result);
                                    return false;
                                });

I can't figure out for the life of me why this doesn't work. I've gotten the html function to work before, but for some reason this just leaves my autoNames tag empty... and i've called an alert() on the result variable and things exist in that string... any clues?

Thanks

Answer 1

When passing a function into the html method, you are supposed to return the HTML that the element should be set to. I don't see any reason why you would need to be using that overload in the first place (it's for dynamically generating content based on each element in a set); you probably just want to use the code from within that function:

var begin = "<script language='javascript' type='text/javascript'> var names = [";
var end = String('];' + '<' + '/' + 'script' + '>');
var result = begin.concat(jsonService, end);
$("#autoNames").html(result);

Answer 2

When you pass a function to .html() that function needs to return what you want it set to, like this:

$("#autoNames").html(function (index, html) {
   var begin = "<script type='text/javascript'> var names = [";
   var end = String('];' + '<' + '/' + 'script' + '>');
   return begin.concat(jsonService, end);
});

Currently you're setting the .html() but returning false, and that outer .html() call is setting it back to nothing. Alternatively, just do this since you're dealing with one element:

var begin = "<script type='text/javascript'> var names = [";
var end = String('];' + '<' + '/' + 'script' + '>');
$("#autoNames").html(begin.concat(jsonService, end));

Answer 3

Would love to know what you're trying to do here... anyhow:

$("#autoNames").html('<script>var names = [' + jsonService + '];</script>');

Answer 4

Im missing something or are you just putting a JS array inside that div? It looks like u need to do some for each or similar to take the array values and put them in the html.

Maybe is just that i missed some detail but looks weird.

And that jsonService is really a json? if it is then u need to:

var jsonObj = eval("("+jsonService+")");

and then access its values like this:

alert(jsonObj.valueName);