Bootstrap tooltip for dynamically changing content - javascript

I use Bootstrap tooltips to create beautiful HTML tooltips for items. I basically have a skill image in the form of a .png image
<img id="skill" src="ice-bolt-inactive.png" data-toggle="tooltip" data-html="true" title="" />
i define the image into a variable
let skillImage = document.getElementById('skill');
then i initiate the tooltip like this:
skillImage.title = '<p class="skill-title">' + iceBolt.name + '</p><p class="skill-text">' + iceBolt.description + '</p><p class="skill-text">' + iceBolt.setLevel() + '</p><p class="skill-text">' + iceBolt.setDamage() + '</p><p class="skill-text">' + iceBolt.setDuration() + '</p><p class="skill-text">' + iceBolt.setManaCost() + '</p><p class="skill-title">' + iceBolt.name + ' Receives Bonuses From: </p><p> ' + iceBolt.description + '</p>';
Now when i click on the skill image, i fire up an onclick function which increments the iceBolt.level++; . This successfully does that ( i also log the iceBolt.level into the console so i confirm it's changing) but the bootstrap tooltip remains unchanged (doesn't reflect the iceBolt.level, even though i've set it up to display it)
Is my usage of the bootstrap tooltip bad or is it that the bootstrap tooltips won't handle something like this. I want to use them as they are responsive and easy to use.

UPDATE:
Code snipper shared, will help you update your tooltip title whenever some particular event occurs in your application.
The idea is: Setting my title dynamically using a function call which returns the updated data.
$("#skill").tooltip({
placement: "right",
title: userDetails, // userDetail() is a function which will return our updated data
html: true,
});
Function will look something like;
// Get user details for tooltip
function userDetails() {
return tooltipText;
}
The event handler in which we update the content of tooltip.
document.querySelector("button").addEventListener("click", () => {
tooltipText += "Add"; // Updating my data
userDetails();// Sending updated Title
})
FULL CODE:
$(document).ready(function () {
// Add tooltip
$("#skill").tooltip({
placement: "right",
title: userDetails,
html: true,
});
});
var tooltipText = "Hello";
// Get user details for tooltip
function userDetails() {
return tooltipText;
}
document.querySelector("button").addEventListener("click", () => {
tooltipText += "Add";
userDetails();
});
<html lang="en">
<head>
<title>Dashboard</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<img
id="skill"
class="skill"
src="https://picsum.photos/100"
data-toggle="tooltip"
data-html="true"
data-selector="true"
alt="skill image"
/>
<p id="ice-bolt-level"></p>
<button>Click Me</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
YOU CAN USE THE SAME LOGIC TO PROCEED FORWARD IN YOU APPLICATION.

For anyone who is looking in the future. This solution is for Bootstrap - 5, using JQuery and Javascript.
Init the Tooltip
var tootTipTitleText = 'True or False';
$(document).ready(function () {
//Enable ToolTip
$('[data-bs-toggle="tooltip"]').tooltip(
{
title: tootTipTitleText,
html: true,
}
);
});
Remove the Previous Tooltip on Button Click
$('[data-bs-toggle="tooltip"]').tooltip("dispose");
Get the value to check.
if(checkBoxValue == true) {
tootTipTitleText = 'true';
} else {
tootTipTitleText = 'false';
}
Init another tooltip
$('[data-bs-toggle="tooltip"]').tooltip(
{
title: tootTipTitleText,
html: true,
}
);
Display The Tooltip
$('[data-bs-toggle="tooltip"]').tooltip("show");
Sample HTML and JS Function
function changeToolTipTitle()
{
$('[data-bs-toggle="tooltip"]').tooltip("dispose");
var checkBoxValue = $("#toolTipCheckBox").is(":checked");
if(checkBoxValue == true)
{
//title="Checked or Unchecked"
tootTipTitleText = 'Checked';
}
else
{
tootTipTitleText = 'Unchecked';
}
$('[data-bs-toggle="tooltip"]').tooltip(
{
title: tootTipTitleText,
html: true,
}
);
$('[data-bs-toggle="tooltip"]').tooltip("show");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div id="toolTipCheckBoxDiv" class="form-check inputCheckBox" data-bs-toggle="tooltip" title="">
<input class="form-check-input" type="checkbox" id="toolTipCheckBox" value="true" onchange="changeToolTipTitle();" />
<label class="form-label" for="toolTipCheckBox">Check</label>
</div>

Related

How to insert buttons in popover

I am trying to insert html attribute buttons into popover in bootstrap5 by JavaScript.
I am trying to make a clear button with this function below:
But button is not showing. Only text inside the popover.
popStr = popStr + "</div> <a href='/shop/checkout'><button class='btn btn-primary' id='checkout'>Check out</button></a> <button class='btn btn-primary' onclick='clearCArt()' id='clearcart'>Clear cart</button>"
console.log(popStr);
document.querySelector('[data-id="popcart"]').setAttribute('data-bs-content', popStr);
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-id="popcart"]'))
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl,
{
html: true
})
});
function clearCart() {
cart = JSON.parse(localStorage.getItem('cart'));
for (var item in cart) {
document.getElementById('div' + item).innerHTML = '<button id="' + item + '"class="btn btn-primary cart">Add To Cart</button>'
}
localStorage.clear();
cart = {};
updateCart(cart);
}
You can try using anchor tag instead of a button.
var popover = new bootstrap.Popover(document.querySelector('.my-popover'), {
container: 'body',
placement : 'auto',
html : true,
title : 'Your Selected Items',
content : '<div class="p-1"><ol><li>Item</li><li>Item</li><li>Item</li><ol></br> Check Out Clear Cart</div>'
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<button type="button" class="btn btn-primary my-popover" data-bs-toggle="popover">Click Me</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Update for the buttons to work
Firstly i changed popover content
Old version :
content : '<div class="p-1"><ol><li>Item</li><li>Item</li><li>Item</li><ol></br> Check Out Clear Cart</div>'
New version :
I changed anchor href="#" to href="javascript:void(0)" prevent to redirect another place or page.
content : '<div class="p-1"><ol><li>Item</li><li>Item</li><li>Item</li><ol></br> Check Out Clear Cart</div>'
And then i tested. I can catch buttons (anchor) only when popover shown popover._element returns to popover button.
document.addEventListener("DOMContentLoaded", function(event) {
popover._element.addEventListener('shown.bs.popover', function () {
var btn = document.getElementById('checkOut');
btn.onclick = function() { clearCart() };
})
});
I'm guessing that for security reasons. Bootstrap doesn't let for button. but we can set function as above
Complete snippet
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<button type="button" class="btn btn-primary my-popover" data-bs-toggle="popover">Click Me</button>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
<script>
var popover = new bootstrap.Popover(document.querySelector('.my-popover'), {
container: 'body',
placement : 'auto',
html : true,
title : 'Your Selected Items',
content : '<div class="p-1"><ol><li>Item</li><li>Item</li><li>Item</li><ol></br> Check Out Clear Cart</div>'
})
document.addEventListener("DOMContentLoaded", function(event) {
popover._element.addEventListener('shown.bs.popover', function () {
var btn = document.getElementById('checkOut');
btn.onclick = function() { clearCart() };
})
});
function clearCart(){
console.log('Array cleared');
}
</script>
</body>
</html>

Bootstrap tooltip is not visible using javascript

I am new to Bootstrap. I am using bootstrap range slider and javascript in my program. Inspite of using following, I am not able to see tooltip of slider:
<input id = "cheapHFSlider" type="range" data-slider-min="0" data-slider-max="100" data-slider-step="1"
data-slider-tooltip="show" onchange="sliderChanged(this)">
<label id = "cheapHFSliderVal">
When I hover my cursor over that slider in Chrome's debugging mode, I can see that 'tooltip tooltip-main top' is being highlighted in Elements tab of debugger. Attaching the screen shot of above.
Related CSS and JS are:
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<!-- Bootstrap slider CSS -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/css/bootstrap-slider.css">
<!-- Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<!-- Bootstrap slider JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.8.1/bootstrap-slider.js"></script>
My script tag is:
<script type="text/javascript">
$(document).ready(function() {
$("#cheapHFSlider").slider().on('slide', function(_event) {
$("#cheapHFSliderVal").html(_event.value + "%");
});
$("#cheapHFSliderVal").html($("#cheapHFSlider").slider('getValue') + "%"); // set the initial value of slider in label
})
function sliderChanged(slider) {
switch(slider.id) {
case 'cheapHFSlider':
$("#cheapHFSliderVal").html(slider.value + "%");
break;
default:
console.log("Invalid slider '" + slider.id + "' !");
}
}
</script>
Please let me know where I am going wrong

Nothing works with my Behance API Key

I've tried to use a multitude of different scripts with my Behance API key to try and create an online portfolio updated automatically through my managing of my Behance Profile.
The one I'm using now is the simplest I've found, using only jQuery, JSON, and is integrated with Bootstrap by Twitter.
Here's my source code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Portfolio with Behance API & jQuery</title>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick-theme.min.css" rel="stylesheet">
<link href="vendor/prism.css" rel="stylesheet">
<!-- http://fontpair.co/ -->
<link href="//fonts.googleapis.com/css?family=Quando|Judson" rel="stylesheet">
<!-- Demo stylesheet -->
<link href="demo.css" rel="stylesheet">
</head>
<body class="demo">
<div class="demo-intro">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<a href="http://siamkreative.com/">
<img src="https://secure.gravatar.com/avatar/f634817190acb57d0f3e61e7c68eabbb?s=160" alt="Julien Vernet" class="avatar img-circle">
</a>
<h1>Bootstrap Portfolio<br> with Behance API & jQuery</h1>
<p class="lead">If you're using Behance to showcase your projects and you would like to embed your portfolio on your site, look no further.</p>
<p>This quick example show you how to retrieve your projects from Behance using their API, store the data in the browser, and display it using Bootstrap 3 markup. To render the template we use jQuery, but you could also use a template engine such as pure.js or handlebars. Find the most suitable template engine here.</p>
<div class="btn-group" role="group">
Grid Layout
Slider Layout
</div>
</div>
</div>
</div>
</div>
<div class="demo-grid" id="grid">
<div class="container">
<h2>Grid Layout <small>Using Bootstrap Grid</small></h2>
<div id="be_grid" class="row be__portfolio be__grid">Loading...</div>
</div>
</div>
<div class="demo-slider" id="slider">
<div class="container">
<h2>Slider Layout <small>Using Slick Carousel</small></h2>
<div id="be_slider" class="row be__portfolio be__slider">Loading...</div>
</div>
</div>
<div class="demo-source" id="source">
<div class="container">
<h2>Source code</h2>
<!-- http://prismjs.com/plugins/file-highlight/ -->
<pre class="line-numbers" data-src="https://raw.githubusercontent.com/SiamKreative/Bootstrap-Portfolio-Behance-API/master/jquery.behance.js"></pre>
</div>
</div>
<div class="demo-comments">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<h3>Leave your feedback below :)</h3>
<br>
<div id="disqus_thread"></div>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/layzr.js/1.4.3/layzr.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-smooth-scroll/1.5.6/jquery.smooth-scroll.min.js"></script>
<script src="vendor/prism.js"></script>
<script src="jquery.behance.js"></script>
<script>
$(function() {
$('a').smoothScroll();
});
</script>
<script>
(function() {
var d = document, s = d.createElement('script');
s.src = '//siamkreative.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
</body>
</html>
Here's the jQuery:
$(function () {
var beUsername = 'josephrobee27e',
beApiKey = 'ugCqRrCuAuHAD6gvDTmegYXLxO2lWVca',
bePerPage = 12,
beProjectAPI = '//www.behance.net/v2/users/' + beUsername + '/projects?callback=?&api_key=' + beApiKey + '&per_page=' + bePerPage,
beItemWidth = 360,
beItemHeight = 282,
beLazyLoad = true,
beLinkTarget = '_self';
/**
* Get Data from Behance API
*/
if (sessionStorage.getItem('behanceProject')) {
setPortfolioTemplate();
} else {
// Load JSON-encoded data from the Behance API & Store it in sessionStorage
$.getJSON(beProjectAPI, function (project) {
sessionStorage.setItem('behanceProject', JSON.stringify(project));
setPortfolioTemplate();
});
}
/**
* Populate Data
*/
function setPortfolioTemplate() {
var projects = JSON.parse(sessionStorage.getItem('behanceProject')).projects;
var portfolio = $('.be__portfolio').html('');
var items = '';
var image = '';
$.each(projects, function (i, val) {
// If Lazy load is enabled, edit the markup accordingly
beLazyLoad ? image = 'src="images/loading.png" data-lazy="' + val.covers.original + '"' : image = 'src="' + val.covers.original + '"';
// Create the items template
items += '<div class="be__item be__item__' + val.id + ' col-lg-4 col-md-4 col-sm-4 col-xs-6 col-xxs-12">';
items += '<a href="' + val.url + '" title="' + val.name + '" target="' + beLinkTarget + '">';
items += '<img class="img-responsive" ' + image + ' width="' + beItemWidth + '" height="' + beItemHeight + '" alt="' + val.name + '">';
items += '</a>';
items += '</div>';
// How many items are shown
return i < bePerPage;
});
// Append items only once
portfolio.each(function (index, el) {
$(el).append(items);
});
// Create Lazy Load instance for Grid Layout
if (beLazyLoad) {
var layzr = new Layzr({
container: '.be__grid',
selector: '[data-lazy]',
attr: 'data-lazy'
});
}
// Slider Layout
$('.be__slider').slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
lazyLoad: 'ondemand',
responsive: [{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 1
}
}, {
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}]
});
}
});
I see no issues in the code. However this is all that is displayed:
Lastly here's a screen shot of the JSON file it's pulling, so I know that it's printing the information the script requires:
Any help will be seriously appreciated. I honestly have no clue what I'm doing wrong. I included my username and API key because I thought maybe my account was set up wrong and maybe someone could help me with that also.
Turns out for whatever reason the application did not work on a local machine.

