bootstrap not rendering with jquery dynamically created elements - javascript

The below code loads a json file into my app in order to to populate some table data. It gets the job done.
function init_main () {
$('html').hide().fadeIn('slow');
// popuate from index.json
var json = $.getJSON(chrome.extension.getURL('js/index.json'), function(json) {
// CREATE SETTINGS TABLE WITH GIVEN INDEX
for (var property in json) {
var table = $('<table></table>').addClass('table');
var header = $('<thead></thead>').addClass('thead-inverse');
var head_r = $('<tr></tr>');
var h1 = $('<th></th>').text(property);
var h2 = $('<th></th>').text('check to remove: ');
head_r.append(h1);
head_r.append(h2);
header.append(head_r);
table.append(header);
var body = $('<tbody></tbody>');
table.append(body);
for (var tag in json[property]) {
var body_r = $('<tr></tr>');
var d1 = $('<td></td>').text(tag);
var d2 = $('<td></td>') // maybe change to class?
$('<input />', { type: 'checkbox', id: tag}).appendTo(d2);
body_r.append(d1);
body_r.append(d2);
body.append(body_r);
}
$('#tableWrap').append(table);
}
});
}
//bind events to dom elements
document.addEventListener('DOMContentLoaded', init_main);
However, unlike the rest of my html markup, only these elements will not use the bootstrap library to alter my CSS. All other html markup successfully uses the bootstrap library.
I have tried moving the code outside of the callback with no luck. No errors in console.
Does anyone have any idea why bootstrap wont come into effect during the above code snippet? I think it has something to do with page load but so far I have not seen any success with window.onPageLoad()
Here are my script imports in my html for reference:
<html>
<head>
<!-- load stylesheets: Bootstrap v2.3.0 - http://twitter.github.com/bootstrap/index.html -->
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"></link>
<!-- load javascript: jQuery 1.9.1 - http://jquery.com/ -->
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<!-- load javascript: Bootstrap v2.3.0 - http://twitter.github.com/bootstrap/ -->
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<!-- load stylesheets: internal -->
<link rel="stylesheet" type="text/css" href="../css/global.css"></link>
<link rel="stylesheet" type="text/css" href="../css/main.css"></link>
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<a id="home" id="active" class="brand" href="#">
<!-- UNCOMMENT THE CSS VALUES TO TEST OTHER DIMENTIONS -->
<img src="../images/icon.png" alt="">
<span class="icon-bar"></span>
Fluff 1.0
</a>
<a id="settings" class ="brand" href="#" >
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
Settings</a>
<a id="run" class ="brand" href="#" >
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
Run</a>
</div>
</div>
<div id="outer">
<!-- Main Page -->
<div id="main-inner">
<div id="main-title"> Fluff 1.0 </div>
<div id="textblock">Donate or contact block here</div>
</div>
<!-- Settings Page -->
<div id="settings-inner">
<h5 id="directions"> <span></span> Select Tags to Remove from Automated Browser Queries </h5>
<div id="tableWrap">
</div>
</div>
<!-- Run Page -->
<div id="run-inner">
<table class='table'>
<thead>
<tr>
<td> 1 </td>
<td> 2</td>
</tr>
</thead>
</table>
</div>
</div>
<!-- load javascript: unique html page javascript file -->
<script type="text/javascript" src="../js/main.js"></script>
</body>
edit: sample.json - 'num' key is not relevant in any of the question or code
{
"sex": {
"M":{
"num":13,
},
"F": {
"num":13,
},
"T": {
"num":0
}
},
"politics": {
"L": {
"num":10,
},
"R": {
"num":10,
}
},
"race": {
"AMI":{
"num":6,
},
"ASI":{
"num":7,
},
"AFA":{
"num":7,
},
"PCI":{
"num":0
},
"WHT":{
"num":2,
"3":"-"
},
"HSP":{
"num":5,
"6":"-"
},
"MDE":{
"num":6,
}
},
"orientation": {
"STR": {
"num":0
},
"GAY": {
"num":0
},
"OTH": {
"num":0
}
},
"interests": {
"GARD":{
"num":4,
},
"NHL":{
"num":1,
},
"NBA":{
"num":1,
},
"TECH":{
"num":0
}
}
}

I don't understand your problem exactly, but I put your sample in jsfiddle by removing some unuseful html file to make it simple to read and this works. Only code which is wrong is var json = $.getJSON. Why you do it? however you have not any returned value at all and if it was it never works in async functions like get.
The second problem is that you never call your function!!
See this code and share your idea with me:
jsfiddle

