Hi,

I'm trying to imitate the Ajax popup window feature of Facebook's "Add Friend". For example, when you click "add friend" on facebook, it pops up a window...

Right now, I know how to make a DHTML popup but I couldn't figure out how to package URL so I can pass data through GET to my addfriend.php page.

I tried to do:



<div id='mypopup' name='mypopup' style='position: absolute; width: 250px; height: 200px; display: none; background: #ddd; border: 1px solid #000; right: 0px; top: 500px'>
</div>

<a href="friend_request.php?friend_id=12345" onClick='document.getElementById("mypopup").style.display="block"'>add</a>


but my link gets redirected to another page...

Why don't you make a js function earlier on, and use this:



<script type="text/javascript">
function call_addFriend(div,friendid) {
var obj = document.getElementById(div);
obj.style.display='block';
obj.innerHTML="<iframe src='addfriend.php?id="+friendid+"'>";
}
</script>
<a href="javascript:void();" onclick="javascript:call_addFriend('mypopup','12345');">Add friend</a>

Hey Nickia,

Check these out at the facebook wiki. It may help you.
wiki.developers.facebook.com/index.php/Mock_ajax

Instead of doing it in a new window, why not have something inside the current page?

Something like this:


<form id="addfriend"></form>
<a clickrewriteurl='linktoactualwebsite.com/friend_request.php?friend_id=12345' clickrewriteform='addfriend' clickrewriteid='add_friend'>Add Friend</a>
<div id="add_friend">
</div>


If you have a list of users they can add to friends, you can do it with php with something like:


[foreach user in database, output the following]
<form id="addfriend_[users id]"></form>
<a clickrewriteurl='linktoactualwebsite.com/friend_request.php?friend_id=[users id]' clickrewriteform='addfriend_[userid]' clickrewriteid='add_friend_[userid]'>Add Friend</a>
<div id="add_friend_[userid]">
</div>


After they click "add friend", it would replace everything inside the div and displays a message that you want. So if your add_friend.php script basically just inserted something into the database, you could output a simple "Success", or anything really, as long as it only uses html allowed on the facebook platform.

Also, the reason you have to use the link to the actual website instead of the link to the facebook application (E.G: apps.facebook.com/myapp) is that you will end up outputting the facebook chrome inside your application, if it goes through anyways.


from the wiki:

FBML supports mock AJAX functionality. On any element, you specify the attributes clickrewriteid, clickrewriteform, and clickrewriteurl. When the user clicks on that element, the contents of the form specified with clickrewriteform gets POSTed to Facebook's servers and then relayed to the URL specified with clickrewriteurl. This URL should return FBML, not the HTML that a normal Web server would. The Facebook server then renders this FBML into HTML and replaces the innerHTML of the DOM element you specified with clickrewriteid.

It may sound complicated, but this way Facebook Platform retains control over requests, and gets to render any FBML specific code.

Hi thanks guy for the quick replies. I'm actually writing my own facebook clone so would this method work?

@nickia: Oh, i thought you were developing a facebook application. No, that probably wouldent work :P

aww thanks anyway AniMud. I've been searching around the Net for Ajax tutorial but it's so scarce compare to PHP

I think that's because there's really no specific structure to AJAX. It's more conceptual, which means we've probably just scratched the surface of it's possibilities. There are some tutorials out there, but mostly they're geared towards a specific type of usage. There's nothing that I'm aware of that really gives an introductory-level primer (or even a history of server-push concepts) at a conceptual level.

Really, it's pretty basic. A page event triggers an XML request to a script on the server. Server returns data. JS on the page does something with it. It's like Othello...minute to learn, lifetime to master.

thanks. maybe some genius can come up with a better way to simulate the ajax effect because it takes a gazillion lines of codes to accomplish a simple task in ajax.

Hardly...here's one I use for basic div content loading...http://www.mattleonhardtmusic.com/js/ajax.js

You should really be using a Javascript library. No point re-inventing the wheel. jQuery (http://www.jquery.com)is a good choice.

Then you can use one of the *many* (http://plugins.jquery.com/project/Plugins/category/43) Lightbox/Thickbox/Facebox style plugins that are out there. Here's a good one that simulates what you want: http://famspam.com/facebox

Seriously, the xxKB that you add to your site is nothing compared to having to manually write cross-browser DHTML functions.

I've got nothing against using a framework, so long as it does everything you need it to and is sufficiently lightweight. When you are working on a large-scale project and your needs don't fit into a packaged little box, however, you may find yourself developing your own framework. At that point, understanding the low-level functionality and browser compatibility issues becomes absolutely essential.

Besides that, you can usually use a framework more efficiently if you understand what's going on under the hood. And lastly, I was only posting that code as an example of a viable cross-browser ajax function that falls a couple lines short of "a gazillion." :)