Im Modal wird nur der erste Datensatz ausgegeben

CreativPur

Erfahrenes Mitglied
Hi,

ich habe eine Tabelle, wo User mit einer Kurzinfo ausgegeben werden.
Durch jeweils einen "Modal"-Button sollen sich die Profile mit einer jeweiligen Sitter_id öffnen.

Leider wird mir nur der 1. Datensatz ausgegeben.
Bei den folgenden Profilen wird zwar Modal mit dem dunklen Hintergrund aktiv, aber das Profil des Users öffnet sich nicht..

Der Button zum öffnen des Modal-Fenster:
PHP:
<?php
$Sitter_id = $row['Sitter_id'];
$sql = "SELECT
Sitter_id
FROM
sitters
WHERE
Sitter_id = $Sitter_id
";
foreach ($pdo->query($sql) as $row) {
?>
<button type="button" class="btn btn-primary" style="background:#fff; color:red; border-color:#fff;" data-toggle="modal" data-target="#profil<?php echo $row['Sitter_id'];?>"><span class="glyphicon glyphicon-eye-open green" style="font-size:16px;"></span></button>
<?php } ?>

Das dazugehörige Script:
Code:
<script>
$(document).ready(function(){
    $('#myModal').on('show.bs.modal', function (e) {
        var rowid = $(e.relatedTarget).data($row['Sitter_id']);
        $.ajax({
            type : 'post',
            url : 'fetch_record.php', //Here you will fetch records
            data :  'rowid='+ rowid, //Pass $id
            success : function(data){
            $('.fetched-data').html(data);//Show fetched data from database
            }
        });
     });
});
</script>
 
Was meinst du genau mit ersten Datensatz? Wird der immer der erste Datensatz aus der DB geladen (egal welches Modal du öffnest) oder wird beim öffnen des ersten Modal immer die korrekten Daten angezeigt, aber bei dem Öffnen anderer Modale die Informationen aus dem ersten Modal angezeigt?
 
Ich habe ein Modal mit "Varying modal content based on trigger button"

Das heist, dass ich nur ein Modal-Gerüst habe, wo sich aber je nach Button ein anderer Datensatz aufgerufen wird.
In meinem Fall wird nur der erste Datensatz aus der DB geladen. Das heißt, auch nur der erste Button ist aktiv.
Für die weiteren Datensätze wird beim Klicken des Buttons nur der Hintergrund abgedunkelt und keine Daten ausgegeben..

Bildschirmfoto 2018-02-26 um 10.45.30.png
 
Dies ist mein Modal-Quelltext

