Loading new content on the page via a link without changing the URL

Question

I am working on a social network website similar to facebook. But, I am facing a rather confusing stage in the programming.

I am done with the register/login/logout pages/scripts, and you can view profiles with the www.mywebsite.com/profile.php.

Now, I want to do what facebook does and allow users to click links while on their profile page (info, notes, photos) but never actually leave www.mywebsite.com/profile.php — just the appropriate content is printed to the screen.

How is this done? I am not asking anyone to code this for me, just point me in the right direction!

Answer 1

You can use Ajax for this purpose.

Put the content that you want to replace in a div and using ajax replace that div and only send that content.

Answer 2

Are you trying to do something like this?

http://www.99points.info/2010/05/how-to-create-dynamic-content-loading-using-ajax-jquery/

Answer 3

That will have to be done via Javascript and Ajax.

A javascript function will fire when the link is clicked. An ajax request is sent to the corresponding php script which sends back a response to your javascript function. You then parse this response and place it on the screen.

If you go that way, have a fallback option that does not rely on javascript as well in case a user has JS turned off.

Answer 4

For this, you need the technique known as Ajax , which is short for asynchronous JavaScript and XML. The basic idea is that when the user does something - in your case clicks on a link or button - instead of loading a page, a script runs that calls on a server side script to send back some data. This is sometime XML, but you can get other types of data back as well. The asynchronous part is that the user and the page can go on doing other things while waiting on your script to return the data you asked for.

There's a good book for beginners in Ajax that I read myself: Head First Ajax . Looks like you can pick up a used copy for about $10. It's a nice intro, has a quirky style that appeals to some, and the authors do whatever they can to keep your attention. Hardcore programmers probably won't like this one, but I sense you're a little newer to the game and this may be a good read. Otherwise, Google "learning Ajax" and there are a bajillion resources.

Good luck!

To respond to your comment, you can set up a "router" script that takes input and runs a specific function in response. This "router" function looks at the $_GET[] superglobal for a parameter like "action" and then calls a corresponding function. If not action parameter is sent over, the router calls a default function.

Now for a little more detail. Your page script would have 3 basic parts: The router, the various action functions, and the page template function. The router just calls the appropriate function from the action functions and passes the output into the template function. Here are a few examples.

The user arrives on the page, index.php. No action is specified, so the router finds $_GET['action'] == '' and it calls default_action(). This returns a welcome message, status, whatever, and the router passes this output to the function that displays your page, output included.

Now the user clicks a link/button for updates and arrives at index.php?action=update. $_GET['action'] == 'update', so the router calls update_action(). The output goes on to the template function for display.

Does this help you envision how you might accomplish this?

Answer 5

You Can use this reference...

function showdiv(id) { if(id) {

var selected_offer="yourpagename.php"
HTML_AJAX.replace('divname',selected_offer);


}

}

call showdiv on onChange() function of your link..