Solved by changing div id='tableWrap' to table id='tableWrap' in html
Tables inside of tables ...

Related

Property or method "navlink" is not defined on the instance but referenced during render - Vue.js

I'm having some problem with vue.js
I'm learning how to create components and I'm making some components that I want to use for a wordpress theme. I'm using the REST API to get the contents and pass the response data from axios to the UI managed by vue and vue coponents. I'm getting always this error:
Property or method "navlink" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property
This happen after I've created a new component for the nav menu, I think the code is correct but any help will be appreciated. I have the home.php file that will be used for the homepage as a template using Template Name: on top of the file and inside the header.php file I've removed the old menu and I've placed a vue template. I will do the same for the footer, but how I can fix errors that are caused by widgets or wordpress generated inline scripts? How I can fix my error ?
// this is the code of header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="container-fluid p-0" id="theme-vue">
<theme-nav v-for="nav in navData" :navlink="nav.post_title"></theme-nav>
<script type="text/x-template" id="theme-nav">
<nav class="navbar navbar-expand-md fixed-top main-nav">
<button class="navbar-toggler hamburger hamburger--spin" type="button" data-toggle="collapse" data-target="#navbar-content" aria-controls="navbar-content" aria-expand="false" aria-label="<?php _e('Toggle Navigation'); ?>">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<a class="navbar-brand ml-auto" href="#">
<img src="" width="auto" height="75">
</a>
<div class="collapse navbar-collapse navbar-content" id="navbar-content">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link top" href="#">{{ navlink }}</a>
</li>
</ul>
</div>
</nav>
</script>
// this is the code of home.php
<?php /* Template Name: Homepage */ ?>
<?php get_header(); ?>
<uptheme-cover v-for="post in postData" :title="post.title.rendered" :src="post._embedded['wp:featuredmedia'][0].source_url"></uptheme-cover>
<script type="text/x-template" id="uptheme-cover">
<div class="row container-cover p-0" style="height:100vh;">
<div class="parallax" :data-parallax-image="src"></div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 p-4">
<h1>{{ title }}</h1>
</div>
</div>
<div class="overlay"></div>
</div>
</script>
<?php //get_footer(); ?>
// this is the footer, it will cause error in vue because of the google map iframe footer widget and wordpress footer scripts
<?php wp_footer(); ?>
<div class="row p-0 footer">
<?php if( is_active_sidebar('footer-map') ): ?>
<?php dynamic_sidebar('footer-map'); ?>
<?php endif; ?>
<div class="col-sm-12 col-md-12 col-lg-12 p-0 text-center credits-col">
<small><?php _e('Powered by '); ?><a class="" href=""><?php _e('UpAdv')?></a></small>
</div>
</div>
</div>
// this code is placed inside the main.js file of my theme
Vue.component('theme-nav',{
template: '#theme-nav',
props: {
//navId: Number
navlink: String,
}
});
Vue.component('theme-cover',{
template: '#theme-cover',
props: {
title: String,
src: String
}
});
const app = new Vue({
el: '#theme-vue',
data: {
postData: [],
navData: []
},
mounted: function(){
this.getMenu();
this.getIndex();
},
created: function(){
this.initParallax();
},
methods: {
initParallax: function(){
const parallax = new universalParallax();
},
getMenu: function(){
// this line didn't work, I need to get the custom logo but I don't know how with REST API?
axios.get('wp-json/theme/v1/logo').then( (response) => {
console.log(response);
});
axios.get('wp-json/theme/v1/menu').then( (response) => {
console.log(response);
response.data.forEach( (item, i) => {
this.navData.push(item);
});
});
},
getIndex: function(){
axios.get('wp-json/wp/v2/pages/?slug=home&_embed').then( (res) => {
console.log(res.data);
res.data.forEach( (item, i) => {
this.postData.push(item);
console.log(item._embedded['wp:featuredmedia'][0].source_url);
});
});
}
}
});
Try adding the navlink under data like
data: {
postData: [],
navData: [],
navlink:''
}

Chrome plugin saving checkboxes failing options page

