We Keep Coding

Colorbox breaking <form>

I'm using Colorbox.js for the first time and am having issues with placing a newsletter signup inside of the popup. I am assigning colorbox to my element .newsletter-popup and it is working correctly, however as mentioned the <form> within does not work. I have tested the form and it works correctly when not loading via colorbox?
Also, in the source code of my page I can see some automatically generated colorbox code #cboxOverlay and #colorbox, why do these appear when I've already assigned colorbox to my own element? I'm also not able to set options for colorbox on my element, as they don't work. Have a got this setup incorrectly?
Working Example (Appears after 3 seconds): http://development.ozonecoffee.co.uk/our-journal/
JS
setTimeout(function(){
jQuery('.newsletter-popup').colorbox({
trapFocus: false,
closeButton: true,
onComplete: function(){ $("#email").focus(); }
});
}, 3000);
// Close button
$( ".close-popup" ).click(function() {
$.colorbox.remove();
});
HTML
<div class="newsletter-popup">
<div class="modal">
<div class="close-popup"><span>X</span></div>
<div class="container">
<h4>Title</h4>
<form class="mailing-list-signup" id="subscribe-form" action="http://ozonecoffee.us14.list-manage.com/subscribe/post-json?u=93b92e23751a1d94fe6e57dc9&id=3caae1521b" method="get">
<input id="email" type="email" placeholder="Sign up for our newsletter" value="" name="EMAIL" >
<input type="submit" value="Sign up" name="subscribe" >
</form>
</div>
</div>
</div>

How to enable bootstrap popover to open and close multiple times?

I want a popover using bootstrap that can be closed through clicking on a button within the popup. But I after closing, I have to click twice on the button to open the popover again.
I currently have the following implementation:
HTML:
<button type="button" id="example" class="btn btn-primary">example</button>
JAVASCRIPT:
$(document).ready(function() {
$("#example").popover({
placement: 'bottom',
html: 'true',
title : '<span class="text-info"><strong>Title</strong></span>'+
'<button type="button" id="close" class="close"
onclick="$("#example").popover("hide");
">×</button>',
content : 'Content'
});
});
How can I implement a close-button in the popover without having to click twice on the button to re-open the popover?

You can fix this by adding click() event.
$(document).ready(function() {
$("#example").popover({
placement: 'bottom',
html: 'true',
title : '<span class="text-info"><strong>Title</strong></span>'+
'<button type="button" id="close" class="close"
onclick="$("#example").popover("hide").click();
">×</button>',
content : 'Content'
});
});

DataTables not initialising correctly with Bootstrap modals

I'm having two problems with DataTables and Bootstrap modals.
Can't use dynamically built buttons after page 1
(Solved by Yuri)
I have this table, It is built dynamically by an AJAX request, the data loads correctly and builds up the table as it should, the buttons 'Manage' and 'Delete' have classes set on them, when clicked it should open another modal on top of the current one, on the 1st page of the table it works fine, if I go to page 2 it doesn't action anything as if there is no listener on it.
Datatables not initialising on the 2nd modal (Could be related to issue 1)
I have the below jQuery to initialise another DataTables on the modal that the 'Manage' button should open up. When it does open it should initialise another DataTables and get data from the AJAX request but in my network tab in Chrome developer tools it isn't being ran.
I have discovered the problem is, the DataTables isn't being initialized for some reason? the jQuery works up to there
I can't understand what I'm doing wrong here?
$(document).ready(function(){
$('.valid-tags').on('click', '.manageAutofixes', function(){
$('.autofixes-modal').modal('show');
$('.autofixes-modal').on('shown.bs.modal', function () {
var table = $('.autofixes-table').DataTable({
"ajax": {
"url": "/ajax/getValidTags.php",
"type": "POST",
"data": {
ruleID: ruleID,
type: 'autofixes'
},
},
"columnDefs": [{
"targets": 2,
"render": function(data, type, full, meta){
return '<button class="btn btn-default btn-sm manageAutofixes" type="button">Manage</button> <button class="btn btn-danger btn-sm deleteValid">Delete</button>';
}
}],
destroy: true
});
})
})
});
My modals HTML (included on the page)
<div class="modal fade autofixes-modal" tabindex="-1" role="dialog" aria-labelledby="LargeModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-wide">
<div class="modal-content">
<div class="modal-header modal-header-custom">
<input class="ruleID" type="hidden"></input>
<button type="button" class="close destroyTable" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title">Autofixes</h4>
</div>
<div class="modal-body">
<div class="topBar">
<div>
<input type="text" class="autofix inputTextStyling">
</div>
</div>
<hr>
<table class="table table-striped table-condensed autofixes-table" style="width:100%;">
<thead>
<tr>
<th>Autofix</th>
<th>Manage</th>
</tr>
</thead>
<tbody class="autoFixesTable">
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default destroyTable" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

To solve you buttons' problem, just use this kind of delegation:
$('#datatable').on('click', '.btn_class', function(){...});
It will match any click event occurring inside #datatable container on .btn_class elements, and it will solve your issue for dinamically added elements.
For what concerns Datatable inside your modal, I usually solve this by using a remote modal. That means that you put both your <div class="modal-body">..</div> html code and the relative JS code (that code to init the Datatable) on a (php) file, and load it with:
$("#myModal").on("show.bs.modal", function(e) {
var link = $(e.relatedTarget);
$(this).find(".modal-body").load(link.attr("href"));
});
EDIT: Remember to use $(document).ready(); in your remote php file too, so that code will run only when modal-body is fully loaded

