Question

我试图在按钮单击后显示一个对话框列表，从服务器检索列表的内容，我的列表显示我第一次单击该按钮但是对话框显示为空。< / p>

onclick的代码正在运行，每次单击按钮时都会运行addElement。

<ons-button modifier = "small" style="margin-left: 25%;" 
                  onclick="menu.setMainPage('default.html',{closeMenu: true});
                  ons.createDialog('dialog.html').then(function(dialog) {dialog.show({callback : function(){addPresentation();}});});
                  console.log('log');
                  "
                  > 
                  new  presentation 
               </ons-button>


         <ons-template id="dialog.html">
            <ons-dialog var = "dialog" id = "dialog" cancelable>
             <ons-scroller style="height: 200px; width: 100%">     
               <div  class="dialog-content" id="diagcontent" >


               </div>
             </ons-scroller>
            </ons-dialog>
         </ons-template>

我甚至试过这样做：

   <ons-button modifier = "small" style="margin-left: 25%;" 
      onclick="addElement();
      ons.createDialog('dialog.html').then(function(dialog) {dialog.show();});

      "
      >

它再次给出相同的结果。

Js方法：

   function addPresentation(){


      if (window.XMLHttpRequest){
         var xmlHTTP = new XMLHttpRequest();
         xmlHTTP.open("GET", addpresentation, true);
         xmlHTTP.send();


         xmlHTTP.onreadystatechange = function() {
           var script = document.createElement('script');
            script.innerHTML = "ons.compile(document.getElementById('dialog')); console.log('script);";
            document.getElementById('dialog').appendChild(script);
         if (xmlHTTP.readyState == 4 && xmlHTTP.status == 200) 
            {//document.getElementById("diagcontent").innerHTML = "";

            var list = document.createElement('ons-list');
            var json = JSON.parse(xmlHTTP.responseText);
            console.log("addPresentation : " + json);
            for (var i=0;i<json.length;i++){

              var btn = document.createElement('ons-button');
              btn.setAttribute('modifier',"quiet");
              btn.innerHTML = json[i].name;
              var id = json[i].id_presentation
              var name = json[i].name;

                     btn.setAttribute('onclick',"addElement(\""+id+"\",\""+name+"\");dialog.hide();");
              var listitem = document.createElement('ons-list-item');
              listitem.appendChild(btn);
              list.appendChild(listitem);

            }
            document.getElementById("diagcontent").appendChild(list);

            }
          }
        }
    }

Answer 1

ons.createDialog方法将创建一个对话框并将其附加到DOM。隐藏它时不会销毁它，您还需要调用dialog.destroy()。

document.getElementById('diagcontent')只会返回ID为diagcontent的第一个项目，这就是为什么它只能在第一次运作。

我认为您应该创建一次对话框，并在单击按钮时使用dialog.show()方法。

您可以在每次单击按钮时创建它，但在这种情况下，您必须确保DOM中不能同时存在两个对话框，因为您使用的是具有ID属性和ID的元素应该是独一无二的。

对话框的动态内容仅在首次点击按钮后显示一次

1 个答案: