2016-06-20 45 views
1

試圖在單擊紙張按鈕時打開此紙張對話框,但似乎並不想在Chrome之外工作。我覺得這個問題與這個問題有關,但我不確定你能給我什麼幫助,我將不勝感激。我在Safari中得到的錯誤是「TypeError:dialog1.toggle()不是函數。(在'dialog1.toggle()','dialog1.toggle'是未定義的)」。在Firefox中,我剛剛得到「TypeError:dialog1.toggle不是一個函數」。這裏是我的代碼,我希望有人能指出我正確的方向。在Safari或Firefox上未打開Polymer Paper對話框

<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> 
+0

你爲什麼用'simple-dialog'而不是'paper-dialog'? – a1626

回答

1

使用getElementById似乎工作正常。這裏是在Firefox中爲我工作的代碼。希望它還會在Safari工作

<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> 

1

舊線,但我會添加上面的這種變化對於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(); 
},