2017-09-27 3 views
0

Ich habe eine Liste von Daten, die ich mit foreach verteile. Und ich möchte die Details jeder Daten mit Bootstrap-Modal erhalten.Wie bekomme ich Bootstrap Modal Daten auf Laravel 5

Dies ist mein Code

<div class="container bg-white" style="padding: 20px;"> 
     @foreach ($hadiah as $h) 
     <div class="col-md-6 rewards" > 
      <div class="rewards-box"> 
       <div class="img"> 
        <img class="imagePreview" src="https://admin.philipscontractorclub.com/uploads/rewards/{{$h->image}}"> 
       </div> 
       <div class="caption"> 
        <h3 class="title">{{$h->title}}</h3> 
        <p class="point_needed"><span class="fa fa-certificate"></span> {{$h->point_needed}}</p> 
        <p class="description">{{$h->description}}</p> 
        <button type="button" class="btn btn-info btn-lg detail-item" data-id="{{ $h->id }}" data-toggle="modal" data-target="#myModal">Buka</button> 
       </div> 
      </div> 
     </div> 
     @endforeach   
    </div> 

Das ist mein modal ist

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <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"></h4> 
     </div> 
     <div class="modal-body"> 
     <div class='row'> 
      <center> 
       <div class='col-md-12'> 
        <img class="modal-image"> 
       </div> 
      </center> 
      <div class='col-md-12'> 
       <p align='center' class="modal-poin"><b>Poin dibutuhkan</b></p> 
      </div> 
      <div class='col-md-12'> 
       <p align='justify' class="modal-desc">Deskripsi</p> 
      </div> 
     </div> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 

    </div> 
</div> 

das ist mein Javascript

<script type="text/javascript"> 
    $("body").on("click",".detail-item",function(){ 
     var id = $(this).data('id'); 
     var nama = $(this).find('title').text(); 
     var src = $(this).find('.imagePreview').attr('src'); 
     var poin = $(this).find('point_needed').text(); 
     var desc = $(this).find('description').text(); 
     $("#myModal").find(".modal-title").text(nama); 
     $("#myModal").find('.modal-image').attr('src', src); 
     $("#myModal").find(".modal-poin").text(poin); 
     $("#myModal").find(".modal-desc").text(desc); 
    }); 
</script> 

Das Ergebnis wird nichts gezeigt. Und ich mag die einzelne Daten erhalten, wenn ich den Knopf klicken

Vielen Dank für Hilfe

Antwort

1

Sie benötigen die .parent() Methode in jQuery verwenden, um Ihr gewünschtes Ergebnis zu erhalten. Das heißt, wenn Sie $(this) sagen, beziehen Sie sich nur auf die Schaltfläche, auf die geklickt wurde, nicht auf das ganze .caption div, für das die Schaltfläche ein Kind ist.

Versuchen Sie stattdessen, diesen Code zu verwenden.

$("body").on("click",".detail-item",function(){ 
    var id = $(this).data('id'); 
    var nama = $(this).parent().find('.title').text(); 
    var src = $(this).parent().parent().find('.imagePreview').attr('src'); 
    var poin = $(this).parent().find('.point_needed').text(); 
    var desc = $(this).parent().find('.description').text(); 

    // rest of you code here ... 
}); 

Beachten Sie, dass im Fall der .imagePreview ich zweimal die .parent() Methode, weil es tatsächlich das „Großvater“ Element der Taste aufgerufen.

Please refer to the docs for more references.

+0

danke, das funktioniert. Und ich vergesse, '.' in find ('title') .text() –

Verwandte Themen