For some reason, protractor is throwing the error angular never provided resumeBootstrap when navigating to the page using browser.get(). I tried switching data-ng-app to ng-app but that didn't help.
Full Error
Error: Angular could not be found on the page chrome-extension://anmdjkcbefbfgijkigepfecgojdnaida/control.html : angular never provided resumeBootstrap
spec
var driver = browser.driver;
describe('Chrome Extension Control Page', function () {
it('Should be defined', function () {
browser.get('chrome-extension://anmdjkcbefbfgijkigepfecgojdnaida/control.html');
expect(driver.getTitle()).toEqual("Control Page");
expect(driver.executeScript(function () {
return typeof window !== "undefined";
})).toBeTruthy();
element(by.css('input')).click();
});
});
html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Control Page</title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/bootstrap-switch.min.css">
<link rel="stylesheet" href="assets/css/bootstrap-theme.css">
<link rel="stylesheet" href="assets/css/navbar.css">
<link rel="stylesheet" href="assets/css/popup.css">
<script src="assets/js/lib/jquery.min.js"></script>
<script src="assets/js/lib/angular.min.js"></script>
<script src="assets/js/lib/bootstrap.min.js"></script>
<script src="assets/js/lib/ui-bootstrap-tpls.min.js"></script>
<script src="assets/js/lib/angular-bootstrap-switch.min.js"></script>
<script src="assets/js/lib/bootstrap-switch.min.js"></script>
<script src="assets/modules/translate-filter.js"></script>
<script src="assets/modules/review-box.js"></script>
<script src="assets/modules/enable-switch.js"></script>
<script src="assets/modules/navbar.js"></script>
<script src="assets/modules/extension-interface.js"></script>
<script src="assets/modules/status-monitor.js"></script>
<script src="assets/modules/state-monitor.js"></script>
<script src="assets/js/control-ui.js"></script>
</head>
<body data-ng-app="controlPage">
<div ng-controller="ControlPageCtrl">
<extension-navbar></extension-navbar>
<div class="">
<div class="jumbotron" style="background-color: transparent; margin-bottom: 0">
<status-monitor-area></status-monitor-area>
<hr>
<div>
<div class="row">
<div class="col-xs-8">
<state-message></state-message>
</div>
<div class="col-xs-4">
<enable-switch></enable-switch>
</div>
</div>
<state-progress-bar></state-progress-bar>
</div>
<state-information-box></state-information-box>
</div>
</div>
</div>
</body>
</html>
EDIT: This did not fix the problem. I have no idea why protractor isn't working.
Weird fix. It worked after I upgraded to the latest version of Angular.
I didn't consider it because the upgrade available was from v1.3.15 to v1.3.16. Seriously weird stuff, Angular.
Related
I have a code to generate a normal date time picker, but it is throwing me this error Uncaught TypeError: jQuery(...).datetimepicker is not a function
Can anyone help me, i guess it is because of arrangment of links and bootstrap , but i don't have a clear picture of it.
below is my code
<html>
<head>
<link rel="stylesheet" href="jquery.datetimepicker.css">
<script src="jquery-1.8.2.min.js"></script>
<!-- <script src="jquery-ui.js"></script> -->
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script src="jquery.datetimepicker.js"></script>
<script src="jquery.validate.min.js"></script>
<link rel="stylesheet" href="fonts/icomoon/style.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script>
$(document).ready(function() {
jQuery('#datevalue').datetimepicker();
jQuery('#completed').datetimepicker();
});
</script>
</head>
<body>
<form action="#" method="post">
<div id="AlignMainDiv">
<div class="form-group last mb-4">
<label for="date">Date</label>
<input type="text" class="form-control" id="datevalue">
</div>
<div class="form-group last mb-4">
<label for="username">Completed Date and Time</label>
<input type="text" class="form-control" id="completed">
</div>
</div>
</form>
</body>
</html>
Press F11, open the Chrome debug, go to Network > JS tab and check if any of the included js libraries return a 404 status. Maybe you misspelled a script name or URL path.
You can also try to include the libraries directly from CDNs:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<script>
$( function() {
$('#datevalue').datetimepicker();
$('#completed').datetimepicker();
} );
</script>
</head>
I dont know whether your datetimepicker library is loading or not.
You can use following CDN.
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.min.js"></script>
Following code will load todays date and will show datepicker on input click
<script>
$(document).on("click", "#datevalue" , function() {
$(this).datetimepicker({
timepicker:false, format:"d-m-Y","setDate": new Date(),
}).focus();
});
</script>
I am trying to change pages on in my project. I have two divs containing information and they each have a data-role of "page". In addition, they both have ids. On my js file I have a simple onclick event that calls a function that then uses the
$.mobile.changePage("#2");
To go from my first div to my second div. The only problem is whenever I try to change the page I am getting an error:
Uncaught TypeError: Cannot read property 'changePage' of undefined
I have already searched on other peoples posts on stack overflow and haven't found anything that can help me. Here is some of my code:
global.html
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<script src="js/lib/jquery-2.1.4.js"></script>
<link rel="stylesheet" type="text/css" href="css/lib/jquery.mobile-
1.4.5.css">
<script src="js/global.js"></script>
<script src="js/lib/jquery.mobile-1.4.5.js"></script>
<script src="js/p5.min.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js">
</script>
</head>
<body>
<div data-role="page" id="1" style="background-color: #56f0b1;">
<button id ="startGame" type="button">Start Game</button>
</div>
<div data-role="page" id="2" style="background-color: #56f0b1;">
<h2>Page 2 </h2>
</div>
</body>
</html>
global.js
$(document).ready(function () {
$("#startGame").on("click",getToNextPage);
});
function getToNextPage(){
$.mobile.changePage("#2");
}
As mentioned in comments, the core jQuery library must be loaded before jQuery Mobile.
In your code, it seems you're loading two jQuery versions and one of them is loaded after jQuery Mobile.
Also, according to comments in this question, the page IDs should not be only numeric.
Here's an example:
$(document).ready(function() {
$("#startGame").on("click", getToNextPage);
});
function getToNextPage() {
$.mobile.changePage("#page2");
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="page" id="page1" style="background-color: #56f0b1;">
<button id="startGame" type="button">Start Game</button>
</div>
<div data-role="page" id="page2" style="background-color: #56f0b1;">
<h2>Page 2 </h2>
</div>
I'm running a simple Firebase App with only 3 files. When I run in the browser I get this error when trying to connect to my firebase DB:
Error: [$injector:unpr] http://errors.angularjs.org/1.3.0/$injector/unpr?p0=%24firebaseObjectProvider%20%3C-%20%24firebaseObject
Here is my app.js:
(function() {
var app = angular.module("scheduleApp", ['firebase']);
app.controller('MainController',['$scope','$firebaseObject',function($scope, $firebaseObject) {
var ref = new Firebase("https://gajobs.firebaseio.com/");
$scope.data = $firebaseObject(ref);
}]);
})();
Here is my index.html:
<!DOCTYPE html>
<html lang="en" ng-app="scheduleApp" >
<head>
<meta charset="UTF-8">
<title>GA Jobs</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.3.0/journal/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/1.1.1/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div class="container" ng-controller="MainController">
<div class="page-header text-center">
<h1>GA Job Board</h1>
</div>
<div class="row times">
<div class="col-xs-4 text-center">
<h2>Contact</h2>
<div class="time-slot">
<input type="checkbox" id="contact">
<label for="contact">Tableu</label>
</div>
</div>
</div>
<p class="text-center">
Reset
</p>
</div>
</body>
</html>
Not sure what is wrong here, it seems to not like the $firebaseObject that I am trying t use...
As mentioned in the comments you're using an old version of AngularFire.
$firebaseObject and $firebaseArray were introduced in 1.0.
In 0.8 you have to use $firebase(ref).$asObject(), but please don't use this old version as it is not supported.
This is index.html file
<!doctype html>
<html ng-app="mm">
<head>
<title>Country page</title>
<script src="js/angular.js"></script>
<link href="js/bootstrap.css" rel="stylesheet" />
<link href="js/bootstrap-theme.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<script src="app.js"></script>
<style>
.box {
margin:0px auto;
width: 400px
}
</style>
</head>
<body>
<div class="box" ng-controller="mc">
<p ng-if="bool">Hello!!!</p>
</div>
</body>
</html>
This is app.js file
var mm = angular.module('mm', []);
var mc = mm.controller('mc', function ($scope){
$scope.bool = false;
});
I am very beginer at AngularJS and I am confused why "Hello!!!" still on my page but my bool variable is "false".
You are doing correctly everything, May be you should check if angular is loaded, (with console.log(angular) ).
It does work for me: https://jsfiddle.net/shimonb/h44rduky/3/
Try to change your tag to <div ng-show="bool">Hello!!</div>
I just set up AngularJS version 1.4.2 and now everything is ok! Thanks all for help!
This is for a Backbone + Marionette app.
Here's the offending code.
<script type="text/javascript">
//<![CDATA[
Gameq.start({
currentUser: gon.current_user,
env: gon.environment,
signed_in: gon.signed_in,
userSession: gon.user_session
});
//]]>
</script>
Here's the whole document.
<!DOCTYPE html>
<html>
<head>
<title>Gameq</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
//<![CDATA[
window.gon = {};gon.environment="production";gon.signed_in=true;gon.current_user={"created_at":"2013-11-21T23:53:28Z","email":"mikeborg85#gmail.com","id":1,"name":null,"provider":null,"uid":null,"updated_at":"2013-11-28T22:42:42Z"};gon.user_session={};
//]]>
</script>
<link href="/assets/application-66c0c36aa2fa6c5e2193b02c1ab6534b.css" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/overrides-5e3c108b1b6688f22c03c69f670b1925.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/application-86895940b8f231c1d77366a2444fecc5.js" type="text/javascript"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="bk8ryvwdGqulNZ5Utfu5Q4L3vJ9AjWzYnGgj/H9tMOw=" name="csrf-token" />
</head>
<div id="wrap">
<div id="global-nav-region" class="navbar"></div>
<div id="main-region"></div>
</div>
<div id="footer">
<div class="bottom-menu">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<ul class="bottom-links">
<li>Privacy</li>
<li>Terms</li>
<li>Support</li>
</ul>
</div>
<div class="col-md-2">
<ul class="bottom-icons">
<li><a class="fui-facebook" href="https://www.facebook.com/gameqme"></a></li>
<li><a class="fui-twitter" href="#fakelink"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
//<![CDATA[
Gameq.start({
currentUser: gon.current_user,
env: gon.environment,
signed_in: gon.signed_in,
userSession: gon.user_session
});
//]]>
</script>
</html>
When I use any desktop browser it works, but when I test in iOS I get a "Reference Issue Can't Find Variable Gameq" error. It works fine in iOS when its hosted on localhost but not when its on heroku.
Why would Heroku cause this problem?
EDIT:
I've tried wrapping the offending code in document ready functions.
It turns out the problem was indeed only with mobile browsers. Moving the following code into app/assets/javascripts/application.js within the rails application fixed the problem.
Gameq.start({
currentUser: gon.current_user,
env: gon.environment,
signed_in: gon.signed_in,
userSession: gon.user_session
});
I can't really explain what is different about loading within mobile devices that causes this error.