We Keep Coding

Can't display html in Bootstrap 3 popover

I have a web page to test out a Bootstrap 3 popover and need to display html in the body.
Here is the html for the button that displays the popover and a hidden div that I use as a template for the popover body.
<button class="btn btn-default" id="status-add" type="button" data-toggle="popover">Add</button>
<div id="popover-content" class="hidden">
<form method="post">
<div class="form-group">
<label class="control-label">Room Status</label>
<input class="form-control" type="text">
</div>
<button class="btn btn-default btn-xs" type="submit">Submit</button>
</form>
</div>
Here is the javascript to display the popover. My apologies for the bad formatting, pasting it in as code doesn't work for some reason.
$(function () {
$('[data-toggle="popover"]').popover()
})
$('#status-add').popover({
trigger: 'click',
html: true,
title: "Add new room status",
content: function() {
var html=$("#popover-content").html()
console.log(html)
return html
},
placement: 'right'
});
The popover is displayed with the correct title but the body is empty. I can see from the console log that the html variable has the correct html in it. I also tried setting the popover html setting to false which makes the html appear in the body as plain text.
Any ideas?

I found the answer to this, it's a bootstrap bug documented at https://github.com/twbs/bootstrap/issues/28290. The solution is to include sanitize: false in the popover settings array.

Why is the content of my contenteditable div disappearing?

