Happy world of JSON, also, using getJSON() function

[Fumigator]

I am noob to jQuery and JSON. Just found out about JSON actually. Wow lots of fun stuff there.

SO! I love jQuery's plugin library but I could not find a plugin that will "ajax" load a listbox using <optgroup> tags. I figure I can just use getJSON() to retrieve the data from my PHP script, right? So I code up a PHP script to return something that looks like:


{"optgroup": {"o1" : "option1", "o2": "option2", "o3": "option3"},
"optgroup": {"p1" : "optionp1", "p2": "optionp2", "p3": "optionp3"}
}


Which should be returned as a JSON object in theory. And when I alert(returnObj), sure enough, it shows me [object].

SO THEN, I figure I can:


jQuery.each(returnObj, function(i, val) {
if (val == 'optgroup') {
//create <optgroup> tag in the DOM
}
});


I sort of stall out at this point... any direction would be helpful.

Secondary question, how do I structure the JSON syntax so as to include a label with the optgroup? Like this?


{"optgrouplabel": "label1",
"optgroup": {"o1" : "option1", "o2": "option2", "o3": "option3"},
"optgropulabel": "label2",
"optgroup": {"p1" : "optionp1", "p2": "optionp2", "p3": "optionp3"}
}

[Eldarrion]

Or... you can make a PHP array... something with the following structure:


switch($_POST['action'])
case 'loadoptgroup':
$temp = Array (
group1 => Array (
type => 'optgroup',
o1 => 'option1',
o2 => 'option2'
),
group2 => Array (
type => 'optgroup',
o1 => 'option1',
o2 => 'option2'
)
);
echo json_encode($temp);
break;


And after that, use jQuery's JSON to parse the string.... something like:


$.post(
"yourphpfile.php",
{
action: "loadoptgroup"
},
function(data) {
data = JSON.parse(data);
// And here you loop through the array (data) and generate your objects via JS.
}
)


Not sure if this is what you were looking for, but it does do the trick... at least it does so for me... and well, it's easy to modify the array structure to include a label for each group. :)

[Fumigator]

Yeah... looks good. I think the getJSON() function was getting me confused more than anything, but I've been googling for a while and I found this plugin and technique:

http://www.prodevtips.com/2008/08/15/jquery-json-with-php-json_encode-and-json_decode/

I'm a simple man so plugins are extremely appealing!

Using this plugin looks very similar to what you describe, so I'm going to forget about using getJSON() and go with a regular $.post, build PHP array and encode it (hopefully my PHP is upgraded to 5.2!) and that should work fine. Can't try it out until tonight... can't wait.

Fun Stuff!

[GraphiteFingers]

Here's how to do it using the getJSON() method:

The some_file.php file:

$aSillyTask = strtoupper($_GET['datum1']);
echo json_encode(Array(elem1=>"This is element 1",elem2=>$aSillyTask));


jQuery:

var for_php = "some text";
$.getJSON("some_file.php",{datum1:for_php,datum2:'a string'}, function(response)
{
$('div#an_id').html(response.elem1);
$('div#another_id').css({color:'red'}).html(response.elem2);
});


And applying this to the original problem:

options.php:

switch($_GET['action'])
{
case 'loadoptgroup':
$temp = Array (
group1 => Array (
type => 'notgroup',
options => Array (
o1 => 'option1.1',
o2 => 'option1.2',
o2 => 'option1.3'
)
),
group2 => Array (
type => 'optgroup',
label => 'Group 2',
options => Array (
o1 => 'option2.1',
o2 => 'option2.2'
)
)
);
echo json_encode($temp);
break;
}


jQuery:

$.getJSON("options.php",{action:'loadoptgroup'}, function(json) {
var html = '<select>';
// Group 1
if (json.group1.type == 'optgroup')
{
html += '<optgroup label="'+json.group1.label+'">';
'</optgroup>';
}

for (option in json.group1.options)
{
html += '<option>'+json.group1.options[option]+'</option>'
}

if (json.group1.type == 'optgroup')
{
html += '</optgroup>';
}

// Group 2
if (json.group2.type == 'optgroup')
{
html += '<optgroup label="'+json.group2.label+'">';
'</optgroup>';
}

for (option in json.group2.options)
{
html += '<option>'+json.group2.options[option]+'</option>'
}

if (json.group2.type == 'optgroup')
{
html += '</optgroup>';
}

html += '</select>';

$('div#show_n_tell').html(html);
});


html:

<div id="show_and_tell"></div>