Navigation

    Monaca & Onsen UI
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. djfooks
    D
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    djfooks

    @djfooks

    0
    Reputation
    5
    Posts
    64
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    djfooks Follow

    Posts made by djfooks

    • DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

      When I change an img in an Ons.List I get the error “DOMException: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node.”

      <!DOCTYPE html>
      <html lang="en">
          <head>
              <title>React</title>
              <meta charset="utf-8">
              <meta name="google" content="notranslate">
      
              <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
              <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
      
              <script src="bundle.js"></script>
              <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
          </head>
      
          <body>
              <div id="app"></div>
          </body>
      
          <script type="text/babel">
      
      var reactImgUrl = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K";
      
      var items = [
          {"name": "Vue",   "img": null},
          {"name": "React", "img": reactImgUrl}
      ];
      
      function Logo(props)
      {
          if (props.details.img == null)
          {
              return null;
          }
          return <img src={props.details.img}/>;
      }
      
      function LogoAndSomething(props)
      {
          return (
              <React.Fragment>
                  <Logo details={props.details}/>
                  {props.children}
              </React.Fragment>
          );
      }
      
      function TestList(props)
      {
          return props.items.map((details, index) =>
              <Ons.ListItem key={details.name}>
                  <LogoAndSomething details={details}>
                      <span>{details.name}</span>
                  </LogoAndSomething>
              </Ons.ListItem>
          );
      }
      
      function App(props)
      {
          return (
              <Ons.List>
                  <TestList items={props.items}/>
              </Ons.List>
          );
      }
      
      ReactDOM.render(
          <App items={items}/>,
          document.getElementById('app')
      );
      
      setTimeout(function()
      {
          items[0].img = items[1].img;
      
          // DOMException happens during this call 
          ReactDOM.render(
              <App items={items}/>,
              document.getElementById('app')
          );
      }, 1000);
      
          </script>
      </html>
      

      The bundle.js is just browserify of

      var React = require('react');
      var ReactDOM = require('react-dom');
      var ons = require('onsenui');
      var Ons = require('react-onsenui');
      
      window.React = React;
      window.ReactDOM = ReactDOM;
      window.ons = ons;
      window.Ons = Ons;
      

      Changing from an Ons.List to a normal HTML list everything works fine.

      posted in Onsen UI
      D
      djfooks
    • RE: Getting started with React bindings

      Ok I gave in and looked into using Browserify. Turns out I can get what I want with just this

      var React = require('react');
      var ReactDOM = require('react-dom');
      var ons = require('onsenui');
      var Ons = require('react-onsenui');
      
      window.React = React;
      window.ReactDOM = ReactDOM;
      window.ons = ons;
      window.Ons = Ons;
      

      and then include the bundle.js and carry on just using javascript.

      posted in Onsen UI
      D
      djfooks
    • Getting started with React bindings

      In the guide it says you can just include the scripts like this

      <script src="react.js"></script>
      <script src="react-dom.js"></script>
      <script src="onsenui.js"></script>
      <script src="react-onsenui.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
      

      but where do I get react.js, react-dom.js, onsenui.js, react-onsenui.js?

      npm install onsenui react-onsenui --save
      

      gives me nodemodules but I can’t find the files listed in the guide.

      I would like to avoid using Browserify or Webpack.

      Is there just a CDN with all the files somewhere? I’ve tried this but I get JS errors before the example app starts up

          <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
          <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
      
          <!-- Don't use this in production: -->
          <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      
          <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
          <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
          <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
          <script src="https://unpkg.com/react-onsenui@1.11.3/dist/react-onsenui.js"></script>
      
      posted in Onsen UI
      D
      djfooks
    • RE: navigator.resetToPage does not request the page

      Thanks for the reply. Yeah the HTTP server I was using (mongoose) did not set a cache control header. So chrome decided that it could cache the requests…

      Switching to nginx with the “expires -1;” setting has fixed this.

      posted in Onsen UI
      D
      djfooks
    • navigator.resetToPage does not request the page

      I’ve tried python SimpleHTTPServer and mongoose but when looking at the access logs when I do

          const navigator = document.querySelector('#navigator');
          navigator.resetToPage('help.html');
      

      No request for the page is made to my HTTP server and an older copy of the page is shown…

      Is onsen UI caching it somehow? if so how do I clear this cache? (I don’t even see a 300 response from the HTTP server)

      I have even tried writing my own HTTP server that never responds with 300 but still something is caching the page. Changing the port of my HTTP server does fix it.

      posted in Onsen UI
      D
      djfooks