The code:
post_page.js:
Template.postPage.events({
// Updating a post
'submit form': function(e) {
e.preventDefault();
var post = {
title: $(e.target).find('[name=title]').val(),
content: $(e.target).find('[name=content]').val()
};
Posts.update(this._id, {$set: post});
},
'click .move-up': function(e) {
// Moving up a post
e.preventDefault();
var prevPost = Posts.findOne({position: this.position - 1});
if (prevPost) {
Posts.update(prevPost._id, {$set: {position: prevPost.position + 1}});
Posts.update(this._id, {$set: {position: this.position - 1}});
}
},
(...)
Template.postPage.rendered = function() {
// Plugin to turn the text area into a contenteditable div
var editor;
$(function() {
editor = new Simditor({
textarea: $("#input-content"),
placeholder: "...",
pasteImage: true,
toolbar: ["title", "bold", "italic", "underline", "link", "image", "indent", "outdent"],
upload: {
url: "/upload"
}
});
post_page.html:
<template name="postPage">
<div class="posts">
<div class="post">
<div class="post-content">
<span>title: {{title}}, position: {{position}}</span>
<a class="move-up" href="javascript:;">Move Up</a>
<a class="move-down" href="javascript:;">Move Down</a>
See Post
<a class="save-file" href="javascript:;">Save Post</a>
</div>
</div>
</div>
<form class="form" role="form">
<div class="form-group">
<label for="exampleInputEmail1">Title</label>
<input name="title" type="text" class="form-control" id="exampleInputEmail1" placeholder="Enter email" value="{{title}}">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Content</label>
<textarea name="content" class="form-control" rows="3">{{content}}</textarea>
</div>
<button type="submit" class="btn btn-default submit">Submit</button> </form> </template>
Is a single page app and everything works but for some reason the content of the contenteditable div disappears if I move up a post that isn't the one currently being displayed (the content in textarea remains and it comes back if I re-render the page):
What could be causing this? How to fix it?

Moving the post up/down causes the template to re-render completely and I suspect that because the simditor expects the DOM to persist, it either doesn't re-run on rendered or runs before Meteor's preserve-inputs package has repopulated the textarea.
You can try to work around the problem (until Meteor gets the Blaze templating engine up) by wrapping your re-rendering sensitive area (at least the textarea and possibly the complete DOM generated by simditor) in {{#constant}}. If you know the exact DOM elements you want to preserve, then you can also use preserve to prevent them from being re-rendered.

Translate JQuery Mobile widgets

Using i18next, how can I translate JQuery Mobile widgets? Specifically, I'd like to know how to do that without resorting to using data-i18n-target to modify generated inner elements, because that is brittle since future widget versions may change the generated code.
Is there a specific page lifecycle event I can subscribe to in order to be able to have i18next modify the DOM before the widget transformation happens?
In this example (see jsfiddle), some markup is correctly translated, but homeBtn and submitBtn are not:
HTML:
<div id="home_page" data-role="page">
<div data-role="header">
<a id="homeBtn" href="/" data-icon="home" data-i18n>app.home</a>
<h2 data-i18n>app.title</h2>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="textinput1" data-i18n>app.label</label>
<input type="text" name="textinput1" id="textinput1" value=""></input>
</div>
<form action="">
<input id="submitBtn" type="submit" data-i18n="[value]app.button" />
</form>
</div>
<div data-role="footer">
<center>
<p data-i18n>app.footer</p>
</center>
</div>
</div>
JavaScript:
var i18nOpts = {
resStore: {
dev: {
translation: {
app: {
button: 'Button',
home: 'Home',
label: 'Label',
footer: 'Footer',
title: 'i18n Test'
}
}
},
}
};
i18n.init(i18nOpts).done(function() {
$("html").i18n();
});

jQuery Mobile widgets are auto-initialized (Markup enhancement) on two events, pagebeforecreate and pagecreate. The majority of widgets are initialized once pagecreate occurs.
All you need is to wrap i18n code in pagebeforecreate.
$(document).on("pagebeforecreate", function () {
// code
});
Demo

Popup using knockout js

i'm migrating one of my older jquery plugins from DOM jungle to this fancy mvvm framework knockout.
Which technique would i use to properly display a popup container? I ahve to populate it 'by call' since i get a json feed every time.
I tried an approach using the with binding, but it still attempts to populate the partial at its first runtime.
<!-- ko with: daySubmitFormViewModel -->
<div class="ec-consulation-lightbox">
<form id="cForm" class="form-container">
// Some bindings here.
</form>
</div>
<!-- /ko with: -->

It can be done without custom binding as well. Example is below
<div class="modalWindowBackground" data-bind="visible: popupDialog" >
<div class="modalWindow" data-bind="with:popupDialog">
<div class="content">
<h2 data-bind="text: title"></h2>
<p>
<span data-bind="text: message"></span>
</p>
<div class="buttonSpace">
<input type="button" class="closeButton" data-bind="value: closeButtonText, click: $root.hidePopupDialog" />
</div>
</div>
</div>
</div>
Viewmodel code:
self.showAlert = function (title, message, closeButtonText) {
self.popupDialog({ title: title, message: message, closeButtonText: closeButtonText });
};
self.hidePopupDialog = function () {
self.popupDialog(null);
};
//Code which opens a popup
self.remove = function () {
.... some code ...
if (someCondition) {
self.showAlert('SomeTitle', 'Message', 'OK');
return;
}
.... some code ...
};

Create a custom binding, have its open / close function trigger on a observable.
I've done a custom binding for jQuery Dialog that uses this approuch in combination with KO
templates.
<div id="dialog" data-bind="dialog: { autoOpen: false, modal: true, title: dialogTitle }, template: { name: 'dialog-template', data: dialogItem, 'if': dialogItem }, openDialog: dialogItem"></div>
You can find my binding here along with some others
https://github.com/AndersMalmgren/Knockout.Bindings
Live demo http://jsfiddle.net/H8xWY/102/

https://github.com/One-com/knockout-popupTemplate
That pretty much does what you ask for. It's deeply configurable, and under steady development (we use it in our web applications ourselves).
Disclaimer: I'm a One.com developer. I am also the person who originated the above mentioned lib.

How do you specify the primary and secondary actions for a Bootstrap modal window?

I'm using Twitter's Bootstrap modal functionality. When someone clicks submit on my form, I'm testing to see if they have checked any of the available options:
$('form').submit(function(event) {
var $target = $('.column').find(':checkbox');
if( !$target.is(':checked') ){ // if none of the sub-options are checked
event.preventDefault();
$('#my-modal').modal({
show: 'true',
backdrop: 'true',
keyboard: 'true'
});
}
});
... and showing the modal window if they haven't. I'd then like the 'primary' button on the modal to continue with the form submit, and the secondary button to simply close the modal window.
I'm sure this should be fairly trivial to accomplish, but my current knowledge of jQuery is only at the copy/paste level, and the documentation doesn't give an example of how to do this.
I've set up a jsFiddle of what I have here - thanks.
EDIT - I've added below some code (it feels a bit hacky) that will close the modal window when the secondary button is clicked. Still not sure how to give the form the go ahead when the primary button is clicked:
$('#my-modal .secondary').click(function() {
$('#my-modal').modal({
show: 'false'
});
});
The question now comes down to: 'is there a simple way to tell the form "okay, carry on" once the primary button is clicked?'

Well, the problem is that right now Bootstrap does not have any proper callbacks for their action buttons. Therefore, you have to do this in a roundabout way and create your own. Hope this helps!
Here's a JS fiddle showing it work: http://jsfiddle.net/iwasrobbed/rYLWz/3/
And here is the code:
HTML File
<form>
<ul class="inputs-list">
<li>
<label>
<input type="checkbox" name="optionsCheckboxes" value="option1" />
<span>Option 1</span>
</label>
</li>
<li>
<label>
<input type="checkbox" name="optionsCheckboxes" value="option2" />
<span>Option 2</span>
</label>
</li>
</ul>
<div class="actions">
Save changes »
<!-- Hide the real submit button /-->
<input type="submit" class="hidden">
</div>
</form>
<div id="my-modal" class="modal hide fade">
<div class="modal-header">
×
<h3>Are you sure?</h3>
</div>
<div class="modal-body">
<p>You haven’t selected any options.</p>
</div>
<div class="modal-footer">
Okay »
Go back
</div>
</div> <!-- /modal -->
JS File
$(document).ready(function() {
// Verify if checkboxes were checked.
// If they weren't, show a modal
$('a.save-button').click(function() {
if ($("input:checked").length === 0) {
$('#my-modal').modal({
show: 'true',
backdrop: 'true',
keyboard: 'true'
});
} else {
$('form').submit();
}
// prevent click jump
return false;
});
// Let's attach a listener on form submission
$('form').submit(function() {
alert('We submitted the form!');
});
// Hide modal if "Go back" is pressed
$('#my-modal .go-back-button').click(function() {
$('#my-modal').modal('hide');
alert('We went back to the form');
});
// Hide modal if "Okay" is pressed
$('#my-modal .okay-button').click(function() {
$('#my-modal').modal('hide');
$('form').submit();
});
});
I added a little CSS as well:
ul.inputs-list li {
margin-left: 10px;
}
.hidden {
display: none
}