CODEWITHSUNDEEP
jquery
superUntitled
superUntitled

Reputation: 22527

jQuery: ajax() / jsonp: cross browser

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);
        }
    );
});

Upvotes: 0

Views: 517

Answers (1)

gen_Eric
gen_Eric

Reputation: 227240

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

Upvotes: 1

Related Questions