Different headlines in a table

Hi,

I have a need to be able to show different headlines depending on the search result in the database.
I have made the code pasted in below, but it give me the problem that when I have a search that have more than one result in the "Type" column, I get the headline displayed at every row in the table.

Try it here - write e.g. Odense Odense in the searchfield. http://kroweb.dk/gfdev/ft_raw2/#

Is there a way that i create a separate headline when I have more than one result in the "Type" column, and at the same time keep the possibilities to differentiate the headlines represented in the code below?

                               <!-- Have we ran a query -->
                               <?php if (isset($results)): ?>

                               <!-- Do we have any results -->
                               <?php if ($results->num_rows): ?>

                               <table id="myTable" class="table">
                                <colgroup>
                            </colgroup>

                            <tr>
                                <!-- Loop through the results of the query -->    
                                <?php while ($row = $results->fetch_object()): ?>
                                


                                <?php if ($row->Type =='Købstad'): ?>

                                <th>&nbsp;</th> <th>Amt By Gade</th> <th>Amt</th> <th>Aar</th> <th>Type</th> <th>Gade (1860)</th> <th>Matr. nr. (1860)</th> 

                            <?php elseif ($row->Type == 'Hovedstaden'):?>

                            <th>&nbsp;</th> <th>Amt By Gade</th> <th>Amt</th> <th>Aar</th> <th>Type</th> <th>Gade (1860)</th> <th>Matr. nr. (1860)</th> 

                            <?php else:
                            if ($row->Type =='Landdistrikt'): ?>
                            
                            <th>&nbsp;</th> <th>Amt Herred Sogn</th> <th>Amt</th> <th>Aar</th> <th>Type</th> <th>Gade (1860)</th> <th>Matr. nr. (1860)</th> 

                        <?php endif; ?>
                    <?php endif; ?>



                </tr>


                <!-- Links for the individual rows -->    
                <?php
                $link1 = sprintf("<a href='%s' target='_blank'>%s</a>", $row->URL, $row->AmtHerredSognGade); 
                $link2 = sprintf("<a href='%s' target='_blank'>%s</a>", $row->Infourl, $row->Info);
                $link3 = sprintf("<a href='%s' target='_blank'>%s</a>", $row->Infourl, $row->Gade);
                $link4 = sprintf($row->AmtHerredSognGade);
                ?>

                <?php if ($row->Collapse == 'p'): ?>
                <!-- We have a parent row -->

                <tbody class='toggle' >
                    <tr class="expander">
                        <td><span class='toggle'></td>
                        <td><?php echo (!empty($row->URL)) ? $link1 : $link4 ?></td>
                        <td><?php echo $row->Amt ?></td>             
                        <td><?php echo $row->Aar ?></td>
                        <td><?php echo $row->Type ?></td>   
                        <td><?php echo $row->Gade ?></td>            
                        <td><?php echo $row->Kvarter ?></td>            
                    </tr>

                <?php elseif ($row->Collapse == 'c'): ?>
                <!-- We have a child row -->

                <tr class="child">
                    <td>&nbsp;</td>
                    <td><?php echo (!empty($row->URL)) ? $link1 : $link4 ?></td>
                    <td><?php echo $row->Amt ?></td>             
                    <td><?php echo $row->Aar ?></td>
                    <td><?php echo $row->Type ?></td>
                    <td><?php echo $row->Gade ?></td>            
                    <td><?php echo $row->Kvarter ?></td>           
                </tr>

            <?php else: ?>
            <!-- We have a non-collapsible row -->

            <tr class="non">
                <td>&nbsp;</td>
                <!-- Område, link -->
                <td><?php echo $link1 ?></td>
                <td><?php echo $row->Amt ?></td>      
                <td><?php echo $row->Aar ?></td>
                <td><?php echo $row->Type ?></td>
                <td colspan="2">&nbsp;</td>
            </tr>

        <?php endif; ?>


    <?php endwhile; ?>


</table>

<?php else: ?>

    <p>Der er ingen resultater for denne søgning</p>

<?php endif; ?>
<?php endif; ?>

Open in new window

