SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post I have this issue on modal bootstrap, where the URL cannot be loaded

    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>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,705
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    It seems that you may not have the bootstrap files loaded.

    You can get them from http://twitter.github.com/bootstrap/
    The bootstrapped template should be enough to get you started.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •