How can a dialog be displayed using a template in Onsen UI in a proper manner?

I am having trouble displaying a dialog in my Angular app with Onsen UI 1.3.6.

Whenever I try to show the dialog, I encounter a 404 Not Found error.

This is the JavaScript code I am using:

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

Here is the HTML code:

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

The error message I receive states:

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

However, when I attempt to display any templates as a normal page using the Tab bar's loadPage('somepage.html') method, they work perfectly fine.

javascriptangularjsonsen-uimonaca

Answer №1

It seems like you might be attempting to create the dialog before the iconselector.html page is fully loaded, which is why it's not finding the page. To resolve this, use the ons.ready() function, which runs the code after the DOM has finished initializing. Here's an example:

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

You also have two errors in your HTML:

  • cancelable should be an attribute of ons-dialog and not ons-template
  • The attribute var="dlg" is missing from the ons-dialog element

Here is the corrected code:

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

I hope this helps!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to retrieve certain fields from a Firestore database using Next.js?

Is there a way to access a specific field in a document using the user's uid as its name? I am utilizing useAuthState from react-firebase-hooks to retrieve the user's credentials (uid). https://i.sstatic.net/t1xGL.png This code snippet allows me ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

How do I incorporate global typings when adding type definitions to an npm module?

Suppose I create a node module called m. Later on, I decide to enhance it with Typescript typings. Luckily, the module only exports a single function, so the m.d.ts file is as follows: /// <reference path="./typings/globals/node/index.d.ts" /> decl ...

javascriptnode.jstypescriptnpm

Ways to initiate animation using CSS when the page loads

Is there a way to initialize the counter on page load? Even though I was successful in making it start on hover, I couldn't figure out how to make it work when the page loads. Here is the JavaScript code: var root = document.querySelector(':root ...

javascriptcssanimationtextcounter

Having trouble with routing in Angular

Attempting to create a REST API for the TodoApp built in Angular. I have successfully set routes for ADD, UPDATE, and GET ALL, but am encountering issues with the DELETE method. Here is my angular controller: angular.module('todoListApp') .contr ...

javaangularjsangular-ui-routerspark-java

The WebDriver encountered an error while trying to click on an element

When using Selenium WebDriver, I am facing an issue with selecting an item from a drop-down list. The element I want to click on is labeled as "game club". Despite attempting to select different elements, I keep encountering an error stating that none of ...

javascripthtmlseleniumjquery-selectorshtml.dropdownlistfor

IE Script loading

There is a script that I have, it appends in the document like so: window.d = document s = d.createElement('script') s.setAttribute('type','text/javascript') s.setAttribute('src',options.url) d.getElementById ...

javascriptjquery

Is it possible to redirect a URL with a readyState of 4?

Is it possible to redirect to a page when the readyState is equal to 4? //load the send form if (sendRequest) { sendRequest.open("POST", urlRequest, true); sendRequest.setRequestHeader("Content-Type", "application/x-www-form-urlenc ...

javascriptajax

Having trouble getting the libphonenumber npm package up and running, encountering an error stating that fs.readFileSync is not functioning properly

I am currently working on incorporating the googlei18n libphonenumber library for validating phone numbers. I have installed the npm package using npm i libphonenumber. However, when I try to use it like this: var libphonenumber = require('libphonenu ...

javascriptnode.jsnpmbrowserifylibphonenumber

Give the Row ID as a parameter to a personalized component within MUI Datagrid Pro

I am currently exploring the idea of incorporating an intermediate state to row checkboxes based on the selection status of other checkboxes within a detailed panel. My approach involves crafting a custom checkbox component and implementing some logical ...

javascripttypescriptmaterial-uimui-datatable

Learn how to simultaneously play two audio files using the same identifier in JavaScript

I'm facing an issue with two audio files that have a progress bar and both have the same ID: <audio id="player" src="<?=base_url('mp3/'.$rec->file)?>"></audio> </p> ...

javascriptphphtmljqueryaudio

Filtering data dynamically in a nested array of objects using JavaScript

My task involves utilizing a dynamic array named var arr = ["key1","key2","key3"]. The goal is to filter an array of objects using this array. Here’s an example: var obj = [{"key1":{"key2":{"key3":5}}},{"key1":{"key2":{"key3":7}}},{"key1":{"key2":{"key3 ...

javascriptarrays

What is the method for executing PHP code without the need for users to access the webpage?

Similar Query: Optimal method for running a PHP script on a schedule? I am in need of a solution where a PHP script can consistently fetch data from a single website, store it in a database on the server, and then update multiple other websites. The c ...

phpjavascriptajaxcontinuous

Building a Modular Socket.io System using Express 4

I'm currently working on modularizing my application files, and I've encountered a challenge with the integration of Socket.io. My goal is to utilize io within my routes.js file. Here's an example of what I'm attempting: var router = r ...

javascriptnode.jssocketsexpresssocket.io

What is the best way to include the API body in a GET request?

I'm facing an issue with passing parameters to the body instead of the query in my code. Here's what I have attempted: const fetchData = async () => { let response = await apiCall("URL" + { "companyArr": ["SBI Life Insurance C ...

javascriptreactjsapiget

incorrect implementation of react lifecycle phases

My Sharepoint Framework webpart includes a property side bar where I can choose a Sharepoint List, and it will display the list items from that list in an Office UI DetailsList Component. Although all REST calls are functioning properly during debugging, ...

javascriptreactjstypescriptsharepointspfx

Updating the node startup file with Visual Studio 2015 using NodeJS/Typescript

Encountering a persistent error: Error Code: TS5055 Cannot write file C:/project/dir/server.js' because it would overwrite the input file. Project: TypeScript/JavaScript Virtual Projects Even after renaming my entry filename to nodeserver.js, the ...

javascriptnode.jscompiler-errorstypescriptvisual-studio-2015

what sets apart parseint from minus

Typically, my approach for parsing numbers in JavaScript involves the following code snippet: var x = "99" var xNumber = x - 0 as opposed to using: var xNumber = parseInt(x) I am curious to know if there are any potential issues with this method in ter ...

javascriptparseint

Error message: Unable to split path as a function when utilizing React hook forms in conjunction with Material UI

Check out this code snippet: <TextField name="name" required className='my-2 mx-auto' label="Full Name" variant="standard" style={{ "width": "60%" }} value={name} onChange={(event) => { set ...

javascriptreactjsmaterial-uifrontend

Explain the mechanics of the calculator code operating by inputting numerical values in a string format

Recently, I attempted to create a calculator in JavaScript and encountered a requirement to place the button values within single quotes as if they were strings. It's fascinating how these string values can work alongside operators to produce the desi ...

javascript

Using Async/await appropriately in node.js

I have written code to call a procedure with an OUT parameter type of cursor (ResultSet). To fetch data from this ResultSet, I created a function called fetchRowsFromRS() that extracts the data. In my fetchRowsFromRS() function, I am using a return state ...

javascriptnode.jsasync-await