I can't safe checkbox data with chrome.storage.sync for my options page in my new chrome plug-in. I have tried many ways to get this able to work; this is my most current one. I'm totally lost. Thanks in advance:
$(document).ready(function () {
var storage = chrome.storage.sync;
function load_options() {
//Retrieve existing settings
$("input[type=checkbox]").each(function() {
$(this).prop('checked', function() {
var name = $(this).parent().next().html();
storage.get(name, function(items){
element.checked = items[name];
});
});
});
}
function saveSettings() {
var checkboxes = $("input[type=checkbox]");
var items = {};
checkboxes.each(function (){
var name = $(this).parent().next().html();
items[name] = this.checked;
});
storage.set(items, function() {
console.log("saved");
});
}
//Factory settings pages class, load dynamic html
function SettingsPageFactory(menuitem) {
this.settingsFactoryItems = {
Posts: 'settings/posts.html',
Sidebar: 'settings/sidebar.html',
General: 'settings/general.html',
Privacy: 'settings/privacy.html'
};
this.keys = [];
for (var key in this.settingsFactoryItems) {
this.keys.push(key);
}
this.createSettingsPage = function () {
var key = menuitem.find("a").html();
currentPage = key;
if ($.inArray(this.keys, key)) {
$("#page-content-wrapper").html("");
var url = chrome.runtime.getURL(this.settingsFactoryItems[key]);
return url;
}
}
}
$("#wrapper").on("click", "a#safeman.btn.btn-info", function () {
saveSettings();
});
$(".menuitem").on("click", function () {
var settingsPageFactory = new SettingsPageFactory($(this));
var url = settingsPageFactory.createSettingsPage();
$("#page-content-wrapper").load(url + " .container-fluid");
load_options();
return false;
});
The desired behaviour is just an options page with different pages which are loaded asynchronously. These contain checkboxes which kind of look like switches. When a switch is turned on or off this must be saved using the above API. Dynamical pages are all included in this main page:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, shrink-to-fit=no, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Faceblock - Settings Page</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Switch checkbox -->
<link href="css/switchbox.css" rel="stylesheet" />
<!-- Custom CSS -->
<link href="css/simple-sidebar.css" rel="stylesheet">
<link href="css/options.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<!-- Sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="options.html" style="text-align:center;margin-left:-30px;">
Settings
</a>
</li>
<li class="menuitem">
<span class="glyphicon glyphicon-download-alt"></span>Posts
</li>
<li class="menuitem">
<span class="glyphicon glyphicon-indent-right"></span>
Sidebar
</li>
<li class="menuitem"><span class="glyphicon glyphicon-eye-close"></span>
Privacy
</li>
<li class="menuitem">
<span class="glyphicon glyphicon-check"></span>
General
</li>
<li class="menuitem">
<span class="glyphicon glyphicon-eur"></span>
Donate
</li>
<li class="menuitem">
<span class="glyphicon glyphicon-cog"></span>
Settings
</li>
</ul>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row content">
<div class="col-lg-12">
Toggle Menu
<h2>Faceblock Settings Page</h2>
<p>Faceblock is a Chrome extension which filters all annoying adds on Facebook. It also gives you control over which content you would like to show or hide, and makes sure your privacy is kept secret to big companies.</p>
<p>If you like our Chrome plugin, feel free to donate a small fee in order to keep future changes and features coming. <code>Choose a category from the right sidebar and start configuring Facebook according to your needs!</code></p>
</div>
</div>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<div id="dependencies" />
<script src="js/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script src="js/background.js"></script>
<script src="js/options.js"></script>
</div>
<!-- /#wrapper -->
</body>
</html>
An example of a dynamically loaded page is found here:
<div class="container-fluid">
<div class="row content">
<div class="col-lg-12">
Toggle Menu
<div class="container">
<div class="col-lg-1 col-centered">
</div>
<h2>privacy</h2>
</div>
<p>Facebook stores unwanted data in the form of cookies and other ways to show you unwanted data you might like.<code>At this page you can tell Facebook to not store your private information and to not sell it to its third-party apps.</code></p>
<div class="container">
<div class="col-lg-1 col-centered">
<label class="switch ">
<input type="checkbox" checked>
<div class="slider round"></div>
</label>
<div class="lable">Disable cookies Facebook</div>
</div>
</div>
</div>
</div>
</div>
My manifest.json looks like this:
{
"name": "FaceBlock",
"description": "This extention gets rid of unwanted content on Facebook like sponsored posts, adds or annoying suggestions. The content you wish to see is enlarged for a better and richer social experience.",
"version": "0.0.1",
"manifest_version": 2,
"content_scripts": [
{
"matches": [
"http://*.facebook.com/*", "https://*.facebook.com/*", "<all_urls>"],
"css": ["css/popup.css"],
"js": ["js/jquery.min.js", "js/content.js",
"js/options.js",
"js/background.js"],
"run_at": "document_end",
"all_frames": true
}],
"options_page": "options.html",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html",
"default_title": "Faceblock"
},
"permissions": [
"activeTab",
"tabs",
"https://www.facebook.com/*",
"https://ajax.googleapis.com/",
"storage",
"<all_urls>"
],
"background": {
"scripts": ["js/background.js", "js/options.js"],
"persistent": true
},
"options_ui": {
// Required.
"page": "options.html",
// Recommended.
"chrome_style": true
// Not recommended; only provided for backwards compatibility,
// and will be unsupported in a future version of Chrome (TBD).
//"open_in_tab": true
},
"web_accessible_resources": [
"images/faceblock.jpg",
"images/seigaiha.png",
"js/popup.js",
"icon.png",
"js/options.js",
"css/popup.css",
"popup.html",
"options.html",
"background.html",
"js/background.js"
]
}
As pointed out below, something might go wrong in my load_options()
The problem lied in the saving and retrieving of the persisted data. The solution is the following:
SaveSettings
function saveSettings() {
var checkboxes = $("input[type=checkbox]");
var items = {};
checkboxes.each(function (){
var name = $(this).parent().next().html();
items[name] = this.checked;
storage.set(items, function() {
console.log("saved a checkbox");
});
});
}
I converted some code to jQuery and made sure a checkbox was added per name to the items object and then persisted.
The second fault was a bit more complicated for me. Since I loaded my content asynchronously before loading the checkboxes on which I could load my persisted content, it was important for me to load the content first via a callback.
$("#page-content-wrapper").load(url + " .container-fluid", load_options);
The rest was simple, I changed javascript from the internet example into jQuery and made sure I retrieved the name of each checkbox which I then compared to the items being stored. The solution below could use some error handling though.
function load_options() {
//Retrieve existing settings
console.log($("input[type=checkbox]").length);
$("input[type=checkbox]").each(function() {
var checkbox = $(this);
var name = checkbox.parent().next().html();
storage.get(name, function(items){
console.log(items);
checkbox.prop('checked', items[name]);
});
});
}

How to Print the Particular bootstrap Div

I would like to print a bootstrap div.
It is properly displayed in web browser but when I click on the print button then at print preview, the elements are floating and are not properly displayed.
what should I do to solve this problem ?
Div which I want to print with following this style
What I get the output at printing time which I dont want see on school name at the top
Button which call the print function:
<button class="btn btn-default" onclick="printDiv('printableArea')"><i class="fa fa-print" aria-hidden="true" style=" font-size: 17px;"> Print</i></button>
Print Function:
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
Div which i Want to print
<div class="container right-container col-md-6" id="printableArea" style="display:block;">
<span id="link7">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h3 id="school_title"><?php echo "$school_name";?> </h3>
<p><p>
<p style="font-size: 1.1em;" id="exam_title">Annual Examination [ 2015-2016 ] <p>
<div class="row">
<div class="col-md-4">
<div class="header-time-date-marks">
<span id="exam_time">Time: 12 AM - 2 PM</span>
<span id="exam_date">Date: 30/12/2016</span>
</div>
</div>
<div class="col-md-8 header-time-date-marks" style="text-align: right;padding-right: 36px;">
<span id="exam_marks">100 Marks</span>
</div>
</div>
</div>
</div>
<hr / id="line" style="margin-top: 13px;">
<div class="row q-question-type-style" id='question_section'>
</div>
</span>
</div>
Check this solution: It is working. The <div> is able to display for print.
Place your <script>-tag above the <html>-tag:
<script>
<html>
https://jsfiddle.net/6cz5br7m/
It's working, just try it on your Editor.
<!-- Your Jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- Another Jquery version, which will be compatible with PrintThis.js -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<!-- CDN/Reference To the pluggin PrintThis.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/printThis/1.15.0/printThis.js"
integrity="sha512-Fd3EQng6gZYBGzHbKd52pV76dXZZravPY7lxfg01nPx5mdekqS8kX4o1NfTtWiHqQyKhEGaReSf4BrtfKc+D5w=="
crossorigin="anonymous"></script>
<script type="text/javascript">
// important : to avoid conflict between the two version of Jquery
var j = jQuery.noConflict(true);
// define a function that you can call as an EventListener or whatever you want ...
function Print_Specific_Element() {
// the element's id must be unique ..
// you can't print multiple element, but can put them all in one div and give it an id, then you will be able to print them !
// use the 'j' alias to call PrintThis, with its compatible version of jquery
j('#specificElement').printThis({
importCSS: true, // to import the page css
importStyle: true, // to import <style>css here will be imported !</style> the stylesheets (bootstrap included !)
loadCSS: true, // to import style="The css writed Here will be imported !"
canvas: true // only if you Have image/Charts ...
});
}
$("#printBtn").click(Print_Specific_Element);
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- It's very important to include the attribute : media='all'-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" media='all'
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style>
#media print {
#page {
/* To give the user the possibility to choise between landscape and portrait printing format */
size: auto;
/* setting custom margin, so the date and the url can be displayed */
margin: 40px 10px 35px;
}
/* Here you can give a custom styling which will be applied only while printing */
a,
button#printBtn {
display: none;
}
}
</style>
</head>
<body>
<div class="container" id="Page">
<div>
this Element will not be printed
</div>
<div id="specificElement" class="bg-primary m-2 p-2 text-center rounded" style="border: 2px solid black;">
<div class="jumbotron">
<h1 class="display-3">
My custom content which I want to print
</h1>
<p class="lead">Another element</p>
<hr class="my-2">
<p>Nothing ... just another element </p>
<button id="printBtn" class="btn btn-success btn-sm shadow">
CLick Me !
<br>
(Dont worry I will not be printed)
</button>
</div>
</div>
</div>
</body>
</html>
Call this function: PrintElem('printableArea')
function PrintElem(elem){
var mywindow = window.open('', 'PRINT', 'height=400,width=600');
var css = "";
var myStylesLocation = "${pageContext.request.contextPath}/ui/css/bootstrap.min.css";
$.ajax({
url: myStylesLocation,
type: "POST",
async: false
}).done(function(data){
css += data;
})
mywindow.document.write('<html><head><title></title>');
mywindow.document.write('<style type="text/css">'+css+' </style>');
// mywindow.document.write('<link rel="stylesheet" href="${pageContext.request.contextPath}/ui/css/bootstrap.min.css" type="text/css" media="print"/>');
mywindow.document.write('</head><body >');
mywindow.document.write('<h1>' + document.title + '</h1>');
mywindow.document.write(document.getElementById(elem).innerHTML);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();
return true;
}
You can try #media print in css.
Like bellow
In css
#media print
{
p.bodyText {font-family:georgia, times, serif;}
.noprint
{
display:none
}
}
In Html
<div class="noprint">
I dont want it on print
</div>
<br><br>
<div>
Prrintable Area
</div>
Fiddle
I was able to look for the section that was undesirably appearing in the print of the modal, and just hiding it, while using your print function:
print() {
let mainLayout = document.querySelector('app-main-layout') as HTMLDivElement;
mainLayout.style.display = 'none';
window.print();
mainLayout.style.display = 'unset';
}
And, make the buttons of my modal go away, by using this css:
#media print {
button.close {display:none !important;}
}
you just need to link your js script properly
<!DOCTYPE html>
<html>
<body>
<div class="container right-container col-md-6" id="printableArea" style="display:block;">
<span id="link7">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h3 id="school_title"><?php echo "$school_name";?> </h3>
<p><p>
<p style="font-size: 1.1em;" id="exam_title">Annual Examination [ 2015-2016 ] <p>
<div class="row">
<div class="col-md-4">
<div class="header-time-date-marks">
<span id="exam_time">Time: 12 AM - 2 PM</span>
<span id="exam_date">Date: 30/12/2016</span>
</div>
</div>
<div class="col-md-8 header-time-date-marks" style="text-align: right;padding-right: 36px;">
<span id="exam_marks">100 Marks</span>
</div>
</div>
</div>
</div>
<hr / id="line" style="margin-top: 13px;">
<div class="row q-question-type-style" id='question_section'>
</div>
</span>
</div>
<div> <h1>
asdads
</h1>
</div>
<button class="btn btn-default" onclick="printDiv('printableArea')"><i class="fa fa-print" aria-hidden="true" style=" font-size: 17px;"> Print</i></button>
<script>
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
</body>
</html>

