I am developing using Onsen UI at monca.As the title says,
"Error: This page's bottom-toolbar is already registered."
You are looking for a solution to the error.I feel that I can solve this problem by writing using angular.js, but considering the cost of learning, I hope I can do it the way I am now.
Please let me know if you have any idea.
<!DOCTYPE HTML>
<html>
<head>
<metacharset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scale=no">
<meta http-equiv="Content-Security-Policy" content="default-src*;style-src*'unsafe-inline';script-src*'unsafe-inline' 'unsafe-eval'>
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
ons.bootstrap();
(function(){
$(document).on('pageinit', '#page2', function(){
varobj=$('#carousel_area');
var buf=
'<ons-carousel style="height:700px;"swipeable fullscreen auto-scroll var="carousel">'
+ '<ons-carousel-item>'
+ '<div style="height:500px;width=300px;background-color:blue;">'
+ '<ons-button onClick="myNavigator.pushPage(\'template_page1\');">to Page1</ons-button>'
+ '</div>'
+ '</ons-carousel-item>'
+ '<ons-carousel-item>'
+ '<div style="height:500px;width=300px;background-color:green;">'
+ '<ons-button onClick="myNavigator.pushPage(\'template_page1\');">to Page1</ons-button>'
+ '</div>'
+ '</ons-carousel-item>'
+ '<ons-bottom-toolbar id="follow_bottom" var="my-bottom-toolbar" style="height:100px;">'
+ 'Page 2'
+ '</ons-bottom-toolbar>'
+ '</ons-carousel>';
obj.html(buf);
ons.compile(obj[0]);
});
})();
</script>
</head>
<body>
<ons-navigator var="myNavigator" page="template_page1">
</ons-navigator>
<ons-template id="template_page1">
<ons-page id="page1">
<h1>page1</h1>
<ons-button onClick="myNavigator.pushPage('template_page2');">to Page2</ons-button>
<p>
to Page1 = > to Page2 = > to Page1 = > to Page2 (error)
</p>
</ons-page>
</ons-template>
<ons-template id="template_page2">
<ons-page id="page2">
<divid="carousel_area">
</div>
</ons-page>
</ons-template>
</body>
</html>
Isn't it impossible to say that you want to run OnsenUI with javascript instead of using AngularJS?
First of all, let me explain
OnsenUI adds templates as pages within the same page.
<body>
<ons-page>
<tmplete1></tmplete1>
<tmplete2>>/tmplete2><!--←Add!-->
</ons-page>
</body>
Actually, the tag is different, but it looks like this.
Therefore, pushPage adds the page template.
For this issue, there is already temple_page1, but after adding temple_page2,
We have added temple_page1 and temple_page2.
<body>
<ons-page>
<tmplete1></tmplete1>
<tmplete2></tmplete2>
<tmplete1>/tmplete1>>!--←Duplicate Push!-->
<tmplete2>>/tmplete2>>!--←Further Push!-->
</ons-page>
</body>
This means that multiple templates with the same ID are added to the same page.
If you have the same ID on multiple pages, the selector will not work, so you cannot add elements.
It means that an error occurred because OnsenUI was prompted to initialize without being added.
OnsenUI returns to the previous page with popPage.
If you want to read the same page, go back with this
All you have to do is delete and add the stack again.
Declare //OnsenUI
ons.bootstrap();
// Process when OnsenUI is ready
ons.ready(function(){
// Events immediately after page PUSH
myNavigator.on('postpush', function(event){
// Get the page after PUSH
varpage=event.enterPage;
// Processed when page name is 'templete_page2'
if("template_page2" == page.name){
varobj=$('#carousel_area');
// Change page1 call to popPage
var buf='<ons-carousel style="height:700px;"swipeable fullscreen auto-scroll var="carousel">'+
'<ons-carousel-item>'+
'<div style="height:500px;width=300px;background-color:blue;">'+
'<ons-button onClick="myNavigator.popPage();">to Page1</ons-button>'+
'</div>'+
'</ons-carousel-item>'+
'<ons-carousel-item>'+
'<div style="height:500px;width=300px;background-color:green;">'+
'<ons-button onClick="myNavigator.pushPage(\'template_page1\');">to Page1</ons-button>'+
'</div>'+
'</ons-carousel-item>'+
'<ons-bottom-toolbar id="follow_bottom" var="my-bottom-toolbar" style="height:100px;">+
'Page2'+
'</ons-bottom-toolbar>'+
'</ons-carousel>';
obj.html(buf);
ons.compile(obj[0]);
}
});
/********* [Additional] *********/
Events immediately following // popPage
myNavigator.on('postpop', function(event){
// Get the page after pop-pop
varpage=event.enterPage;
// Processed when page name is 'templete_page1'
if("template_page1" == page.name){
// page1 initialization
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.13/build/css/onsen-css-components.css"rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.13/build/css/onsenui.css"rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.13/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.13/build/js/onsenui.min.js"></script>
<ons-navigator var="myNavigator" page="template_page1">
</ons-navigator>
<ons-template id="template_page1">
<ons-page id="page1">
<h1>page1</h1>
<ons-button onClick="myNavigator.pushPage('template_page2');">to Page2</ons-button>
<p>
to Page1 = > to Page2 = > to Page1 = > to Page2 (error)
</p>
</ons-page>
</ons-template>
<ons-template id="template_page2">
<ons-page id="page2">
<divid="carousel_area">
</div>
</ons-page>
</ons-template>
© 2024 OneMinuteCode. All rights reserved.