$('').on('shown.bs.modal') event does not fire any function

$('').on('shown.bs.modal') event does not fire any function - javascript

My VisualForce page has the following code : and javascript tag to show the chart is as below:
<script>
$(document).ready(function() {
$('#idPanelGraphs').on('shown.bs.modal', function () {
createChart('#barChart2', options);
});
});
</script>
<div role="tabpanel" class="tab-pane fade idPanel panel-group" id="vertical-tab">
<div id="idPanelGraphs" class="idPanel panel-group collapsible-group" data-chevron-down="glyphicon-chevron-down" data-chevron-up="glyphicon-chevron-up">
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<div id="barChart2" style="height:255px;" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Now as per code as soon as the idpanelGraphs is active the chart should have loaded. But it does not trigger the createChart function.
The same works when changing the modal to collapsable:
$('#idPanelGraphs').on('shown.bs.collapse', function () {
createChart('#barChart2', options);
});
<div role="tabpanel" class="tab-pane fade idPanel panel-group" id="vertical-tab4">
<div id="idPanelGraphs" class="idPanel panel-group collapsible-group" data-chevron-down="glyphicon-chevron-down" data-chevron-up="glyphicon-chevron-up">
<div class="panel panel-default">
<div class="panel-heading" data-toggle="collapse" data-target="#collapseGraphTab">
<h4 class="panel-title">
Graphs
<i class="indicator glyphicon glyphicon-chevron-up"/>
</h4>
</div>
<div id="collapseGraphTab" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<div id="barChart2" style="height:255px;" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Hope this works..
<div class="panel panel-default fade">
<div class="panel-heading"><h3 class="panel-title">Panel title</h3></div>
<div class="panel-body">Panel content</div>
</div>
<button id="test">Show panel</button>
function triggerPanel() {
// All your code can go here..
// createChart('#barChart2', options); ???
$('.panel').toggleClass('fade');
}
$(document).ready(function() {
$('#test').on('click', triggerPanel);
});

Related

the animation using onclick in jquery is not working in my browser

