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

all of that works, I know those return real things. An alert window will show that works. — Jon Phenow, Jun 14 '10 at 20:39
This makes no sense. Why are you using a callback? What arguments in the callback are you using? (none...) ... Plus, what's with the redundant `String()` call? .. see my answer :) — James, Jun 14 '10 at 20:49
`jsonService` is returning an array that you then add `[` and `]` around? It seems as though your `jsonService` is not serving up json. Why not add the `var names=[` and `]` to your jsonService file and then use `$.getScript()` ? — artlung, Jun 14 '10 at 20:50
jsonService is a plain and flatout string the way I'm dealing with it. — Jon Phenow, Jun 14 '10 at 20:51
If I make `jsonService` a string like 'test', I get an error saying `Can't find variable test`. If I do this: `jsonService = 'tester = "someValue"'`, it works. http://jsfiddle.net/gut92/ — user113716, Jun 14 '10 at 21:00
...likewise, a self calling function works: `jsonService = 'function(){return "tester"}()';` concat() seems to be evaluating the string you give it instead of merely concatenating it. - I updated my answer to reflect this. — user113716, Jun 14 '10 at 21:03
My suggestion (which you may well ignore) is to turn it into a .js file and use `$.getScript` to grab it. then once it's evaluated you can do stuff with it. — artlung, Jun 14 '10 at 21:04
I have an autocomplete web service. As someone types the service finds a few objets with values that match the typing. I want those obejects to dynamically add to an array without overwriting (saves callbacks to service). — Jon Phenow, Jun 14 '10 at 21:37

score 2 · Accepted Answer · answered Jun 14 '10 at 20:39

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));

answered Jun 14 '10 at 20:39

Nick Craver

623,446
136
1,297
1,155

jsonService is simply a string that works. and that's all that really needs to be known. Also, like in the other 3 attempts at answers, this doesn't work. Thanks though. Seems like sort of an odd issue, I know. :/ – Jon Phenow Jun 14 '10 at 20:46
1

@jphenow - Which browser are you dealing with? Also any particular reason for using these script tags at all? seems like `$.parseJSON()` or `eval()` is what you actually need here. – Nick Craver Jun 14 '10 at 21:00
they were erroring more than this was because of the nature of the objects I'm trying to pass – Jon Phenow Jun 14 '10 at 21:02
1

@jphenow - If it's valid JavaScript, `eval()` will work just as well as this (it's *exactly* what it was made for), just `eval('var names=[' + jsonService '];'); alert(names);`..if it's *not* valid JavaScript, no approach will work. – Nick Craver Jun 14 '10 at 21:04
Yea, i know. I'm pretty sure I'm just getting overwhelmed. This whole problem is actualy depending on about 100 lines of code between html, javascript, asp.net codebehind and an asp web service. I think I'll try to transfer most of the logic to the service and keep trying to get an eval() working. Thanks for the suggestions – Jon Phenow Jun 14 '10 at 21:21
Any clues as to why i'd be getting a missing ')' or '}' just in random empty lines when I try to do eval()? – Jon Phenow Jun 14 '10 at 21:24
@jphenow - Something about the string isn't valid, missing encoding or just missing a closing paren...something, can you post or link to the string? – Nick Craver Jun 14 '10 at 21:26
"jsonService is simply a string that works. and that's all that really needs to be known." -- what does **a string that works** mean. js code that works in one context might not work inside the brackets of `var names=[];` – artlung Jun 14 '10 at 21:27
I want there to be a var names=[{ alabel: *label*, value: *value*, desc: *desc*}, {..},{...}]; that I can add on to as a person types. This was sort of working yesterday but today I was working on speed and minimizing service calls only to completely destroy it. – Jon Phenow Jun 14 '10 at 21:44
however I get there is okay with me. eval wouldn't go without a fight and I'm told those are harsh on speed. so I moved to this slightly more hackish looking method that actually worked before I broke it. – Jon Phenow Jun 14 '10 at 21:45
I have to run for the day, I don't think I've been this stuck with such a little thing in awhile. Please let me know if you have some good ideas. – Jon Phenow Jun 14 '10 at 21:48
@jphenow - This would be far easier with the web service returning valid JSON, then there are *lots* of built-in ways to look at/use the data, is this an option? – Nick Craver Jun 14 '10 at 22:23
Sure, can you refer me to some good material? Its been brought to my attention but I'm java programmer and ex-web designer. This type of web/programming is a completely new world to me. – Jon Phenow Jun 14 '10 at 22:26
1

Here's a short/simple example: http://stackoverflow.com/questions/1176603/using-jquerys-getjson-method-with-an-asp-net-web-form Encosia has some full articles on it more in-depth that you'll find very useful, not that complicated to set up overall, just a web method and the jQuery call: http://encosia.com/2008/06/26/use-jquery-and-aspnet-ajax-to-build-a-client-side-repeater/ – Nick Craver Jun 14 '10 at 22:50
fantastic thank you very much, I'll see what I can do with this – Jon Phenow Jun 14 '10 at 22:54

score 1 · Answer 2 · answered Jun 14 '10 at 20:48

1

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

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

answered Jun 14 '10 at 20:48

James

109,676
31
162
175

also sets my selector to nothing. – Jon Phenow Jun 14 '10 at 20:50
What do you mean by "my selector"? – James Jun 14 '10 at 20:53
that thing ends up with nothing between the tags when i use .html – Jon Phenow Jun 14 '10 at 21:04
jQuery strips out the script tags and executes them. – James Jun 14 '10 at 21:18
They still usually appear somewhere Do they not? I could've sworn they were still findable somewhere – Jon Phenow Jun 14 '10 at 21:23
J-P is right, a script tag used like this would not necessarily leave anything - it would just get executed. Try adding a string after your closing `` tag. – artlung Jun 14 '10 at 21:41

score 0 · Answer 3 · answered Jun 14 '10 at 20:38

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);

Good point. Didn't work though. i'll leave it like this while I keep debugging though, because it is better than the original. I started out like that because when I first thought about it thought more functionality would be necessary. — Jon Phenow, Jun 14 '10 at 20:45

score 0 · Answer 4 · answered Jun 14 '10 at 22:49

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);

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

4 Answers4