Peter KromanSales ExecutiveAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Peter KromanSales ExecutiveAuthor Commented:
Hi

I believe have solved most of the problem my self :) Only problem now is, that if the search returns a collapsed row as the first row, it is not collapsed and it does not show the "collapse toggle headline".

Try to search for "Assens" in 1890, and you will se that one of the results are a collapsed row names "Odense Assens". The try to change the searchfiels to "Odense Assens" and you will se that the content (streets) of the city Assens is shown but it is not collapsed and the collapse toggle line for Assens is not shown either.

I have this code - what am I missing here:

                                  <!-- Loop through the results of the query -->    
                                <?php while ($row = $results->fetch_object()): ?>
                                


                                <?php if ($row->Type =='Købstad'): ?>

                           <th>&nbsp;</th> <th>Amt By Gade</th> <th>Amt</th> <th>Aar</th> <th>Type</th> <th>Gade (1860)</th> <th>Matr. nr. (1860)</th> 

                            <?php elseif ($row->Type == 'Hovedstaden'):?>

                            <th>&nbsp;</th> <th>Amt By Gade</th> <th>Amt</th> <th>Aar</th> <th>Type</th> <th>Gade (1860)</th> <th>Matr. nr. (1860)</th> 

                            <?php else:
                            if ($row->Type =='Landdistrikt'): ?> 
                            
                            <th>&nbsp;</th> <th>Amt Herred Sogn </th> <th>Amt</th> <th>Aar</th> <th>Type</th> <th>Gade (1860)</th> <th>Matr. nr. (1860)</th> 

                        <?php endif; ?>
                    <?php endif; ?>

                </tr>

                <!-- Loop through the results of the query -->
                <?php while ($row = $results->fetch_object()): ?>

                <!-- Links for the individual rows -->    
                <?php
                $link1 = sprintf("<a href='%s' target='_blank'>%s</a>", $row->URL, $row->AmtHerredSognGade); 
                $link2 = sprintf("<a href='%s' target='_blank'>%s</a>", $row->Infourl, $row->Info);
                $link3 = sprintf("<a href='%s' target='_blank'>%s</a>", $row->Infourl, $row->Gade);
                $link4 = sprintf($row->AmtHerredSognGade);
                ?>

                <?php if ($row->Collapse == 'p'): ?>
                <!-- We have a parent row -->

                <tbody class='toggle' >
                    <tr class="expander">
                        <td><span class='toggle'></td>
                        <td><?php echo (!empty($row->URL)) ? $link1 : $link4 ?></td>
                        <td><?php echo $row->Amt ?></td>             
                        <td><?php echo $row->Aar ?></td>
                        <td><?php echo $row->Type ?></td>   
                        <td><?php echo $row->Gade ?></td>            
                        <td><?php echo $row->Kvarter ?></td>            
                    </tr>

                <?php elseif ($row->Collapse == 'c'): ?>
                <!-- We have a child row -->

                <tr class="child">
                    <td>&nbsp;</td>
                    <td><?php echo (!empty($row->URL)) ? $link1 : $link4 ?></td>
                    <td><?php echo $row->Amt ?></td>             
                    <td><?php echo $row->Aar ?></td>
                    <td><?php echo $row->Type ?></td>
                    <td><?php echo $row->Gade ?></td>            
                    <td><?php echo $row->Kvarter ?></td>           
                </tr>

            <?php else: ?>
            <!-- We have a non-collapsible row -->

            <tr class="non">
                <td>&nbsp;</td>
                <!-- Område, link -->
                <td><?php echo $link1 ?></td>
                <td><?php echo $row->Amt ?></td>      
                <td><?php echo $row->Aar ?></td>
                <td><?php echo $row->Type ?></td>
                <td colspan="2">&nbsp;</td>
            </tr>

        <?php endif; ?>

    <?php endwhile; ?>
<?php endwhile; ?>


</table>

<?php else: ?>

    <p>Der er ingen resultater for denne søgning</p>

<?php endif; ?>
<?php endif; ?>

Open in new window

0
Chris StanyonWebDevCommented:
Hey Peter,

