I am using the bootstrap modal to popup a form that uploads a file
using the jquery.upload plugin.
1.When I popup the modal (#photoModal) and submit the form, the 1st
time:
a) the file is uploaded server side
b) the javascript code successfully hides the modal (#photoModal) and
appends the filename to a div (#media_gallery)
2. When I popup the modal a 2nd time, without reloading the underlying
page, and upload another file:
a) the file is uploaded server side
b) the javascript code is NOT executed, thus the modal stays open and
the filename is not appended to the div (#media_gallery)
Any ideas what I am doing wrong?
Thanks.
<head>
...
<script src="/initializr/js/libs/modernizr-2.5-
respond-1.1.0.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/
jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/initializr/js/
libs/jquery-1.7.1.min.js"><\/script>')</script>
<script src="/initializr/js/libs/bootstrap/collapse.js"></script>
<script src="/initializr/js/libs/bootstrap/dropdown.js"></script>
<script src="/initializr/js/libs/bootstrap/modal.js"></script>
<script src="/includes/js/bootstrap-datepicker.js"></script>
<script src="/includes/js/jquery.upload-1.0.2.min.js"></script>
<script src="/includes/js/jquery-ui-1.8.20.custom.min.js"></script>
<script>
/* datepicker */
$(function(){
...
});
$(function() {
/* jquery.upload */
$('#photoModal .btn-primary').click(function() {
$('#fields').upload('/upload.php',function(response) {
if(response.status == "success") {
$('#media_gallery').append(response.message);
$('#media_upload')[0].reset();
$('#photoModal').modal('hide');
$("#media_gallery").effect("highlight", {}, 12000);
}
else {
alert(response.status + ' -> '
+ response.message );
}
}, 'json');
});
});
</script>
</head>
<body>
<form action='/save_post.php' method='post'>
<div class='control-group'>
<label>Body</label>
<textarea id='body' class='input-xlarge span7'
rows='12'></
textarea>
<p class='help-block'>Minimum of 150 words is
required</p>
</div>
<div class='control-group'>
<label>Media Gallery</label>
<div class='btn-group'>
<button class='btn btn-info' data-toggle='modal' data-
target='#photoModal'><i class='icon-plus-sign icon-white'></i> Photo</
button>
<button class='btn btn-info' data-toggle='modal' data-
target='#videoModal'><i class='icon-plus-sign icon-white'></i> Video</
button>
</div>
</div>
<div id='media_gallery'>
</div>
<div class='align-right' style='margin-top: 32px;'>
<input class='btn-large btn-primary' type='submit'
value='Save
Changes' name='submit'>
</div>
</form>
<form id='media_upload' method='POST' enctype='multipart/form-data'>
<div class='modal hide' id='photoModal'>
<div class='modal-header'>
<button class='close'
data-dismiss='modal'>×</button>
<h3>Add Photo to Media Gallery</h3>
</div>
<div id='fields'>
<div class='modal-body content-inner'>
<div class='control-group'>
<label>Image File:</label>
<input type='file'
name='filename' id='filename' />
<p class='help-block'>5
Megabytes Maximum File Size</p>
</div>
<div class='control-group'>
<label>Caption:</label>
<textarea class='input-xlarge
span4' rows='2' name='caption'
id='caption'></textarea>
<p class='help-block'>200
Characters Maximum</p>
</div>
<input type='hidden' name='existing'
value='0' />
<input type='hidden' name='file_type'
value='image' />
</div>
<div class='modal-footer'>
<input type='submit' name='submit'
class='btn btn-primary'
value='Upload Attachment'>
</div>
</div>
</div>
</form>
</body>
