Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How Would You Approach Conditional Content?

    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.

    Terry
    Last edited by TSquared; 11-02-2010 at 09:21 AM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    How
    Please follow #2 at http://www.codingforums.com/postguide.htm regarding title of thread. You may edit your post to make the changes.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    616
    Thanks
    48
    Thanked 65 Times in 65 Posts
    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.
    "Yeah science!"
    Online Science Tools

  • #4
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

    Terry

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.

    Code:
    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.

  • #6
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

    Terry

  • #7
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    616
    Thanks
    48
    Thanked 65 Times in 65 Posts
    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.
    Code:
    <script type="text/javascript"><!--
    function myFunction(myId){
    document.getElementById(myId).setAttribute("style", "display: none;");
    }
    --></script>
    ...
    <form>
    <input type="button" value="Hide" onclick="myFunction(div1)" />
    </form>
    "Yeah science!"
    Online Science Tools

  • Users who have thanked djh101 for this post:

    TSquared (11-04-2010)

  • #8
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

    Terry

  • #9
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.

  • #10
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    616
    Thanks
    48
    Thanked 65 Times in 65 Posts
    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.
    "Yeah science!"
    Online Science Tools

  • #11
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

    Terry

  • #12
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    616
    Thanks
    48
    Thanked 65 Times in 65 Posts
    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.
    "Yeah science!"
    Online Science Tools

  • #13
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •