Please let me know where I got wrong on why the modal is not loaded here:

Code:
<script type="text/javascript">
	function verify(frm, bttn)
	{
		var errOut = false;
		
		if (!errOut) {
			$(document).ready(function() {
				$('form[data-async]').bind('click', function(e) {
					var $form = $(this);
					var $target = $($form.attr('data-target'));
					
					$.ajax({
						type: $form.attr('method'),
						url: $form.attr('action'),
						data: $form.serialize(),
						
						success: function(data) {
							$(target).modal('show');
							$(target).load(url);
						}
					});
				});
			});
		}
	}
</script>

<div class="modal-header">
	<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	
	<h1>Download Product</h1>
</div>

<div class="modal-body">
	<form method="post" action="/admin/products/productDownload.asa" data-async data-target="#modalDownloadProductActions" name="frmMain" id="frmMain" class="form-horizontal">
		<fieldset>
			<div class="control-group">
				<div class="control-label">Product</div>
				<div class="controls">
					<select id="prd_ID" name="prd_ID" class="input-xxlarge">
						<option value=""> -- select one --</option>
						<option value="1">Beer</option>
						<option value="2">Softdrink</option>
					</select>
				</div>
			</div>
		</fieldset>
		
		<div class="form-actions">
			<input type="button" value="Download" onClick="verify(this.form, this);" class="btn btn-success" />
			<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
		</div>
	</form>
</div>
<!-- <div class="modal-footer"></div> -->



<!-- Modal For Download Language Action -->
<div class="modal fade" id="modalDownloadProductActions"></div>

<script type="text/javascript">
	$.fn.modal.defaults.maxHeight = function() {
		// subtract the height of the modal header and footer
		return $(window).height() - 165; 
	}
</script>