My first PhoneGap application includes 2 HTML files.
The first one is named index.html which uses index.js. This file will display a list item. When I click an item in that list, it brings me to detail.html file by this:
$.mobile.changePage("detail.html", { transition: "slideup"});
OR
location.href = "detail.html";
On the detail.html page, I load detal.js. However it did not work. I could not use functions in detail.js.
Please give me your advise and there are any example ?
Capture Photo
<link rel="stylesheet" href="css/jquery.mobile.structure-1.3.0.min.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.3.0.min.css" />
<link rel="stylesheet" href="css/getAbstract.min.css" />
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/jquery.mobile-1.3.0.min.js"></script>
<script src="js/jquery.ba-dotimeout.js"></script>
<script src="js/jquery.dst.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.5.0.js"></script>
<script type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div data-role = "page" data-theme = "a" id = "pageContainer">
<!--Start Page Header -->
<div data-role = "header" id = "pageHeader" data-nobackbtn = "true" data-position = "fixed">
<h1>Camera</h1>
</div>
<!--End Page Header -->
<!--Start Page Content-->
<div data-role = "content" id= "pageContent">
<a data-role = "button" id = "btnCaptureEdit" href = "">Capture Edit</a>
<a data-role = "button" id = "btnLibraryPhoto" href = "">Get Photo From Library</a>
<a data-role = "button" id = "btnAlbumPhoto" href = "">Get Photo From Album</a>
</div>
<!--End Page Content-->
<!--Start Page Footer-->
<div data-role = "footer" id = "pageFooter">
</div>
<!--End Page Footer-->
</div>
<script src="js/detail.js"></script>
</body>
</html>
If this is your detail.html I don't see where do you load detail.js?
Maybe this
<script src="js/index.js"></script>
should be this
<script src="js/detail.js"></script>
?
I had the same problem, and found the answer.
If you use node.js with express, you need to give it its own function in order for the js file to be reached.
For example:
const script = path.join(__dirname, 'script.js');
const server = express().get('/', (req, res) => res.sendFile(script))
Related
Is it possible to create several text editor cells within a single page? My desired outcome is to have a button that when clicked allows the user to add new cells of code, where the user can write and later run. Similar to Jupyter notebook. The editor itself is imported from the ace.js library.
For that, I think I need some function add_editor(parent_div) that adds a new text editor to a div that is given as a parameter. ( Which I have failed to implement )
My initial thoughts are perhaps to create a shared class for all of the editors and append it to the father div with jQuery, but when I tried using a class instead of an id for the design,the editor won't load.
I'm not so good with handling with the DOM (especially without React), so even if the solution seems obvious to you, it might not to me.
This is last working version of the code that I have so far
<html lang="en">
<head>
<title>ACE in Action</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Define the editor's CSS !-->
<style type="text/css" media="screen">
#editor {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="row">
<!-- a row of two columns: the first will contain the text editors, the second is irrelevant !-->
<div class="col-9" style="height:200px;">
<div class="container" style="">
<div id="editor">
<!-- the div containing the code, has the id "editor" !-->
def print_something():
print(a)
</div>
</div>
</div>
<div class="col-3">
empty column
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.5/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
function configure_editor(){
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/python");
editor.getSession().setUseWrapMode(true);
editor.setShowPrintMargin(false);
}
configure_editor()
</script>
</body>
</html>
Help will be much appreciated!
Edit: I need to solve this in Javascript or Jquery, without React.
A cleaner method is to assign an editor to each instance using your own structure. With jquery:
<div id="instance0"></div><div id="instance1"></div>
<script>
var instances[];
var $rootElement = $('#instance0');
newInstance($rootElement);
var $rootElement = $('#instance1');
newInstance($rootElememt);
function newInstance($rootElement){
var instance = {};
instance.id = $rootElement.attr('id');
instance.$root = $rootElement;
instance.editor = ace.edit($rootElement[0]);
instance.editor.instance = instance;
instances.push(instance);
}
</script>
This gives you a 1 to 1 instance to editor relationship with backpointers. It will save you much angst in the future. You can just flip in sessions and keep the editors static.
I think I have found somewhat of a solution on my own with jQuery, even though it seems messy.
Each time a new editor will be added with increasing ids, i.e : "editor0", "editor1", "editor2", and so on.
Here is the full code
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>ACE in Action</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Define the editor's CSS !-->
</head>
<body>
<div class="row">
<!-- a row of two columns: the first will contain the text editors, the second is irrelevant !-->
<div class="col-9" style="height:200px;">
<div id="editors_container">
</div>
</div>
<div class="col-3">
<button id="add_editor">Add a new editor</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.5/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
existing_editors = [];
$(document).ready(function(){
$("#add_editor").click(function(){
console.log("reached here!")
let editor_id = "editor"+existing_editors.length;
$newDiv = $("<div id="+editor_id+" style=width:100%;height:100%>"+"</div>");
$("#editors_container").append($newDiv);
let editor = ace.edit(editor_id);
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/python");
editor.getSession().setUseWrapMode(true);
editor.setShowPrintMargin(false);
existing_editors.push(editor);
});
});
</script>
</body>
</html>
I'm trying to display a sidebar that can be toggled on and off, I have a navbar at the top that contains a tag with the id="toggle" for which I added an eventListener (which waits for the HTML to be loaded before running the javascript code) and a corresponding function that should collapse/expand the side menu. However when I try to run the code nothing happens. Any help would be great!
Here is my HTML:
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}"/>
<script type="text/javascript" src="{{ url_for('static', filename='index.js') }}"></script>
</head>
<body>
<!-- navbar -->
<div id="navbar">
☰ Menu
Forget me
</div>
<!-- sidebar -->
<div id="mySidenav" class="sidenav">
About
{% for room in chatroom %}
{{ room }}
{% endfor %}
</div>
<body>
</html>
And the js file, which is in the 'static' folder:
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("toggle").onclick = function() {
var sidebar = document.getElementById("mySidenav");
if (sidebar.style.width === "250px") {
sidebar.style.width = "0";
} else {
sidebar.style.width = "250px";
}
};
});
I see two issues without testing any code:
Your closing body tag needs to be </body>, and;
The toggle link will navigate away from the page, and you will need to prevent this. You can do so by changing the toggle element to a button type="button", or adding preventDefault() into your click handler Javascript.
<html>
<body>
<div class = "container">
<audio id="music" src="/music/orgmusic.mp3"type="audio/mpeg"></audio>
<img id="titleimg"src = "images/titleimage.png">
<div class = "gameContainer">
</div>
<div id ="play">Press Spacebar To Return To Main Menu!</div>
</div>
<link rel="stylesheet" type="text/css" href="/css/setup.css">
<link rel="stylesheet" type="text/css" href="/css/global.css">
<script src="/JS/setup.js" type="text/javascript"></script>
<script src="/JS/global.js" type="text/javascript"></script>
</body>
</html>
JS FILE:
document.getElementById("gameContainer").innerHTML = "hi this is words";
As you can see i have the in-line script set to insert text into my div called "gameContainer" but for some reason it doesn't work.
I know I can just type it in, but I wan't to get it to work through my JS file.
Any ideas on why the text won't insert?
You are do stuff based on Id and you set class in HTML.
<div class = "gameContainer"> // Hear you used class
</div>
In Js you used document.getElementById("gameContainer").innerHTML
<div id="gameContainer"> // Hear you have to used id instead of class
</div>
document.getElementById("gameContainer").innerHTML = "hi this is words";
<html>
<body>
<div class = "container">
<audio id="music" src="/music/orgmusic.mp3"type="audio/mpeg"></audio>
<img id="titleimg"src = "images/titleimage.png">
<div id = "gameContainer"class = "gameContainer">
</div>
<div id ="play">Press Spacebar To Return To Main Menu!</div>
</div>
<link rel="stylesheet" type="text/css" href="/css/setup.css">
<link rel="stylesheet" type="text/css" href="/css/global.css">
<script src="/JS/setup.js" type="text/javascript"></script>
<script src="/JS/global.js" type="text/javascript"></script>
</body>
</html>
I have been having so many problems with getting my JQuery to load properly. I have looked at youtube videos and scoured Google but nothing seems to work :(
The most common problem with JQuery not being loaded properly is that people load the js file BEFORE the JQuery, but I have loaded it in the correct order and I am still having problems.
Before, I was able to run my feature that used JQuery only locally, but now even that isn't working.
Here is my index.html file:
<!DOCTYPE html>
<html>
<head>
<title> Website </title>
<link rel = "stylesheet" href="style.css" /> <!-- Link to css -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"> </script> <!-- link to js AFTER JQuery-->
`
<!-- Import Fonts to Use -->
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Montserrat" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Muli" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto" />
</head>
<body>
<div class="overlay-navigation">
<nav role="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Works</li>
<li>Resume</li>
<li>Contact</li>
</ul>
</nav>
</div>
<section class="home">
<div class="open-overlay">
<span class="bar-middle"></span>
<span class="bar-bottom"></span>
<span class="bar-top"></span>
</div>
</section>
</body>
</html>
I have a css file named "style.css"
This is my js file titled "script.js"
$('.open-overlay').click(function() {
var overlay_navigation = $('.overlay-navigation'),
nav_item_1 = $('nav li:nth-of-type(1)'),
nav_item_2 = $('nav li:nth-of-type(2)'),
nav_item_3 = $('nav li:nth-of-type(3)'),
nav_item_4 = $('nav li:nth-of-type(4)'),
nav_item_5 = $('nav li:nth-of-type(5)'),
top_bar = $('.bar-top'),
middle_bar = $('.bar-middle'),
bottom_bar = $('.bar-bottom');
overlay_navigation.toggleClass('overlay-active');
if (overlay_navigation.hasClass('overlay-active')) {
top_bar.removeClass('animate-out-top-bar').addClass('animate-top-bar');
middle_bar.removeClass('animate-out-middle-bar').addClass('animate-middle-bar');
bottom_bar.removeClass('animate-out-bottom-bar').addClass('animate-bottom-bar');
overlay_navigation.removeClass('overlay-slide-up').addClass('overlay-slide-down')
nav_item_1.removeClass('slide-in-nav-item-reverse').addClass('slide-in-nav-item');
nav_item_2.removeClass('slide-in-nav-item-delay-1-reverse').addClass('slide-in-nav-item-delay-1');
nav_item_3.removeClass('slide-in-nav-item-delay-2-reverse').addClass('slide-in-nav-item-delay-2');
nav_item_4.removeClass('slide-in-nav-item-delay-3-reverse').addClass('slide-in-nav-item-delay-3');
nav_item_5.removeClass('slide-in-nav-item-delay-4-reverse').addClass('slide-in-nav-item-delay-4');
} else {
top_bar.removeClass('animate-top-bar').addClass('animate-out-top-bar');
middle_bar.removeClass('animate-middle-bar').addClass('animate-out-middle-bar');
bottom_bar.removeClass('animate-bottom-bar').addClass('animate-out-bottom-bar');
overlay_navigation.removeClass('overlay-slide-down').addClass('overlay-slide-up')
nav_item_1.removeClass('slide-in-nav-item').addClass('slide-in-nav-item-reverse');
nav_item_2.removeClass('slide-in-nav-item-delay-1').addClass('slide-in-nav-item-delay-1-reverse');
nav_item_3.removeClass('slide-in-nav-item-delay-2').addClass('slide-in-nav-item-delay-2-reverse');
nav_item_4.removeClass('slide-in-nav-item-delay-3').addClass('slide-in-nav-item-delay-3-reverse');
nav_item_5.removeClass('slide-in-nav-item-delay-4').addClass('slide-in-nav-item-delay-4-reverse');
}
})
ANY help would be appreciated!! Thank you!!
here is what it shows:
Your js files should go at the bottom of the body. You are referencing dom elements in your js that do not exist yet because they have not been loaded in the markup.
Move your jquery and js references to the bottom of the body
I have seen many questions similar to this one on here but none of them seem to fix the problem I am having.
I keep getting the following error-
Uncaught SyntaxError: Unexpected token <
It says the error is in line one of the js file but the sources only shows a red line on line one of the html file.
Should also mention it is running on a go server.
Thanks a mil!
Here is my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello, world!</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Sourcing jquery and ajax -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--external script.js file-->
<script type = "text/JavaScript" src="ChatBot.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<style>
body {
padding-top: 65px;
padding-bottom: 100px;
}
</style>
</head>
<body>
<nav class="navbar fixed-top navbar-dark bg-dark">
<a class="navbar-brand" href="#">Eliza chat bot</a>
</nav>
<div class="container-fluid">
<ul class="list-group">
<div class="fixed-bottom bg-dark p-2">
<div class="container">
<div>
<ul class="list-group"></ul>
</div>
<form action="/Chat" method="GET">
<div class="form-group">
<input type="text" class="form-control" id="userInput" placeholder="Talk to eliza...">
</div>
</form>
</div>
</div>
</ul> </div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>
and here is my js
const form = $("#userInput");
const listItem = $("#list-group");
//add the keypress function for when the user types an input for eliza to compute
$(document).ready(()=>{
form.keypress(function(event){
const keyCodes = {
ENTER : 13
}
let keyCode = event.keyCode;
//for enter
if(event.keyCode != keyCodes.ENTER){
return;
}
event.preventDefault();
const input = form.val();
form.val(" ");
listItem.append("<li class='list-group-item list-group-item-success'>"+"User : " + input + "</li>");
// GET/POST
const queryParams = {"userInput" : input }
$.get("/Chat", queryParams)
.done(function(response){
var nextListItem = "<li class='list-group-item list-group-item-info'>"+"ELiza : " + response + "</li>";
setTimeout(function(){
listItem.append(nextListItem)
}, 1000);//set timeout to give wait to response
}).fail(function(){
var nextListItem = "<li class='list-group-item list-group-item-danger' >Sorry I'm not home right now.</li>";
list.append(nextListItem);
});
});
});
Does your webserver happen to have a rule where if the requested resources is not found it will default to serving the index.html file? This is a popular configuration for Single Page Applications.
If that is the case, if the server can not find the js file requested it will serve the contents of the html file, which the browser will try parse as JavaScript. Since the first character on the first line of the html file is < you'll get a syntax error since that is not valid JavaScript.