These are chat archives for angular/material

14th
Aug 2016
Carlos Amaral
@CarlosAmaral
Aug 14 2016 22:14
can’t get the dialogs to work
getting a Cannot read property 'showModal' of null
did everything as was said and still can’t get it working, even copied and pasted the examples
Ernesto Navarro
@enavarrocu
Aug 14 2016 22:15
the object you are trying to use the showModal is not assigned
this is way it say of null
Carlos Amaral
@CarlosAmaral
Aug 14 2016 22:16
in the querySelector?
it exists, that’s what bugs me
although the querySelector is throwing the ids im assigning as null
Ernesto Navarro
@enavarrocu
Aug 14 2016 22:18
there is your issue
any way to see the code?
Carlos Amaral
@CarlosAmaral
Aug 14 2016 22:18
but why, they exist, i don’t get it
the js or the html?
Ernesto Navarro
@enavarrocu
Aug 14 2016 22:18
both
Carlos Amaral
@CarlosAmaral
Aug 14 2016 22:18
ok, gist on the way, ty
Ernesto Navarro
@enavarrocu
Aug 14 2016 22:19
ok
Carlos Amaral
@CarlosAmaral
Aug 14 2016 22:19
it’s on pug/jade tho? ok with you?
Ernesto Navarro
@enavarrocu
Aug 14 2016 22:19
yeap
@enavarrocu
Ernesto Navarro
@enavarrocu
Aug 14 2016 22:23
checking...
Carlos Amaral
@CarlosAmaral
Aug 14 2016 22:23
thank you
Ernesto Navarro
@enavarrocu
Aug 14 2016 22:34
strange
I tested this
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Jade</title>
    <script type="text/javascript">

    </script>
  </head>
  <body>
    <div id="portfolio_id" class="mdl-layout"></div>
    <h3 class="heading-portfolio">Portfolio<a name="findme"></a></h3>
    <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--4col">
        <div class="mdl-card mdl-shadow--2dp">
          <div class="mdl-card__title">
            <h2 class="mdl-card__title-text">Pedro Barbosa :: Critical Digital Edition</h2>
          </div>
          <div class="mdl-card__supporting-text"> Pedro Barbosa, author computer generated literature, is a central figure in electronic literature and the production of born digital works of art, especially by the fact he was present in the advent of computing to the artistic creation practices of the contemporary computer technology. A digital critical edition model entitled 'Pedro Barbosa : Digital Critical Edition' was developed to present the digital artifacts of Pedro Barbosa.</div>
          <div class="mdl-card__actions mdl-card--border"></div>
          <div class="mdl-card__supporting-text">
            <ul class="techlist">
              <li>Laravel</li>
              <li>PHP</li>
              <li>JavaScript</li>
              <li>jQuery</li>
              <li>MySQL</li>
              <li>HTML5</li>
              <li>CSS3</li>
            </ul>
          </div>
          <div class="mdl-card__actions mdl-card--border"><a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">View Screenshots</a></div>
          <div class="mdl-card__menu">
            <button id="pedrobtn" type="button" class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"><i class="material-icons">pageview</i></button>
            <dialog id="pedro-dialog" class="mdl-dialog">
              <div class="mdl-dialog__content">
                <p> Allow this site to collect usage data to improve your experience?</p>
              </div>
              <div class="mdl-dialog__actions mdl-dialog__actions--full-width">
                <button type="button" class="mdl-button">Agree</button>
                <button type="button" class="mdl-button close">Disagree</button>
              </div>
            </dialog>
          </div>
        </div>
      </div>
    </div>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
document.querySelector("#pedro-dialog").showModal();

}
</script>

</body>
</html>
and work ok
@CarlosAmaral
Carlos Amaral
@CarlosAmaral
Aug 14 2016 22:36
weird
Ernesto Navarro
@enavarrocu
Aug 14 2016 22:36
but anyway
Carlos Amaral
@CarlosAmaral
Aug 14 2016 22:37
it might be the order of how im calling the libs? althought im calling the dialog-polyfill in head as said on the docs
Ernesto Navarro
@enavarrocu
Aug 14 2016 22:38
well... as you can see I'm not using any lib
so maybe that is a reason
Carlos Amaral
@CarlosAmaral
Aug 14 2016 22:38
so how does the dialog works? without the dialog-polyfill?
Ernesto Navarro
@enavarrocu
Aug 14 2016 22:38
you problem is not angular material
exactly
dialog tag is not material
Carlos Amaral
@CarlosAmaral
Aug 14 2016 22:40
oh, angular material lol
soz i thought it was material design
Carlos Amaral
@CarlosAmaral
Aug 14 2016 22:40
only and not ng for material
Ernesto Navarro
@enavarrocu
Aug 14 2016 22:40
no I mean is HTML
no ng or material
Carlos Amaral
@CarlosAmaral
Aug 14 2016 22:41
yes but the error is being triggered on the dialog code
dialog polyfill is for older browsers i guess
Ernesto Navarro
@enavarrocu
Aug 14 2016 22:42
mmm
did you try to put the global.js script load in the end of the page?
Carlos Amaral
@CarlosAmaral
Aug 14 2016 22:43
it’s on the head
Ernesto Navarro
@enavarrocu
Aug 14 2016 22:43
that is the issue
Carlos Amaral
@CarlosAmaral
Aug 14 2016 22:43
hmm
Ernesto Navarro
@enavarrocu
Aug 14 2016 22:44
you are trying to access to the tag which is not created yet
Carlos Amaral
@CarlosAmaral
Aug 14 2016 22:44
boom
Ernesto Navarro
@enavarrocu
Aug 14 2016 22:44
or you put it in the end of the page or use the $(document).ready or something similar
Carlos Amaral
@CarlosAmaral
Aug 14 2016 22:44
fml that was the problem
you’re right ofc
Ernesto Navarro
@enavarrocu
Aug 14 2016 22:45
;)
Carlos Amaral
@CarlosAmaral
Aug 14 2016 22:46
it works as expected
thanks bro
Ernesto Navarro
@enavarrocu
Aug 14 2016 22:46
you are welcome, happy to helpo
Carlos Amaral
@CarlosAmaral
Aug 14 2016 22:46
:dancer: