We Keep Coding

Reload page after a particular modal is closed

I have two modals on a page. I only want one to refresh the parent page once closed. However, even if I add the code to do so both modals refresh the page after closing. Any idea why?
<script>
$(document.body).on('hidden.bs.modal', function () {
$('#myModal').removeData('bs.modal');
});
</script>
<script>
$(document.body).on('hidden.bs.modal', function () {
$('#myModal2').removeData('bs.modal');
location.reload();
});
</script>
Modal 1 call:
<a data-toggle="modal" data-target="#myModal" href="modal_target.cfm?M=#MLink#" class="btn btn-#bg_color#">#CP#</a>
Modal 2 call:
<a data-toggle="modal" data-target="#myModal2" href="modal_AmendCP.cfm?M=#MLink#" title="view details" class="btn btn-primary">#Measure#</a>
Thanks for any help!

Both of your functions are being fired on the same event of modal closing on $(document.body).
You should change it to the be triggered on modal objects only:
<script>
$('#myModal').on('hidden.bs.modal', function () {
$('#myModal').removeData('bs.modal');
});
</script>
<script>
$('#myModal2').on('hidden.bs.modal', function () {
$('#myModal2').removeData('bs.modal');
location.reload();
});
</script>
From the Bootstrap Documentation:
hidden.bs.modal: This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

you should select exact modal to add Event Listener.
if selector is "document.body", event will fire for both.
in your code: function called for 'hidden.bs.modal' is only
function () {
$('#myModal2').removeData('bs.modal');
location.reload();
}
it replace
function () {
$('#myModal').removeData('bs.modal');
}
because it is declared later.

Only open closest modal to button

I have a page which has a random number of items each of which has a button and a modal - as I do not know how many items there will be I am using classes for the button and modal.
When I click any button it loads all the modals whereas I only want it to load the next modal - I have tried to use closest and next but cannot get them to fire.
<div class="social-button-container">
<button type="button" class="social-button">Button</button>
</div>
<div class="socialModal modal fade">
<h2>123</h2>
</div>
<div class="social-button-container">
<button type="button" class="social-button">Button2</button>
</div>
<div class="socialModal modal fade">
<h2>234</h2>
</div>
$(document).ready(function () {
$('.social-button').click(function () {
$('.socialModal').modal();
return false;
});
});
The above code works in that the modals fire but they all do - I tried using:
$(document).ready(function () {
$('.social-button').click(function () {
$('.socialModal').next().modal();
return false;
});
});
but this does nothing at all (none fire)
Also tried:
$(document).ready(function () {
$('.social-button').click(function () {
$(this).next('.socialModal').modal();
return false;
});
});
with the same result - how can I get only the following modal to open on clicking the relevant button?
http://jsfiddle.net/0v0pg7fx/

Your selectors were a bit off, and you probably want to in initialize the modals first.
$('.socialModal').modal({show:false});
$('.social-button').click(function () {
$(this).closest('.social-button-container').next('.socialModal').modal('show');
});
Demo

$(document).ready(function () {
$('.button').click(function () {
$('.Modal').closest().modal();
return false;
});
});

Bootstrap Modal - show does not remove hide attribute

I am creating a Bootstrap 2.3.1 modal as follows:
myModal = $('<div/>', {
'class': 'modal hide',
'id': id + '-addModal',
'tabindex': -1, // needed for escape to work...
'role': 'dialog',
'data-backdrop': 'static'
}).append(content);
// insert Modal into DOM...
$(jqElement).after(myModal);
// focus on first input when it pops up...
myModal.on('shown', function () {
myModal.find('select:first').focus();
});
// in response to button click...
myModal.modal('show');
On rare occasions, the backdrop shows, but no modal is displayed. Has anyone encountered a similar problem and a workaround? I am aware IE8 does not like animated modals (use of fade class) and this doesn't appear to be the same issue as we don't use fade. The issue appears in FF, Chrome and IE, but like the Spanish Inquisition, never when I'm expecting it.
The failure appears to be within the modal('show') execution. It seems that the modal exists but is not unhidden. I believe this should be achieved by adding the in class to the modal. The show and shown events do occur however. From looking at the bootstrap code, the fact that the shown event occurs means that the event is not prevented from default behaviour.
Note This is a question similar to one I posted earlier, but I have added some more information concerning how it fails.
Please also note that I cannot update to Bootstrap 3. I am responsible for making small changes to an already released product and a change of basic libraries is a non-starter.

