Solved

PHP & Ajax, YUI tab problem, tabView / DOM

Posted on 2007-03-27
4
676 Views
Last Modified: 2008-01-09
PHP & Ajax, tabView / DOM

I am using YUI's tabView for creating tabs. The content of the tabs are made with PEAR's Flexy. A tab may consist of several select boxes, text fields and check boxes for instance, where the options in the select boxes has been set by the class handling the template system.

The problem occurs when I want to add new tabs. The content in the new tabs should be the same as in the first one. I've tried using innerHTML, but it doesn't seem to work (or I haven't understood it properly). So I wonder if using DOM and building the content dynamically with Javascript can do the magic? I need a way for setting the different select boxes etc. in the tabs, with unique IDs/names. I also need a way for the template class to get the new tabs. Any idèas?
0
Comment
Question by:kkarumu
4 Comments
 
LVL 18

Expert Comment

by:ingwa
ID: 18804911
Hi Kkarumu, whilst I haven't tried YUI's tabview, I have played around with ajax, and have achieved some pretty remarkable results.  As you are using php, and are getting to grips with ajax, may I please recommend that you look at xajax:

http://www.xajaxproject.org

With a tab, what I would imagine is that you would query your database, and instead of doing a row per record, you would do a column per record.  So simply setup a function in xajax that is used to query the database, create some html which creates your tabs, using a <td> loop instead of a <tr> loop, and get your tabs dynamically generated.  You will find that with this logic, and the ease of using xajax, you can update your divs without any diffs at all.  I was personally really surprised as how easy it was to use.

There are other options such as limiting your tabs per row depending on column counts.  Such as 5 columns, then start a new row, while the tabs are created with embedded tables to ensure a kind of consistancy.  This obviously takes a little trial and error, however you may find this link useful:

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/Q_21697147.html
0
 
LVL 1

Author Comment

by:kkarumu
ID: 18819951
Thanx for your comment, the main problem was that the same fields on all tabs had the same id, I solved it by sending id og the tab to php and add that to the fields.
0
 
LVL 1

Accepted Solution

by:
Computer101 earned 0 total points
ID: 19539298
PAQed with points refunded (500)

Computer101
EE Admin
0

Featured Post

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now