I'm trying to run this code, but it's only loading blank content into my element. Any ideas what I'm doing wrong? I'm trying to load the current page (that might contain changes since it was loaded the last time and fetch some elements from it and replace those elements on the page without reloading the entire document in the browser window.)
function refreshContent(){
$.ajax({
type: "GET",
async: true,
url: "<?php echo $_SERVER['REQUEST_URI']; // Can this be replaced with JS? ?>",
success: function(response) {
if(response != 0)
{
var data = $.parseHTML(response);
$('body').replaceWith($(data).find('body'));
}
}
});
}
setInterval(function(){
refreshContent();
}, 60000);
My Response:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head id="page">... with body and all of that
Related
I'm trying to create a basic website that checks whether a certain word is a palindrome or not. But, even though I assigned a value to my variable word, the Firefox console says it's null.
With wordReversed, it says ReferenceError: can't access lexical declaration wordReversed before initialization, even though I assigned a value to it and both variables are global. What's wrong in my code?
HTML5 code:
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="" />
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">
You are using an <strong>outdated</strong> browser. Please
upgrade your browser to improve your experience.
</p>
<![endif]-->
<div id="formulary">
<form>
<header>
<h1>Is it a palindrome?</h1>
</header>
<label for="word">
Word:
<input type="text" id="word" placeholder="Enter the word here..." />
</label>
<button type="button" onclick="check()">Check</button>
<div>
<p id="paragraph">And the answer is:</p>
</div>
</form>
</div>
<script src="index.js" async defer></script>
</body>
</html>
JS code:
let word = document.querySelector("word");
let wordReversed = [...word].reverse().join("");
let paragraph = document.querySelector("#paragraph");
function check() {
if (word === wordReversed) {
paragraph.innerHTML = `${word} is a palindrome.`;
} else {
paragraph.innerHTML = `${word} isn't a palindrome.`;
}
}
There is an issue in your code, because you are having the value of the text selected once and it will never be triggered again, just add the variables declaration inside the function,
few things to note:
your code didn't select the input element value
I used .split() function which return an array then you can reverse it.
here is a working snippet:
let paragraph = document.querySelector("#paragraph");
function check() {
let word = document.querySelector("#word").value;
let wordReversed = word.split('').reverse().join("");
if (word === wordReversed) {
paragraph.innerHTML = `${word} is a palindrome.`;
} else {
paragraph.innerHTML = `${word} isn't a palindrome.`;
}
}
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="" />
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">
You are using an <strong>outdated</strong> browser. Please
upgrade your browser to improve your experience.
</p>
<![endif]-->
<div id="formulary">
<form>
<header>
<h1>Is it a palindrome?</h1>
</header>
<label for="word">
Word:
<input type="text" id="word" placeholder="Enter the word here..." />
</label>
<button type="button" onclick="check()">Check</button>
<div>
<p id="paragraph">And the answer is:</p>
</div>
</form>
</div>
<script src="index.js" async defer></script>
</body>
</html>
The function document.querySelector("word") is returning the DOM element.
You need to call .value to get the input value.
Moreover, you select it by ID so you should append # before.
let word = document.querySelector("#word").value;
I m trying to add angular-schema-form to AngularJs Seed.
I followed the steps in angular-schema-form repository:
view1.js
'use strict';
angular.module('myApp.view1', ['ngRoute', 'schemaForm'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'FormController'
});
}])
.controller('FormController', function ($scope) {
$scope.schema = {
type: "object",
properties: {
name: {
type: "string",
minLength: 2,
title: "Name",
description: "Name or alias"
},
title: {
type: "string",
enum: ['dr', 'jr', 'sir', 'mrs', 'mr', 'NaN', 'dj']
}
}
};
$scope.form = [
"*",
{
type: "submit",
title: "Save"
}
];
$scope.model = {};
});
view1.html
<div ng-controller="FormController">
<form sf-schema="schema" sf-form="form" sf-model="model"></form>
</div>
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
I got the following error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module myApp.view1 due to:
Error: [$injector:modulerr] Failed to instantiate module schemaForm due to:
Error: [$injector:nomod] Module 'schemaForm' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.6.8/$injector/nomod?p0=schemaForm
You are missing the references for the schemaForm, you need to add it above app.js
<script src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-schema-form/dist/schema-form.min.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
So I can't seem to get my controller to work when it is in a different file.
Right now I am just trying to do small test controller to see how angular works. Here are my files:
Here is my app.js
(function(angular) {
var AngularApp = angular.module('AngularApp', []);
})(window.angular);
Here is my controller file: TestController.js
(function(angular) {
var AngularApp = angular.module('AngularApp');
AngularApp.controller("TestController", ["$scope", function($scope) {
$scope.appTitle = "AngularApp";
}]);
})(window.angular);
Here is my html:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="" ng-app="AngularApp" ng-controller="TestController"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title ng-bind="appTitle"></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="stylesheet" href="/assets/libs/bootstrap/dist/css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<link rel="stylesheet" href="/assets/libs/bootstrap/dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="/assets/css/main.css">
<script src="/assets/libs/modernizr-2.8.3-respond-1.4.2.min.js"></script>
<script src="/assets/libs/angular/angular.js"></script>
</head>
<body>
...
</div> <!-- /container --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/assets/libs/jquery-1.11.2.min.js"><\/script>')</script>
<script src="/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/app/app.js"></script>
<scirpt src="/app/components/home/TestController.js"></script>
</body>
</html>
Right now I am just trying to replace the title of the page. I have tried numerous different ways of doing this. Right now I have the js wrapped in immediately invoked functions, but I have tried with out that. I have tried making the module a global variable and just using that variable to define a controller. Ex:
App.js:
AngularApp = angular.module('AngularApp', []);
TestController.js:
AngularApp.controller("TestController", ["$scope", function($scope) {
$scope.appTitle = "AngularApp";
}]);
I have also tried the dependencies with and without the array notation.
The controller seems to work fine when it is in the same file but I can't get it to work when it is in a seperate file. I always get the following error:
I am using angular version 1.4.8
Any help would be greatly appreciated!
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
When I run the following in my browser I get two list items, but nothing is displayed within the two items. So the loop itself works but nothing is being pulled from my list.
I reedited my submission to show an accurate representation of my problem
HTML
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/angular.min.js"></script>
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
</head>
<!-- initial angular declaration -->
<body id="main" ng-app>
<div ng-controller ="EductationCtrl">
<ul class = "list-unstyled">
<li ng-repeat = "school in schools">
{{schools.name}}
</li>
</ul>
</div>
<script src="js/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.0.min.js"><\/script>')</script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
Javascript
function EductationCtrl($scope) {
$scope.schools = [
{name: 'university', major: 'Computer Science'},
{name: 'College', major: 'Politcal Science and Finance'},
];
}
This is the end result:
<li ng-repeat="school in schools" class="ng-scope ng-binding">
</li>
<li ng-repeat="school in schools" class="ng-scope ng-binding">
</li>
You have a typo: {{peole.name}} should be {{people.name}}
Plunker Demo
Its a typo:
{{schools.name}}
to
{{school.name}}
i have a problem with some Events in PhoneGap. When i try to register an event-listener to the pause and backbutton event for an phonegap-app (build on PhoneGap-Build) the events aren't recognized.
My code looks like the following:
function onBackKeyDown() {
console.log("Back");
}
function onMenuKeyDown() {
console.log("Menu");
}
function pause() {
console.log("Menu");
}
function ready(){
console.log("ready");
document.addEventListener("pause", pause, false);
document.addEventListener("backbutton", onBackKeyDown, false);
document.addEventListener("menubutton", onMenuKeyDown, false);
}
document.addEventListener("deviceready", ready, false);
If i run this app on a HTC Wildfire i can see in the logs, that the function ready is reached (the output is done). But if i hit the Back or search button or exit the app, then no other function is called.
Can anyone help me with this?
Thanks!
The rest of my code looks like the following (I just wrote a small example to be sure that there are no errors in my code...)
main.js:
function onBackKeyDown() {
console.log("Back");
alert("Back");
}
function onMenuKeyDown() {
console.log("Menu");
alert("Menu");
}
function onMenuSearch() {
console.log("onMenuSearch");
alert("onMenuSearch");
}
function pause() {
console.log("Menu");
alert("Pause");
}
function onResume(){
console.log("Resume");
alert("Resume");
}
function ready(){
alert("Ready");
console.log("ready");
document.addEventListener("pause", pause, false);
document.addEventListener("backbutton", onBackKeyDown, false);
document.addEventListener("menubutton", onMenuKeyDown, false);
document.addEventListener("searchbutton", onMenuSearch, false);
document.addEventListener("resume", onResume,false);
}
document.addEventListener("deviceready", ready, false);
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
</head>
<body>
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<script src="js/main.js"></script>
</body>
</html>
As I already said, I am using PhonegapBuild to build the application over several platforms, therfore i do not have the cordova script integrated in my application.
Thanks...
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
</head>
<body>
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<script src="js/main.js"></script>
</body>
</html>