I have a page that invokes a bootstrap modal window with external content. A modal window consists of a form. The form uses jquery validate, and I'm trying to use the ajax submit handler. The problem is that it seems that I cannot access the main div that I want to update. The modal window uses its own html page. I want to update the div that was used to call the modal window, is something like this possible?
There is no code if you do not want me to publish it to better clarify. Hope what I want to do makes sense.
edit: [The main page is what I want to update with an ajax call in modal mode)
[Main Page]
<div id='div-id-want-to-update-on-submit'></div>
<a href='/some-external-form' data-toggle='modal' data-target='#my-modal'>Launch Modal</a>
[Modal Window]
<div id="my-modal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<form action=/post-somewhere>
...
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
<script type="text/javascript">
... some jquery to validate and ajax call to another method.
var request;
request = $.ajax({
url: '/post-method/returns-html',
type: "post",
data: serializedData
});
request.done(function (response, textStatus, jqXHR) {
$('#div-id-want-to-update-on-submit').html(response);
});
</script>
[edit2] - , div. .opener, , DOM .