Bootstrap fresh table inside ng-view

I am working on a project with AngularJS and facing an issue (which seems to be known but I did not understand or succeed to apply the solutions) :
I tried to use fresh table (http://demos.creative-tim.com/fresh-bootstrap-table) with ng-view. When I prepare a template without angular it is all working fine. But when I try to insert this table in angular in an ng-view it's not working anymore.
I have figured out that has to do with the javascript code they use after the balise :
<script type="text/javascript">
var $table = $('#fresh-table'),
$alertBtn = $('#alertBtn'),
full_screen = false;
$().ready(function(){
$table.bootstrapTable({
toolbar: ".toolbar",
showRefresh: true,
search: true,
showToggle: true,
showColumns: true,
pagination: true,
striped: true,
sortable: true,
pageSize: 8,
pageList: [8,10,25,50,100],
formatShowingRows: function(pageFrom, pageTo, totalRows){
//do nothing here, we don't want to show the text "showing x of y from..."
},
formatRecordsPerPage: function(pageNumber){
return pageNumber + " rows visible";
},
icons: {
refresh: 'fa fa-refresh',
toggle: 'fa fa-th-list',
columns: 'fa fa-columns',
detailOpen: 'fa fa-plus-circle',
detailClose: 'fa fa-minus-circle'
}
});
});
$(function () {
$alertBtn.click(function () {
alert("You pressed on Alert");
});
});
function operateFormatter(value, row, index) {
return [
'<a rel="tooltip" title="Like" class="table-action like" href="javascript:void(0)" title="Like">',
'<i class="fa fa-heart"></i>',
'</a>',
'<a rel="tooltip" title="Edit" class="table-action edit" href="javascript:void(0)" title="Edit">',
'<i class="fa fa-edit"></i>',
'</a>',
'<a rel="tooltip" title="Remove" class="table-action remove" href="javascript:void(0)" title="Remove">',
'<i class="fa fa-remove"></i>',
'</a>'
].join('');
}
window.operateEvents = {
'click .like': function (e, value, row, index) {
alert('You click like icon, row: ' + JSON.stringify(row));
console.log(value, row, index);
},
'click .edit': function (e, value, row, index) {
console.log(value, row, index);
},
'click .remove': function (e, value, row, index) {
alert('You click remove icon, row: ' + JSON.stringify(row));
console.log(value, row, index);
}
};
</script>
I have read it is difficult to execute custom javascript functions with Angular. I don't know how to do this...
Here is my index.html file with the ng-view where I am trying to insert the table :
<html lang="en" ng-app="MyApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SaaS Manager</title>
<meta name="Main" content="Dashboard">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link href="../resources/styles/fresh-bootstrap-table.css" rel="stylesheet" />
<link rel="stylesheet" href="../resources/styles/style.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/bootstrap-table.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="../bower_components/angular-resource/angular-resource.js"></script>
<script src="app.js"></script>
<script src="controllers/dashboardController.js"></script>
<script src="controllers/configurationDetailsController.js"></script>
<script src="services/myService.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row banner">
<div class="col-md-4">
<img src="../resources/images/logo.png">
</div>
<div class="col-md-5">
<h1>My title</h1>
</div>
</div>
<div ui-view></div>
</div>
</body>
</html>
Here is the content of the view file :
<div class="container-fluid">
<section class="dashboard">
<div ng-controller ="dashboardCtrl as dashboard">
<div class="fresh-table toolbar-color-orange">
<div class="toolbar">
<h2>Liste des services disponibles</h2>
</div>
<table id="fresh-table" class="table">
<thead>
<th data-field="Nom" data-sortable="true">Nom</th>
</thead>
<tbody>
<tr ng-repeat="configuration in configurations">
<td>{{configuration.service.name}} </td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
The question is where should I put the javascript function ?
Thanks for your help guys !
I can't see where you implement ng-view in your HTML markup, and as far as where do you add in your javascript function, that would be in the controller associated with the view file for which you wrote the function.

select2 twitter bootstrap css minor issue

I am new into web devlopment. I am trying to use select2-bootstrap. It working fine. Just need a css help.
Initial display of widget :
There is an indent between the bars(between Search for a movie and No matches found)
After clicking on the widget it looks fine as shown here and thereafter the dent disappears even on subsequent use.
Can someone suggest how to remove the dent between two bars in the first pic above.
NOTE :
CSS Added : select2.css, select2-bootstrap.css and bootstrap.css
JS Added : bootstrap.js, jquery-1.9.1.js, select2.js
Also please suggest how to avoid the No matches found display immediately after page loads.
Here is the code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Twitter Bootstrap</title>
<link rel="stylesheet" type="text/css" media="screen"
href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="css/select2.css" />
<link rel="stylesheet" type="text/css" media="screen"
href="css/select2-bootstrap.css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/select2.js"></script>
<script type="text/javascript">
var contextPath = "<%=request.getContextPath()%>";
$(document)
.ready(
function() {
MultiAjaxAutoComplete('#e6',contextPath + "/getData");
$('#save').click(function() {
alert($('#e6').val());
});
});
</script>
<script type="text/javascript">
function MultiAjaxAutoComplete(element, url) {
$(element).select2({
placeholder : "Search for a movie",
//minimumInputLength : 1,
multiple : true,
ajax : {
url : url,
dataType : 'json',
data : function(term, page) {
return {
q : term,
page_limit : 10,
};
},
results : function(data, page) {
console.log("page = " + page);
return {
results : data.results
};
}
},
formatResult : formatResult,
formatSelection : formatSelection,
initSelection : function(element, callback) {
var data = [];
$(element.val().split(",")).each(function(i) {
var item = this.split(':');
data.push({
id : item[0],
country : item[1]
});
});
callback(data);
}
});
};
function formatResult(movie) {
return '<div>' + movie.country + '</div>';
};
function formatSelection(data) {
return data.country;
};
</script>
</head>
<body style="background-color: #F9F9F6">
<h1>Serach Movies</h1>
<div class="container-fluid">
<div class="row-fluid">
<div class="span9">
<input type='hidden' id="e6" class="span8" />
</div>
<div class="span3">
<button id="save">Save</button>
</div>
</div>
</div>
</body>
</html>

Categories