Using a $.get value as a JSON object returns HierarchyRequestError: DOM Exception 3

Question

I am attempting to grab a JSON encoded value

{"3":"su","4":"demo","5":"Data Provider"}

Via groups = $.get('actions/respond_groups.php');

However, when attempting to use groups objects, like so:

function resetEdit(){
    groups = $.get('actions/respond_groups.php');
     $('.edit-group').editable('actions/manage_users.php?method=edit-group', { 
         data   : groups,
         type   : 'select',
         submit : 'OK'
     });
    }

However I run into:

Uncaught Error: HierarchyRequestError: DOM Exception 3 jquery.min.js:2
(anonymous function) jquery.min.js:2
p.fn.extend.domManip jquery.min.js:2
(anonymous function) jquery.min.js:2
p.extend.each jquery.min.js:2
p.fn.p.each jquery.min.js:2
p.fn.extend.domManip jquery.min.js:2
p.fn.extend.append jquery.min.js:2
$.editable.types.select.content jquery.jeditable.js:506
(anonymous function) jquery.jeditable.js:239
p.event.dispatch jquery.min.js:2
g.handle.h

Looking thru google, it all seems to be from people trying to use return var; but i'm just trying to use an object...

Any Ideas?

Answer 1

Utilize the callback function of the $.get() request to pass the groups to the .editable() once the request has resolved.

function resetEdit(){
    $.get('actions/respond_groups.php', function(groups){
        $('.edit-group').editable('actions/manage_users.php?method=edit-group', { 
            data   : groups,
            type   : 'select',
            submit : 'OK'
        });
    });
}

Answer 2

get request is asynchronous.. So it will not wait for the request to complete before it hits the next statement.

So Assign that in the callback method

function resetEdit(){
    $.get('actions/respond_groups.php', function(groups) {
       $('.edit-group').editable('actions/manage_users.php?method=edit-group', { 
           data   : groups,
           type   : 'select',
           submit : 'OK'
       });
    });

}