0

I have a table where I want allow a user edit information. One cell of the table contains text. Here is part of the table:

<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>

Should the user click on the row "notes", a bootstrap modal appears to allow the user make changes. 

$('[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');

});

So far, I have managed to show the bootstrap modal, however, i don't know how to pass the data previousValue (retrieved from the database) into the textarea of the modal. previousValue has the text retrieved from the database.

The modal looks like the folowing:

<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 -->

How do I pass the previousValue to the textarea??

Pathros
  • 10,042
  • 20
  • 90
  • 156

1 Answers1

4

upon showing, set the text:

/*Open a modal*/
$('#modal-notes').modal('show');
$('#modal-notes').on('shown.bs.modal', function() {
    $(this).find('#observations').text(previousValue);
});
taxicala
  • 21,408
  • 7
  • 37
  • 66
  • try instead of $(this).find('#observations').text(previousValue); like follows: $('#observations').text(previousValue); – taxicala Aug 07 '15 at 16:28
  • I have set a `console.log('modal is open')` just after `$(this).find("#observations")` and the message is not shown. However, if I console.log when the modal buttons (cancel, update) are clicked, the console.log works when these buttons are clicked. It seems that the `on('bs.shown.modal')` is not working – Pathros Aug 07 '15 at 16:38
  • AHHH, i see, it should be `shown.bs.modal` instead ;-) As explained here: http://stackoverflow.com/a/25466850/1883256 – Pathros Aug 07 '15 at 16:44
  • true! i've set the event wrongly! will update for future references. – taxicala Aug 07 '15 at 16:47