Passing data to a parent window from a modal using Bootstrap

Question

As an example, I have a page that lists all employees when loading. There is a button on the page that, when clicked, initializes (bootstrap) the modal form. I fill out the form and click "Submit." If the insert is successful, I return the json object as a response to add the newly created employee to the list - which is behind the modal - without refreshing the page.

Everything is working fine. I am returning json - and I am ready to send the data back to the parent window. I knew it would be a little complicated, but this SO post gave me hope .

JQuery

Employee.createEmployee(function (response) {
    $(window.opener.document).find('#mytable').html($.parseJSON(response));
});

For now, all I can do is return this error:

Uncaught TypeError: Cannot read property 'document' of null

modal javascript data , :

JQuery

$('#createemployeebtn').click(function (event) {
    $('#newemployeemodal').modal();
});

.

Answer 1

, , ​​ .

$(function() {
  $('#btnLaunch').click(function() {
    $('#myModal').modal('show');
  });

  $('#btnSave').click(function() {
    var value = $('input').val();
    $('h1').html(value);
    $('#myModal').modal('hide');
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<h1></h1>
<button type="button" id="btnLaunch" class="btn btn-primary">Launch Modal</button>


<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>Enter text:</p>
        <input type="text" id="txtInput">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" id="btnSave" class="btn btn-primary">Save changes</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

Hide result

. , h1 . , , " ", h1 .

, , , , . , , .