Changing bootstrap dropdown button's text using an angular.js directive

I am working on an application and before getting too deep I wanted to do a test. I have a button created using Bootstrap. I have the Bootstrap angular directives installed. I wanted to change the text of the button based upon the selection the user makes on that button. Here is my code:
the Index.html file:
<!doctype html>
<html ng-app="SchedgMeApp">
<head>
<!--<script src="js/angular.min.js"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="js/ui-bootstrap-custom-tpls-0.12.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/app.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DropdownCtrl">
<!-- Single button -->
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
<span class="selection">{{ selectedAction.name }}</selection> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="action in actions">
<a ng-click="setAction(action)">{{ action.name }}</a>
</li>
</ul>
</div>
</div>
</body>
</html>
The app.js file:
var app = angular.module('SchedgMeApp',['ui.bootstrap']);
angular.module('SchedgMeApp').controller('DropdownCtrl', function($scope, $log){
$scope.status = {
isopen: false
};
$scope.toggled = function(open) {
$log.log('Dropdown is now: ', open);
};
$scope.toggleDropdown = function($event) {
$event.preventDefault();
$event.stopProagation();
$scope.status.isopen = !$scope.status.isopen;
};
$scope.actions = [
{id: 'calbert', name: 'Chris Albert'},
{id: 'mmahony', name: 'Mike Mahony'},
{id: 'ctfletcher', name: 'CT Fletcher'},
{id: 'rjohnson', name: 'Rob Johnson'}
];
$scope.setAction = function(action) {
$scope.selectedAction = action;
};
});
This works, but the code to change the text on the button is in the controller and I would prefer it in a directive because I would like to be able to populate the data for every dropdown button in my site this way and have every dropdown button in my site respond in the same manner. So here are my questions:
How do I do this through an angular directive?
How can I set a default value on initial load? <-- solved...see comment
How can I make this so that I have data for all the buttons in my JS, but can pick which data to use on a particular button? I assume a model? <--solved...see comment

