Trying to add new carousel item dynamically by javascript in Onsen UI 2 but it is now working. The code I am using is as below
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="node_modules/onsenui/css/onsenui.css"/>
<link rel="stylesheet" href="node_modules/onsenui/css/onsen-css-components.css"/>
<script src="node_modules/onsenui/js/onsenui.js"></script>
<script src="jquery.js"></script>
</head>
<body>
<ons-splitter>
<ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
<ons-page>
<ons-list>
<ons-list-item onclick="fn.load('home.html')" tappable>
Home
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="home.html"></ons-splitter-content>
<ons-navigator id="myNavigator" page="home.html"></ons-navigator>
</ons-splitter>
<ons-template id="home.html">
<ons-page id="home">
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="ion-navicon, material:md-menu" size="32px, material:24px"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center top-bar-title"></div>
<div class="right">
<ons-toolbar-button id="addInCarousel">
<ons-icon icon="ion-ios-plus, material:md-plus" size="32px, material:24px"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-carousel auto-refresh fullscreen swipeable auto-scroll overscrollable id="itemsCarousel" direction="horizontal">
<ons-carousel-item>
<img src="images/01.jpg" style="width: 100%; height: auto;"/>
</ons-carousel-item>
<ons-carousel-item id="caro2">
<img src="images/02.jpg" style="width: 100%; height: auto;"/>
</ons-carousel-item>
</ons-carousel>
</ons-page>
</ons-template>
<script>
window.fn = {};
window.fn.open = function() {
var menu = document.getElementById('menu');
menu.open();
};
window.fn.load = function(page) {
var content = document.getElementById('content');
var menu = document.getElementById('menu');
// content.load(page).then(menu.close.bind(menu));
document.querySelector('#myNavigator').pushPage(page);
menu.close();
};
ons.ready(function() {
var carousel = document.addEventListener('postchange', function(event) {
console.log('Changed to ' + event.activeIndex);
});
});
document.addEventListener("init",function(event) {
var page = event.target;
if( page.matches('#home') ) {
// set page header title
page.querySelector('ons-toolbar .center').innerHTML = 'Testing App';
// clicking on header add button for adding new carousel item
page.querySelector('#addInCarousel').onclick = function() {
console.log("In function");
var onsItem= document.createElement('ons-carousel-item');
onsItem.innerHTML = '<img src="images/020.jpg" style="width: 100%; height: auto;"/>';
document.getElementById('itemsCarousel').appendChild(onsItem);
};
}
}, false);
</script>
</body>
</html>
The code I am using to add new carousel item is as below:
// clicking on header add button for adding new carousel item
page.querySelector('#addInCarousel').onclick = function() {
console.log("In function");
var onsItem= document.createElement('ons-carousel-item');
onsItem.innerHTML = '<img src="images/020.jpg" style="width: 100%; height: auto;"/>';
document.getElementById('itemsCarousel').appendChild(onsItem);
};
Please guide where I am doing wrong. Any code sample or web link would be appreciated.
You can put your <ons-navigator> inside the <ons-splitter-content> and erase the page attribute of the <ons-splitter-content>.
<ons-splitter-content id="content">
<ons-navigator id="myNavigator" page="home.html"></ons-navigator>
</ons-splitter-content>
This will solve the initialization of the two home.html pages.
Also you should switch the document.getElementById("id") method in your function with the page.querySelector("#id") method, since the later searches for the id on the current page.
Therefore your function should look something like this:
page.querySelector('#addInCarousel').onclick = function() {
console.log("In function");
var onsItem= document.createElement('ons-carousel-item');
onsItem.innerHTML = '<img src="images/020.jpg" style="width: 100%; height: auto;"/>';
page.querySelector('#itemsCarousel').appendChild(onsItem);
};