I have issues with colorbox if I try to submit a form, colorbox remains opened on success. I tried to add colorbox.close(); on success, it worked, but if I try to click the link again to open the form, the form is not displaying - I can see only close button and overlay. I tried to hide form and overlay after success, but then again - the form didn't open on second click.
I tried to tweek js file - to assign the same functionality to submit button as close button has, but this of course didn't work properly. How to make form close on submit - please suggest.
The popup form:
<div class="body" id="inline-popup">
<form action="index" method="post" id="form">
<fieldset>
<label>Name</label>
<input type="text" id="name" name="name" />
</fieldset>
<fieldset>
<label>URL (optional)</label>
<input type="text" name="url" id="url" />
</fieldset>
<fieldset>
<input type="submit" value="ok" class="submit" />
</fieldset>
</form>
</div>
colorbox call and ajax:
<script>
$(".popup").colorbox({inline:true, width:"300px", height:"100%"});
$('.submit').on('click', function(e){
$.ajax({
type: "POST",
url: '/pathname/submitForm',
data: $("#form").serialize(),
error: function(xhr, ajaxOptions, thrownError, data) {
err = Array();
err[0] = "Oops an error is occured";
console.log(err);
},
dataType: "json",
success: function(data) {
if(data.success=="yes") {
console.log(data.success);
} else {
console.log(data.error);
}
}
});
e.preventDefault();
});
</script>
Try this:
success: function(data) {
if(data.success=="yes") {
$.fn.colorbox.close();
console.log(data.success);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.