6

As an example, I have a page that when loads, lists all employees. There is a button on the page that when clicked, initializes a (bootstrap) modal with a form. I populate the form, and click 'Submit'. If the insert was successful, I get the json object back as a response so that I can add the newly created employee to the list - which is behind the modal - without a page refresh.

Everything is working fine. I am getting the json back - and I'm ready to send the data back to the parent window. I knew it would be somewhat tricky, but this SO post gave me hope.

jQuery

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

So far all I'm able to do is get this error back:

Uncaught TypeError: Cannot read property 'document' of null

I am launching the modal via javascript instead of data-attribute in hopes that would allow a better hook back to the parent window:

jQuery

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

No such luck.

Improve this question
2
  • 3
    You are not passing data between "windows". Your modal and the place where the modal is launched from are part of the same document. You should just be able to reference the element where you want to insert the content using a straightforward selector, i.e. $(#mytable').html() Commented Dec 18, 2014 at 19:21
  • 1
    That was it - was making it way too difficult on myself. Commented Dec 18, 2014 at 19:48

1 Answer 1

Reset to default
13

Whatever information you can access with your modal can also be added to your page.

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

This example pops a modal when a button is clicked. You can then enter text in the input and click the save changes button, and the h1 tag on the page will be set to use that text. You can pop the modal again, change the text in the input field, click the save changes button, and the h1 tag will now display the new text.

This example should illustrate that whatever items are set in the modal can be used to set items on the page that produces that modal. Any element or variable the page has access to, your modal has access to as well.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

What if the data in the modal is coming from a whole other page remotely? When you click the button to show the modal uses a remote call to another php page. The $.validator object cannot be customized for this modal form either. I wish I understood how the DOM and jQuery handles this situation.
@yardpenalty I'm not entirely sure off the top of my head, but that would likely be a matter deserving of its own question.
Well before I post a stupid question (as they always seem to be after the fact) I am going to look into the deprecated remote attribute with the bootstrap modal that is currently being used. I may have to scrap the approach since its deprecated anyways. Grrr.
@MattD so I had to use type="button" on click to submit modal not the actual form submit since I am using Rest ajax. I have to declare validate() object within the parent web page and everything works fine.
@JMASTERB Yes. Don't think of the modal as something separate from your page. Think of it like a part of the page that's only visible in certain situations.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.