Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

icon.attributeChangedCallback is not a function



  • Uncaught (in promise) TypeError: icon.attributeChangedCallback is not a function.
    onsenui version:2.6.0

    my code:

    <!doctype html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" >
      <meta name="apple-mobile-web-app-capable" content="yes" >
      <meta name="apple-touch-fullscreen" content="yes" >
      <title></title>
      <link rel="stylesheet" href="../css/onsenui.min.css">
      <link rel="stylesheet" href="../css/onsen-css-components.min.css">
    
      <script src="../js/onsenui.min.js"></script>
    
      
    
    </head>
    
    <body>
    	<ons-navigator id="appNavigator" page="page1.html"></ons-navigator>
    	
    	<template id="page1.html">
    	  <ons-page id="page1">
    		<ons-toolbar>
    		  <div class="center">Page 1</div>
    		</ons-toolbar>
    
    		<p>This is the first page.</p>
    
    		<ons-button id="push-button">Push page</ons-button>
    	  </ons-page>
    	</template>
    	
    	<script>
    		document.addEventListener('init', function(event) {
    		  var page = event.target;
    
    		  if (page.id === 'page1') {
    			page.querySelector('#push-button').onclick = function() {
    			  document.querySelector('#appNavigator').pushPage('page2.html', {data: {title: 'Page 2'}});
    			};
    		  } else if (page.id === 'page2') {
    			page.querySelector('ons-toolbar .center').innerHTML = page.data.title;
    		  }
    		});
    	</script>
    </body>
    </html>
    
    
    <ons-page id="page2">
    	<ons-toolbar>
    	  <div class="left"><ons-back-button>Page 1</ons-back-button></div>
    	  <div class="center"></div>
    	</ons-toolbar>
    	
    	<ons-tabbar position="bottom">
            <ons-tab  page="test.html" label="test" icon="fa-home" active>
            </ons-tab>
        </ons-tabbar>
    
    	<template id="test.html">
            <ons-page id="coursePage">
    
                <div>
                    test
                </div>
            </ons-page>
        </template>
      </ons-page>
    

  • Onsen UI

    @czpae86 Thanks for reporting. I actually fixed this a while ago, it will be released in the next minor version :thumbsup:



  • @Fran-Diox Which version will this patch be included in?


  • Onsen UI

    @deitrick I believe that was fixed a while ago. Have you tried the latest version 2.9.1?