I am trying to hide and show one of the content using a button and I tried to use .on('click',..., but nothing happens. When I add some function in JS like alert() it is working and I also tried to run it in w3Schools and it works. It is just not working in my browser when I open the HTML file.
The other that not inside the button or onclick function is working.
$(function() {
$('#btn1').on('click', function() {
$('#panel1').hide(300).show(1000);
});
});
$('#panel2').slideUp(1000).delay(1000).slideDown(1000);
$('#panel3').fadeOut(1000).fadeIn(1000).toggle(1000);
$('#panel4').fadeToggle(1000).slideToggle(1000);
$('.panel-body').css({
color: 'red'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-1">
<button id="btn1">btn1</button>
<button id="btn2">btn2</button>
<button id="btn3">btn3</button>
<button id="btn4">btn4</button>
</div>
<div class="flex-box-panel">
<div class="container-2">
<div class="panel panel-primary" id="panel1">
<div class="panel-heading">
#panel1
</div>
<div class="panel-body">
content
</div>
</div>
</div>
<div class="container-3">
<div class="panel panel-primary" id="panel2">
<div class="panel-heading">
#panel1
</div>
<div class="panel-body">
content
</div>
</div>
</div>
<div class="container-4">
<div class="panel panel-primary" id="panel3">
<div class="panel-heading">
#panel1
</div>
<div class="panel-body">
content
</div>
</div>
</div>
<div class="container-5">
<div class="panel panel-primary" id="panel4">
<div class="panel-heading">
#panel1
</div>
<div class="panel-body">
content
</div>
</div>
</div>
</div>

Accordion panel on click scrolls to the bottom of page then back up

Basically, I have an accordion on mobile using the bootstap tab collapse.js. Everything works as should, but when the user clicks on to the next panel below, it seems to scroll them down the page and then back up to the container they clicked.
$(document).on('click', '#pdp-tabs-accordion .js-tabcollapse-panel-heading', function () {
self = $(this);
setTimeout(function () {
console.log('scrolling to');
console.log(self.closest('.panel'));
ScrollToElement(self.closest('.panel'), 95);
}, 1000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a aria-controls="advice" role="tab" data-toggle="collapse" class="js-tabcollapse-panel-heading collapsed" data-parent="#pdp-tabs-accordion" aria-expanded="false">Centre</a></h4> </div>
<div id="advicecentre-collapse" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;"> <div class="panel-body js-tabcollapse-panel-body">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2 col-xl-6 col-xl-offset-3">
<div class="row">
<div class="product-misc product-misc--advice-centre" id="advice-centre">
<h3>Centre</h3>
<p>We have selected the following pages from our Advice Centre as possibly the most relevant for you.</p>
<div class="row">
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
What is DWR?
</div>
</div>
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
DWR Washing & Care
</div>
</div>
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
Waterproof Ratings Explained
</div>
</div>
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
Waterproof Seams Explained
</div>
</div>
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
2, 2.5 or 3 Layer Fabric?
</div>
</div>
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
Keeping Warm In The Snow
</div>
</div>
</div>
<div class="product-misc__item" itemprop="productID">
<p>We have hundreds more pages, including more Buying Guides and Size Chart.</p>
</div>
<h3 class="margin-top">Size Charts</h3>
<div class="row" id="size-charts">
<div class="col-xs-12">
<div class="product-misc__item" itemprop="productID">
686 - Men's Snowboard Jackets Size Chart
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Any suggestions or ideas you might have to why this is happening would be great.
thanks in adavance!

LobiPanel does not load Bootstrap panel positions from localStorage

Does anybody know how saving panel positions (in localStorage) works with LobiPanel's stateful option in Bootstrap?
The documentation says one must use the stateful option in order to save the position among it's siblings and it will apply them when you reload the browser.
Unfortunately when I do a reload on my site, the panel positions are always back to it's initial state.
It doesn't work, even though LobiPanel successfully adds parent keys and values to the Local Storage, e.g.:
lobipanel_parent_BKlPfuXKuW:"{"panel-2":0,"panel-3":1,"panel-1":2}"
lobipanel_parent_KyCQKms0ir:"{"panel-1":0,"panel-2":1,"panel-3":2}"
lobipanel_parent_lDSURxUHh2:"{"LwmEvZSUiF":0,"vpT9FMcurP":1,"awfVUjhLzE":2}"
lobipanel_parent_lk5lsV9Y3k:"{"panel-6":0,"panel-5":1,"panel-4":2}"
So the positions are actually saved to Local Storage but are somehow not applied when reloading.
This is how my HTML code (Bootstrap v3.3.5) looks like:
<div id="lobipanel-multiple lobipanel">
<h3>Multiple panels with drag & drop</h3>
<p>Drag panels by clicking on the headers</p>
<div class="bs-example">
<div class="row">
<div class="col-md-6 panel">
<div class="panel panel-default" data-index="0" data-inner-id="panel-1">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel title 1</h4>
</div>
</div>
<div class="panel-body">
Panel body 1
</div>
</div>
<div class="panel panel-warning" data-index="1" data-inner-id="panel-2">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel title 2</h4>
</div>
</div>
<div class="panel-body">
Panel body 2
</div>
</div>
<div class="panel panel-danger" data-index="2" data-inner-id="panel-3">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel title 3</h4>
</div>
</div>
<div class="panel-body">
Panel body 3
</div>
</div>
</div>
<div class="col-md-6 panel">
<div class="panel panel-success" data-index="3" data-inner-id="panel-4">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel title 4</h4>
</div>
</div>
<div class="panel-body">
Panel body 4
</div>
</div>
<div class="panel panel-info" data-index="4" data-inner-id="panel-5">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel title 5</h4>
</div>
</div>
<div class="panel-body">
Panel body 5
</div>
</div>
<div class="panel panel-danger" data-index="5" data-inner-id="panel-6">
<div class="panel-heading">
<div class="panel-title">
<h4>Panel title 6</h4>
</div>
</div>
<div class="panel-body">
Panel body 6
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(function(){
$('.panel').lobiPanel({
sortable: true,
stateful: true
});
});
</script>
In the documentation there is example code for the stateful function but only for a single panel and not positions. So I still don't know how to address the CSS properly.
<!-- Stateful -->
<div>
<h3>Stateful. <small>Saves its state in localStorage</small></h3>
<div class="bs-example">
<div id="lobipanel-stateful" class="panel panel-default" data-inner-id="lobipanel-stateful">
<div class="panel-heading">
<div class="panel-title">
Panel title
</div>
</div>
<div class="panel-body">
Panel body
</div>
</div>
</div>
</div>
<script>
$(function(){
$('#lobipanel-stateful').lobiPanel({
stateful: true
});
});
</script>
Thank you in advance.

Not able to calculate no of div if dynamically created upon call of ajax

I am creating the below html dynamically inside ajax call and the html is successfully generated in browser like this:
$("#rooms-information").ready(function() {
$("#rooms-information .panel-default .panel-body").each(function() {
var id = $(this).attr('id');
var countButton = $("#" + id + " .button").length;
if (countButton == 0) {
$("#" + id).append("<p>Empty</p>");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-group" id="rooms-information">
<div class="panel panel-default">
<div class="panel-heading">
</div>
<div class="panel-collapse collapse">
<div id="rooms-information1" class="panel-body">
<div class="buttons col-md-4">
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
</div>
<div class="panel-collapse collapse">
<div id="rooms-information2" class="panel-body">
<div class="buttons col-md-4">
</div>
<div class="buttons col-md-4">
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
</div>
<div class="panel-collapse collapse">
<div id="rooms-information3" class="panel-body">
</div>
</div>
</div>
</div>
The JavaScript code is for checking if div.panel-body contains children div.buttons then do nothing and if div.panel-body does not contain any children div.buttons then append p tag.
The above code does not append p tag to such div.
Please note that the above html is generated upon the call of ajax function.
The above code does not throw any error in console.

Your code is correct, but you just have a minor mistake. Instead of checking if class .buttons exists you check class .button.
Here I also changed one thing. In jQuery each loop you do not have to acces an element by id, because you loop through those elements. So in order to refer to current element you can just use this.
$("#rooms-information").ready(function() {
$("#rooms-information .panel-default .panel-body").each(function() {
var $body = $(this);
var countButton = $body.find(".buttons").length;
if (countButton == 0) {
$body.append("<p>Empty</p>");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-group" id="rooms-information">
<div class="panel panel-default">
<div class="panel-heading">
...
</div>
<div class="panel-collapse collapse">
<div id="rooms-information1" class="panel-body">
<div class="buttons col-md-4">
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
...
</div>
<div class="panel-collapse collapse">
<div id="rooms-information2" class="panel-body">
<div class="buttons col-md-4">
</div>
<div class="buttons col-md-4">
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
...
</div>
<div class="panel-collapse collapse">
<div id="rooms-information3" class="panel-body">
</div>
</div>
</div>
</div>
EDIT
#NidaAmin I attach screenshot to show you taht it appends only to div without .buttons inside.
So it is hard for me to find the problem when I don't have any :)
But I'll try anyway.
Try replacing this $("#rooms-information").ready(function() { with $(window).on('load', function() {
$(window).on('load', function() {
$("#rooms-information .panel-default .panel-body").each(function() {
var $body = $(this);
var countButton = $body.find(".buttons").length;
if (countButton == 0) {
$body.append("<p>Empty</p>");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-group" id="rooms-information">
<div class="panel panel-default">
<div class="panel-heading">
...
</div>
<div class="panel-collapse collapse">
<div id="rooms-information1" class="panel-body">
<div class="buttons col-md-4">
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
...
</div>
<div class="panel-collapse collapse">
<div id="rooms-information2" class="panel-body">
<div class="buttons col-md-4">
</div>
<div class="buttons col-md-4">
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
...
</div>
<div class="panel-collapse collapse">
<div id="rooms-information3" class="panel-body">
</div>
</div>
</div>
</div>

How can I dynamically remove columns in a Bootstrap grid?

I have a web page with Bootstrap 3. In this web page, I have a row. In that row, I always want to show three items. However, I really have 10 items.
When a user clicks the "remove" button, I want to remove an item, and make the next one slide in. However, I have been unable to figure out how to do this within the context of a Bootstrap row. Currently, my items are laid out like this:
<div class="row">
<div class="col-xs-4">
<div id="panel1" class="panel panel-default">
<div class="panel-heading" style="background-color:#43258A; color:#fff;">Item #1</div>
<div class="panel-body">
Item #1 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel2" class="panel panel-default">
<div class="panel-heading" style="background-color:#249B73;">Item #2</div>
<div class="panel-body">
Item #2 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel3" class="panel panel-default">
<div class="panel-heading" style="background-color:#FFF635;">Item #3</div>
<div class="panel-body">
Item #3 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel4" class="panel panel-default">
<div class="panel-heading" style="background-color:#FE6E18;">Item #4</div>
<div class="panel-body">
Item #4 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel5" class="panel panel-default">
<div class="panel-heading" style="background-color:#F91721;">Item #5</div>
<div class="panel-body">
Item #5 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel6" class="panel panel-default">
<div class="panel-heading" style="background-color:#1BA8CE;">Item #6</div>
<div class="panel-body">
Item #6 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel7" class="panel panel-default">
<div class="panel-heading" style="background-color:#9B3B24; color:#fff;">Item #7</div>
<div class="panel-body">
Item #7 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel8" class="panel panel-default">
<div class="panel-heading" style="background-color:#0A4E38; color:#fff;">Item #8</div>
<div class="panel-body">
Item #8 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel9" class="panel panel-default">
<div class="panel-heading" style="background-color:#7BE7C3;">Item #9</div>
<div class="panel-body">
Item #9 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel10" class="panel panel-default">
<div class="panel-heading" style="background-color:#E7B22A;">Item #10</div>
<div class="panel-body">
Item #10 Details
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<button class="btn btn-default" onclick="removeFirst()">
Remove This
</button>
</div>
<div class="col-xs-4">
<button class="btn btn-default" onclick="removeSecond()">
Remove This
</button>
</div>
<div class="col-xs-4">
<button class="btn btn-default" onclick="removeThird()">
Remove This
</button>
</div>
</div>
To manage the state of the items, I have the following JavaScript:
var visiblePanels = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
function removeFirst() {
var panelId = '#panel' + visiblePanels[0];
$(panelId).fadeOut({
duration:500
});
visiblePanels.splice(0, 1);
}
function removeSecond() {
var panelId = '#panel' + visiblePanels[1];
$(panelId).fadeOut({
duration:500
});
visiblePanels.splice(1, 1);
}
function removeThird() {
var panelId = '#panel' + visiblePanels[2];
$(panelId).fadeOut({
duration:500
});
visiblePanels.splice(2, 1);
}
The problem is, I can't get the items to slide to the left when an item is removed. In addition, the items wrap instead of just being hidden beyond the first row. I've created a Fiddle here to show the code running.

Add the parent() method to hide the whole Bootstrap column
$(panelId).parent().fadeOut({
duration:500
});
Demo 1
To get the extra pseudo-rows of items to be hidden, you'll probably have to set a max-height and hide overflow on the parent row:
.row.some-class {
max-height: 110px;
overflow: hidden;
}
Demo 2
The drawback here is that you'd have to have items that never change height, and you'll have to use media queries to account for cases where heights change due to text wrapping, etc. You might be better off using one of the many jQuery sliders instead.

You need to fadeOut a parent() as mantioned in the other answer. Also you need to add one more wrapping <div class="frm"> for horizontal scrolling of aligned boxes. This div dedicated to being as wide as set of boxes aligned horisontally. I repalced fadeOut with hide - it looks much better.
there are additional css attributes for .row:
.row {
overflow:hidden;
height: auto;
}
Here is snippet
var visiblePanels = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
$(".frm").width($(".row").width()*visiblePanels.length/2.5);
$(".frm > div").width($(".row").width()/3.4);
$(window).resize(function(){
$(".frm > div").width($(".row").width()/3.4);});
function removeFirst() {
var panelId = '#panel' + visiblePanels[0];
$(panelId).parent().hide({
duration:500
});
visiblePanels.splice(0, 1);
}
function removeSecond() {
var panelId = '#panel' + visiblePanels[1];
$(panelId).parent().hide({
duration:500
});
visiblePanels.splice(1,1);
}
function removeThird() {
var panelId = '#panel' + visiblePanels[2];
$(panelId).parent().hide({
duration:500
});
visiblePanels.splice(2,1);
}
.row {
overflow:hidden;
height: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="frm">
<div class="col-xs-4">
<div id="panel1" class="panel panel-default">
<div class="panel-heading" style="background-color:#43258A; color:#fff;">Item #1</div>
<div class="panel-body">
Item #1 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel2" class="panel panel-default">
<div class="panel-heading" style="background-color:#249B73;">Item #2</div>
<div class="panel-body">
Item #2 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel3" class="panel panel-default">
<div class="panel-heading" style="background-color:#FFF635;">Item #3</div>
<div class="panel-body">
Item #3 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel4" class="panel panel-default">
<div class="panel-heading" style="background-color:#FE6E18;">Item #4</div>
<div class="panel-body">
Item #4 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel5" class="panel panel-default">
<div class="panel-heading" style="background-color:#F91721;">Item #5</div>
<div class="panel-body">
Item #5 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel6" class="panel panel-default">
<div class="panel-heading" style="background-color:#1BA8CE;">Item #6</div>
<div class="panel-body">
Item #6 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel7" class="panel panel-default">
<div class="panel-heading" style="background-color:#9B3B24; color:#fff;">Item #7</div>
<div class="panel-body">
Item #7 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel8" class="panel panel-default">
<div class="panel-heading" style="background-color:#0A4E38; color:#fff;">Item #8</div>
<div class="panel-body">
Item #8 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel9" class="panel panel-default">
<div class="panel-heading" style="background-color:#7BE7C3;">Item #9</div>
<div class="panel-body">
Item #9 Details
</div>
</div>
</div>
<div class="col-xs-4">
<div id="panel10" class="panel panel-default">
<div class="panel-heading" style="background-color:#E7B22A;">Item #10</div>
<div class="panel-body">
Item #10 Details
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<button class="btn btn-default" onclick="removeFirst()">
Remove This
</button>
</div>
<div class="col-xs-4">
<button class="btn btn-default" onclick="removeSecond()">
Remove This
</button>
</div>
<div class="col-xs-4">
<button class="btn btn-default" onclick="removeThird()">
Remove This
</button>
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

$('').on('shown.bs.modal') event does not fire any function - javascript

Related

the animation using onclick in jquery is not working in my browser

Accordion panel on click scrolls to the bottom of page then back up

LobiPanel does not load Bootstrap panel positions from localStorage

Not able to calculate no of div if dynamically created upon call of ajax

How can I dynamically remove columns in a Bootstrap grid?

Categories

Resources