How to create This code in Framework7 with Confirm Dialog
if(confirm("You are a man?")){
if(confirm("Are you over 18?")){
if(confirm("Do you like football?")){
if(confirm("etcetcetc?")){
}
}
}
}else{
alert("asdasd")
}just chain the dialogs;
var dialog1 = app.dialog.create({
text: 'You are a man?',
buttons: [
{
text: 'Yes',
onClick: function () {
dialog2.open()
}
},
{
text: 'No',
onClick: function () {
alert('asdasd')
}
}
]
})
var dialog2 = app.dialog.create({
text: 'Are you over 18?',
buttons: [
{
text: 'Yes',
onClick: function () {
dialog3.open()
}
},
{
text: 'No',
onClick: function () {
alert('asdasd')
}
}
]
})
var dialog3 = app.dialog.create({
text: 'Do you like football?',
buttons: [
{
text: 'Yes',
onClick: function () {
dialog4.open()
}
},
{
text: 'No',
onClick: function () {
alert('asdasd')
}
}
]
})
var dialog4 = app.dialog.create({
text: 'etcetcetc?',
buttons: [
{
text: 'Yes',
onClick: function () {
dialogX.open()
}
},
{
text: 'No',
onClick: function () {
alert('asdasd')
}
}
]
})
Hello, Thanks for the help, the code that does not open any windows style Confirm / YES / NO.
I tried to change
app.dialog.create to MyApp.create
but it does not work
edit: With myApp.confirm works,
but it shows me in the window:
you have to open the first dialog âmanuallyâ like after the user perss a button, etc
first you create ALL your dialogs with the code i share on my first reply
var dialog1 = app.dialog.create({
text: 'You are a man?',
buttons: [
{
text: 'Yes',
onClick: function () {
dialog2.open()
}
},
{
text: 'No',
onClick: function () {
alert('asdasd')
}
}
]
})
var dialog2 = app.dialog.create({
text: 'Are you over 18?',
buttons: [
{
text: 'Yes',
onClick: function () {
dialog3.open()
}
},
{
text: 'No',
onClick: function () {
alert('asdasd')
}
}
]
})
var dialog3 = app.dialog.create({
text: 'Do you like football?',
buttons: [
{
text: 'Yes',
onClick: function () {
dialog4.open()
}
},
{
text: 'No',
onClick: function () {
alert('asdasd')
}
}
]
})
var dialog4 = app.dialog.create({
text: 'etcetcetc?',
buttons: [
{
text: 'Yes',
onClick: function () {
dialogX.open()
}
},
{
text: 'No',
onClick: function () {
alert('asdasd')
}
}
]
})
and then just open dialgo1.
dialgo1.open()
It does not work for me, I did it like that
$$(document).on('pageInit', function (e) {
// Get page data from event data
var page = e.detail.page;
if (page.name === 'asd') {
dialog1.open()
}
})any error in the console?
full code would be helpful.
My config:
my-app.js:
// Initialize app
var myApp = new Framework7();
// If we need to use custom DOM library, let's save it to $$ variable:
var $$ = Dom7;
// Add view
var mainView = myApp.addView('.view-main', {
// Because we want to use dynamic navbar, we need to enable it for this view:
dynamicNavbar: true
});
// Handle Cordova Device Ready Event
$$(document).on('deviceready', function () {
console.log("Device is ready!");
});
// Now we need to run the code that will be executed only for About page.
// Option 1. Using page callback for page (for "about" page in this case) (recommended way):
myApp.onPageInit('about', function (page) {
// Do something here for "about" page
})
$$(document).on('pageInit', function (e) {
// Get page data from event data
var page = e.detail.page;
var dialog1 = app.dialog.create({
text: 'You are a man?',
buttons: [
{
text: 'Yes',
onClick: function () {
dialog2.open()
}
},
{
text: 'No',
onClick: function () {
alert('asdasd')
}
}
]
})
var dialog2 = app.dialog.create({
text: 'Are you over 18?',
buttons: [
{
text: 'Yes',
onClick: function () {
dialog3.open()
}
},
{
text: 'No',
onClick: function () {
alert('asdasd')
}
}
]
})
var dialog3 = app.dialog.create({
text: 'Do you like football?',
buttons: [
{
text: 'Yes',
onClick: function () {
dialog4.open()
}
},
{
text: 'No',
onClick: function () {
alert('asdasd')
}
}
]
})
var dialog4 = app.dialog.create({
text: 'etcetcetc?',
buttons: [
{
text: 'Yes',
onClick: function () {
dialogX.open()
}
},
{
text: 'No',
onClick: function () {
alert('asdasd')
}
}
]
})
if (page.name === 'asd') {
// Following code will be executed for page with data-page attribute equal to "about"
dialog1.open()
}
})
// Option 2. Using one 'pageInit' event handler for all pages:
$$(document).on('pageInit', function (e) {
// Get page data from event data
var page = e.detail.page;
if (page.name === 'about') {
// Following code will be executed for page with data-page attribute equal to "about"
myApp.alert('Here comes About page');
}
})
// Option 2. Using live 'pageInit' event handlers for each page
$$(document).on('pageInit', '.page[data-page="about"]', function (e) {
// Following code will be executed for page with data-page attribute equal to "about"
myApp.alert('Here comes About page');
})Your code is wrong.
you declare myApp as f7 instance, but pretend to use my exact code, which i made as an example with f7 instance as app
so, you need to change my code to your needs;
// Initialize app
var myApp = new Framework7();
...
var dialog1 = myApp.dialog.create({...})
i also suggest you to read f7 doc. Or at least how to init your app
I change it to myApp but it still does not work 
in console:
Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Either the 'unsafe-inline' keyword, a hash ('sha256-U8aXoPTvORcqErpBp2sOPYcbI7McEaN1pF//SS5TZMs='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
that error is some CSP.
open the console and just try to open the dialog manually;
dialog1.open()
it gives you an error?
Refused to execute inline script because it violates the following Content Security Policy directive: âdefault-src âselfâ data: gap: https://ssl.gstatic.com âunsafe-evalââ. Either the âunsafe-inlineâ keyword, a hash (âsha256-u0DDIlz909pcfss+ploYLUDyO1E9eT9FiVouJpNWN7g=â), or a nonce (ânonce-âŚâ) is required to enable inline execution. Note also that âscript-srcâ was not explicitly set, so âdefault-srcâ is used as a fallback.
Refused to execute inline script because it violates the following Content Security Policy directive: âdefault-src âselfâ data: gap: https://ssl.gstatic.com âunsafe-evalââ. Either the âunsafe-inlineâ keyword, a hash (âsha256-v0d22+aHqfBMiCT7ynbzP6xj0P+9//Kfwt8iZGGUt1Q=â), or a nonce (ânonce-âŚâ) is required to enable inline execution. Note also that âscript-srcâ was not explicitly set, so âdefault-srcâ is used as a fallback.
Refused to execute inline script because it violates the following Content Security Policy directive: âdefault-src âselfâ data: gap: https://ssl.gstatic.com âunsafe-evalââ. Either the âunsafe-inlineâ keyword, a hash (âsha256-hQpB95FLqAvNUiUWcDlTT23Vfiou6qhRKzX8KQwvI9g=â), or a nonce (ânonce-âŚâ) is required to enable inline execution. Note also that âscript-srcâ was not explicitly set, so âdefault-srcâ is used as a fallback.
Refused to execute inline script because it violates the following Content Security Policy directive: âdefault-src âselfâ data: gap: https://ssl.gstatic.com âunsafe-evalââ. Either the âunsafe-inlineâ keyword, a hash (âsha256-U8aXoPTvORcqErpBp2sOPYcbI7McEaN1pF//SS5TZMs=â), or a nonce (ânonce-âŚâ) is required to enable inline execution. Note also that âscript-srcâ was not explicitly set, so âdefault-srcâ is used as a fallback.
Uncaught TypeError: Cannot read property âcreateâ of undefined
at HTMLDocument. (my-app.js:31)
at e.trigger (framework7.js:11573)
at window.Framework7.i.pageInitCallback (framework7.js:1829)
at Object.i.router._load (framework7.js:2500)
at framework7.js:2632
at Object.preprocess (framework7.js:2172)
at t (framework7.js:2630)
at framework7.js:2653
at Object.complete (framework7.js:1666)
at r (framework7.js:12108)
Screen:
share your index.html
<!-- Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<!-- Your app title -->
<title>My App</title>
<!-- This template defaults to the iOS CSS theme. To support both iOS and material design themes, see the Framework7 Tutorial at the link below:
http://www.idangero.us/framework7/tutorials/maintain-both-ios-and-material-themes-in-single-app.html
-->
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.min.css">
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.colors.min.css">
<link rel="stylesheet" href="css/styles.css">
<!-- Panels overlay-->
<div class="panel-overlay"></div>
<!-- Left panel with reveal effect-->
<div class="panel panel-left panel-reveal">
<div class="content-block">
<p>Left panel content goes here</p>
</div>
</div>
<!-- Views -->
<div class="views">
<!-- Your main view, should have "view-main" class -->
<div class="view view-main">
<!-- Top Navbar-->
<div class="navbar">
<div class="navbar-inner">
<!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
<div class="center sliding">Awesome Appxd</div>
<div class="right">
<!--
Right link contains only icon - additional "icon-only" class
Additional "open-panel" class tells app to open panel when we click on this link
-->
<a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
</div>
</div>
</div>
<!-- Pages container, because we use fixed-through navbar and toolbar, it has additional appropriate classes-->
<div class="pages navbar-through toolbar-through">
<!-- Page, "data-page" contains page name -->
<div data-page="index" class="page">
<!-- Scrollable page content -->
<div class="page-content">
<div class="content-block">
<p>Page content goes here</p>
<!-- Link to another page -->
<a href="asd.html">About app</a>
</div>
</div>
</div>
</div>
<!-- Bottom Toolbar-->
<div class="toolbar">
<div class="toolbar-inner">
<!-- Toolbar links -->
<a href="#" class="link">Link 1</a>
<a href="#" class="link">Link 2</a>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
ok so you included just core f7, you need to include bundle, that has all f7 components
css:
https://cdnjs.cloudflare.com/ajax/libs/framework7/4.4.6/css/framework7.bundle.min.css
js:
https://cdnjs.cloudflare.com/ajax/libs/framework7/4.4.6/js/framework7.bundle.min.js
and what version of f7 are you using?
Use phonegap, which installs framework7 automatically, I do not know the version 
I will not be able to solve it, I better close the topic, I will learn the basics.
so you are using phonegap the app? if thats your case. i would strongly suggest to use f7-cli, it will simplify your life.
here you can read and see how to use it, its pretty easy:
after installing f7-cli just run the cli-ui and create a project with phonegap
framework7 create --ui
good luck,
and ask any question you have. every body was a beginner at some point.
Thanks for your kind words. Iâm here again
Now it works for me, but when I click on âCancelâ, I keep opening the other âDialogâ.
my code:
$$(document).on('pageInit', function (e) {
// Get page data from event data
var page = e.detail.page;
var dialog1 = myApp.confirm('Are you sure?', 'Custom Title',
function () {
dialog2.open()
},
function () {
myApp.destroy()
}
);
var dialog2 = myApp.confirm('Are you surex2?', 'Custom Title',
function () {
dialog3.open()
},
function () {
myApp.destroy()
}
);
var dialog3 = myApp.confirm('Are you surex3?', 'Custom Title',
function () {
dialog4.open()
},
function () {
myApp.destroy()
}
);
var dialog4 = myApp.confirm('Are you surex4?', 'Custom Title',
function () {
},
function () {
myApp.destroy()
}
);
if (page.name === 'asd') {
// Following code will be executed for page with data-page attribute equal to "about"
dialog1.open()
}
})
try with myApp.destroy() & myApp.close() but it does not do anything