Not entirely clear on what you need, but one thing of note that will cause you problems. Each time you call fetch_object() your code retrieves the next line from the results. You are trying to call fetch_object() in 2 separate while loops:

<?php while ($row = $results->fetch_object()): ?>
    <?php if ($row->Type =='Købstad'): ?>
    ...

    <?php while ($row = $results->fetch_object()): ?>
        <!-- Links for the individual rows --> 
        ...

Open in new window

What this effectively does is retrieve the first row from the database so it can check the Type. It then starts another loop so it can display the records, but this loop now starts on the second record. This second loop works it's way through all your remaining records, before trying to return to the first loop - by which time there are no more records left to loop through. That is probably why you think the first record doesn't have the toggle - you're effectively starting to display the records from the second one onwards.

If you need to take a peak at the first record, then you should call fetch_object() outside of a loop and then reset the record pointer using the data_seek method. This isn't full code, but should give you a general idea of what you need to do:

<!-- Have we ran a query -->
<?php if (isset($results)): ?>

    <!-- Do we have any results -->
    <?php if ($results->num_rows): ?>

        <table id="myTable" class="table">
            <colgroup></colgroup>

            <?php
                // Set up the Header
                $firstRow = $results->fetch_object();
                $headerText = ($firstRow->Type == 'Landdistrikt') ? 'Amt Herred Sogn' : 'Amt By Gade';
            ?>

            <tr>
                <th>&nbsp;</th> <th><?php echo $headerText ?></th> <th>Amt</th> <th>Aar</th> <th>Type</th> <th>Gade (1860)</th> <th>Matr. nr. (1860)</th> 
           </tr>

            <?php
                // Reset the record marker back to the first record
                $results->data_seek(0);
            ?>

            <!-- Loop through the results of the query -->
            <?php while ($row = $results->fetch_object()): ?>

                <!-- Links for the individual rows -->    
                <?php
                $link1 = sprintf("<a href='%s' target='_blank'>%s</a>", $row->URL, $row->AmtHerredSognGade); 
                $link2 = sprintf("<a href='%s' target='_blank'>%s</a>", $row->Infourl, $row->Info);
                $link3 = sprintf("<a href='%s' target='_blank'>%s</a>", $row->Infourl, $row->Gade);
                $link4 = sprintf($row->AmtHerredSognGade);
                ?>

Open in new window

You'll see that I've also tidied up the Header row output (using a ternary operator) as the only difference in all three rows was a single text value.
0
Peter KromanSales ExecutiveAuthor Commented:
Thanks Chris, I get the idea - and this is working.

But I have another problem down the same alley. I have struggled with this for several hours now, and I just cant get it right.

The problem is that is not showing the results right.

The actual page I am working on now is this:
http://kroweb.dk/gfdev/ft_raw2/index_test.php

For expample. If you choose the year 1890 and search for Rønne (Roenne), it shows the 16 LAST streets in the city of Roenne at the top, and then it shows an expander row which I can toggle and here toggles out the FIRST 65 streets in the city of Roenne. But a lot of other entries holding the letter combination "roenne"  - which has absolutely nothing to do with the city of Roenne - is also shown in the toggled child section. Even a row that is not marked as a child row in the database (one with the Type  "Landdistrikt").

I have checked, re-checked, doubble-checked, and checked again that everything is marked and placed correctly in the database. It is - I promise :)

I can understand that everything with the letter combination in the searchfield are displayed, but I can't understand why something that should be indside a child toggle is displayed outside, and something that is should be displayed outside the toggle is dislayed inside.

I paste in the full working code here below, and hope you can see where I am failing :)