Fancytree not visible has class ui-helper-hidden

I have just started with fancytree 2.6.0 and I am populating it from a web service request.
My problem is that all the nodes are present but are made invisible by the ui-helper-hidden class. I have put in a temporary fix with: $(rootNode.ul).removeClass('ui-helper-hidden'); but I am sure I am missing something.
The scripts and css:
<link href="Scripts/jquery-plugins/fancytree-2.6.0/src/skin-themeroller/ui.fancytree.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.11.1/jquery-1.11.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.11.1/jquery-migrate-1.2.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui-1.11.2/jquery-ui.js" type="text/javascript"></script>
<script src="Scripts/jquery-plugins/fancytree-2.6.0/src/jquery.fancytree.js" type="text/javascript"> </script>
<script src="Scripts/jquery-plugins/fancytree-2.6.0/src/jquery.fancytree.themeroller.js" type="text/javascript"> </script>
The code:
$('#selectedClausesDiv').fancytree();
$.when(
$.getJSON("Handlers/GetQuotationHandler.ashx?jsoncallback=?", { quoteReference: quoteReference, quoteVersion: quoteVersion })
).then(function (data) {
if (data.ErrorCode == 0 && data.Quotation != null) {
var rootNode = $("#selectedClausesDiv").fancytree("getRootNode");
$.each(data.Quotation.Covers, function (index, item) {
addCover(rootNode, item);
});
// FIXME: why is this necessary ??
// $(rootNode.ul).removeClass('ui-helper-hidden');
}
});
function addCover(rootNode, cover) {
var coverId = 'selected_' + cover.BusinessClassId + '_' + cover.CoverId;
var coverNode = rootNode.addChildren({
title: cover.Name,
tooltip: "This folder and all child nodes were added programmatically.",
folder: true
});
}
The generated html:
<div class="grid_13 alpha omega" id="selectedClausesDiv">
<ul class="ui-fancytree fancytree-container ui-fancytree-source ui-helper-hidden" tabindex="0">
<li class="">
<span class="fancytree-node fancytree-folder fancytree-exp-n fancytree-ico-cf">
<span class="fancytree-expander"/>
<span class="fancytree-icon"/>
<span title="This folder and all child nodes were added programmatically." class="fancytree-title">P&I Owned</span>
</span>
</li>
<li class="fancytree-lastsib">
<span class="fancytree-node fancytree-folder fancytree-lastsib fancytree-exp-nl fancytree-ico-cf">
<span class="fancytree-expander"/>
<span class="fancytree-icon"/>
<span title="This folder and all child nodes were added programmatically." class="fancytree-title">P&I Extended Cargo</span>
</span>
</li>
</ul>
</div>
Fancytree will automatically hide the root element if no data source is provided.
If you are adding data using the API and no initial source, providing a blank source option will prevent Fancytree from hiding the root element.
$("#tree").fancytree({
source: []
});

Categories