0

I have a table of information where the user is allowed to edit it. In one cell, there is text information. Should the user click on that cell, a bootstrap modals appears with a textarea containing the current text retrieved from the database.

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>

Here is part of the javascript launching the modal:

$('[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');
    $('#modal-notes').on('shown.bs.modal', function() {
            console.log('Modal has been opened.');
            $(this).find('#observations').text(previousValue);
        });
});

The modal looks like the following:

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

The text is shown inside the textarea. However, if I implement the CKEDITOR, the text is no longer shown. I only see the textarea empty.

<script>CKEDITOR.replace('observations');</script>

Until here, the CKEDITOR works fine but now the textarea is empty. When I inspect the textarea element without the CKEDITOR, I see that the textarea id is indeed #observations. However, with the CKEDITOR, I don't see the id anymore.

A possible solution

I have just found here that you can set text into the CKEDITOR textarea as follows:

CKEDITOR.instances.observaciones.setData( '<p>This is the editor data.</p>' );

1 Answer 1

0

Ok, I found the solution. I hope this helps someone else in the near future:

I just added the following code when opening the modal:

/*Open a modal*/
$('#modal-notes').modal('show');
$('#modal-notes').on('shown.bs.modal', function() {
    console.log('Modal has been opened.');
    $(this).find('#observations').text(previousValue);
});

CKEDITOR.replace('observations');
CKEDITOR.instances.observations.setData(previousValue);

And that was it.

I had another problem when clicking many modals. Solution is here.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.