jquery $.post - The triology ending here - some questions about json integration with $.post

Question

Hello all,

Here's some code that I've seen on the internet to help me out archieving more or less the same:

<input size="30" id="inputString" onkeyup="lookup(this.value);" type="text" />


function lookup(inputString) {
    if(inputString.length == 0) {
        // Hide the suggestion box.
        $('#suggestions').hide();
    } else {
        $.post("rpc.php", {queryString: ""+inputString+""}, function(data){
            if(data.length >0) {
                $('#suggestions').show();
                $('#autoSuggestionsList').html(data);
            }
        });
    }
} // lookup

1) ** {queryString: ""+inputString+""} It's a json notation but why do we need the first "" and the last "" ?**

2) $('#autoSuggestionsList').html(data);

[UPDATE] This assumes that the returned data from or server side, comes in html format. What if, that format was in json, what do we need to modify here, to adapt it to json server side response? [/UPDATE]

Thanks, MEM

Answer 1

You need the double quotes to close the string then add in the variable then open string again

You can get json back using something like the example on the jquery site

$.post("rpc.php", { "querystring": ""+inputstring+"" },
   function(data){
     alert(data); // Json 
   }, "json");

Answer 2

In answer to 1) are you sure its meant to be "" (double-quote, double-quote) and not '"' (single-quote, double-quote, single-quote).

This would make more sense, as you would be wuating whatever inputString is. (E.g. if input string is 'hello' then your line would be queryString: "hello"

What I think is happening above is that you are appending and prepending an empty strings to inputString.

I'm not entirely sure what you're asking with (2), but in general, the storage of JSON data in a hidden input is accepted practice. From there you can use a JSON parser to turn it into a JavaScript object for use.

Edit: I've done a jsfiddle mockup if you want to have a look: http://jsfiddle.net/gRQMy/5/