Как да предам данни към текстово поле вътре в модал за стартиране, когато щракнете върху клетка на таблица?

Имам таблица, в която искам да разреша на потребителя да редактира информация. Една клетка от таблицата съдържа текст. Ето част от таблицата:

<table class="table table-striped table-hover" id="table_id">
<thead>
    <tr>
        <th>Event</th>
        <th>Notes</th>
    </tr>
</thead>
<tbody>
    <tr>
        @foreach($events as $event)
            <td>{{$event->Event}}</td>
            <td><div id="notes-{{$event->id}}">{{$event->notes}}</div></td>
            </tr>
        @endforeach
</tbody>
</table>

Ако потребителят щракне върху реда „бележки“, се появява начален режим, който позволява на потребителя да прави промени.

$('[id^="notes"]').on("click", function(){
    var input_id = $(this).attr('id');
    var previousValue = $('#'+input_id).html(); console.log('clicked! The current notes are: '+previousValue);
    var result = input_id.split('-');
    var notes_id = result[1];
    console.log('The event id selected is: '+notes_id);

    /*Open a modal*/
    $('#modal-notes').modal('show');

});

Досега успях да покажа модала за стартиране, но не знам как да предам данните previousValue (извлечени от базата данни) в текстовото поле на модала. previousValue има текста, извлечен от базата данни.

Модалът изглежда по следния начин:

<div id="modal-notes" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Edit event's notes</h4>
      </div>
      <div class="modal-body">
        <form action="" id="form-notes-event" name="form-notes-event" class="form-horizontal" method="post">
            <div class="form-horizontal">
                <fieldset>
                    <legend>Edit data</legend>
                    <div class="form-group">
                        <label for="observations" class="col-lg-2 col-md-2 col-sm-2 col-xs-2 control-label">Notes</label>
                        <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
                            <textarea class="form-control" rows="2" id="observations" name="observations"></textarea>
                            <span class="help-block">Clic on save button when done.</span>
                        </div>
                    </div>
                </fieldset>
            </div>
        </form> 

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-success">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Как да предам previousValue в текстовото поле??


javascript jquery twitter-bootstrap bootstrap-modal
person Pathros    schedule 07.08.2015    source източник

Отговори (1)


arrow_upward
4
arrow_downward

при показване задайте текста:

/*Open a modal*/
$('#modal-notes').modal('show');
$('#modal-notes').on('shown.bs.modal', function() {
    $(this).find('#observations').text(previousValue);
});
person taxicala    schedule 07.08.2015
comment
опитайте вместо $(this).find('#observations').text(previousValue); както следва: $('#observations').text(previousValue); - person taxicala; 07.08.2015
comment
Задал съм console.log('modal is open') точно след $(this).find("#observations") и съобщението не се показва. Въпреки това, ако console.log, когато се щракнат върху модалните бутони (отказ, актуализиране), console.log работи, когато се щракнат върху тези бутони. Изглежда, че on('bs.shown.modal') не работи - person Pathros; 07.08.2015
comment
АХХХ, разбирам, вместо това трябва да е shown.bs.modal ;-) Както е обяснено тук: stackoverflow.com/a/25466850/1883256 - person Pathros; 07.08.2015
comment
вярно! грешно съм настроил събитието! ще се актуализира за бъдещи справки. - person taxicala; 07.08.2015