[SOLVED] Dialog not showing

Questions
1

i am developing a very simple app right now which should just show a preloader and a simple alert dialog after entering 8 digits in the searchbar. the dialog object gets changed to opened, but nothing is shown to the user? Everything works except the dialogs?..

For basic testing of the code, the three buttons on the bottom should also produce a dialog alert but are not working…

Here is the js file:

  var app = new Framework7({
  root: '#gcm',
  name: 'Gutschein Manager',
  id: 'com.pixelartdev.giftcardmanager',
  theme: "ios",
  fastClicks: true,
  init: true,
  modalCloseByOutside: false,
  popupCloseByOutside: false,
  domCache: false,
  dynamicNavbar: true,
  initOnDeviceReady:true
});

var $$ = Dom7;
var mainView = app.views.create('.view-main');

var searchbar = app.searchbar.create({
  el: '.searchbar',
  customSearch: true
});


searchbar.on('search', function(data, query) {
  $$("#id").val("");
  $$("#value").val("");

  if(query.length >= 8) {

    var preloader = app.dialog.preloader('Lade...');

    app.request.json("https://xyz.com/index.php", {id: query, action: "get"}, function(data) {
      console.log(data);

      preloader.close(true);
      $$('.searchbar-backdrop').removeClass('searchbar-backdrop-in');

      if(data.id != "error") {

        var dialog = app.dialog.alert('Neuen Gutschein Wert eintragen und auf Update bei Restwert oder Löschen falls aufgebraucht klicken', 'Gutschein gefunden');
        console.log(dialog);

        $$("#id").val(data.id);
        $$("#value").val(data.val);

      }else {
        app.dialog.alert('Zum aktivieren Wert eintragen und auf aktivieren drücken', 'Gutschein nicht gefunden');
        $$("#id").val(query);
      }
    });
  }

});


$$('.activate').on("click", function() {
  var id = $$("#id").attr("value");
  var val = $$("#value").attr("value");

  app.dialog.alert('Gutschein mit der Nummer <b>' + id + '</b> wurde mit <b>' + val + '€</b> aufgeladen und aktiviert.', 'Gutschein aktiviert');
});

$$('.update').on("click", function() {
  var id = $$("#id").attr("value");
  var val = $$("#value").attr("value");

  app.dialog.alert('Gutschein mit der Nummer <b>' + id + '</b> wurde mit <b>' + val + '€</b> neuem Guthaben gespeichert.', 'Gutschein aktualisiert');
});

$$('.remove').on("click", function() {
  var id = $$("#id").attr("value");
  var val = $$("#value").attr("value");

  app.dialog.alert('Gutschein mit der Nummer <b>' + id + '</b> wurde mit <b>' + val + '€</b> neuem Guthaben gespeichert und deaktiviert.', 'Gutschein deaktiviert');
});

and here is the html file

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="theme-color" content="#2196f3">
    <meta name="format-detection" content="telephone=no">
    <title>Gutschein Manager</title>
    <link rel="stylesheet" href="css/framework7.bundle.min.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>
    <div id="app" class="framework7-root">
      <div class="statusbar"></div>
      <div class="view view-main">
        <div data-name="home" class="page">

          <div class="navbar">
            <div class="navbar-inner">
              <div class="title">Gutschein Manager</div>
              <div class="subnavbar">

                <form class="searchbar">
                  <div class="searchbar-inner">
                    <div class="searchbar-input-wrap">
                      <input type="search" placeholder="Gutschein Nummer">
                      <i class="searchbar-icon"></i>
                      <span class="input-clear-button"></span>
                    </div>
                    <span class="searchbar-disable-button">Abbruch</span>
                  </div>
                </form>

              </div>
            </div>
          </div>

          <div class="page-content">

            <div class="block-title">Gutschein Info</div>
            <div class="list no-hairlines-md">
              <ul>
                <li class="item-content item-input">
                  <div class="item-inner">
                    <div class="item-input-wrap">
                      <input id="id" type="text" placeholder="Gutschein Nummer">
                      <span class="input-clear-button"></span>
                    </div>
                  </div>
                </li>
                <li class="item-content item-input">
                  <div class="item-inner">
                    <div class="item-input-wrap">
                      <input id="value" type="text" placeholder="Gutschein Wert">
                      <span class="input-clear-button"></span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>

            <div class="block">
              <div class="row">
                <button class="col button button-fill color-green activate">Aktivieren</button>
                <button class="col button button-fill update">Updaten</button>
                <button class="col button button-fill color-red remove">L&ouml;schen</button>
              </div>
            </div>

          </div>

        </div>
      </div>
    </div>
    <script type="text/javascript" src="js/framework7.bundle.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
  </body>
</html>
2

Root: #gcm does not exist, change #gcm to #app which is your root.

3

wow damn that really did it!
can you explain what root means?

4

Root is the start of your app, it is the container that holds the rest of the elements.

You actually do not need to specify it unless you are doing something specific.

1 Like