The index file:
                    <!DOCTYPE html>
                    <html lang="en">
                    <head>
                        <meta charset="utf-8">
                        <title>Folketællinger</title>

                        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
                        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
                        <link rel="stylesheet" type="text/css" href="style_test.css">

                        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
                        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

                        <script type="text/javascript">
                        $(function(){
                            $('#ft_items').on('click', '.toggle', function() {
                                $(this).parents('tr').nextAll('tr.child').toggle();
                            });
                        });
                        </script>


 


                    </head>

                    <body>
                        <!-- Søge felt til folketællinger -->
                        <div class="container" style="width:100%;padding-top:10px;background-color:#f6f6f6;">
                            <!-- HEADER START -->
                            <div class="row" id="header">


                                <form method="POST" id="search" style="margin-left:30px; margin-right: 30px;"> 
                                    <label for="amt">Amt</label> 
                                    <select id="amt" name="amt" style="width: 125px; margin-right: 20px; font-weight:normal; background-color: #f6f6f6;">
                                        <option value=""></option>
                                        <option value="Bornholm">Bornholm</option>
                                        <option value="Frederiksborg">Frederiksborg</option>
                                        <option value="Færøerne">Færøerne</option>
                                        <option value="Grønland">Grønland</option>
                                        <option value="Haderslev">Haderslev</option>
                                        <option value="Hjørring">Hjørring</option>
                                        <option value="Holbæk">Holbæk</option>
                                        <option value="København">København</option>
                                        <option value="Køøge">Køge</option>               
                                        <option value="Maribo">Maribo</option>
                                        <option value="Odense">Odense</option>
                                        <option value="Præstø">Præstø</option>
                                        <option value="Randers">Randers</option>
                                        <option value="Ribe">Ribe</option>
                                        <option value="Ringkøbing">Ringkøbing</option>
                                        <option value="Roskilde">Roskilde</option>
                                        <option value="Skanderborg">Skanderborg</option>
                                        <option value="Sorø">Sorø</option>
                                        <option value="Svendborg">Svendborg</option>
                                        <option value="Sønderborg">Sønderborg</option>
                                        <option value="Thisted">Thisted</option>
                                        <option value="Tønder">Tønder</option> 
                                        <option value="Vejle">Vejle</option>
                                        <option value="Viborg">Viborg</option>
                                        <option value="Aabenraa">Aabenraa</option>
                                        <option value="Aalborg">Aalborg</option>
                                        <option value="Aarhus">Aarhus</option>
                                        <option value="Åbenrå-Sønderborg">Åbenrå-Sønderborg</option>
                                    </select>

                                    <label for="type">Type</label>
                                    <select id="type" name="type"style="width: 160px; margin-right: 20px; font-weight:normal; background-color: #f6f6f6;">
                                        <option value=""></option>
                                        <option value="Landdistrikt">Søg i Landdistrikter</option>
                                        <option value="Købstad">Søg i Købstæder</option>
                                        <option value="Hovedstaden">Søg i Hovedstaden</option>
                                    </select>


                                    <label for="aar">År</label>                
                                    <select id="aar" name="query_start" style=" width: 65px; margin-right: 20px; font-weight:normal;  background-color: #f6f6f6;">
                                        <option value=""></option>
                                        <option value="1787">1787</option>
                                        <option value="1801">1801</option>
                                        <option value="1803">1803</option>
                                        <option value="1834">1834</option>
                                        <option value="1835">1835</option>
                                        <option value="1840">1840</option>
                                        <option value="1845">1845</option>
                                        <option value="1850">1850</option>
                                        <option value="1855">1855</option>
                                        <option value="1860">1860</option>
                                        <option value="1861">1861</option>
                                        <option value="1870">1870</option>
                                        <option value="1878">1878</option>
                                        <option value="1880">1880</option>
                                        <option value="1890">1890</option>
                                        <option value="1901">1901</option>
                                        <option value="1906">1906</option>
                                        <option value="1911">1911</option>
                                        <option value="1916">1916</option>
                                        <option value="1921">1921</option>
                                        <option value="1925">1925</option>
                                        <option value="1930">1930</option>
                                        <option value="1940">1940</option>          
                                    </select>

                                    <label for="sogn">Sted, By, Sogn, Gade</label>
                                    <input type="text" name="sogn" id="sogn" placeholder="Fritekst" style="color: #e08a94;  background-color: #f6f6f6;">
                                    <input type="submit" value="Søg" name="Sog" id="Sog">
                                    <input type="reset" value="Nulstil">
                                    <script>
                                    $(':reset', '#search').click(function(e) {
                                    $('#ft_items').html('');
                                    });
                                    </script>




                                </form>
                            </div>  
                            <!-- HEADER END -->        
                        </div>

           <div id="ft_items"></div>


