View Full Version : How Would You Approach Conditional Content?

Oct 31st, 2010, 09:01 PM
I am developing a multi-tabbed site that shows numerous charts of data on each page. I am using FusionCharts for each individual chart. Basic setup will be about 6 charts per page. Some users won't want to make use of all the charts.

I would like to have a setup page where the user can uncheck some checkboxes for the charts he doesn't want to use. If he unselects a chart, I don't want to show that chart on that page and I want the 5 other charts that were below to slide up and fill the space.

What approach would you take for this? I thought about a bunch of IF statements with php and just writing each web page for each individual user. Sounds like a brute force approach. Any better ideas for conditional content that will work across all browsers? Thanks.


Nov 1st, 2010, 10:13 AM
How Please follow #2 at http://www.codingforums.com/postguide.htm regarding title of thread. You may edit your post to make the changes.

Nov 1st, 2010, 11:07 AM
You can use mySQL or any other database to store user's information and chart preferences. PHP will work fine for getting their settings, although you'll need Javascript/AJAX if you want the charts to literally 'slide' or at least update immediately when they're checked [versus after they reload the page], as server side languages update on the server side, before the page loads.

Nov 2nd, 2010, 10:24 AM
I understand the tie of Fusion Charts to MySQL. I am unsure of how you allow different users to pick which charts show on the page. Is there a way to show conditional content within the html page using "if's"?, or with CSS? or is the only way to build the HTML page for each user depending on what charts they want to see using php or another language? Thanks.


Nov 2nd, 2010, 03:17 PM
I would think you could have either a login form or even a dropdown list if the charts are not user sensitive. Then once a user selects a username or member name, then a query would compare the selection against the database and display relative information(charts).

You dont really need to think in terms of "if" statements, but query statements.

SELECT someData
FROM someTable
WHERE FORM.someUser = someUser

This is simplified for the sake of example, and in Coldfusion it is just about that simple, but php requires a little more coding than CF.

Nov 3rd, 2010, 04:31 PM
I probably wasn't clear enough in my original post. FusionCharts are flash charts. when I put them on the html page, they are there whether there is data tied to them or not. The intent is to have 6 or so small charts per page.

What I don't want is an empty chart sitting on the page if the user has elected not to use that chart and not fill any data in the table for that chart.

So if I have 6 charts sitting in 6 <divs> or <td's> on the same page and a user doesn't want to use one of the charts for his project, how do I easily make it go away and only show 5 charts? Understanding I want to automate this process since I would expect to have many users.

Thanks for any advice.


Nov 4th, 2010, 01:34 AM
That depends, do you want the charts to go away permanently when the user gets rid of them or just for the duration of their session on that page? Javascript would make the charts go away as long as they stay on that page. You might need cookies to avoid them coming back when the page is reloaded or closed and opened again. Javascript + Cookies is probably the best method. You can put a close button on each div and have the button call a Javascript function.

<script type="text/javascript"><!--
function myFunction(myId){
document.getElementById(myId).setAttribute("style", "display: none;");
<input type="button" value="Hide" onclick="myFunction(div1)" />

Nov 4th, 2010, 02:25 PM
You are pointing me in the right direction. When a user sets up a project, he will then select what charts he wants to see on each tab (page) for the life of that project. So I do want the charts he deselects to go away completely.

I thought of maybe writing out the content portion of the page with the charts with php for each user, saving the file, stuffing it in a folder and calling that user's content portions when I write their pages. However, what if I had 500 users?

I thought of dynamically writing the page sections with php each time a specific user wants to view a page. Didn't know how that would work speed-wise and it doesn't seem like very good MVC separation of code practice.

Could I store the checkbox status in a array in the database and then feed the parameters to a javascript function to delete the necessary charts for each user? Thanks.


Nov 4th, 2010, 03:17 PM
Well personally the dynamic approach appeals to me more so than using javascript. I would pull the charts from a databases based on a user defined selection list or checkbox or something similar.

The user could select which chart they want to view, or perhaps multiple charts if they want. That way you dont HAVE to have all charts displayed on the page at all times and then rely on javascript to make some of them NOT display.

Is this strictly a back room type of application? Meaning the drawback with using javascript, though maybe not all that common but worth thinking about, is the fact that some internet users choose to turn off javascripts from within their browsers.

Nov 4th, 2010, 11:34 PM
If you want them to change permanently, you could do that with PHP forms. There's a few ways to go about doing that. First set up a mysql database. Put in a table called, for this example, myTable. It's a lot to explain here, so if you want to know how to use PHP to get form data and submit it into a database, tizag.com has a great tutorial on that (you should have a table for the page and make a field for each html table). You can then retrieve the data with a mysql_query and create an array for each row. A php if statement will determine the value and, if the value of, say, div1 is true, you can echo comment tags around the table or echo style="display: none;" or even echo a javascript command that hides the div. Submitting it can either be done one at a time, all at once with a checkbox, or without even leaving the page through AJAX. Sorry if I'm not explaining things very well, I'm in a rush, but I'll be back later to explain better.

Nov 5th, 2010, 06:15 AM
This isn't a backroom type application. It will be a web app, so understand the Javascript hesitation. I know how to do this writing the page out with php, just wasn't sure this would be best practice. It gets to be somewhat spaghetti code when I am doing this for 5 or 6 tabs of 6 or so charts.

Thanks for all the advice.


Nov 5th, 2010, 07:58 AM
Ah. Sorry, I guess I misunderstood a little. As for the best method, I would use AJAX and a mySQL database. That way you can close whatever tables you don't want without having to reload the page. If you don't want to use AJAX, I would go with checkboxes on each table and a submit button to remove them. Javascript might help a little with this, too, so you can have checkboxes on each table without having to enclose your whole page in a form.

Nov 5th, 2010, 04:03 PM
Ok public web app. Well sorry if I'm not specifically giving you a direct way to do this. I have never used fusion charts. I did look at them and they look awesome.

I would still personally try to stay as much away from js as possible and figure out how to do this with server side scripts. Just my personal opinion though. I dont mind a page reloading to deselect a chart, but would hate someone who has js turn off to not even be able to use the site.