PHP:
<div id="profil<?php echo $row['Sitter_id'] ?>" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Profil von <span class="green"><?php echo $row['art'] ?> <?php echo $row['vorname'];?> <?php echo $row['nachname'] ?></span></h4>
      </div>
      <div class="modal-body">
          <div class="row">
            <div class="col-lg-4">
                <img src="../service/sitter/upload/<?php echo $row['img_pass'] ?>" class="img-responsive pass" />   
            </div>
            <div class="col-lg-7 green">
           
                <table class="table table-hover" width="70%">
                    <tr>
                        <td class="blue">Name:</td>
                        <td class="green"><?php echo $row['vorname'] ?> <?php echo $row['nachname'] ?></td>
                    </tr>
                    <tr>   
                        <td class="blue">Alter:</td>
                        <td class="green"><?php echo $row['alter_sitter'] ?> Jahre</td>
                    </tr>
                    <tr>
                        <td class="blue">Nationalität:</td>
                        <td class="green"><?php echo $row['nationalitaet'] ?></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td class="blue"><span class="glyphicon glyphicon-phone-alt"></span></td>
                        <td class="green"><?php echo $row['telefon'] ?></td>
                    </tr>
                    <tr>
                        <td class="blue"><span class="glyphicon glyphicon-envelope"></span></td>
                        <td><a href="mailto:<?php echo $row['email'] ?>"><?php echo $row['email'] ?></a></td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td class="blue">Führerschein:</td>
                        <td class="green"><?php echo $row['fuehrerschein'] ?></td>
                    </tr>
                    <tr>
                        <td class="blue">Ich habe folgendes Fahrzeug:</td>
                        <td class="green"><?php echo $row['pkw'] ?></td>
                    </tr>
                    <tr>
                        <td class="blue">Ich arbeite gewerblich:</td>
                        <td class="green"><?php echo $row['gewerblich'] ?></td>
                    </tr>
                </table>
              
            </div>
       
        <div class="row">
        <div class="col-lg-12">
            <hr style="border-color:blue;" />
        </div>
            <div class="col-lg-12 green" style="margin-left:20px;">
                <table class="table table-hover">
                    <tr>
                        <td class="blue">Arbeitsgebiet:</td>
                        <td class="green"><?php echo $row['gebiet_plz'] ?> <?php echo $row['gebiet_ort'] ?></td>
                    </tr>
                    <tr>
                        <td class="blue">Arbeitsumgebung:</td>
                        <td class="green"><?php echo $row['arbeitsumgebung'] ?></td>
                    </tr>
                    <tr>
                        <td class="blue">Radius:</td>
                        <td class="green"><?php echo $row['radius'] ?> km</td>
                    </tr>
                    <tr>
                   
                
                   
                        <td class="blue">Weitere Arbeitsgebiete:</td>
                        <td class="green">
                       
                      <?php 
                      $Sitter_id = $row['Sitter_id'];
                               
                                $sql = "SELECT
                                 *
                                 FROM
                                 sitter_arbeitsorte
                                 WHERE
                                 Sitter_id = $Sitter_id
                                ";
                               
                                foreach ($pdo->query($sql) as $row) {
                                echo $row['arbeitsorte_plz']. ' ' .$row['arbeitsorte_ort'].'<br />'
                     
                       ?>
                       <?php } ?>
    
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
               
                </table>
            </div>
           
            <div class="col-lg-11 green" style="margin-left:20px;">
                <label class="green">Meine verfügbaren Arbeitszeiten</label><br />
                <table class="table table-hover">
                    <thead class="kleine_schrift label_hellblau">
                        <td>Wochentag</td>
                        <td>Tageszeit</td>
                        <td>von</td>
                        <td>bis</td>
                    </thead>
                    <?php 
                      $Sitter_id = $row['Sitter_id'];
                               
                                $sql = "SELECT
                                 *
                                 FROM
                                 sitter_arbeitszeiten
                                 WHERE
                                 Sitter_id = $Sitter_id
                                ";
                               
                                foreach ($pdo->query($sql) as $row) {
                    ?>               
                    <tbody class="green">
                        <td><?php echo $row['wochentag'] ?></td>
                        <td><?php echo $row['tageszeit'] ?></td>
                        <td><?php echo $row['von'] ?></td>
                        <td><?php echo $row['bis'] ?></td>
                    </tbody>
                    <?php } ?>
                </table>
            </div>
           
           
            <?php 
            $sql = "SELECT * FROM sitters WHERE Sitter_id = $Sitter_id";
            $user = $pdo->query($sql)->fetch();
           
            ?>
            <div style="display:<?php echo (($user['erfahrung_baby'] === NULL) ? 'none' : 'block') ?>">
                <div class="col-lg-11 green" style="margin-left:20px;">
                    <label class="green">Meine Erfahrungen mit Kindern</label><br />
                    <table class="table table-hover">
                        <tr class="kleine_schrift">
                            <td class="blue">Erfahrung Zeit: </td>
                            <td class="green"><?php echo $user['erfahrung_baby'] ?></td>
                        </tr>
                        <tr>   
                            <td class="blue">Erfahrung mit: </td>
                            <td class="green"><?php echo $user['kenntnisse_baby'] ?></td>
                        </tr>
                        <tr>
                            <td class="blue">Eigene Kinder: </td>
                            <td class="green"><?php echo $user['eigene_kinder'] ?></td>
                        </tr>
                        <tr>   
                            <td class="blue">Pädagogische Ausbildung: </td>
                            <td class="green"><?php echo $user['ausbildung_kinder'] ?></td>
                        </tr>
                        <tr>   
                            <td class="blue">Sonstiges: </td>
                            <td class="green"><?php echo $user['sonstiges_baby'] ?></td>
                        </tr>
                    </table>
                </div>
            </div>
           
            <div style="display:<?php echo (($user['erfahrung_hund'] === NULL) ? 'none' : 'block') ?>">
                <div class="col-lg-11 green" style="margin-left:20px;">
                    <label class="green">Meine Erfahrungen mit Hunden</label><br />
                    <table class="table table-hover">
                        <tr class="kleine_schrift">
                            <td class="blue">Erfahrung in Jahre:</td>
                            <td class="green"><?php echo $user['erfahrung_hund'] ?></td>
                        </tr>
                        <tr>
                            <td class="blue">Erfahrung mit Hundensitten:</td>
                            <td class="green"><?php echo $user['kenntnisse_hund'] ?></td>
                        </tr>
                        <tr>
                            <td class="blue">Eigene Hunde:</td>
                            <td class="green"><?php echo $user['eigene_hunde'] ?></td>
                        </tr>
                        <tr>   
                            <td class="blue">Hundeführerschein:</td>
                            <td class="green"><?php echo $user['fuehrerschein_hunde'] ?></td>
                        </tr>
                        <tr>
                            <td class="blue">Ich sitte nur Hunde mit Impfpass:</td>   
                            <td class="green"><?php echo $user['impfpass_hunde'] ?></td>
                        </tr>
                        <tr>
                            <td class="blue">Ich sitte nur Hunde mit Haftpflichtversicherung: </td>   
                            <td class="green"><?php echo $user['versicherung_hunde'] ?></td>
                        </tr>
                        <tr>
                            <td class="blue">Ich sitte nur kastrierte Hunde: </td>   
                            <td class="green"><?php echo $user['kastrierte_hunde'] ?></td>
                        </tr>
                        <tr>
                            <td class="blue">Sonstiges:</td>
                            <td class="green"><?php echo $user['sonstiges_hund'] ?></td>
                        </tr>
                    </table>
                  </div>
              </div>
          </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">schließen</button>
      </div>
    </div>
  </div>
