Question

I have a page that automatically runs a query and displays the results on the page.
What i would like to do is that when click on one result, it should show me more details on that specific item on the same page (perhaps in a div), but i don’t want to code a div/page for each specific item because i get results from a database that is ever growing.

this is how my php that displays the result looks:

 while($row = mysql_fetch_array($result)){
 if (strlen($row['companyname'])>0) {


  echo      "<ul data-role='listview' data-inset='true'>
  <li><a href='#'>
  <h3>{$row['companyname']}</h3>
            <p><b>Address:</b></p>
            <p><b>Tel:</b>{$row['tel']}   <b>Fax:</b>{$row['fax']}</p>
            <p><b>Email:</b>{$row['email']}</p>
            <p><b>Website:</b>{$row['website']}</p>
            <p class='ui-li-aside'><strong>VIEW MORE</strong></p>
        </a></li>
    </ul>";

I tried putting this code below in the href attribute, but it still doesn’t work, and it will leave the page which i don’t want to happen:

  <a href="resultdetails.php?companyname='{$row['companyname']}"

Then i get the result on the next page like this:

 $companyname = intval($_GET['companyname']);
 $query = mysql_query("SELECT * FROM businessuser WHERE companyname=$companyname");
 $details = mysql_fetch_array($query); 

 echo ($details[companyname]);
 echo ($details[website]);
 echo ($details[tel]);

This only ever give the first result in my table, no matter which result i click 🙁

Please help…thanks

Answer 1

Well, then you will need Javascript and Jquery to accomplish this.
Here is a DEMO: http://jsfiddle.net/yZrUg/4/ I prepared for you.

You can copy the codes from there or
here is the HTML:

<table id="report"><tbody>  



    <tr class="odd">
            <td class="left"> Company Name </td> 
        </tr>

        <tr class="even" style="display: none;">
            <td style=" border:1px solid #CCC;">
                <p style="color:#656565;"> address</p>
                 <p style="color:#656565;"> tel </p>
                 <p style="color:#656565;"> email </p>
                 <p style="color:#656565;"> website </p>

            </td>
        </tr>  




    </tbody></table> 

The CSS:

#report { border-collapse:collapse; }
        #report h4 { margin:0px; padding:0px;}
        #report td {  color:#000; padding:0px; }
        #report tr.odd td { color:black;  cursor:pointer; border-bottom:1px solid #CCC;   }


        #report tr.even td {background-color:#dadada;  padding:10px 0px 15px 20px; }
        #report tr.odd td.left {width: 1000px;   }
        #report tr.odd td.left b{font-size:18px; font-weight:normal;}
        #report div.arrow { background:transparent url(../images/arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px;  }
        #report div.up { background-position:0px 0px; }
​

And the Javascript:

$(document).ready(
    function(){
        $('#report tbody tr:nth-child(odd)').addClass('odd');
        $('#report tbody tr:nth-child(even)').addClass('even').hide();
        $('tr.odd').click(
            function(){
                var that = $(this),
                    next = that.next('.even');
                that.find('.arrow').toggleClass('up');
                next.toggle().siblings('.even').hide();
                $('.even:not(":visible")').each(
                    function(){
                        $(this).prev('.odd').find('.up').removeClass('up');
                    });
            });
        });
​

Don’t forget to use Jquery