Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts

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

    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:

    Code:
    {"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:

    Code:
    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?

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

  • #2
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    Or... you can make a PHP array... something with the following structure:

    PHP Code:
    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:

    Code:
    $.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.
    The way to success is to assume that there are no impossible things. After all, if you think something is impossible, you will not even try to do it.

    How to ask smart questions?

  • Users who have thanked Eldarrion for this post:

    Fumigator (04-03-2009)

  • #3
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    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...d-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!

  • #4
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Doin' it with getJSON

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

    The some_file.php file:
    PHP Code:
    $aSillyTask strtoupper($_GET['datum1']);
    echo 
    json_encode(Array(elem1=>"This is element 1",elem2=>$aSillyTask)); 
    jQuery:
    Code:
    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:
    PHP Code:
    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:
    Code:
    $.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:
    Code:
    <div id="show_and_tell"></div>
    Last edited by GraphiteFingers; 06-21-2009 at 03:33 PM. Reason: Added relevant example


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •