So, I'm trying to connect to my Parse Server using Javascript.
Problem is I keep getting that parse is undefined.
I included the unpkg resource file.
I also manually downloaded that file and saved it in a parse.js file and made a reference it on my site.
Here's the code for my website
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/purecss#1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="css/login-css.css">
<link rel="stylesheet" href="css/backend.css">
<title> iCheckIn Backend</title>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD-EJG_73OiPF-fZEu-QkEUwRoq75Ew60E"></script>
<script src="https://unpkg.com/parse/dist/parse.js"></script>
<script src="js/parse.js"></script>
</head>
<body>
<div id="sideBar">
<div id="standName">
<span id="pageName">iCheck In </span>
</div>
<div id="avatar">
<div id="admin">
<img src="img/user.png" id="img"><br>
<span id="welcomeSpan">Welcome, Admin.</span> <br><br>
</div>
<div id="menu">
<button class="pure-button menuBtn" onclick="CreateUser()">Map</button>
<button class="pure-button menuBtn" >List</button>
<button class="pure-button menuBtn " >Add Location</button>
<button class="pure-button menuBtn" onclick="CreateUser()" >Add Person</button>
</div>
</div>
</div>
<div id="fullContentDiv">
<div id="topDiv"></div>
<div id="fullCarContent">
<div id="carModels">
<span id="span"> All Tracking Records</span>
</div>
<div id="showSearchDiv">
<hr>
<span id="entrySpan">Show Entries</span>
<div id="search">
<form class="pure-form">
<button class="pure-button" >Search</button>
<input class="pure-input-1-4">
</form>
</div>
</div>
<div id="map">
</div>
</div>
</div>
<footer>
Copyright © 2017 Hugo Monteiro
</footer>
</body>
</html>
And the simple function I'm using is
function CreateUser(){
var Parse = require('parse');
Parse.initialize("mykey");
Parse.server('myurl');
var TestUser = parse.Object.extend("TestUser");
var testuser = new TestUser();
testuser.set("name","Hugo");
testuser.save(null,{
sucess: function(testuser){
alert("Object Created!");
},
error: function(testuser,error){
alert(error.message);
}
});
}
I've already done some searching and I'm unable to come across the solution.
Thanks in advance !
Related
The Problem
I'm following an intro to JS course on Udemy. The course section is updating a span element by calling a JS function from a separate JS file. I figured I might be linking the scripts in the wrong order, but switching the order does nothing. Also, I know the file paths are right since an alert() function works fine. The file with the functions is imported before the file that calls it.
Edit
I just realized that the console browser is giving me this error:
Uncaught TypeError: Cannot set properties of null (setting 'textContent')
at outputResult (vendor.js:15:35)
at app.js:5:1
I'm sure I'm making an obvious, rookie mistake. Any help diagnosing this would be appreciated.
Here's the HTML and JS files below. The 'vendor.js' file holds the functions, and 'app.js' calls them. I'm specifically trying to update the element with id='current-result' by calling the outputResult function located in 'vendor.js'. I'm expecting the element with that id to update to 10, as that is what I'm assigning to currentResult in app.js.
<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>Basics</title>
<link
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="assets/styles/app.css" />
<script type="text/javascript" src="/Users/sailormetz/Software Development/Javascript/JSCourseMaterials/basics-01-starting-project/assets/scripts/vendor.js">
</script>
<script type="text/javascript" src="/Users/sailormetz/Software Development/Javascript/JSCourseMaterials/basics-01-starting-project/assets/scripts/app.js">
</script>
</head>
<body>
<header>
<h1>The Unconventional Calculator</h1>
</header>
<section id="calculator">
<input type="number" id="input-number" />
<div id="calc-actions">
<button type="button" id="btn-add">+</button>
<button type="button" id="btn-subtract">-</button>
<button type="button" id="btn-multiply">*</button>
<button type="button" id="btn-divide">/</button>
</div>
</section>
<section id="results">
<h2 id="current-calculation">0</h2>
<h2>Result: <span id="current-result">0</span></h2>
</section>
</body>
</html>
Vendor.js
const currentResultOutput = document.getElementById('current-result');
const currentCalculationOutput = document.getElementById('current-calculation');
function outputResult(result, text) {
currentResultOutput.textContent = result;
currentCalculationOutput.textContent = text;
}
app.js
let currentResult = 0
currentResult = currentResult + 10
outputResult(currentResult, '')
You are importing the Vendor.js at the top of the html file.
Inside the Vendor.js file, you are trying to access document.getElementById('current-result') and document.getElementById('current-calculation'). Will this be available inside Vendor.js? No. Because these DOM elements will be available only once the DOM is loaded.
How to fix this?
You have to ensure that the DOM elements that you are trying to use are available while you are running the script
This can be fixed in two ways.
Option 1
Import Vendor.js at the bottom of body tag. This will loads the script file once the DOM has been loaded. So your dome elements with id 'current-result' and 'current-calculation' will be available inside Vendor.js file.
Like
<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>Basics</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="assets/styles/app.css" />
</head>
<body>
<header>
<h1>The Unconventional Calculator</h1>
</header>
<section id="calculator">
<input type="number" id="input-number" />
<div id="calc-actions">
<button type="button" id="btn-add">+</button>
<button type="button" id="btn-subtract">-</button>
<button type="button" id="btn-multiply">*</button>
<button type="button" id="btn-divide">/</button>
</div>
</section>
<section id="results">
<h2 id="current-calculation">0</h2>
<h2>Result: <span id="current-result">0</span></h2>
</section>
</body>
<!-- Import here -->
<script type="text/javascript"
src="/Users/sailormetz/Software Development/Javascript/JSCourseMaterials/basics-01-starting-project/assets/scripts/vendor.js">
</script>
<script type="text/javascript"
src="/Users/sailormetz/Software Development/Javascript/JSCourseMaterials/basics-01-starting-project/assets/scripts/app.js">
</script>
</html>
Option 2
Load scripts asychronously by ising async attribute in the script import. This will parse the script file only once the DOM content has been loaded.
Like
<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>Basics</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="assets/styles/app.css" />
<script type="text/javascript" async
src="/Users/sailormetz/Software Development/Javascript/JSCourseMaterials/basics-01-starting-project/assets/scripts/vendor.js">
</script>
<script type="text/javascript" async
src="/Users/sailormetz/Software Development/Javascript/JSCourseMaterials/basics-01-starting-project/assets/scripts/app.js">
</script>
</head>
<body>
<header>
<h1>The Unconventional Calculator</h1>
</header>
<section id="calculator">
<input type="number" id="input-number" />
<div id="calc-actions">
<button type="button" id="btn-add">+</button>
<button type="button" id="btn-subtract">-</button>
<button type="button" id="btn-multiply">*</button>
<button type="button" id="btn-divide">/</button>
</div>
</section>
<section id="results">
<h2 id="current-calculation">0</h2>
<h2>Result: <span id="current-result">0</span></h2>
</section>
</body>
</html>
i have tried everything in order to fix the issue and even looked at the video of the tutorial im learning from but can't seem to get it working crrectly. Even checked around the internet. i added the javascript code so you guys can see that i did define it. im new to all this so explaining it best you can would be greatly appreciated
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="style.css">
<title>Javascript Your Age In Days</title>
</head>
<body>
<div class="container-1">
<h2>Challenge 1: Your Age In Days</h2>
<div class="flex-box-container-1">
<div>
<button class="btn btn-primary" onclick='ageInDays()'>Click Here</button>
</div>
<div>
<button class="btn btn-danger">Reset</button>
</div>
<div class="flex-box-container-1">
<div id="flex-box-container-1"></div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
function ageInDays() {
let birthYear = prompt("what year were you born...Good friend?");
}
It not working because you are using in line script for the invocation of the ageInDays function, but the definition is in another file that has not loaded when the browser read the inline JS so there are two ways of fixing this.
Use an inline script so the JS is already on the browser same time as HTML like
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="style.css">
<title>Javascript Your Age In Days</title>
</head>
<body>
<div class="container-1">
<h2>Challenge 1: Your Age In Days</h2>
<div class="flex-box-container-1">
<div>
<button class="btn btn-primary" onclick="ageInDays()">Click Here</button>
</div>
<div>
<button class="btn btn-danger">Reset</button>
</div>
<div class="flex-box-container-1">
<div id="flex-box-container-1"></div>
</div>
</div>
</div>
<script>
function ageInDays() { let birthYear = prompt("what year were you born...Good friend?"); }
</script>
</body>
</html>
handle everything in the script file
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="style.css">
<title>Javascript Your Age In Days</title>
</head>
<body>
<div class="container-1">
<h2>Challenge 1: Your Age In Days</h2>
<div class="flex-box-container-1">
<div>
<button class="btn btn-primary" id="action">Click Here</button>
</div>
<div>
<button class="btn btn-danger">Reset</button>
</div>
<div class="flex-box-container-1">
<div id="flex-box-container-1"></div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
and in the main.js
const button = document.getElementById('action');
button.addEventListener('click', function(){
let birthYear = prompt("what year were you born...Good friend?");
});
Add this to your script.js file, and remove onclick='ageInDays()' from your button.
let btn = document.querySelector(".btn-primary");
btn.addEventListener("click", ageInDays);
function ageInDays(){
//code to be executed when you clicked the button
}
Im writing a program to monitor prices on the steam market and im building a UI in electron, the issue is that when i click a button it doesn't register.
i have tried with logging it to console or sending to a new window or opening a link but it doesn't work. I tired using an .on('click', .... as well
index.js:
const {BrowserWindow} = require('electron').remote
const path = require('path')
const {shell} = require('electron')
const launchbtn = document.getElementById('launch')
launchbtn.addEventListener('click', (event) => {
const modalPath = path.join('file://', __dirname, 'launch.html')
let win = new BrowserWindow({ width: 400, height: 320 })
//shell.openExternal('http://electron.atom.io') tried but didnt work
win.on('close', () => { win = null })
win.loadURL(modalPath)
win.show()
})
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link rel="stylesheet" href="../assets/css/main.css">
</head>
<body>
<div class="row">
<div id="price-container">
<p class="subtext">Market-Monitor</p>
<h1 id="About">By SourcE</h1>
</div>
<div id="goal-container">
<p><span id="targetPrice">Monitor Prices of items</span></p>
</div>
<div id="right-container">
<button id="launch">Launch</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
launch.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link rel="stylesheet" href="../assets/css/main.css">
</head>
<body>
<div class="row">
<div id="price-container">
<p class="subtext">test</p>
<h1 id="About">test</h1>
</div>
<div id="goal-container">
<p><span id="targetPrice">test</span></p>
</div>
<div id="right-container">
<button id="launch">test</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
If the button was to work it should open a new instance of the window with the text changed to text.
Any help is appreciated.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link rel="stylesheet" href="../assets/css/main.css">
</head>
<body>
<div class="row">
<div id="price-container">
<p class="subtext">test</p>
<h1 id="About">test</h1>
</div>
<div id="goal-container">
<p><span id="targetPrice">test</span></p>
</div>
<div id="right-container">
<form name="form-name" action="launch.php">
<input type="submit" name="submit" value="Button Name">
</form>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
New File call it launch.php
<?php
if ( isset( $_POST['submit'] ) ) {
header("Location: <LINK>");
}
?>
You can easily open a new window via Javascript. Below you can see the code. You just have to do a quick query.
<button class="btn btn-success" onclick="location.href='http://google.com';"> Google</button>
Do that with php and a form. The form should have the action of the php file and in the php file you make a query if he has clicked submit and then you make a header location: index ...... etc. I can sent you a code if you want.
I am using dojo with .NET webforms for creating popup menu and I am getting below error when I try to load the page.
"dojo/parser::parse() error TypeError: Cannot read property 'getAttribute' of undefined"
it would be very useful if someone can share a blog on how to use dojo with webforms.
Below is my code for reference. please check and help me resolve this issue.
<%# Page Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="xyz.aspx.cs" Inherits="xyz" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="../Content/bootstrap.min.css" rel="stylesheet" />
<link href="../Content/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="../Content/claro.css" rel="stylesheet" />
<link href="../Scripts/dojo/resources/dojo.css" rel="stylesheet" />
<script type="text/javascript" src="../Scripts/jquery-1.12.4.js"></script>
<script type="text/javascript" src="../Scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery-ui-1.12.1.js">
</script>
<script type="text/javascript" src="../Scripts/dojo/dojo.js" ></script>
</head>
<body class="claro" style="height:100px;width:100px;">
<div data-dojo-type="dijit/layout/BorderContainer" style="height:100%; width:100%">
<div data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region: 'center'">
<div data-dojo-type="dijit/MenuBar">
<div data-dojo-type="dijit/PopupMenuBarItem">
<span>File</span>
<div data-dojo-type="dijit/DropDownMenu">
<div data-dojo-type="dijit/MenuItem">Open</div>
<div data-dojo-type="dijit/MenuItem">Save</div>
<div data-dojo-type="dijit/PopupMenuItem">
<span> Recent...</span>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
document.getElementById("pnlControlList").remove();
$("#navbar").remove();
require(["dojo/parser"], function (parser) {
parser.parse();
});
</script>
</body>
</html>
</asp:Content>
This piece of code causes problem:
<div data-dojo-type="dijit/PopupMenuItem">
<span> Recent...</span>
</div>
dijit/PopupMenuItem needs to contain dropdown element as its child.
require(["dojo/parser",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/MenuBar",
"dijit/PopupMenuBarItem", "dijit/DropDownMenu", "dijit/MenuItem", "dijit/PopupMenuItem"
], function (parser) {
parser.parse();
});
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" />
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" style="height:100px; width:100px">
<div data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region: 'center'">
<div data-dojo-type="dijit/MenuBar">
<div data-dojo-type="dijit/PopupMenuBarItem">
<span>File</span>
<div data-dojo-type="dijit/DropDownMenu">
<div data-dojo-type="dijit/MenuItem">Open</div>
<div data-dojo-type="dijit/MenuItem">Save</div>
<div data-dojo-type="dijit/PopupMenuItem">
<span> Recent...</span>
<div data-dojo-type="dijit/DropDownMenu">
<div data-dojo-type="dijit/MenuItem">Some Item</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Note: I've also added all dijit modules contained in html to required modules. I don't know whether it's mandatory in .NET but some environments throw error without it (ex. jsfiddle)
I am trying to make popover using Angularstap.js .I read documentation from here
http://mgcrea.github.io/angular-strap/##popovers
But my pop over not display on click can you tell me where I am doing wrong .
here is my plunker
http://plnkr.co/edit/Cp7wrpeh8SS4oY5GGRfY?p=preview
getting error :
Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite! See:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="bootstrap-css#3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-bootstrap#0.10.0" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="https://dl.dropboxusercontent.com/s/64qidru3z31h5ns/angular-strap.js"></script>
<script src="https://dl.dropboxusercontent.com/s/meplmw59rwg2dmy/angular-strap.tpl.js?m=d"></script>
<script src="https://dl.dropboxusercontent.com/s/qhgexynaog5ul5l/popover.js"></script>
</head>
<body>
<button type="button" class="btn btn-lg btn-danger" title="this" data-content="{{popover.content}}" data-template="pop.html" data-animation="am-flip-x" bs-popover>Custom Popover
</button> </body>
<script>
var myapp =angular.module('myApp', ['mgcrea.ngStrap']);
</script>
</html>
Actually, the documentation have already mentioned about the template attribute, but it quite hard to notice:
It should be a div.popover element following Bootstrap styles conventions like this.
Therefore your pop.html should have the same structure like this:
<div class="popover">
<div class="arrow"></div>
<h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
<div class="popover-content">
<ul class="list-group">
<li class="list-group-item" ng-click="hidePopover();editRowName(student)">Edit</li>
<li class="list-group-item " ng-click="deleteRow($index)">Delete</li>
</ul>
</div>
</div>
Example Plunker: http://plnkr.co/edit/sKApS5eC0NCv1PLsQKZx?p=preview