YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar francis.manderscheid asked

UIkit 3: Coding problem with tables and modal

Hi all,

hope there is any body outside to get me a hint whats wrong with my self written code.

The idea was to have a table with competition results. When clicking on the name, a modal will appear with more detail information about the Judoka. All results from competitions out of a database, and when he passed his belt exams.

The problem occurs when I try to show a table in the modal, so the initial table corrupts and the first Judoka modal fails. the second works fine.

Here the Link to the concerned page:
http://judo.manderscheid.me/index.php/verein/erfolge

Here the complete PHP code:

<?php  

echo '<table class="uk-table uk-table-divider uk-table-small">  
    <tr>  
        <th>Datum</th>  
        <th>Veranstaltung</th>  
        <th>Klasse</th>  
        <th>Kudoka / Team</th>  
        <th>Platzierung</th>  
    </tr>';  

    // Query list all competition  
    $sql = "SELECT * FROM judo_custom_sportler_action WHERE kind='competition' ORDER BY date DESC, class ASC";  
    $database->setQuery( $sql );  
    $rows = $database->loadObjectList();  
        foreach ( $rows as $row ){  
            $varID          = $row->id;  
            $varDate        = $row->date;  
            $varKind        = $row->kind;  
            $varPersonID    = $row->person;  
            $varCompetition = $row->competition;  
            $varClass       = $row->class;  
            $varClassGender = $row->class_gender;  
            $varClassWeight = $row->class_weight;  
            $varRank        = $row->rank;  
            $varOpponents   = $row->nbr_opponents;  
            $varNewBelt     = $row->newBelt;  

        // create modal ID  
        $modalID = 'deatils-'.$varPersonID;  

        // create medal image  
        if    ($varRank <= 3)    {$showMedal='<img src="images/icons/'.$varRank.'.png" alt="medal">';} else {$showMedal=$varRank;}  

        // get Judoka name  
        $sql = "SELECT * FROM judo_custom_sportler WHERE id='$varPersonID'";  
        $database->setQuery( $sql );  
        $rows = $database->loadObjectList();  
            foreach ( $rows as $row ){  
                $judoka = strtoupper($row->last_name).' '.$row->first_name;  
            }  

        // Get actual belt from Gürtelprüfung  
        $sql = "SELECT * FROM judo_custom_sportler_action WHERE kind='belt' AND person='$varPersonID' ORDER BY date DESC LIMIT 1";  
        $database->setQuery( $sql );  
        $rows = $database->loadObjectList();  
            foreach ( $rows as $row ){   
                $varBelt = $row->newBelt;  
            }     

        // show table content results  
        echo '  
            <tr>  
                <td>'.date("d.m.Y", strtotime($varDate)).'</td>  
                <td>'.$varCompetition.'</td>  
                <td>'.$varClass.' '.$varClassGender.' - '.$varClassWeight.'</td>  
                <td><b><a href="#'.$modalID.'" uk-toggle>'.$showMedal.' ID='.$varPersonID.' '.$judoka.'</a></b></td>  
                <td>'.$varRank.'. von '.$varOpponents.'</td>  
            </tr>  
        ';  

// ================================================================================   
//  MODAL PART BEGIN  
// ================================================================================  
?>  
<div id="<?php echo $modalID; ?>" class="uk-modal-container" uk-modal>  
    <div class="uk-modal-dialog" uk-overflow-auto>  
        <button class="uk-modal-close-full uk-close-large" type="button" uk-close></button>  

        <div class="uk-modal-header">  
            <h2 class="uk-modal-title"><?php echo '<img src="images/belt/'.$varBelt.'.svg" width="100" title="'.$varBelt.'" uk-tooltip="pos: bottom"> '.$judoka.' ID='.$varPersonID; ?></h2>  
        </div>  

        <div class="uk-modal-body">  
            <div class="uk-grid-divider" uk-grid>  
                <div>  
                    <h3 class="uk-heading-divider">Wettkämpfe</h3>  
                    <?php  
                    // create results table in modal  
                    echo '<table class="uk-table uk-table-divider uk-table-small">';  
                        $sql_wettkaempfe = "SELECT * FROM judo_custom_sportler_action WHERE kind='competition' AND person='$varPersonID' ORDER BY date DESC";  
                        $database->setQuery( $sql_wettkaempfe );  
                        $rows = $database->loadObjectList();  
                        foreach ( $rows as $row ){                            
                            echo'  
                            <tr>  
                                <td>'.date("d.m.Y", strtotime($row->date)).'</td>  
                                <td>'.$row->competition.'</td>  
                                <td>'.$row->class.' '.$row->class_gender.' - '.$row->class_weight.'</td>  
                                <td>'.$row->rank.'. von '.$row->nbr_opponents.'</td>  
                            </tr>  
                            ';  
                        }  
                    echo '</table>';     
                    ?>             
                </div>  
                <div>  
                    <h3 class="uk-heading-divider">Gürtelprüfungen</h3>  
                    <?php  
                    // show Gürtelprüfungen in modal  
                    $sql = "SELECT * FROM judo_custom_sportler_action WHERE kind='belt' AND person='$varPersonID' ORDER BY date DESC";  
                    $database->setQuery( $sql );  
                    $rows = $database->loadObjectList();  
                        foreach ( $rows as $row ){  
                            echo '<img src="images/belt/'.$row->newBelt.'.svg" width="50" title="'.$row->newBelt.'" uk-tooltip="pos: top-left"> <span class="uk-text-meta">bestanden am</span> '.date("d.m.Y", strtotime($row->date)).'<br />';  
                        }   
                    ?>                     
                </div>  
            </div>  
        </div>  

        <div class="uk-modal-footer">Footer Stats: Medals </div>  
    </div>  
</div>  

<?php   
// ================================================================================   
//  MODAL PART END  
// ================================================================================  

    }   
echo '</table>';   
?>

Thanks a lot for your support.

  • UIkit
  • YOOtheme Pro

Know someone who can answer? Share a link to this question via email or twitter.