jQuery: ajax() / jsonp: cross browser

Question

I have a cross-browser form that is called in an iframe. The form has 'dynamic' select menus. I am using the jQuery getJSON() function to query the data. I have been unable to successfully update the select menu with the following code, it seems like it should work wikiPresto. The data is returning (i can see it in firebug) but the select is not updating...

Any thoughts on what i am doing wrong?

note: #foo and #bar are select menus...

var $f = $('#foo');
var $b = $('#bar');
$b.change(function() {
    var foo = $f.val();
    var bar = $b.val();
    $.getJSON("http://example.com/form.php", {f: foo, b: bar},
        function(foo){
            varbar = $('#foo');
            varbar.html(foo.data);
        }
    );
});

gen_Eric · Accepted Answer · 2011-04-21 20:14:49Z

1

If this page is not also on http://example.com, then you need to use JSONP.

Add ?callback=? to the url, to make jQuery use JSONP.

$.getJSON("http://example.com/form.php?callback=?", {f: foo, b: bar},
  function(foo){
  }
);

form.php will have to wrap the JSON in the value of $_GET['callback']. The data returned from form.php should look like this:

callback({data: 'test'});

Wikipedia article on JSONP

answered Apr 21, 2011 at 20:14

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alex Over a year ago

+1, this answer could be improved with a link to a JSONP explanation though. :)

gen_Eric Over a year ago

@Alex: I added a link to the Wikipedia article :-)

Collectives™ on Stack Overflow

jQuery: ajax() / jsonp: cross browser

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related