<script>
      var SogButton=document.getElementById('Sog'); //"Søg" button
      var amt = document.getElementById('amt'); //amt dropdown
      var type = document.getElementById('type'); //type dropdown      
      var start = document.getElementById('aar'); //aar dropdown
      var sogn = document.getElementById('sogn'); //free text search field      


            // "Søg" button function
    SogButton.addEventListener('click',function (){
      $('#ft_items > table').remove();    
      $.ajax({
       url: 'ajaxFtHtml_test.php',
       data: $('#search').serialize(),
       method:'POST',
       dataType: 'html'
     }).done(function (res){             
             $('#ft_items > table').remove();           
             $('#ft_items').html(res);
 

          });         

   });

      // Return key search function
  $('#search').submit(function(e) {
    e.preventDefault();
    $.ajax({
        url : 'ajaxFtHtml_test.php',
        method: 'post',
        data : $('#search').serialize(),
        dataType: 'html'
    })
    .done(function(res){
        $('#ft_items').html(res);
      
    });
});



 
</script>

</body>
</html>

Open in new window


The ajax file:
<?php
// Turn on error reporting
error_reporting(E_ALL);
ini_set('display_errors', 1);

function cityVariations($city) {
    $substitute = array(
        "æ" => "ae",
        "ø" => "oe",
        "å" => "aa",
        "ae" =>"æ",
        "oe" =>"ø",
        "aa" => "å",
        );

    $flatCity = mb_convert_case($city, MB_CASE_LOWER);

    $cities[] = $flatCity;
    $cities[] = strtr($flatCity, $substitute); 

    return $cities;
}

// Do we need the database
if (!empty($_POST)):

    // Connect to the database if we have a POST
    $mysqli = mysqli_connect("db credentials") or die("Error connecting to database!");
$mysqli->set_charset("utf8");

    // Trim the input values
$start = trim($_POST['query_start']); 
$sogn = trim($_POST['sogn']);
$amt = trim($_POST['amt']);
$type = trim($_POST['type']);

            // Get the city variations
$cities = cityVariations($sogn);

            // Prepare the cities for the LIKE clause by wrapping each in %...%
array_walk($cities, function (&$city) { $city = '%'.$city.'%'; });



if (!empty($amt) && !empty($sogn) && empty($type) && empty($start)):
                    // We have a 'amt - 'sogn' value

    $query = $mysqli->prepare("SELECT * FROM ft WHERE Amt = ? AND (AmtHerredSognGade LIKE ? OR AmtHerredSognGade LIKE ?) ORDER BY Aar ASC, Amt ASC");
$query->bind_param("sss",$amt, $cities[0], $cities[1]);



elseif (!empty($amt) && !empty($start) && !empty($sogn) && empty($type)):
                    // We have a 'amt' - 'aar' - sogn' value

    $query = $mysqli->prepare("SELECT * FROM ft WHERE Amt = ? AND Aar = ? AND (AmtHerredSognGade LIKE ? OR AmtHerredSognGade LIKE ?) ORDER BY Aar ASC, Amt ASC");
$query->bind_param("ssss", $amt, $start, $cities[0], $cities[1]); 

