Facebook Game Function, Optimizin a Call, and Loading Bar

Question

I am attempting to make a Facebook game and trying to replicate a common function that I usually find in many other Facebook game (a call to my website and illusionary image that is a loading bar).

I am not familiar with Ajax or Javascript so please bare with me.

The function should do the following:

1. User clicks on Button

2. Animated Gif Appears (Loading Bar)

3. Button Update User's Status

4. Animated Gif Disappears

5. Facebook Canvas page is updated

The code I currently have can be found at Pastebin.

I am having trouble thinking of Step 2 and 4.

I need to optimize Step 5.

To clarify what happens on Step 5. I have Box 1 which has my stats. And Box 2 which has my points. I click on Box 1. This should update Box 1 with 1 points, and update Box 2; minus a point. (Clicking on Box 1, concurrently update both boxes)

I have successfully done this, but it is quite slow. I was wondering if there are alternative way that may be faster than what I am currently doing.

Your advice is greatly appreciated.

---

Script Updated with Mark-up.

I've found a quick way to optimize the call. Rather than querying for data that I already have query, I will be using the first query to grab most of my data rather than querying it when I update.

Answer 1

It would help greatly to see the document markup (XHTML) where you have your elements and the calls to your javascript functions.

For steps 2 and 4 I recommend using the visibility attribute rather than display, or having the loading bar in an fb:js-string and using elem.setInnerFbml when you begin loading and once you have your response data, simply update it to the new content (you don't need an explicit loading_finish function in this case).

In your get_skillpoint function, you set parameters in an object and then you specify the action parameter again in the URL you are posting to as a URL query param - you may end up with one value overwriting the other, depending on how you access these values on the server side. I would recommend using different names for these two parameters if they are not the same. Also, why are you trying to send separate GET and POST variable sets? You should put everything in the POST and simply leave out the URL query string. I vaguely remember losing data that way in the past (vaguely, mind you).

If you can post your markup I'll update my answer with any light it sheds on the problem. It might be slow simply because Facebook isn't blinding fast when it comes to FBJS and AJAX. Also, FBML being returned must be preprocessed in the FB proxy before your app gets it, which adds a bit of lag; it's a bit faster to return JSON and just pull the data needed out of it, then place the appropriate pieces into an existing element or make use of fb:js-string.