Dialogs not working in 4.3

[cizo]

Hi after yesterday's update dialogs stop working, and when I try to open dialog, I only get message "Element not contain role dialog! Please add attribute data-role="dialog" to element #idDialog". There is data-role="dialog" in dialog for sure, as dialogs worked in older versions and rollback to ver. 4.2 helped as well.

[olton]

Show your dialog code and browser console

[cizo]

<div class="dialog" data-role="dialog" id="idDialog" data-close-button="true">
  <div class="dialog-title" id="idDialogTitle">Title</div>
  <div class="dialog-content" id="idDialogContent">
      <div class="row mb-2">
        <label class="cell-sm-2 d-none-touch" for="idname">Label:</label>
        <div class="cell-sm-10">
          <input type="text" id="idname" value="" disabled />
        </div>
      </div>
      <div class="row mb-2">
        <label class="cell-sm-2  d-none-touch" for="idclass">Class:</label>
        <div class="cell-sm-10">
          <input type="text" id="idclass" value="" />
        </div>
      </div>      
                         
  </div>
  <div class="dialog-actions">
    <button class="button success" id="idDialogOk">Ok</button>
    <button class="button" id="idDialogStorno">Storno</button>
  </div>  
</div>

console:
Element not contain role dialog! Please add attribute data-role="dialog" to element #idDialog metro.js:6367:21

[olton]

How you init the dialog?

[cizo]

HTML:
<button class="button primary small" onclick="OpenDialog()">Open</button>
SCRIPT:

function OpenDialog(id){
  Metro.dialog.open("#idDialog");
}

[olton]

the problem has been identified; now I am dealing with its solution. The problem is related to the interaction between Metro4 and jQuery. Thank you.

[olton]

Temporary, try this call:

function openDialog () {
     var dlg = $("#idDialog").data("dialog");
     dlg.open();
}

[cizo]

Thank you Olton. Im now using 4.2 version which is working, as soon as it will be fixed I'll return to using CDN version.

[olton]

About Metro 4 CDN
#1333

[olton]

You can check it with 4.3.1 branch from GitHub or CDN for 4.3.x dev

[TomCorr]

Hi, I just started using version 4.3.2, i had used Metro v3 in the past, I'm predefining a Dialog, and when i open the webpage, the dialog isn't hidden, and it has an OK button in it, when i init my Dialog it opens up fixed in the bottom of the page, and not in the center of the screen as it should.

in the Browser console it also says: "Element not contain role dialog! Please add attribute data-role="dialog" to element #AddUser".

[olton]

Upgrade to latest 4.3.3 release or 4.3.4 dev

[TomCorr]

I Upgraded all files, Still no change..

[TomCorr]

HTML:

<div data-overlay="true" data-close-button="true" data-overlay-click-close="true" data-overlay-color="ribbed-lightGray" id="AddUser" class="dialog" data-role="dialog"></div>

JS:

function AddUserDialog(id) {
    $("#AddUser").children().remove();

    $.ajax({
        method: "POST",
        url: window.$LoadUser,
        data: { userId: id },
        success: function (result) {
            $("#AddUser").append(result);
            Metro.dialog.open('#AddUser');
        }

    });
}

[olton]

This demo with 4.3.3 from CDN

https://codepen.io/olton/pen/ZEEwrMw
All works fine. Check your code for other errors.

[olton]

Also, you must use setContent API method to change dialog content:

$.ajax({
      ...
      success: function(result){
           var dialog = Metro.getPlugin('#AddUser', 'dialog');
           dialog.setContent(result);
           dialog.open(); // or Metro.dialog.open('#AddUSer')      
      }
})

[TomCorr]

I'll follow your recommendations and notify you, thanks.

[TomCorr]

dialog.setContent() sends me an error, dialog is undefined. I believe getPlugin() is not returning anything from script.

[olton]

Create your code on codepen.io

[TomCorr]

Thank you for suggestion: I found problem: I deleted: data-overlay-color="ribbed-lightGray"

and now everything works

[TomCorr]

Only there is always an OK button i do not want

[olton]

data-default-action="false"

[TomCorr]

Thank you for all your support