I've modified the code and appended to the body instead of the unknown jqElement specified in your example. I've also added some example place holder content. See the following JS Fiddle for a working example http://jsfiddle.net/kYVtf/5/
var id = 'test',
content = '<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"><p><select><option>TEST</option></select></p></div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> </div>';
var myModal = $('<div/>', {
'class': 'modal hide fade',
'id': id + '-addModal',
'tabindex': -1, // needed for escape to work...
'role': 'dialog',
'data-backdrop': 'static'
}).html(content);
// insert Modal into DOM...
$('body').append(myModal);
// focus on first input when it pops up...
myModal.on('shown', function () {
myModal.find('select:first').focus();
});

I found the following issues helped:
a) The 'shown' action of the modal checks for a display:block attribute and forces it to be set.
b) the close button (which needed to do validation) was set to a click event - changing this to a delegated event made it work reliably
c) both the cancel buttons were mapped to the modal-dismiss action.
myModal.on('show', function (event) {
self._debug("show modal");
// show add form - should be a modal
myModal.find('form')[0].reset();
myModal.find('.alerts').empty();
self._debug('show end');
return true;
});
myModal.on('shown', function () {
var $el = $('#myModal');
if ($el.css('display') == 'none') {
self._debug(" WARNING! modal css error");
}
self._debug("fix for bootstrap error");
$el.css('display', 'block');
myModal.find('select:first').focus();
self._debug('Shown modal');
return true;
});
myModal.on('hide', function () {
self._debug('Hide modal');
return true;
});
myModal.on('hidden', function () {
var $el = $('#myModal');
$el.css('display', 'none');
self._debug('Hidden modal');
return true;
});

This behaviour started happening for me after I added the following to prevent unhandled modal closure.
$('.modal').modal({
backdrop: 'static',
keyboard: false
});
I fixed it by adding show: false to the modal options and making sure there was no hide class in <div class="modal fade"

Bind to event of control within .load() div

I have a jQuery UI dialog whose content is populated using .load(), and then displayed. What I need to do is somehow bind to a button within the loaded HTML to close that dialog.
Code:
<div id="popup">
<div id="popupContent"></div>
</div>
<script>
$("#popupContent").load('some_URL_within_site_that_has_a_button', function () {
$("#popup").dialog("open");
});
</script>
I've tried a few different things, w/o success:
$("#popupContent").find(".CloseButton").on("click", function () {
alert("this worked");
});
$(".CloseButton").on("click", function () {
alert("this worked");
});
Any ideas on how to bind to the dynamically loaded control events?

You are close:
$("#popup")
.dialog("open")
.on("click", ".CloseButton", function() { ... });

Reveal: jQuery Modal Plugin Won't Appear

I'm trying to use Reveal by Zurb to display a form, yet when I select the item that triggers the event the screen darkens like Reveal is working, but it will not show the pane. Any ideas? Thanks a lot for the help!
Planner.js
$(function() {
$('.event_list li').click( function(e) {
console.log(this.id);
$('#update_view_content').reveal('http://example.com/user/planner/update/'+this.id);
});
$('#updateForm').live('submit', function() {
var data = $('#updateForm').serialize();
var url = $(this).attr('action');
$.post(url, data);
return false;
});
});

From looking at the documentation online it seems there are no parameters for the reveal() method - the reveal method just shows a div on the screen, so
You would created markup on your page :
<div id="myModal" class="reveal-modal">
<h1>Modal Title</h1>
<p>Any content could go in here.</p>
<a class="close-reveal-modal">×</a>
</div>
then reveal it ...
$('#myButton').click(function(e) {
e.preventDefault();
$('#myModal').reveal();
});
If you want to load something into the div and then reveal i suggest this approach :
$('.event_list li').click( function(e) {
console.log(this.id);
$('#update_view_content').load('http://example.com/user/planner/update/'+this.id,function() {
$('#update_view_content').reveal();
});
});
That should load in the contents and then once the load has completed call the reveal method. untested