I wan't to use Framework7 without ReactJS or Vue. I wanna use pure JS. But when I try to show a dialog, I get a console error:
Uncaught TypeError: n is undefined
Thats my JavaScript code
var app = new Framework7({
root: '#app',
name: 'My App',
theme: 'ios',
domCache: true
});
var mainView = app.views.create('.view-main');
$('.open-alert').on('click', function () {
window.app.dialog.alert('Oops! Testing alert.');
});
and that is the HTML Part:
<!DOCTYPE html>
<html lang="de-DE">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#2196f3">
<meta name="viewport" content="width=device-width, initial-rotate=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="https://v5.framework7.io/packages/core/css/framework7.bundle.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="phone">
<div id="app">
<div class="statusbar"></div>
<div class="view view-main">
<div data-name="home" class="page">
<button class="col button button-fill open-alert">Alert</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://v5.framework7.io/packages/core/js/framework7.bundle.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
I searched for some examples, but nothing are work. Maybee I need to add something more?
Related
I start to learn vuejs and I can't explain this bug. The vuejs mustache syntax doesn't work in this exemple :
the html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Basics</title>
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght#400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue#next" defer></script>
<script src="app.js" defer></script>
</head>
<body>
<header>
<h1>test mustache syntax</h1>
</header>
<section id="user-goal">
<h2>titre</h2>
<p>{{ test }}</p>
</section>
</body>
</html>
the js file
const app = Vue.createApp({
data() {
return {
test: 'bonjour'
};
}
});
app.mount('#user-goal');
Can someone tell me why i get this result?
Hi I am trying to add a start button via jquery to appear when the page loads. However, the button is not loading.
Here is my code:
$(window).on('load', function() {
const startPage = $("<button id='start'>Go</button>");
$('main').append(startPage);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Quiz</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" type="text/css" />
<link href="app.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h1>Objective London Quiz</h1>
</header>
<main class="questions"></main>
<script src="https://code.jquery.com/jquery-3.4.1.slim.js" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
In my AspNetCore 3.1 web application, I added required js and css references to my project for Bootstrap notification. But I'm gettin this error when I call the notify function.
Here is my css references:
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title></title>
<link href="~/css/styles.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/dataTables.bootstrap4.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-notify/0.2.0/css/bootstrap-notify.min.css" />
</head>
Here is my js references
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.5/jquery.inputmask.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.4/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-notify/0.2.0/js/bootstrap-notify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js"></script>
<script src="~/js/scripts.js"></script>
Bootstrap notify call:
$.notify({
title: 'Hello World',
message: 'Hello :)',
type: 'success'
});
I got this template from this site: After trying out some templates, they were ok. But trying out this bot template am getting a blank html return on this code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BotUI - Hello World</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://unpkg.com/botui/build/botui.min.css" />
<link rel="stylesheet" href="https://unpkg.com/botui/build/botui-theme-default.css" />
<meta name="description" content="A hello world bot. A conversational UI built using BotUI.">
</head>
<body>
<div class="botui-app-container" id="hello-world">
<bot-ui></bot-ui>
</div>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.min.js"></script>
<script src="https://unpkg.com/botui/build/botui.js"></script>
<script>
var botui = new BotUI('hello-world');
botui.message.add({
content: 'Hello World from bot!'
});
botui.message.add({
human: true,
content: 'Hello World from human!'
});
document.getElementById("hello-world").innerHTML = content;
</script>
</body>
</html>
What could be the issue?
Regards
The template is working fine, the only issue here is that you need to remove following line
document.getElementById("hello-world").innerHTML = content;
I am not sure, why you have added this line. All the messages should be rendered via botui.message.add() method. BotUI will handle content insertion.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BotUI - Hello World</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="https://unpkg.com/botui/build/botui.min.css" />
<link rel="stylesheet" href="https://unpkg.com/botui/build/botui-theme-default.css" />
<meta name="description" content="A hello world bot. A conversational UI built using BotUI.">
</head>
<body>
<div class="botui-app-container" id="hello-world">
<bot-ui></bot-ui>
</div>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.min.js"></script>
<script src="https://unpkg.com/botui/build/botui.js"></script>
<script>
var botui = new BotUI('hello-world');
botui.message.add({
content: 'Hello World from bot!'
});
botui.message.add({
human: true,
content: 'Hello World from human!'
});
// document.getElementById("hello-world").innerHTML = content;
</script>
</body>
</html>
I get this error with a Parse.com JS App:
ReferenceError: Parse is not defined.
I really don't know why. Everything looks good to me. The files are linked correctly; I've checked this a few times. Is it not true, that I have to put my own JS right below Parse and it should work? This is what I've read here: Github Project
I use Chrome with the ripple extension. I serve the app via cordova serve
Any help much appreciated!
Here is index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="../css/index.css" />
<link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css" />
<title>Zone</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.parsecdn.com/js/parse-latest.js"></script>
<script type="text/javascript" src="../js/main.js"></script>
</head>
<body>
<img src="../img/site-logo.png" rel="external" class="logo">
<!-- <div class="site-menu">
<i class="fa fa-angle-double-left"></i><p class="title"></p><i></i>
</div> -->
<img src="img/suche.jpg" class="icon">
<img src="img/essentrinken.jpg" class="icon">
<img src="img/einkaufen.jpg" class="icon">
<img src="img/kultur.jpg" class="icon">
<img src="img/dienstleistungen.jpg" class="icon">
<img src="img/nuetzlich.jpg" class="icon">
<img src="img/nummern.jpg" class="icon">
<img src="img/sport.jpg" class="icon">
<img src="img/verwaltung.jpg" class="icon">
<img src="img/hotel.jpg" class="icon">
<img src="img/neuzuzuger.jpg" class="icon">
<div class="adad"></div>
<script type="text/javascript" src="../cordova.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
And here the JS file.
$(document).ready(function () {
Parse.initialize("", "");
var Ad = Parse.Object.extend("Ads");
function getPosts() {
var query = new Parse.Query(Ad);
query.find({
success: function (results) {
console.log("hello");
var output = "";
for (var i in results) {
var name = results[i].get("location");
if (name == 10) {
output += "<img src = '" + imageurl + "' class='media-object' height='60' width='100'>"
}
}
$("#adad").html(output);
console.log(output);
},
error: function (error) {
console.log("Query error:" + error.message);
}
});
}
getPosts();
});
I'm sorry, I have no experience with Cordova, but in general I've seen problems like these being caused by live reloading of files or by asynchronous loading, which could be caused by cordova/gulp/nodejs.
Maybe you should use a require statement as shown on the Parse quick start guide: var Parse = require('parse');
When I try your html and javascript in jsfiddle it just works, so it should have something to do with the order of loading js files in your local "webserver".
The problem could be that the parse CDN was not found i.e . download the SDK and host it yourself instead
Just run into the same issue. You are most likely missing the reference to parse.min.js.
The reference is typically in your index.html file, inside the header:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<meta http-equiv="Content-Security-Policy"/>
<script type="text/javascript" src="cordova.js"></script>
<! ---- LOOK HERE --------->
<script src="js/parse.min.js"></script>
<! ---- LOOK HERE --------->
<link rel="stylesheet" type="text/css" href="css/one.css" />
<title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>