Posts made by Woody Deck

I read that thread, but couldn’t make sense of it or how this possible could break the site.
Could you look at my live site in Firefox to make sure Onsen is not the responsible issue? From what I see it is breaking it, but I’m probably wrong. I am seeing stars

I get no other error codes and it works perfectly in Chrome/Safari.

Edit: I’m getting now some other error that appears after ten seconds, sometimes in firebug. It’s probably this, and you are probably right. It’s sad how far Firefox has fallen. I can’t run it on an 8 core gaming rig with with a single tab without lag. Grrrr.

It could be a CSR error from one of the scripts loading. Not sure if it could be the Onsen. Firefox really hates mixed content.

Update: Still absolutely stumped on this. I spoke with the host, who couldn’t help, but said they thought problem originated in onsenui.js.

Removing onsenui gets rid of one of the errors, but it doesn’t solve it. Firefox inspector is cryptic and only says unknown. I’m looking for a service that helps debugging, but not found anything. What is interesting is I got swiper.js to now function by deleting things. Onsenui also functions, but my script is broken.

Update 2: Fixed. I need to put event listeners in the document ready part as Firefox loads things differently. Firefox spitting out impossible to debug errors did not help, especially when these errors have been documented as breaking scripts.

I’ve been having a really hard time with Firefox compatibility. I am down to one error now, and one I don’t even understand how it breaks the site on Firefox.

/**
 * @param {!CustomElementInternals} internals
 */
export default function(internals) {
  if (Native.Element_attachShadow) {
    Utilities.setPropertyUnchecked(Element.prototype, 'attachShadow',
      /**
       * @this {Element}
       * @param {!{mode: string}} init
       * @return {ShadowRoot}
       */
      function(init) {
        const shadowRoot = Native.Element_attachShadow.call(this, init);
        this.__CE_shadowRoot = shadowRoot;
        return shadowRoot;
      });
  } else {
    console.warn('Custom Elements: `Element#attachShadow` was not patched.');
  }

How do I begin to troubleshoot this one? Totally lost. :/

It works in everything but Firefox. Grrrrrrrrr.

@Fran-Diox Awesome, thank you!

@munsterlander Super awesome! Thank you for being a good human. I hope this helps other people who come across my question.

I would like to link to a template page and have it behave just like a tab in a tab bar. Is this possible? I haven’t found any answer that it is.

The reason I want to do this is to have JS trigger a change in the “Next” button once someone write a message. It all of a sudden becomes green and active. I know the the Onsen UI doesn’t let it’s buttons be disabled, but I could easily make a non-Onsen button if it were possible to do this.

Onsen UI

<ons-button id="messageComplete" class="BTNToNextPage" onclick="messageCompleteButton()">Next</ons-button>

JS

function messageCompleteButton() {
    window.location='address.html';
   };

@Fran-Diox said:

here

Not sure how I missed that. Thanks!

You do in fact need a page declared for every ons-tab, but it shouldn’t be the same one. The tab functionality isn’t compatible with the carousel.

The only workaround I can think of is to make four duplicate carousels, and then you could fake it as you can link to one page just fine as long as the template name is different.

There’s a working example with angular and v1: https://stackoverflow.com/questions/34775133/endless-carousel-with-onsen-ui

I would prefer not to load angular, is there a way to make the carousel continuous?

Code where everything works, but it throws the ons-tab.js:370 error above in console:

<ons-tabbar position="top" id="tabbar">

  <ons-tab  page="carousel.html" onclick="document.getElementById('carousel').setActiveIndex(0);"  label="Home" icon="ion-home" active></ons-tab>
  <ons-tab  onclick="document.getElementById('carousel').setActiveIndex(1);" label="About" icon="ion-android-people" ></ons-tab>
  <ons-tab  onclick="document.getElementById('carousel').setActiveIndex(2);"  label="FAQ" icon="ion-speakerphone" ></ons-tab>
  <ons-tab  onclick="document.getElementById('carousel').setActiveIndex(3);"  label="Privacy" icon="ion-lock-combination" ></ons-tab>

</ons-tabbar>

Code where the ons-tab.js:370 error is resolved, but variables on the page instantiate four times and nav is weirdly broken:

<ons-tabbar position="top" id="tabbar">

  <ons-tab  page="carousel.html" onclick="document.getElementById('carousel').setActiveIndex(0);"  label="Home" icon="ion-home" active></ons-tab>
  <ons-tab  page="carousel.html" onclick="document.getElementById('carousel').setActiveIndex(1);" label="About" icon="ion-android-people" ></ons-tab>
  <ons-tab  page="carousel.html" onclick="document.getElementById('carousel').setActiveIndex(2);"  label="FAQ" icon="ion-speakerphone" ></ons-tab>
  <ons-tab  page="carousel.html" onclick="document.getElementById('carousel').setActiveIndex(3);"  label="Privacy" icon="ion-lock-combination" ></ons-tab>

</ons-tabbar>

The page attribute should only be used once it seems, but not using it causes an error. Using a toolbar also doesn’t work around the problem, even if you can call a function, because a toolbar doesn’t have a page attribute, so you can’t call the carousel template.

Leaving it at this for tonight.

The console errors resolved by defining the page for each tab. I still can’t link to individual pages from the tab.

ons.ready(function() {
    var carousel = document.addEventListener('postchange', function(event) {
    console.log('Changed to ' + event.activeIndex)
  });

This still logs as undefined and like the OP of this problem, I can’t figure out why it doesn’t log inside a template.

Update: The postchange only fires when you slide. So the tabs behave nonsensically. They won’t work at all until you actually change the carousel page, and then it tabs all revert to the last page you scrolled from. It’s a weird behavior. I’m sure the event listener function needs to be replaced with hard coded parameters.

Update 2: It seems the tab bar doesn’t like something. Buttons work with a function like this:

 var tab1 = function() {
  var carousel = document.getElementById('carousel');
  carousel.setActiveIndex(0);
}; 

Just not tabs.

I’m also getting this in console when page a tab is selected:

ons-tab.js:370 Uncaught (in promise) Error: Page was not provided to <ons-tab> index 2
    at HTMLElement._loadPageElement (ons-tab.js:370)
    at index.js:426
    at Promise (<anonymous>)
    at HTMLElement.setActiveTab (index.js:425)
    at HTMLElement._onClick (ons-tab.js:322)
    at FastClick.sendClick (fastclick.js:308)
    at FastClick.onTouchEnd (fastclick.js:612)
    at HTMLBodyElement.<anonymous> (fastclick.js:111)

I have been trying to get a tab bar to link to specific pages in a carousel and can’t get it to work. I came across the exact question on stack, but nobody answered the poster. https://stackoverflow.com/questions/45417942/onsen-ui-tabbar-carousel-combine He provided codepens to illustrate.

I also saw some comments in a thread relating to a workaround with:

<ons-carousel-item class="someClass" >
    <ons-navigator id="carouselPage7.html" > </ons-navigator>
     <div>
       The content.
     </div>
   </ons-carousel-item>

But this didn’t work. Any advice?

@Fran-Diox Thank you, this makes perfect sense now. I completely misunderstood.

Yes, I’ve looked through that app. I still can’t make sense of how to compartmentalize the templates. I can’t get it to work. In Angular 4 everything works because that’s the nature of Angular, but that’s too heavy for this project.

So I have index.html and fancytable.html in the project.

fancytable.html is just this:

<ons-page>
<table>

//The fancy table code.
<table>
  <tr>
    <th>Company</th>
    <th>Name</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Monaca</td>
    <td>Onsen</td>
    <td>Kekistan</td>
  </tr>
</table>

</ons-page>

index.html has everything else and I’m trying to load the fancytable.html template like this:

<body>
<ons-page id="./fancytable.html"></ons-page>
<body>

I must be wrong somewhere. :-) I’ve tried every variation possible.

My project got a little bit bloated all on one page, so I want to break some of the views down into separate html files. I am quite confused by both the tutorial, and the documentation.

https://youtu.be/JCAyl15EFbw?t=2m

https://onsen.io/v2/guide/fundamentals.html#what-is-a-page

“Separate files: *.html files that contain a single ons-page component as the root. Their ID is given by the path in the project, e.g. ./my/views/page1.html.”

I’ve tried everything logical, but can’t seems to do anything but break the project. Is there an example somewhere of doing this? The youtube tutorial just immediately skips discussion and provides no examples.

Thank you!

I was confused by the inline styles, and was expecting an attribute to define some of the CSS like it did for fullscreen.

Any idea why in the example removing fullscreen makes everything disappear? I’ve been tearing my hair out trying to understand this. I don’t see any jsfiddles or other stack questions regarding this. It says the fullscreen property is option, but is it just a typo?

Any examples would be helpful!

https://onsen.io/v2/api/js/ons-carousel.html