</div>
<? } ?>
 
Was sagt den die Browser-Konsole.

Ich glaube du wirfst PHP (serverseitiger Code) mit Javascrip (clientseitiger Code) in einem Topf. Wahrscheinlich klappt nur der erste Wurf, da die ID irgendwie mitgegeben wird. Hast du dich schon mal mit dem MVC-Prinzip beschäftigt? Alles in eine Datei zu packen ist nicht gerade vorteilhaft.

In deinem Fall würde ich im Modal nur ein Grundgerüst bauen und die eigentlichen Werte erst durch das Javascript setzen.

So habe ich es immer gelöst:

Html/PHP:
HTML:
<!--Modal Testausführung-->
<div class="modal modal-large fade" tabindex="-1" role="dialog" id="testrun_execute_modal" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close close_modal" data-id="<?=$entity->id ?>" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Testdurchführung</h4>
            </div>
            <div class="modal-body">
                <div id="testcase" class="hide">
                    <table class="table table-responsive" id="testcase_list">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Testfall-ID</th>
                                <th>Name</th>
                           </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">

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

Javascript:
Code:
jQuery.ajax({
            method: "GET",
            url: global_baseurl+'/testrun-parts/testcase-current/'+part,
            success: function(data)
            {
                $("#testcase_list > tbody").html("");
               
                //Felder befüllen
                var obj = JSON.parse(data);
               
                $.each(obj, function(val, arr)
                {
                    var btn_execute = '<button class="btn btn-success btn-xs testcase" type="button" data-testcase="'+arr.testcase.id+'" data-part="'+part+'"><i class="fas fa-play"></i></button>';
                   
                    var btn_color_class = 'default';
                    if(arr.comment && arr.comment.length > 0)
                    {
                        btn_color_class = 'primary';
                    }                   
                    var btn_comment = '<button class="btn btn-'+btn_color_class+' btn-xs comment" type="button" data-type="testcase" data-testcase="'+arr.testcase.id+'" data-part="'+part+'" data-message="'+arr.comment+'"><i class="fas fa-comment"></i></button>';
                   
                    var output = '<tr><td>'+arr.testcase.id+'</td><td>'+arr.testcase.external_id+'</td><td>'+arr.testcase.name+'</td><td>'+arr.status.name+'</td><td class="procress_part" id="procress_testcase_'+part+'_'+arr.id+'"><td>'+btn_execute+' '+btn_comment+'</td></tr>';
                    $('#testcase_list > tbody').append(output);
                   
                    build_testcase_procress(part,arr.id);
                });
               
                //Footer anpassen
                $(".modal-footer").html("");       
            }
        });
 
PHP:
<button class="btn btn-success btn-xs testcases" data-part="<?=$part->id?>" type="button" ><i class="fas fa-play"></i></button>

Code:
$('#testrunparts').on('click','.testcases',function(e)
    {
        var part = $(this).data("part");
      
        build_testcase_list(part);
        $('#testcase').toggleClass("hide display");
        $("#testrun_execute_modal").modal();
    });

Die Funktion build_testcase_list beinhaltet den AJAX-Request von weiter oben.
 