else:   


    if (!empty($amt) && !empty($type) && !empty($start) && !empty($sogn)):
            //We have 'amt' - 'type' - 'aar' - 'sted' value

        $query = $mysqli->prepare("SELECT * FROM ft WHERE Amt = ? AND Type = ? AND Aar = ? AND (AmtHerredSognGade LIKE ? OR AmtHerredSognGade LIKE ?) ORDER BY Aar ASC, Amt ASC");
    $query->bind_param("sssss", $amt, $type, $start, $cities[0], $cities[1]);   

            //var_dump($amt, $type, $start, $cities);

    elseif (!empty($type) && !empty($sogn) && empty($start) && empty($amt)):
                    // We have a 'type' - sogn' value

        $query = $mysqli->prepare("SELECT * FROM ft WHERE Type = ? AND (AmtHerredSognGade LIKE ? OR AmtHerredSognGade LIKE ?) ORDER BY Aar ASC, Amt ASC");
    $query->bind_param("sss", $type, $cities[0], $cities[1]); 


    else:

      if (!empty($amt) && !empty($type) && !empty($start) && empty($sogn)):
            //We have 'amt' - 'type' - 'aar' value

        $query = $mysqli->prepare("SELECT * FROM ft WHERE Amt = ? AND Type = ? AND Aar = ? ORDER BY Aar ASC, Amt ASC");
    $query->bind_param("sss", $amt, $type, $start);   




    elseif (!empty($amt) && !empty($type) && empty($start) && empty($sogn)):
            //We have 'amt' - 'type' value

        $query = $mysqli->prepare("SELECT * FROM ft WHERE Amt = ? AND Type = ? ORDER BY Aar ASC, Amt ASC");
    $query->bind_param("ss", $amt, $type);   



    else:


        if (!empty($amt) && empty($type) && empty($start) && empty($sogn)):
            //We have 'amt' value

            $query = $mysqli->prepare("SELECT * FROM ft WHERE Amt = ? ORDER BY Aar ASC, Amt ASC");
        $query->bind_param("s", $amt);   

        //var_dump($amt, $type, $start, $cities); 


        elseif (!empty($amt) && empty($type) && !empty($start) && empty($sogn)):
            //We have 'amt' - 'aar' value

            $query = $mysqli->prepare("SELECT * FROM ft WHERE Amt = ? AND Aar = ? ORDER BY Aar ASC, Amt ASC");
        $query->bind_param("ss", $amt, $start);       
        //var_dump($amt, $start); 


        else:

            if (!empty($type) && !empty($start) && !empty($sogn) && empty($amt)):
                // We have a 'type' - 'aar' - 'sogn' value

                $query = $mysqli->prepare("SELECT * FROM ft WHERE Type = ? AND Aar = ? AND (AmtHerredSognGade LIKE ? OR AmtHerredSognGade LIKE ?) ORDER BY Aar ASC, Amt ASC");
            $query->bind_param("ssss",$type, $start, $cities[0], $cities[1]);


            elseif  (!empty($type) && !empty($start) && empty($sogn) && empty($amt)):
                // We have a 'type' - 'aar' value

                $query = $mysqli->prepare("SELECT * FROM ft WHERE Type = ? AND Aar = ? ORDER BY Aar ASC, Amt ASC ");
            $query->bind_param("ss",$type, $start); 



            else:

                if (!empty($type) && empty($start) && empty($sogn) && empty($amt)):
                // We have a 'type' value

                    echo "<h2> Feltet 'Type' skal anvendes sammen med mindst ét af de andre valg. Klik på Nulstil og prøv igen </h2>";

                //    $query = $mysqli->prepare("SELECT * FROM ft WHERE Type = ?");
                //$query->bind_param("s",$type); 


                elseif (!empty($start) && !empty($sogn) && empty($type) && empty($amt)):
                // We have a 'aar' - 'sogn' value

                    $query = $mysqli->prepare("SELECT * FROM ft WHERE Aar = ? AND (AmtHerredSognGade LIKE ? OR AmtHerredSognGade LIKE ?)ORDER BY Aar ASC, Amt ASC");
                $query->bind_param("sss",$start, $cities[0], $cities[1]);  


                else:                

                    if (!empty($start) && empty($sogn) && empty($type) && empty($amt)):
                // We have a 'aar' value

                        $query = $mysqli->prepare("SELECT * FROM ft WHERE Aar = ? ORDER BY Aar ASC, Amt ASC");
                    $query->bind_param("s",$start);


                    elseif (!empty($sogn)&& empty($start) && empty($type) && empty($amt)):
                // We have a sogn' value

                        $query = $mysqli->prepare("SELECT * FROM ft WHERE (AmtHerredSognGade LIKE ? OR AmtHerredSognGade LIKE ?)ORDER BY Aar ASC, Amt ASC");
                    $query->bind_param("ss", $cities[0], $cities[1]); 


                    endif;

                    endif;

                    endif;

                    endif;

                    endif;

                    endif; 

                    endif;   

    // Do we have a query to run
                    if (!empty($query)):
                        $query->execute();
                    $results = $query->get_result();
                    endif;

                    endif;
                    ?>

                    <div class="flex-container" style="width:site-width; background-color:white;">
                        <div class="flex-item" style="margin-top:10px; float:left; margin-left:20px;width: site-width; overflow:auto;">
                            <div class="row" style="margin-left:10px;margin-right:10px;">

                               <!-- Have we ran a query -->
                               <?php if (isset($results)): ?>

                               <!-- Do we have any results -->
                               <?php if ($results->num_rows): ?>

                               <table id="myTable" class="table">
                                <colgroup>
                            </colgroup>

                            <tr>
                        <?php
                        // Set up the Header
                        $firstRow = $results->fetch_object();
                        $headerText = ($firstRow->Type == 'Landdistrikt') ? 'Amt Herred Sogn' : 'Amt By Gade';
                        ?>

                        <tr>
                        <th>&nbsp;</th> <th><?php echo $headerText ?></th> <th>Amt</th> <th>Aar</th> <th>Type</th> <th>Gade (1860)</th> <th>Matr. nr. (1860)</th> 
                        </tr>


                        <?php
                        // Reset the record marker back to the first record
                        $results->data_seek(0);
                        ?>



                </tr>

                <!-- Loop through the results of the query -->
                <?php while ($row = $results->fetch_object()): ?>

                <!-- Links for the individual rows -->    
                <?php
                $link1 = sprintf("<a href='%s' target='_blank'>%s</a>", $row->URL, $row->AmtHerredSognGade); 
                $link2 = sprintf("<a href='%s' target='_blank'>%s</a>", $row->Infourl, $row->Info);
                $link3 = sprintf("<a href='%s' target='_blank'>%s</a>", $row->Infourl, $row->Gade);
                $link4 = sprintf($row->AmtHerredSognGade);
                ?>

                <?php if ($row->Collapse == 'p'): ?>
                <!-- We have a parent row -->

                <tbody class='toggle' >
                    <tr class="expander">
                        <td><span class='toggle'></td>
                        <td><?php echo (!empty($row->URL)) ? $link1 : $link4 ?></td>
                        <td><?php echo $row->Amt ?></td>             
                        <td><?php echo $row->Aar ?></td>
                        <td><?php echo $row->Type ?></td>   
                        <td><?php echo $row->Gade ?></td>            
                        <td><?php echo $row->Kvarter ?></td>            
                    </tr>

                <?php elseif ($row->Collapse == 'c'): ?>
                <!-- We have a child row -->

                <tr class="child">
                    <td>&nbsp;</td>
                    <td><?php echo (!empty($row->URL)) ? $link1 : $link4 ?></td>
                    <td><?php echo $row->Amt ?></td>             
                    <td><?php echo $row->Aar ?></td>
                    <td><?php echo $row->Type ?></td>
                    <td><?php echo $row->Gade ?></td>            
                    <td><?php echo $row->Kvarter ?></td>           
                </tr>

            <?php else: ?>
            <!-- We have a non-collapsible row -->

            <tr class="non">
                <td>&nbsp;</td>
                <!-- Område, link -->
                <td><?php echo $link1 ?></td>
                <td><?php echo $row->Amt ?></td>      
                <td><?php echo $row->Aar ?></td>
                <td><?php echo $row->Type ?></td>
                <td colspan="2">&nbsp;</td>
            </tr>

        <?php endif; ?>

    <?php endwhile; ?>