The problem is that the buttons for the page 2 are loaded after you bind the action "click". You have to re-bind the action each time you load the results(by ajax)
you can use the datatable option fnDrawCallback
fnDrawCallback: function( oSettings ) {
$('.manageAutofixes').on('click', function(){
$('.autofixes-modal').modal('show');
alert('hi');
}
}

AngularJS popover: hide popover template on mouse out

I am using AngularJS' ui-bootstrap module. Here's my markup:
<button class="btn btn-default btn-sm" type="button"
popover-template="dynamicPopover.templateUrl"
popover-trigger="click" id="custom_overview"
popover-placement="bottom">Custom</button>
Here's my controller:
$scope.dynamicPopover = {
templateUrl : '../static/templates/popup-templates/datepicker.html'
};
Here's my popover template:
<div class="row" id="datepicker-container">
<div class="col-sm-12 clearfix">
<div class="col-sm-12">
<span class="heading">From:</span>
<input ng-model="timedata.fromDate" type="text" id="fromDate"
class="form-control" datepicker-popup="dd-MM-yyyy"
is-open="fromOpen.isOpen" ng-click="fromOpen.isOpen = true" placeholder="dd-mm-yyyy">
</div>
<div class="col-sm-12" style="margin-top:5px">
<span class="heading">To:</span>
<input ng-model="timedata.toDate" type="text" id="toDate"
class="form-control" datepicker-popup="dd-MM-yyyy"
is-open="toOpen.isOpen" ng-click="toOpen.isOpen = true" placeholder="dd-mm-yyyy">
<div class="error"
ng-show="timedata.toDate <= timedata.fromDate && timedata.fromDate && timedata.toDate">
<span>'To' date cannot be less than 'From' date.</span>
</div>
</div>
</div>
<div class="col-sm-12" id="submit-button">
<button class="btn btn-primary" ng-click="setInterval('custom')"
ng-disabled="timedata.toDate <= timedata.fromDate || !timedata.toDate || !timedata.fromDate">
Submit
</button>
</div>
</div>
As you can see, I am populating a popover with a popover template which contains a form. Here's a screenshot:
This popover opens up when I click on the 'Custom' button. Now, I want this popover to hide when I take the mouse away from the template and the 'Custom' tab. How can I do it?

In short,
replacing popover-trigger="click" by popover-trigger="'mouseleave : click'" should work for you.
For more understanding,
As per uib-popover documentation, both popover open and close triggers will be enabled by default with the popover-trigger attribute(only if you want to close and open on same event).
For example:
popover-trigger="'mouseenter'" This by default should open the popover on mouseover and close the popover on mouseleave
popover-trigger="'click'" - This will show and hide on clicks
In your case(show and close on different events), popover-trigger attribute should contain both events in order to work.
popover-trigger="'mouseleave : click'" This should work. Here first and second values represents hide and show triggers respectively.

How can I use "div" in Twitter's Popover with multiple buttons?

This solution is ok for one button cases: Is it possible to use a div as content for Twitter's Popover
But in my page I have a bunch of popovers (say 50-100).
So I need to modify this solution.
This wa #jävi's solution:
$(document).ready(function(){
$('.danger').popover({
html : true,
content: function() {
return $('#popover_content_wrapper').html();
}
});
});
Each of my button has its own id.
<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_div1" style="display: none">
<div>This is your div content</div>
</div>
<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_div2" style="display: none">
<div>This is your div content</div>
</div>
So how can I rewrite this javascript code snippet to cover all my buttons?

Just fought with this myself. You need to put the id in the element that triggers the popover. Use a custom data attribute like so (called 'data-id'):
<a class='danger' data-id="popover_div1" data-placement='above' title="Popover Title" href='#'>Click</a>
Then you can modify your javascript slightly to grab the data-id attribute value programmatically:
$(document).ready(function(){
$('.danger').popover({
html : true,
content: function() {
return $($(this).attr('data-id')).html();
}
});
});

If you don't want to pollute your source element with another data-* attribute, here is a simple and generic way to use the data-content attribute as text or CSS selector:
$('[data-toggle="popover"]').popover({
html: true,
content: function() {
var content = $(this).data('content');
try { content = $(content).html() } catch(e) {/* Ignore */}
return content;
}
});
You can now use the data-content attribute with a text value:
<a data-toggle="popover" data-title="Popover Title" data-content="Text from data-content attribute!" class="btn btn-large" href="#">Click to toggle popover</a>
...or use the data-content attribute with a CSS selector value:
<a data-toggle="popover" data-title="Popover Title" data-content="#countdown-popup" class="btn btn-large" href="#">Click to toggle popover</a>
<div id="countdown-popup" class="hide">Text from <code>#countdown-popup</code> element!</div>
You can test this solution here: http://jsfiddle.net/almeidap/eX2qd/
...or here, if you are using Bootstrap 3.0: http://jsfiddle.net/almeidap/UvEQd/ (note the data-content-target attribute name!)

You can do it without additional button attributes like this:
http://jsfiddle.net/isherwood/E5Ly5/
.popper-content {
display: none;
}
<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content">My first popover content goes here.</div>
<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content">My second popover content goes here.</div>
<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content">My third popover content goes here.</div>
$('.popper').popover({
container: 'body',
html: true,
content: function () {
return $(this).next('.pop-content').html();
}
});

Store the id of the div containing the popover html inside the rel attribute of the a element
<a rel="popover_div2" ... >click</a>
And then get the rel of the click anchor inside your click listener (not sure how the popover method stores it, but I'm sure it does):
var myRel = $(this).attr(rel);
return $(myRel).html();

For me it has do be
data-id="#popover_div1"
in the HTML for the button (with a # for addressing the id of the div).