Диалог из полимерной бумаги не открывается в Safari или Firefox

Попытка заставить этот бумажный диалог открываться, когда нажата бумажная кнопка, но она не хочет работать за пределами Chrome. Я чувствую, что проблема связана с тем фактом, что эта проблема повторяется, но я не уверена, что любая помощь, которую вы мне могли бы оказать, будет принята с благодарностью. Ошибка, которую я получаю в Safari: "TypeError: dialog1.toggle() не является функцией. (В 'dialog1.toggle()','dialog1.toggle' не определен)". В Firefox я только что получил "TypeError: dialog1.toggle не является функцией". Вот мой код, я надеюсь, что кто-то может указать мне правильное направление.

<script src="../bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-dialog-behavior/paper-dialog-behavior.html">
<link rel="import" href="../bower_components/paper-dialog-behavior/demo/simple-dialog.html">
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../bower_components/paper-dialog-scrollable/paper-dialog-scrollable.html">
<link rel="import" href="../bower_components/iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../bower_components/iron-demo-helpers/demo-pages-shared-styles.html">
</head>
<body class="unresolved">


<template is="dom-bind">
<template is="dom-repeat" items="{{data}}">
<paper-button raised onclick$="dialog{{item.id}}.toggle()">{{item.series}}  </paper-button>
  <simple-dialog id$="dialog{{item.id}}">
    <h2>{{item.series}}</h2>
    <p>{{item.data}}</p>
  </simple-dialog>
<br />
</template>
<iron-ajax auto id="GetData" url="get_category_data.php" handle-as="json" last-response="{{data}}" ></iron-ajax>
</template>

</body>
Источник

2 ответа

Решение

С помощью getElementById Кажется, работает нормально. Вот код, который работал для меня в Firefox. Надеюсь, это также будет работать в сафари

<template is="dom-bind">
 <template is="dom-repeat" items="{{data}}">
  <paper-button raised onclick$="toggleDialog({{item.id}})">{{item.series}}</paper-button>
  <simple-dialog id$="dialog{{item.id}}">
   <h2>{{item.series}}</h2>
   <p>{{item.data}}</p>
  </simple-dialog>
  <br />
 </template>
 <iron-ajax auto id="GetData" url="get_category_data.json" handle-as="json" last-response="{{data}}" ></iron-ajax>
</template>
<script>
 function toggleDialog(id){
  var dialog = document.getElementById('dialog'+id);
  dialog.toggle();
 }
</script>

Источник

Старый поток, но я добавлю этот вариант выше для Polymer1.0

<div>
    VAT check date: <paper-button value="paperbuttontest" raised on-tap="_paperDialogButtonEdit">{{buyer1.vat_check_date}}</paper-button>
    <paper-dialog id="vat_check_date_dialog_edit">
         <calendar-lite name="date.buyer1.vat_check_date" min-date="2017,3,1"></calendar-lite>
    </paper-dialog>
</div>

и в полимере

_paperDialogButtonEdit: function (event) {
//console.log(" event.target = ",event.target.getAttribute('value'));
var dialog = document.getElementById('vat_check_date_dialog_edit');
dialog.toggle();
},
Источник
Другие вопросы по тегам