</table>

<?php else: ?>

    <p>Der er ingen resultater for denne søgning</p>

<?php endif; ?>
<?php endif; ?>


</div>
</div> 
</div>

Open in new window


The CSS file:

        h2 {
            font-size: 14px;
            font-weight: normal;
            color: red;
            margin-left: 250px;
        }




        table, th {

            border-bottom: 1px  #666666;
            border-top: 0px;
            border-right: 0px;
            border-left: 0px;
            border-style: solid;
            border-collapse: collapse;
            padding-top:10px;
            padding-left:20px;
            color:black;
            font-family: Serif; 
            font-size: 20px;
            font-weight: bold;
            text-align: left;




        }

        table, td {

            border: 0px  #f6f6f6;
            border-style: none;
            border-collapse: collapse;
            padding-top: 0px;
            border-bottom: 1px solid #666666;
            padding-left: 0px;
            color:black;
            font-family: arial;
            font-size: 12px;
            font-weight: normal;
            text-align: padding-left; 




        }



        a:link {
            color: black;
            text-decoration: underline;
            font-weight: bold;
        }
        a:visited {
            color: #e08a94;
            text-decoration: underline;

        }
        a:hover {
            color: cornflowerblue;
            text-decoration: underline;
            font-weight:normal;
        }
        a:active {
            color: black;
            text-decoration: underline;
        }

        .table > tbody + tbody { border-top: none; }
        .table > tbody > tr > td { border-top: none; }

         
        table tr td:nth-child(1){width: 10px; font-weight:normal; color:black;}
        table tr td:nth-child(2){width: 300px; font-weight:normal; color:black;}
        table tr td:nth-child(3){width: 75px; font-weight:normal; color:black;}
        table tr td:nth-child(4){width: 25px; font-weight: normal; color:black;}
        table tr td:nth-child(5){width: 100px; font-weight: normal; color:black;}
        table tr td:nth-child(6){width: 150px; font-weight: normal; color:black;}
        table tr td:nth-child(7){width: 150px; font-weight: normal; color:black;}


        #header { margin-top: 10px; margin-bottom:10px; }
        tbody.toggle tr.child { display: none; background-color: #f6f6f6;}
        tbody.toggle tr:nth-child(even){ display: none; background-color: #d5d5d5;}
        tbody.toggle tr.expander { display: table-row; background-color: #f6f6f6; }
        tbody.toggle tr.non { display: table-row; background-color: white; }
        span.toggle { cursor: pointer; color: cornflowerblue; font-family: 'FontAwesome'; font-size: 16px;}
        span.toggle:hover { color: cornflowerblue; }
        span.toggle:after { content: '\f055' }

Open in new window

0
Why Diversity in Tech Matters

Kesha Williams, certified professional and software developer, explores the imbalance of diversity in the world of technology -- especially when it comes to hiring women. She showcases ways she's making a difference through the Colors of STEM program.

Chris StanyonWebDevCommented:
OK Peter,

The problem you're having is the way you define a parent (toggle) row and a child row. If you look through your code, you will see that a row is only set with the Toggle if it has a value of P in the Collapse column of the database. It is set as a child row if it has a C set in the Collapse column, and set as Non-Toggleable if it's anything else. Now this will work OK if you can absolutely guarantee the order in which you data is returned from the DB (a Parent row followed by several Child rows, then another Parent row followed by more Child rows).

Your records are not being returned in a 'known' order, so the whole Toggle functionality is flawed. Your records are being returned like this:

Row 1 -> Collapse == C
...
Row 16 -> Collapse == C
Row 17 -> Collapse == P
Row 18 -> Collapse == C
...
Row xx -> Collapse == ?? // non!
Row xx -> Collapse == C

Now looking at that, the first 16 rows are child rows, but they have no Parent, so they are not hidden and not toggleable! Then you get a Parent row which will allow all the following Child rows to be toggleable. You throw a Non_Toggleable row in there and it will just display as normal - it won't hide or show when you toggle

Because your Search is effectively cherry-picking data, your concept of Parent/Child rows will be broken - you can no longer guarantee the order or status (Collapse value) of the returned rows.

I think you may need to re-think your db design or logic!
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Peter KromanSales ExecutiveAuthor Commented:
Thanks Chris,

You have a beautiful way to put the words. A way that make me think again, and hopefully get a little wiser along the way :)

I have decided to skip the toggle thing on this page - it did not make much sense on this particular page anyway. In stead I use the facilities in Data Tables which will compensate nicely.

Thanks again.
0
Chris StanyonWebDevCommented:
No worries Peter.

Sometimes it is easier to  just move on ... we've all been there :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
PHP

From novice to tech pro — start learning today.