Bootstrap-modal: dynamisch geladen, Wert in input Feld

Ich habe ein Bootstrap modal in einer Laravel-app, die ich versuche, dynamisch zu laden. Die Idee ist, füllen Sie die Eingabefelder in der modalen mit den Daten aus meiner Datenbank, also kann ich die Werte aktualisiert. Ich bin fast da....

Habe ich Folgendes in meine Datei anzeigen:

   <a href="#myModal" data-toggle="modal" data-target="#edit-auction-modal" data-id="1" data-title="title 1" type="button" class="btn btn-sm btn-primary btn-warning">Open modal</a>

'Data-id' und 'data-title' übergeben werden, um eine JS-Funktion, die wie folgt aussieht:

$(function() {
    $('#edit-auction-modal').on("show.bs.modal", function (e) {
         $("#auctionLabel").html('Edit auction with id '+ $(e.relatedTarget).data('id'));
         $("#auctionTitle").html($(e.relatedTarget).data('title'));
    });
});

Diese JS-Funktion erfasst die id und den Titel erfolgreich. Unten In der modal-Ansicht, kann ich drucken Sie die id in den panel-Titel, weil ich in JS, um die Daten in das id="auctionLabel".

<div class="row">
   <div id="edit-auction-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="panel panel-info">
                  <div class="panel-heading">
                    <div class="panel-title" id="auctionLabel"></div>
                  </div>
                </div>
                <div class="modal-body edit-content" style="padding-top:10px">
                     <form  method="POST" action="{!! route('admin_auctions_update') !!}">
                      {{ csrf_field() }}
                      <div class="form-group">
                        <label for="auction_name" class="control-label">Auction name</label>
                        <input name="auction_name" id="name" class="form-control" placeholder="Auction name" value="{{$auction->auction_name}}">
                      </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success">Update auction</button>
                </div>
            </div>
        </div>
    </div>
</div>

Meine Frage ist wie muss ich das ändern Sie die Javascript-Funktion, um die pre-füllen Sie die Eingabefelder der Wert der Titel. In anderen Worten, ich möchte den Wert vom Eingabefeld, um das 'title', die ich gefangen in der JS-Datei.

  • <input name="auction_name" class="form-control" placeholder="Auction name" value="{{$auction->auction_name}}"> .Möchten Sie diesen Wert ändern?
  • Ja, ich möchte vorzubelegen, das input-Feld mit dem Wert, den ich abrufen in Javascript. Beachten Sie, es gibt mehr als 1 input-Felder in Wirklichkeit
  • $('#edit-auction-modal ').find('input#youid').val($(e.relatedTarget).data('title')) würde lösen das problem für Sie
InformationsquelleAutor wiwa1978 | 2016-07-06
Schreibe einen Kommentar