Ich habe es zum testen jetzt folgend übernommen..
PHP:
<table class="table table-hover" id="task-table">
        <thead>
            <td>&nbsp;</td>
               <td class="blue">Name</td>
               <td class="blue">Alter</td>
               <td class="blue">Nationalität</td>
               <td class="blue">Art Sitten</td>
               <td class="blue">Wohnort</td>
               <td class="blue">Radius</td>
               <td class="blue">Weitere Arbeitsgebiete</td>
               <td align="center">Profil</td>
        </thead>
       
        <?php
            $plz = $user['plz'];
            $sql = "SELECT * FROM sitters WHERE plz = $plz ";
            foreach ($pdo->query($sql) as $row) { ?>
        <tbody class="green">
           
                <tr>
                    <td><img src="../service/sitter/upload/<?php echo $row['img_pass'] ?>" class="img-responsive pass" width="50" /></td>
                    <td><?php echo $row['vorname'] ?></td>
                    <td><?php echo $row['alter_sitter'] ?></td>
                    <td><?php echo $row['nationalitaet'] ?></td>
                    <td><?php echo $row['art']; ?></td>
                    <td><?php echo $row['plz'] ?> <?php echo $row['ort'] ?></td>
                    <td><?php echo $row['radius'] ?> km</td>
                    <td >
                        <?php
                        $Sitter_id = $row['Sitter_id'];
                        $sql = "SELECT * FROM sitter_arbeitsorte WHERE Sitter_id = $Sitter_id ";
                        foreach ($pdo->query($sql) as $row) {
                        echo $row['arbeitsorte_plz']. ' ' .$row['arbeitsorte_ort'].'<br />'
                        ?>
                        <?php } ?>
                    </td>
                    <td align="center">
                        <button class="btn btn-success btn-xs testcases" data-part="<?=$part->id?>" type="button" >ansehen</button>  
                    </td>
                </tr>
        </tbody>
        <?php } ?>
    </table>

HTML:
<!--Modal Testausführung-->
<div class="modal modal-large fade" tabindex="-1" role="dialog" id="testrun_execute_modal" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close close_modal" data-id="<?=$entity->id ?>" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Testdurchführung</h4>
            </div>
            <div class="modal-body">
                <div id="testcase" class="hide">
                    <table class="table table-responsive" id="testcase_list">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>Testfall-ID</th>
                                <th>Name</th>
                           </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>
Code:
<script>
$('#testrunparts').on('click','.testcases',function(e)
    {
        var part = $(this).data("part");
        build_testcase_list(part);
        $('#testcase').toggleClass("hide display");
        $("#testrun_execute_modal").modal();
    });

</script>

<script>
jQuery.ajax({
            method: "GET",
            url: global_baseurl+'/testrun-parts/testcase-current/'+part,
            success: function(data)
            {
                $("#testcase_list > tbody").html("");
              
                //Felder befüllen
                var obj = JSON.parse(data);
              
                $.each(obj, function(val, arr)
                {
                    var btn_execute = '<button class="btn btn-success btn-xs testcase" type="button" data-testcase="'+arr.testcase.id+'" data-part="'+part+'"><i class="fas fa-play"></i></button>';
                  
                    var btn_color_class = 'default';
                    if(arr.comment && arr.comment.length > 0)
                    {
                        btn_color_class = 'primary';
                    }                 
                    var btn_comment = '<button class="btn btn-'+btn_color_class+' btn-xs comment" type="button" data-type="testcase" data-testcase="'+arr.testcase.id+'" data-part="'+part+'" data-message="'+arr.comment+'"><i class="fas fa-comment"></i></button>';
                  
                    var output = '<tr><td>'+arr.testcase.id+'</td><td>'+arr.testcase.external_id+'</td><td>'+arr.testcase.name+'</td><td>'+arr.status.name+'</td><td class="procress_part" id="procress_testcase_'+part+'_'+arr.id+'"><td>'+btn_execute+' '+btn_comment+'</td></tr>';
                    $('#testcase_list > tbody').append(output);
                  
                    build_testcase_procress(part,arr.id);
                });
              
                //Footer anpassen
                $(".modal-footer").html("");     
            }
        });
</script>

Leider öffnet sich jetzt nicht einmal mehr ein Modal-Fenster..
 
Du solltest auch schon schauen, was du da zusammenkopierst. Die ID deiner Tabelle lautet task-table. Ergo muss das der Aufruf wie folgt aussehen:

Code:
$('#task-table').on('click','.testcases',function(e) .....

Das sollte erstmal das modal öffnen

P.S.: Ein Blick in die Browser-Konsole (F12) hilft bei der Entwicklung bei AJAX bzw. Javascript immer.
 
Ich habe es nun geändert und den gesamten Quelltest nochmals auf dumme Fehler überprüft..

Code:
<script>
$('#task-table').on('click','.testcases',function(e)
    {
        var part = $(this).data("part");
        build_testcase_list(part);
        $('#testcase').toggleClass("hide display");
        $("#testrun_execute_modal").modal();
    });

</script>

Es hat sich aber dennoch noch nichts geändert..
 
Zurück