jquery's ajax not working in facebook apps

Question

Hi,

I am trying to create a facebook application, all is working fine except the ajax part that I am using to populate a second box from the item selected in first select box.

I am using jquery (v1.3.2) for accomplishing this. This ajax is working absolutely fine on the host where I have taken space for it, but it is not working in facebook.

Here are my questions regarding to this problem,

• does canvas page url needs to be same as that of my application name. ( in my case it is different)

I am getting this error on the onchange event of parent select box inside facebook.

Access to restricted URI denied" code: "1012

• what might be wrong...? Please help me solve this problem.

Thanks

Answer 1

You are not allowed to request data from other sites than the domain the script is running on. For example, if you are running the script www.example.com/script.js, then you can only ajax files under the www.exaple.com domain, not www.facebook.com.

There are a few ways to do it:

• JSONp is a way, but it requires that facebook replies with jsonp data. Not sure if it does. More info on JSONp here.
• CSSHttpRequest (or AJACSS) is another way. Seriously doubt facbook uses this method.

Answer 2

There is a limitation when using ajax that the xmlhttp request may not be cross-domain. See https://developer.mozilla.org/En/Same_origin_policy_for_JavaScript

A common workaround for this is to make the ajax request to a backend script that will actually make the cross-domain request i.e. cURL.

Answer 3

So i think when we use jquery in facebook apps we can ue FBML. right?

we must use iframe .. am i right?

thanks :)

Answer 4

Using FBML you can use FBJS to send JSON data type to your own script:

Here is the documentation: http://wiki.developers.facebook.com/index.php/FBJS/Examples/Ajax