Tabs to switch between PHP content without refresh.

patov2

Hey,

I was wondering if it is possible to add tabs on a CMS page that allows the user to switch between content without refreshing the page?

Example: About Page

Tab1: Content 1
Tab2: Content 2
Tab3: Content 3

I currently have a PHP script that updates the database and actual site information for one content area only.

I want three within one page, but I only want to display one at a time. Is there a way to do it?

I don't want three seperate PHP pages for each of the content updates. This would make my CMS not as efficent.

Thanks

php_rockzz

I would suggest u to use ajax to accomplish this task..
Onclick of a particular tab, call a function to fetch data from the database respective to that tab.

Like, suppose u have a tab called tab1 and a <div> with id 'db' where you want to show the data.

<input type="button" value="Tab-1" onclick="get_db()"  />
<div id="db"></div>

and the function get_db() would be like:

function get_db()
		{
		$('#db').load('http://www.xyz.com/get_db.php);				
		}

In the file get_db.php, u write your sql query to fetch the data from the database..
In a similar manner, you can get the data for your other tabs too..

patov2

Thanks for the reply. That piece of jQuery is very promising. I have checked how it functions.

I did however want a piece of code that brought in different database data. This data would switch out the other form data without refreshing the page.

Is there anyway of doing this without creating a new page? If anyone knows a way to do that, I will appreciate it a lot!

@php_rockzz:

When I tested this code, I create a new PHP file like you said, and in that I basically copied most of my about page code into it. This included the PHP and form. That how I guessed it worked.

This worked, the information switches, and the other database data is displayed in the form. When I hit update however, I use a:

header(location🙂;

This allows the information for the 2nd content to be updated, but on refresh it goes back to displaying the content 1 form and data.

Is there anyway of keeping the 2nd content on page refresh?

php_rockzz

i m not quite clear about the problem.. first, if u want to update the data in the database, what is the need of header location?? u can simply call a php function on submit that would execute the sql query.. a piece of code to highlight ur problem would be quite helpful..

patov2

Basically, I have a form. This form contains echoes, that brings in the database information.

Example:
<input type="text" name="page_title" id="page_title" value="<?php echo $pagetitle; ?>" />

This is required through a query.

The form has an update button, that when submitted, it validates the form, and runs an update query to the database. This changes the database data. Once the Update button is pressed. The page refreshes, bringing in the newly updated information into the form.

I need a way of bringing in other about data from the database. So When tab 2 is pressed. The form that holds content 1, switches with content 2 so that can be updated.

I think I'm better off just making new pages for each content area. But this will lead to there being more pages than I wanted.

moh3

hello you can accomplish this with jquery ui libary and php script,the best way is create your html mockup of the data then test it when done you would use the jquery ui tab ajax method to fetch the data from the php file which will process the request and return the data:
- tab1: get.php?id=1
- tab2: get.php?id=2
in the get.php parse the id parameter and use a php switch for looping on your ids
switch(id) case:1 / code to show based on id// you can get the data from db or array

more info and download here: http://jqueryui.com/demos/tabs/