What's the proper way of showing a dialog based on a template in Onsen UI?

Question

I have a one page Angular app with Onsen UI 1.3.6.

I am trying to show a dialog but I keep getting a 404 Not Found error.

My Javascript is:

ons.createDialog('iconselector.html').then(function(dlg) {
  dlg.show();
});

And my HTML is:

<ons-template id="iconselector.html" cancelable>
  <ons-dialog>
    <p>Hello world1</p>
  </ons-dialog>
</ons-template>

I get an error stating:

GET http://localhost/yourdomain/templates/iconselector.html 404 (Not Found) startSymbol @ loader.js:1433sendReq @ loader.js:1432$get.serverRequest @ loader.js:1432processQueue @ loader.js:1433(anonymous function) @ loader.js:1433$get.Scope.$eval @ loader.js:1435$get.Scope.$digest @ loader.js:1435(anonymous function) @ loader.js:1435completeOutstandingRequest @ loader.js:1430(anonymous function) @ loader.js:1430

But if I try to show any templates as normal page using the the Tab bar's loadPage('somepage.html') method, the templates work as expected.

Is it similar to this? http://codepen.io/frankdiox/pen/BNGqwo — Fran Dios, Jul 30 '15 at 02:29
It also works in Monaca for me. Perhaps you have something else causing the errors? — Fran Dios, Jul 30 '15 at 02:35
I have the same code, but it does not work for me. Look at my other comment for what ended up working for me. But it's still a workaround. — abbood99, Jul 30 '15 at 03:28

score 0 · Answer 1 · answered Jul 30 '15 at 03:12

0

Probably you are trying to create the dialog before iconselector.html page has been created, that's why it cannot find the page. To fix the ons.ready() function, which executes the code after all the DOM has been initialized. Here is an example:

ons.ready(function() {   
  ons.createDialog('iconselector.html').then(function(dialog) {
    dialog.show();
  });
});

There are also two mistakes in your HTML:

cancelable is an attribute of ons-dialog and not ons-template
var="dlg" is missing in ons-dialog element

Here is the fixed code:

<ons-template id="iconselector.html">
  <ons-dialog var="dlg" cancelable>
    <p>Hello world1</p>
  </ons-dialog>        
</ons-template>

Hope it helps!

answered Jul 30 '15 at 03:12

Andi Pavllo

2,506
4
18
30

Thanks for the tip about the "cancellable". I don't know how I overlooked that. Anyway, the fix still does not work. However, what works for me is the alternative method of calling the dialog, which is to: 1. add the a var attribute, like . 2. delete the surrounding tag altogether. 3. From Javascript, immediately call someVariable.show(); – abbood99 Jul 30 '15 at 03:25
@abbood99 can you please provide all the code of your HTML page? It seems there is a problem somewhere else – Andi Pavllo Jul 30 '15 at 03:31
So far I have not been able to isolate the code responsible for the error, and my code is huge and cannot be pasted here. I'll keep trying to isolate it and reproduce the error. Once I do, I'll paste it here for people to benefit from. – abbood99 Jul 30 '15 at 03:58
Ok, using – abbood99 Jul 30 '15 at 04:30

What's the proper way of showing a dialog based on a template in Onsen UI?

1 Answers1