Categories > TinyButStrong general >

Hide/Unhide table results without reloading page

The forum is closed. Please use Stack Overflow for submitting new questions. Use tags: tinybutstrong , opentbs
By: RobN
Date: 2007-02-04
Time: 14:37

Hide/Unhide table results without reloading page

Hello,

I am busy building a system using MySQL with Article Groups and Articles. The users must be able to click a button or text to expand the Group(s) and thus showing the article details.
I am aware of the Grouping function but this does not give the Hide/Unhiding possibilities, without loading the whole page again.

After a long struggle with all the Javascripts that are around I hope someone can help me out here. The combination of DIV's with unique ID's is breaking me up.

Who can help me out?
Thanks,
Rob
By: Martin
Date: 2007-02-04
Time: 17:14

Re: Hide/Unhide table results without reloading page

Hi RobN. Sorry for my poor english, first.
I have this code to do this:

1. Put this code into a separate .js file like faq.js

var _aFAQItems = new Array();
function FAQ_AnswerBegin(sAnswerID)
{
    if (document.getElementById(sAnswerID) == null)
        {
        document.write("<div id=\"" + sAnswerID + "\" style=\"margin-left:20px;display:none;\">");
        _aFAQItems[sAnswerID] = sAnswerID;
        }
    else
        window.alert("El ID esta en uso '" + sAnswerID + "'");
}

function FAQ_AnswerEnd()
{
    document.write("</div>");
}

function FAQ_Show(sAnswerID)
{
    document.getElementById(sAnswerID).style.display = (document.getElementById(sAnswerID).style.display == "none") ? "" : "none";
}

function FAQ_ShowAll(sShowAllButton, sHideAllButton)
{
    document.getElementById(sShowAllButton).style.display = "none";
    document.getElementById(sHideAllButton).style.display = "";
    for(var sAnswerID in _aFAQItems)
        document.getElementById(sAnswerID).style.display = "";
}

function FAQ_HideAll(sShowAllButton, sHideAllButton)
{
    document.getElementById(sHideAllButton).style.display = "none";
    document.getElementById(sShowAllButton).style.display = "";
    for(var sAnswerID in _aFAQItems)
        document.getElementById(sAnswerID).style.display = "none";
}

2. In PHP merge a block like blk1 with your data like Id / Title / Description
3. In TEMPLATE


<p>
<a href="javascript:FAQ_Show(blk1.Id;block=p);">[blk1.Title]</a>
<script "type=text/javascript">FAQ_AnswerBegin([blk1.Id]);</script>"
[blk1.Description]
<script "type=text/javascript">FAQ_AnswerEnd();</script>
</p>

I hope to explain you well, if not, let me know.

Bye
By: Martin
Date: 2007-02-04
Time: 17:34

Re: Hide/Unhide table results without reloading page

I forgot.. include the faq.js into then template
<script type=text/javascript src="faq.js"></script>

Bye
By: RobN
Date: 2007-02-04
Time: 20:46

Re: Hide/Unhide table results without reloading page

Hello Martin,

Thanks a lot for your contribution. It sound/looks promissing, however in a table layout, where do you put your code? Around the TR or TD or within each line?
Can you give me an example how you do that?
Thanks a lot,
Rob
By: RobN
Date: 2007-02-05
Time: 11:13

Re: Hide/Unhide table results without reloading page

Hello,

I am afraid this solution does not work because of the following:
My database has a Material table and a Product table. The Product table is linked to Material by Product.Material_Id.

Normally you make a table with 3 times TR en TD, i.e.
<tr><td>Header with material [Product.Material_Id]</td></tr>
<tr><td>Subheading with names of table columns</td></tr>
<tr><td>Details with [Product.Material_Id] and [Product.Article_number]</td></tr>

Now I want to Show/Hide the subheading and details by OnClick(?) the Heading.
All the standard methods use <DIV id=[Product.Material_Id]> but this does not work as TBS seems to remove the <DIV> from the sourcecode.

Or to rephrase the question a bit: How can I include the unique ID's from the header in a DIV that is shown in HTML.
Hope this clarifies it a bit more(?)

Thanks, Rob
By: Martin
Date: 2007-02-06
Time: 03:54

Re: Hide/Unhide table results without reloading page

Hi RobN, you are you ?
Please copy and paste this and let me know if work.

<script type=text/javascript src="faq.js"></script>

<table>
<tr><td><a href="javascript:FAQ_Show(1);">Header with material [Product.Material_Id]</a></td></tr>
<tr>
  <td>
    <script "type=text/javascript">FAQ_AnswerBegin(1);</script>
    <table>
     <tr><td>Subheading with names of table columns</td></tr>
     <tr><td>Details with [Product.Material_Id] and [Product.Article_number]</td></tr>
    </table>
    <script "type=text/javascript">FAQ_AnswerEnd();</script>
  </td>
</tr>

<tr><td><a href="javascript:FAQ_Show(2);">Header with material [Product.Material_Id]</a></td></tr>
<tr>
  <td>
    <script "type=text/javascript">FAQ_AnswerBegin(2);</script>
    <table>
     <tr><td>Subheading with names of table columns</td></tr>
     <tr><td>Details with [Product.Material_Id] and [Product.Article_number]</td></tr>
    </table>
    <script "type=text/javascript">FAQ_AnswerEnd();</script>
  </td>
</tr>

</table>

Bye
By: Martin
Date: 2007-02-06
Time: 04:04

Re: Hide/Unhide table results without reloading page

Hi robN, i dont know if i was clear.
Copy and Paste the code and save it into a plain test.htm.
If is work, just change at template, to loop at <tr> of the first table
[Product.Material_Id;block=((tr))]

I hope with my english understand the idea....
By: RobN
Date: 2007-02-06
Time: 10:32

Re: Hide/Unhide table results without reloading page

Hello Martin,
I understand your English very well. However Firefox does not ;-}.
When I test your script in IE7 it works fine, however Firefox shows everything. Here in The Netherlands 25% uses Firefox so that cannot be overseen.

When testing it in IE I still have problem with the block of TBS and the results.

Hopefully you are willing to spend some more time on this as I think that many people will benefit from your solution! Therefor I will send you my database and script by email. Once we have it running we can upload the solution here.

Thanks again, Rob
By: anil
Date: 2008-10-22
Time: 10:03

Re: Hide/Unhide table results without reloading page

hi...please explain me how do i make read only jsf third party componenet
By: Martin
Date: 2008-10-22
Time: 23:35

Re: Hide/Unhide table results without reloading page

Hi anil !
Please, explain my what is jsf and i will try to help you.

Thanks. Martin