第一次单击按钮后，对话框的动态内容仅显示一次

Question

I am trying to show a list into a dialog after a button click, the content of the list is retrieved from the server, my list shows when i click the button for the first time but then the dialog is shown empty.

the code of onclick is working an addElement runs every time the button is clicked.

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

I even tried doing this way :

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

      "
      > 

Again it gives the same result.

Js method :

   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

The ons.createDialog method will create a dialog and append it to the DOM. It will not be destroyed when you hide it, you also need to call dialog.destroy() .

document.getElementById('diagcontent') will only return the first item with the ID diagcontent that's why it only works the first time.

I think you should create the dialog once and just use the dialog.show() method when the button is clicked.

You can create it every time the button is clicked but in that case you must be sure that two dialogs cannot be present in the DOM at the same time since you're using an element with an ID property and IDs are supposed to be unique.