Angular.js loading without reference?

Angular.js loading without reference? - javascript

I'm working on reverse engineering a User Interface that is functioning minus a few bugs. It was coded in HTML, CSS, and JavaScript and pulls data via a REST API. The UI is set up in a Windows environment.
When I was looking through the index.html home page for the UI, there is quite a bit of Angular.js used in the interface, yet the script that calls angular.js is commented out. I'm confused about how angular.js could run on the server without being called. Is there some way to reference or parse angular.js on a server without referencing it in the HTML without calling it like you normally would?
I'm confused. Any ideas would be helpful. I included the index.html file below:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width">
<meta http-equiv="cache-control" content="no-cache, no-store"/>
<meta http-equiv="expires" content="-1"/>
<meta http-equiv="pragma" content="no-cache"/>
<link rel="icon" href="content/images/favicon.png"/>
<!--<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/bootstrap-sass/assets/javascripts/bootstrap.min.js"></script>-->
<!--<script src="/js/app.js"></script>-->
<link rel="stylesheet" type="text/css" href="content/icomoon/style.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="content/css/bootstrap.css?0.0.0.164">
<link rel="stylesheet" type="text/css"
href="bower_components/bootstrap-dialog/dist/css/bootstrap-dialog.min.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="bower_components/jquery-ui/themes/base/jquery-ui.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="bower_components/angular-ui-grid/ui-grid.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="bower_components/spectrum/spectrum.css?0.0.0.164">
<link rel="stylesheet" type="text/css"
href="custom_components/eonasdan-bootstrap-datetimepicker/css/bootstrap-datetimepicker.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="bower_components/slick-carousel/slick/slick.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="bower_components/slick-carousel/slick/slick-theme.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="custom_components/loader-display/loadDisplay.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="content/css/keyboard.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="content/css/noty.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="custom_components/ladda-bootstrap/ladda-themeless.css?0.0.0.164">
<link rel="stylesheet" type="text/css" href="content/css/daikin_mis_hmi.css?0.0.0.164">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!-- if logged in-->
<button ng-if="!isHideMainControls" type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">ToggleNav</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" ng-click="goHome()">
<img src="content/images/logo.png">
</a>
<span ng-if="!isHideMainControls" class="visible-xs visible-sm" alarm-indicator></span>
<span ng-if="!isHideMainControls" class="visible-sm" dm-keyboard-widget></span>
<span ng-if="!isHideMainControls" class="visible-xs visible-sm" network-mode></span>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="hidden-xs hidden-sm"><span
ng-if="!isHideMainControls" network-mode></span></li>
<li class="hidden-xs hidden-sm">
<span ng-if="!isHideMainControls" alarm-indicator></span>
<div dm-keyboard-widget></div>
</li>
<!-- if logged in-->
<li class="divider-vertical hidden-xs hidden-sm"></li>
<li ng-class="{'display-none': !isApplicationLoaded}" class="display-none">
<div ng-cloak class="logged-in-user-info" data-toggle="">
<div class="user-name">
{{sessionUser.firstName}} {{sessionUser.lastName}}
</div>
<div ng-if="!isHideMainControls" ng-hide="sessionUser.isGuest" class="log-out">
<a ng-click="logout();" href="#"><span class="glyphicon glyphicon-log-out"></span>{{generalLabels.genlogout}}</a>
</div>
<div ng-show="sessionUser.isGuest" class="log-out">
<a ui-sref="login" href="#"><span class="glyphicon glyphicon-log-out"></span>{{generalLabels.genlogin}}</a>
</div>
</div>
</li>
<li class="visible-xs visible-sm dropdown">
<ul class="submenu" ng-include src="'views/shared-templates/main-menu-items.html'">
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="main-wrapper">
<dm-main-menu class="hidden-block-xs hidden-block-sm"></dm-main-menu>
<div style="display: none" id="appFailedLoadMessage"></div>
<div class="wrap-loader" ng-hide="isApplicationLoaded">
<div id="load-background" class="show-background">
<div class="loading-display">
<img class="ajax-loader" src="custom_components/loader-display/img/ajax-loader.gif">
<br>
<div class="display-none">
<img src="content/images/noty/ErrorMessageBackground.png" width="1" height="1" alt=""/>
<img src="content/images/noty/SuccessBackground.png" width="1" height="1" alt=""/>
<img src="content/images/noty/accept.png" width="1" height="1" alt=""/>
<img src="content/images/noty/error_ico.png" width="1" height="1" alt=""/>
<img src="content/images/noty/wrong.png" width="1" height="1" alt=""/>
<img src="content/images/control-buttons/on_off1.png" width="1" height="1" alt=""/>
<img src="content/images/control-buttons/on_off2.png" width="1" height="1" alt=""/>
<img src="content/images/control-buttons/switcher1.png" width="1" height="1" alt=""/>
<img src="content/images/control-buttons/switcher2.png" width="1" height="1" alt=""/>
</div>
<span></span>
</div>
</div>
</div>
<!-- BreadCrumbs go here-->
<div ng-if="!isHideMainControls" class="breadcrumbs">
<div class="container">
<div ncy-breadcrumb></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div ui-view></div>
</div>
</div>
</div>
</div>
<i class="icon-arrow-up icon-large"></i> {{generalLabels.gentop}}
<div class="footer">
<div class="container">
<div class="row">
<div class="col-sm-4 hidden-xs visible-sm visible-md visible-lg text-center-xxs text-center-xs text-left-sm text-left-md text-left-lg">
<!-- Easter Egg - footer double click show current viewport size and version -->
<span class="js-ui-version" style="display:none"></span>
<span class="js-viewport-size" style="display:none"></span>
</div>
<div ng-class="{'display-none': !isApplicationLoaded}"
class="display-none col-sm-4 hidden-xs visible-sm visible-md visible-lg text-center-sm text-center-md text-center-lg">
<a target="_blank" ng-href="{{daikinAppliedLink.url}}">{{daikinAppliedLink.text}}</a>
</div>
<div ng-class="{'display-none': !isApplicationLoaded}"
class="display-none col-sm-4 visible-xs hidden-sm hidden-md hidden-lg text-center-xxs text-center-xs">
<a target="_blank" ng-href="{{daikinAppliedLink.url}}">{{daikinAppliedLink.text}}</a>
</div>
<div class="col-sm-4 visible-xs hidden-sm hidden-md hidden-lg text-center-xxs text-center-xs">
<!-- Easter Egg - footer double click show current viewport size and version -->
<span class="js-ui-version" style="display:none"></span>
<span class="js-viewport-size" style="display:none"></span>
</div>
</div>
</div>
</div>
<script src="../bower_components/fastclick/lib/fastclick.js?0.0.0.164"></script>
<script src="bower_components/requirejs/require.js"></script>
<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function () {
FastClick.attach(document.body);
//todo workaround fixes the problem with selecting a date on the calendar
FastClick.prototype._needsClick = FastClick.prototype.needsClick;
FastClick.prototype.needsClick = function (target) {
if ($(target).parents('.bootstrap-datetimepicker-widget').length > 0) {
return true;
}
return FastClick.prototype._needsClick.call(this, target);
};
}, false);
}
var scriptsLoadTimeoutSeconds = 60;
require.config({
waitSeconds: scriptsLoadTimeoutSeconds,
baseUrl: './js',
urlArgs: '0.0.0.164'
});
require(["./main"]);
DisplayAppNotLoadedMessage = function () {
document.getElementById('load-background').style.display = 'none';
var errorMessageBlock = document.getElementById('appFailedLoadMessage');
errorMessageBlock.style.display = 'block';
errorMessageBlock.innerHTML = 'The system may be either busy or not currently running, please verify status locally at the System Manager PC or try again later. If the problem persists, refer to IM 1224 for more detailed troubleshooting procedures.';
};
// show error message in case of any resources are not loaded
LoadTimeoutId = setTimeout(function () {
DisplayAppNotLoadedMessage();
}, (scriptsLoadTimeoutSeconds + 30) * 1000);
</script>
</body>
</html>

I figured it out. The index.html file was calling Require.JS, which allows you to asynchronously load your scripts to the home page, but creates some issues in tracking dependencies. It's a JavaScript framework that basically allows you to load up an entire folder of JavaScript files asynchronously.

Related

Selenium: How to get the html code generated by javascript

Good day!
I'm new to selenium, and I'm trying to get the html code of website.
The driver.page_source() returns
<html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><script type="text/javascript" src="https://bam.nr-data.net/1/c95cd51526?a=214311961&v=1167.2a4546b&to=ZlBXZxcAVkEHV0NbDV8aYEEMTlpXEg1dU09cWldaCQQXXglTXlxNWFtRVh1PSFoW&rst=369&ref=https://vsmobile.bet9ja.com/bet9ja-mobile/login/&ap=5&be=335&fe=366&dc=363&perf=%7B%22timing%22:%7B%22of%22:1588632697764,%22n%22:0,%22u%22:321,%22ue%22:321,%22f%22:4,%22dn%22:5,%22dne%22:5,%22c%22:5,%22s%22:94,%22ce%22:191,%22rq%22:191,%22rp%22:310,%22rpe%22:313,%22dl%22:325,%22di%22:363,%22ds%22:363,%22de%22:366,%22dc%22:366,%22l%22:366,%22le%22:367%7D,%22navigation%22:%7B%7D%7D&fp=362&at=ShdUEV8aRU8%3D&jsonp=NREUM.setToken"></script><script src="https://js-agent.newrelic.com/nr-1167.min.js"></script><script type="text/javascript">(window.NREUM||(NREUM={})).loader_config={licenseKey:"c95cd51526",applicationID:"214311961"};window.NREUM||(NREUM={}),__nr_require=function(e,n,t){function r(t){if(!n[t]){var i=n[t]={exports:{}};e[t][0].call(i.exports,function(n){var i=e[t][1][n];return r(i||n)},i,i.exports)}return n[t].exports}if("function"==typeof __nr_require)return __nr_require;for(var i=0;i<t.length;i++)r(t[i]);return r}({1:[function(e,n,t){function r(){}function i(e,n,t){return function(){return o(e,[u.now()].concat(f(arguments)),n?null:this,t),n?void 0:this}}var o=e("handle"),a=e(4),f=e(5),c=e("ee").get("tracer"),u=e("loader"),s=NREUM;"undefined"==typeof window.newrelic&&(newrelic=s);var p=["setPageViewName","setCustomAttribute","setErrorHandler","finished","addToTrace","inlineHit","addRelease"],l="api-",d=l+"ixn-";a(p,function(e,n){s[n]=i(l+n,!0,"api")}),s.addPageAction=i(l+"addPageAction",!0),s.setCurrentRouteName=i(l+"routeName",!0),n.exports=newrelic,s.interaction=function(){return(new r).get()};var m=r.prototype={createTracer:function(e,n){var t={},r=this,i="function"==typeof n;return o(d+"tracer",[u.now(),e,t],r),function(){if(c.emit((i?"":"no-")+"fn-start",[u.now(),r,i],t),i)try{return n.apply(this,arguments)}catch(e){throw c.emit("fn-err",[arguments,this,e],t),e}finally{c.emit("fn-end",[u.now()],t)}}}};a("actionText,setName,setAttribute,save,ignore,onEnd,getContext,end,get".split(","),function(e,n){m[n]=i(d+n)}),newrelic.noticeError=function(e,n){"string"==typeof e&&(e=new Error(e)),o("err",[e,u.now(),!1,n])}},{}],2:[function(e,n,t){function r(e,n){var t=e.getEntries();t.forEach(function(e){"first-paint"===e.name?c("timing",["fp",Math.floor(e.startTime)]):"first-contentful-paint"===e.name&&c("timing",["fcp",Math.floor(e.startTime)])})}function i(e,n){var t=e.getEntries();t.length>0&&c("lcp",[t[t.length-1]])}function o(e){if(e instanceof s&&!l){var n,t=Math.round(e.timeStamp);n=t>1e12?Date.now()-t:u.now()-t,l=!0,c("timing",["fi",t,{type:e.type,fid:n}])}}if(!("init"in NREUM&&"page_view_timing"in NREUM.init&&"enabled"in NREUM.init.page_view_timing&&NREUM.init.page_view_timing.enabled===!1)){var a,f,c=e("handle"),u=e("loader"),s=NREUM.o.EV;if("PerformanceObserver"in window&&"function"==typeof window.PerformanceObserver){a=new PerformanceObserver(r),f=new PerformanceObserver(i);try{a.observe({entryTypes:["paint"]}),f.observe({entryTypes:["largest-contentful-paint"]})}catch(p){}}if("addEventListener"in document){var l=!1,d=["click","keydown","mousedown","pointerdown","touchstart"];d.forEach(function(e){document.addEventListener(e,o,!1)})}}},{}],3:[function(e,n,t){function r(e,n){if(!i)return!1;if(e!==i)return!1;if(!n)return!0;if(!o)return!1;for(var t=o.split("."),r=n.split("."),a=0;a<r.length;a++)if(r[a]!==t[a])return!1;return!0}var i=null,o=null,a=/Version\/(\S+)\s+Safari/;if(navigator.userAgent){var f=navigator.userAgent,c=f.match(a);c&&f.indexOf("Chrome")===-1&&f.indexOf("Chromium")===-1&&(i="Safari",o=c[1])}n.exports={agent:i,version:o,match:r}},{}],4:[function(e,n,t){function r(e,n){var t=[],r="",o=0;for(r in e)i.call(e,r)&&(t[o]=n(r,e[r]),o+=1);return t}var i=Object.prototype.hasOwnProperty;n.exports=r},{}],5:[function(e,n,t){function r(e,n,t){n||(n=0),"undefined"==typeof t&&(t=e?e.length:0);for(var r=-1,i=t-n||0,o=Array(i<0?0:i);++r<i;)o[r]=e[n+r];return o}n.exports=r},{}],6:[function(e,n,t){n.exports={exists:"undefined"!=typeof window.performance&&window.performance.timing&&"undefined"!=typeof window.performance.timing.navigationStart}},{}],ee:[function(e,n,t){function r(){}function i(e){function n(e){return e&&e instanceof r?e:e?c(e,f,o):o()}function t(t,r,i,o){if(!l.aborted||o){e&&e(t,r,i);for(var a=n(i),f=v(t),c=f.length,u=0;u<c;u++)f[u].apply(a,r);var p=s[y[t]];return p&&p.push([b,t,r,a]),a}}function d(e,n){h[e]=v(e).concat(n)}function m(e,n){var t=h[e];if(t)for(var r=0;r<t.length;r++)t[r]===n&&t.splice(r,1)}function v(e){return h[e]||[]}function g(e){return p[e]=p[e]||i(t)}function w(e,n){u(e,function(e,t){n=n||"feature",y[t]=n,n in s||(s[n]=[])})}var h={},y={},b={on:d,addEventListener:d,removeEventListener:m,emit:t,get:g,listeners:v,context:n,buffer:w,abort:a,aborted:!1};return b}function o(){return new r}function a(){(s.api||s.feature)&&(l.aborted=!0,s=l.backlog={})}var f="nr#context",c=e("gos"),u=e(4),s={},p={},l=n.exports=i();l.backlog=s},{}],gos:[function(e,n,t){function r(e,n,t){if(i.call(e,n))return e[n];var r=t();if(Object.defineProperty&&Object.keys)try{return Object.defineProperty(e,n,{value:r,writable:!0,enumerable:!1}),r}catch(o){}return e[n]=r,r}var i=Object.prototype.hasOwnProperty;n.exports=r},{}],handle:[function(e,n,t){function r(e,n,t,r){i.buffer([e],r),i.emit(e,n,t)}var i=e("ee").get("handle");n.exports=r,r.ee=i},{}],id:[function(e,n,t){function r(e){var n=typeof e;return!e||"object"!==n&&"function"!==n?-1:e===window?0:a(e,o,function(){return i++})}var i=1,o="nr#id",a=e("gos");n.exports=r},{}],loader:[function(e,n,t){function r(){if(!x++){var e=E.info=NREUM.info,n=d.getElementsByTagName("script")[0];if(setTimeout(s.abort,3e4),!(e&&e.licenseKey&&e.applicationID&&n))return s.abort();u(y,function(n,t){e[n]||(e[n]=t)}),c("mark",["onload",a()+E.offset],null,"api");var t=d.createElement("script");t.src="https://"+e.agent,n.parentNode.insertBefore(t,n)}}function i(){"complete"===d.readyState&&o()}function o(){c("mark",["domContent",a()+E.offset],null,"api")}function a(){return O.exists&&performance.now?Math.round(performance.now()):(f=Math.max((new Date).getTime(),f))-E.offset}var f=(new Date).getTime(),c=e("handle"),u=e(4),s=e("ee"),p=e(3),l=window,d=l.document,m="addEventListener",v="attachEvent",g=l.XMLHttpRequest,w=g&&g.prototype;NREUM.o={ST:setTimeout,SI:l.setImmediate,CT:clearTimeout,XHR:g,REQ:l.Request,EV:l.Event,PR:l.Promise,MO:l.MutationObserver};var h=""+location,y={beacon:"bam.nr-data.net",errorBeacon:"bam.nr-data.net",agent:"js-agent.newrelic.com/nr-1167.min.js"},b=g&&w&&w[m]&&!/CriOS/.test(navigator.userAgent),E=n.exports={offset:f,now:a,origin:h,features:{},xhrWrappable:b,userAgent:p};e(1),e(2),d[m]?(d[m]("DOMContentLoaded",o,!1),l[m]("load",r,!1)):(d[v]("onreadystatechange",i),l[v]("onload",r)),c("mark",["firstbyte",f],null,"api");var x=0,O=e(6)},{}],"wrap-function":[function(e,n,t){function r(e){return!(e&&e instanceof Function&&e.apply&&!e[a])}var i=e("ee"),o=e(5),a="nr#original",f=Object.prototype.hasOwnProperty,c=!1;n.exports=function(e,n){function t(e,n,t,i){function nrWrapper(){var r,a,f,c;try{a=this,r=o(arguments),f="function"==typeof t?t(r,a):t||{}}catch(u){l([u,"",[r,a,i],f])}s(n+"start",[r,a,i],f);try{return c=e.apply(a,r)}catch(p){throw s(n+"err",[r,a,p],f),p}finally{s(n+"end",[r,a,c],f)}}return r(e)?e:(n||(n=""),nrWrapper[a]=e,p(e,nrWrapper),nrWrapper)}function u(e,n,i,o){i||(i="");var a,f,c,u="-"===i.charAt(0);for(c=0;c<n.length;c++)f=n[c],a=e[f],r(a)||(e[f]=t(a,u?f+i:i,o,f))}function s(t,r,i){if(!c||n){var o=c;c=!0;try{e.emit(t,r,i,n)}catch(a){l([a,t,r,i])}c=o}}function p(e,n){if(Object.defineProperty&&Object.keys)try{var t=Object.keys(e);return t.forEach(function(t){Object.defineProperty(n,t,{get:function(){return e[t]},set:function(n){return e[t]=n,n}})}),n}catch(r){l([r])}for(var i in e)f.call(e,i)&&(n[i]=e[i]);return n}function l(n){try{e.emit("internal-error",n)}catch(t){}}return e||(e=i),t.inPlace=u,t.flag=a,t}},{}]},{},["loader"]);</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Adapter</title>
<!-- DEPENDENCIES -->
<link rel="shortcut icon" href="img/login_favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu:400,700,400italic" rel="stylesheet" type="text/css">
<link href="css/sportsbook.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700">
<link href="css/demo.css" rel="stylesheet">
<link href="css/loginBetin.css" rel="stylesheet">
<link href="css/login.css" rel="stylesheet">
<link href="plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="plugins/jquery-1.12.4/jquery.min.js"></script>
<script src="plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- Javascript client-side code -->
<script type="text/javascript">
var lang = "";
function openSelection(mode, uri){
var url = "https://vsmobile.bet9ja.com" + uri + (uri.indexOf('?') ? "&mode=" : "?mode=") + mode + "&lang=" + lang;
window.location.replace(url);
}
function backToMain(){
var url = "https://mobile.bet9ja.com/Mobile";
window.location.replace(url);
}
</script>
<script type="text/javascript" src="js/grapi.js"></script>
</head>
<body>
<div class="container" id="product" style="display: none">
</div>
<div class="container" id="playarea" style="">
<script>
var isLoaded = false;
function onLoadIframe(iframe) {
if (!isLoaded) {
// iframe.src = '?game=league&OTP=905f9407-8b82-4cf6-9d63-f7bf7fe4da6c&mode=premier&lang='; // './index-iframe-content.html' + window.location.search;
if( iframe.src != "" )
{
isLoaded = true;
}
}
else
{
goBackUrl();
}
}
eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
eventer = window[eventMethod];
messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
eventer(messageEvent, function (e) {
let data = e.data.split('$');
let command = data[0];
if (command == "goHome") {
backToMain();
}
}, false);
</script>
<div style="${bet9ja.iframe.style}">
<iframe id="playAreaFrame" onload="onLoadIframe(this)" style="
position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;border:0;
" src="https://vsmobile.bet9ja.com/mobile-1.94.35/themes/?sk=bet9ja&t=644ee448-8fb1-426c-9922-31688a0a85f6&pinHash=02ba41004b38f08bf291e763d02ec2b0&pid=14001&v=0&text=Premier&homeUrl=https://mobile.bet9ja.com/Mobile&otp=905f9407-8b82-4cf6-9d63-f7bf7fe4da6c&ss=&bl=&vu=0">
</iframe>
</div>
</div>
<script type="text/javascript" charset="utf-8">
$(function() {
var input = {"game":"league","OTP":"905f9407-8b82-4cf6-9d63-f7bf7fe4da6c","mode":"premier","lang":""};
var u = "905f9407-8b82-4cf6-9d63-f7bf7fe4da6c";
var home = ""; //"https://vsmobile.bet9ja.com/bet9ja-mobile/login/";
var params = "&pid=14001&v=0&text=Premier";
var game = "league_premier";
grapi.loggedUser(u,input,home,params,game,true );
});
</script>
<script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","licenseKey":"c95cd51526","applicationID":"214311961","transactionName":"ZlBXZxcAVkEHV0NbDV8aYEEMTlpXEg1dU09cWldaCQQXXglTXlxNWFtRVh1PSFoW","queueTime":0,"applicationTime":5,"atts":"ShdUEV8aRU8=","errorBeacon":"bam.nr-data.net","agent":""}</script>
</body></html>
But what happens in the website, is another page will load after this one, which contains the information and numbers that I need, and when I inspect the page using Chrome I find an other html in side the previous one (this one is the one I need):
<html lang="en" class="ui-mobile"><head><base href="https://vsmobile.bet9ja.com/mobile-1.94.35/themes/?sk=bet9ja&t=644ee448-8fb1-426c-9922-31688a0a85f6&pinHash=02ba41004b38f08bf291e763d02ec2b0&pid=14001&v=0&text=Premier&homeUrl=https://mobile.bet9ja.com/Mobile&otp=905f9407-8b82-4cf6-9d63-f7bf7fe4da6c&ss=&bl=&vu=0#bet"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title><link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0"><link rel="stylesheet" href="../plugins/jquery-mobile/css/jquery.mobile-1.4.4.css"><link rel="stylesheet" href="../fonts/Icomoon/icomoon.css"><script type="text/javascript" async="" src="https://d31qbv1cthcecs.cloudfront.net/atrk.js"></script><script type="text/javascript" src="../plugins/jquery-mobile/jquery-1.11.1.min.js"></script><script type="text/javascript" src="../plugins/jquery-mobile/jquery.mobile-1.4.4.min.js"></script><script type="text/javascript" src="../plugins/md5/md5.min.js"></script><script type="text/javascript" src="../plugins/ejs/ejstpl.js"></script><script type="text/javascript" src="_base/views/views.min.1.94.35.js"></script><script type="text/javascript" src="../js/lib.min.1.94.35.js"></script><script type="text/javascript" src="bet9ja/js/tracking.js"></script><script async="" src="//static.hotjar.com/c/hotjar-243625.js?sv=5"></script><script type="text/javascript" src="bet9ja/js/certify.js"></script><link id="dynamic-favicon" rel="shortcut icon" href="bet9ja/assets/favicon.ico"><link rel="stylesheet" type="text/css" href="bet9ja/css/style.min.1.94.35.css"></head><body class="ui-mobile-viewport ui-overlay-a" style="padding-top: 0px;"><div class="panel left ui-panel ui-panel-position-left ui-panel-display-push ui-panel-closed ui-body-inherit ui-panel-animate" data-role="panel" data-position="left" data-display="push" id="menu_left_panel">
<div class="ui-panel-inner"><div class="panel-container">
<div id="playlist-selector"></div>
<div class="menu-container">
<div id="deposit-now-container">
Deposit now
</div>
<div id="deposit-now-container-min">
<div class="deposit-now-service-container">
<img class="payment-img" src="_base/assets/img/mpesa_GR.png">
<div class="payment-text">Paybill Number</div>
<div class="pay-bill">997270</div>
</div>
<div class="deposit-now-service-container">
<img class="payment-img" src="_base/assets/img/airtel_GR.png">
<div class="payment-text">Paybill Name</div>
<div class="pay-bill">997270</div>
</div>
</div>
<div id="menu-logged-information"><table><tbody><tr> <td style="font-weight: bold;color:#7792B5; text-shadow: none">Logged: </td> <td id="nom_log" style="padding-left:20px;font-size:1.5em">3942938</td> </tr><tr> <td style="font-weight: bold;color:#7792B5">Balance: </td> <td style="padding-left:20px;font-weight: bold;color:#FFD326"><span id="current_balance">₦ 0</span></td> </tr> </tbody></table></div>
<ul id="menu"><li class="li_live"></li><li class="li_live"></li><li class="li_live"></li><li class="li_live"></li><li class="li_live"></li><li class="li_live"></li><li class="li_live"></li><li class="li_live"></li><li class="li_live"></li><li class="li_live"></li><li class="li_live"></li>
<li class="li_bet"><a style="padding-left: 20px" id="a_bet_bet" onclick="ViewInit.betButton()" title="Bets" data-rel="close" class="ui-link"><i class="fa fa-chevron icon-home3"> </i>Bet now</a></li>
<li class="li_ticket"><a style="padding-left: 20px" id="a_bet_ticket" onclick="ViewTicketHistory.showTicketHistory(false)" title="Tickets" data-rel="close" class="ui-link"><div id="circle-menu-ticket-id"></div><i class="fa fa-chevron icon-ticket"> </i><span>Tickets </span></a></li>
<li class="li_results"><a style="padding-left: 20px" id="a_bet_results" onclick="ViewResults.showResults()" title="Results" data-rel="close" class="ui-link"><i class="fa fa-chevron icon-trophy"> </i>Results</a></li>
<li class="li_league_table"><a style="padding-left: 20px" id="a_league_table" onclick="ViewLeagueTable.showLeagueTable()" title="League Table" data-rel="close" class="ui-link"><i class="fa fa-chevron icon-calendar"> </i>League Table</a></li>
<!--<li class="li_statment"><a id="a_bet_statment" onclick="$.mobile.pageContainer.pagecontainer('change', '#statements')" title="Statements" data-rel="close">Statements<i class="fa fa-chevron"></i></a></li>-->
<li class="li_back"><a style="padding-left: 20px" id="a_bet_bet" onclick="ViewMenu.close()" title="Bets" data-rel="close" class="ui-link"><i class="fa fa-chevron icon-arrow-left2"> </i>Close menu</a></li>
<li class="li_back"><a style="padding-left: 20px" id="a_bet_bet" onclick="/*window.history.back()*/ window.parent.postMessage('goHome', '*'/*window.location.origin*/);" title="Bets" data-rel="close" class="ui-link">Mobile Home</a></li>
</ul>
<div id="last-session-div"></div>
</div>
</div></div>
</div><div id="loading" style="display: none;"><div id="loading-league">
<div id="loading-div-image">
<img id="loading-image-bar" src="bet9ja/assets/img/intro_loader.gif">
</div>
<div id="loading-div-error"></div>
</div>
</div><div id="bet" class="demo-wrapper ui-page ui-page-theme-a ui-page-active" data-role="page" data-url="bet" tabindex="0" style="position: relative;"><div class="ui-panel-wrapper"><div class="header ui-header ui-bar-inherit" data-role="header" role="banner">
<span class="open left"><i class="fa fa-bars icon-menu" style="font-size: 1.4em; line-height: 2em"></i></span>
<span class="title title-header-mobile"><img class="log-image-header" src="bet9ja/assets/img/logo_1_gl.png" alt="logo">
</span>
<!-- BetSlip -->
<span id="liveBetsTicket">
<a id="bet_ticket" onclick="document.getElementById('div_button_market').scrollIntoView(true);" title="Tickets" class="ui-link">
<i class="fa-lg fa-chevron-right pull-right icon-ticket"></i><span id="bet_ticket_matchResult_counterSelections">0</span>
</a>
</span>
<!-- FreeBets -->
<div id="freeBets">
<a id="freeBetsButton" title="Free bets" class="ui-link">
<div class="icon-free-bets pull-right"></div>
<span id="free_bets_counterSelections">0</span>
</a>
<div id="freeBetsDropdown" class="dropdown" style="display: none;">
<div id="freeBetsDropdownActive" class="active-free-bets"><a class="free-bet no-items">
<span>No available free bets</span>
</a></div>
<div id="freeBetsDropdownInactive" class="inactive-free-bets"></div>
</div>
</div>
</div><div class="content ui-content" data-role="content" style="position: relative;" role="main">
<div class="titan-content" style="display:none">
<div class="div-xs-6 titan-group-container">
<div class="gold-titan-text">Gold Titan</div>
<div class="gold-titan-amount"></div>
</div>
<div class="div-xs-6 titan-shop-container">
<div class="titan-text">Red Titan</div>
<div class="titan-amount"></div>
</div>
</div>
<div class="bets-bonus">
<div class="div-xs-5 bonus-text">Bonus<span>Level: 1</span></div>
<div class="div-xs-1 div-empty"> </div>
<div class="div-xs-5 bonus-amount bonus-collapse">₦ 100</div>
<div class="div-xs-1 bonus-collapse"> <i class="fafa fa-chevron-up" aria-hidden="true"></i></div>
</div>
<div class="bets-bonus-collapsed collapsed">
<div class="div-xs-3 bonus-text">Bonus</div>
<div class="div-xs-1 percentage-bar-bonus-collapsed">0%</div>
<div class="div-xs-4 bonus-amount-collapsed">₦ 100</div>
<div class="div-xs-3 countdown-time-bonus-collapsed bonus-collapse">48h 0' 0''</div>
<div class="div-xs-1 bonus-collapse"> <i class="fafa fa-chevron-down" aria-hidden="true"></i></div>
</div>
<div class="bets-bonus-extended">
<div class="countdown-bar-bonus">
<div class="div-xs-12 countdown-bonus">
<div class="countdown-bonus-inside" style="width: 0%;"> </div>
<div class="circle-percentage" style="left: 0%;">0%</div>
</div>
</div>
<div class="time-bonus">
<div class="countdown-time-bonus">48h 0' 0''</div>
</div>
<div class="text-bonus">
<div class="div-xs-1 div-empty"> </div>
<div class="div-xs-10 bonus-message" style="display: block">
Each ticket you place within the above time gets you closer to your free bonus. Once you claim your bonus your level moves up and your bonus gets higher<i class="info-bonus-hover fafa fa-info" aria-hidden="true" style="margin-left: 5px;border-radius: 5px;"></i></div>
<div class="div-xs-10 bonus-message-winner" style=" display: none;"></div>
<div class="div-xs-1 div-empty"> </div>
</div>
</div>
<div id="bets-time" style="display: block;" class=""><div class="playlist-info">
<img class="playlist-image" height="50" width="50" src="bet9ja/assets/premier.png" alt="14001">
<div id="bets-time-betContdown">00:34</div>
<div>
<span id="text-idleague">League</span>
#<span id="idleague">5269</span>
<span id="leagueWeek">Week <span id="leagueWeekNumber">03</span></span>
</div>
</div>
<div class="credit-with-countdown">
<div id="credit-countdown">₦ 0</div>
</div></div>
<div id="loading-next-event">
<p>Waiting next round<br>
<img src="bet9ja/assets/img/loader_data_race.gif">
</p>
</div>
...ect The code stills too long
I have tried this code:
premiere_legue.click() #this button takes as to page where the problem is
time.sleep(15)
html = driver.execute_script("return document.getElementsByTagName('html')[0].innerHTML")
print(html) # The output is the same first code I shared
I believe that this has to go through a JavaScript code,
Any one can help with this please?

Looks Like the page might be rendered. This solution recommends waiting to retrieve the contents of the page How to get html with javascript rendered sourcecode by using selenium
from time import sleep # this should go at the top of the file
sleep(5)
html = driver.execute_script("return document.getElementsByTagName('html')[0].innerHTML")

How do I get the Materialize Feature Discovery Block to show up on my webpage?

I am trying to get the feature block to show up on the page when I click the open button, but it is not doing anything. I have a sneaking suspension this has to do with the CDNs I'm importing and their position. Or this could have something to do with the order of the relevant tap target sections in my code, I'm not really sure. I followed the Materialize example of how to set this up verbatim, yet it seems like I can't quite get it right.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Mitchell Data Science</title>
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="../static/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="../static/css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://d3js.org/d3.v2.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="static/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="static/css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://d3js.org/d3.v2.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="static/js/materialize.js"></script>
<script src="static/js/init.js"></script>
</head>
<body>
<nav class="black" role="navigation">
<div class="nav-wrapper container-fluid">
<a id="logo-container" href="index.html" class="brand-logo" style="padding-left: 30px;">Mitchell Data Science</a>
<ul class="right hide-on-med-and-down" style="padding-right: 30px">
<li>HOME</li>
<li>PORTFOLIO</li>
</ul>
<ul id="nav-mobile" class="sidenav">
<li>HOME</li>
<li>PORTFOLIO</li>
</ul>
<i class="material-icons">menu</i>
</div>
</nav>
<div id="index-banner" class="parallax-container" style="height: 350px">
<div class="section no-pad-bot">
<div class="container">
<h1 class="header center teal-text text-darken-2" style = "font-weight: 600;">Mitchell Data Science</h1>
<div class="row center">
<h5 class="header col s12 dark" >Explore, Discover, Understand…</h5>
</div>
</div>
</div>
<div class="parallax"><img src="static/media/ds_background_1.1.jpg" alt="Unsplashed background img 1"></div>
</div>
<div class="container">
<div class="section">
<!-- Icon Section -->
<div class="col lg9 m9 s12">
<div class="container">
<br>
<h1> Heroes of Pymoli Data Munging</h1>
<hr><br>
</div>
<div class="row">
<div class="col-3">
<div id="list-example" class="list-group" data-offset="0">
<a class="list-group-item list-group-item-action" href="#list-item-1">Abstract </a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Wrangled Data </a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Summary</a>
</div>
</div>
<!-- Element Showed -->
<div class="fixed-action-btn">
<a id="menu" class="waves-effect waves-light btn-large btn-floating" ><i class="material-icons">menu</i></a>
</div>
<!-- Tap Target Structure -->
<div class="tap-target" data-target="menu">
<div class="tap-target-content">
<h5>Title</h5>
<p>A bunch of text</p>
</div>
</div>
<a class="btn" id="open">open</a>
<a class="btn" id="close">Close</a>
<script>
$('#open').click(function(){
$('.tap-target').tapTarget('open');
});
</script>
<div class="col-9">
<div data-spy="scroll" data-target="#list-example" data-offset="0"
class="scrollspy-example change-color-black">
<h4 id="list-item-1">Abstract</h4>
<p>
<br><br><br><br>
<img src="static/media/heros_fantasy.jpg"
alt="Heroes of Pymoli Abstract Picture">
<p>
In this project, I have explored a game called Heroes Of Pymoli. I will be doing some data
wrangling to clean and organize my dataset, and strategically group the data to derive
educated observations and assumptions.</p>
<br><br><br><br>
</p>
<h4 id="list-item-2">Wrangled Data</h4>
<p>
<br><br><br>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/TP_hero.PNG"
alt="Total Players">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/purchasing_analy_hero.PNG"
alt="Purchasing Analysis">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/gender_count_analy_hero.PNG"
alt="Gender Analysis">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/gender_purchasing_analy_hero.PNG"
alt="Purchasing Analysis by Gender">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/age_analy_hero.PNG"
alt="Age Analysis">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/most_pop_items.PNG"
alt="Most Popular Items">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/most_profitable_items.PNG"
alt="Most Profitable Items">
<br><br>
<hr>
<img src="https://raw.githubusercontent.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/master/top_spenders.PNG"
alt="Top Spenders">
<br><br><br><br><br>
</p>
<h4 id="list-item-3">Summary</h4>
<p>
<br><br><br><br>
- The 20 – 24 yo age group is the biggest age demographic for the game accounting for 44.79% of
the overall players. The two lowest volumes of players by age are the under 10 yo group at 2.95%
and the 40+ group at 2.08%.
<br><br>
- The overall total revenue from the game is $2,379.77.
<br><br>
- From the business standpoint, the 35-39 yo age group would be a goo place to focus the
marketing efforts. Even though their total purchase value is relatively small ($147.67) in
comparison to some other demographics, they spend the most on average per purchase ($3.60).
<br><br>
- Item number 178, the Oathbreaker, Last Hope of the Breaking Storm is both the most popular
item at 12 overall purchases, and the most profitable item at a total purchase value of $50.76.
<br><br>
- The player with the Screen Name Lisosia93 is the most prolific buyer with 5 purchases. This
player has spent a total of $18.96 with an average purchase amount of $3.79.
<br><br>
- Of the all the active players, the vast majority are male (84.03%). There also exists, a
smaller, but notable proportion of female players (14.06%).
<br><br><br><br><br>
</p>
</div>
</div>
</div>
</div>
<div class="container">
<h3>Project Links</h3>
<ul>
<li><a href="https://github.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-"
target="_blank">Heroes Of Pymoli Data Munging</a>
</li>
<li><a href="https://github.com/hgmhd7/DataViz--4---Pandas-Pandas-Pandas-Heroes-of-Pymoli-/blob/master/Heroes_Of_Pymoli_Data_Analysis_FINAL.ipynb"
target="_blank">Heroes Of Pymoli Kernel (Code)</a></li>
<li>Data</li>
</ul>
<br><br>
</div>
</div>
</div>
</div>
</div>
<div class="parallax-container valign-wrapper">
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h5 class="header col s12 light" style = "font-weight: bold">A cutting edge approch to data exploration and vizualization.</h5>
</div>
</div>
</div>
<div class="parallax"><img src="static/media/ds_background_2.jpg" alt="Unsplashed background img 3"></div>
</div>
<footer class="page-footer black">
<div class="row">
<h4>
<a id="logo-container" class="brand-logo" style="padding-left: 25px;">MDS</a>
</h4>
</div>
<div class="footer-copyright" style="padding-left: 25px">
<div class="container-fluid">
Made by <a class="brown-text text-lighten-3"> Howard G. Mitchell III</a>
</div>
</div>
</footer>
<!-- <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> -->
<!--
<script> document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.tap-target');
var instances = M.TapTarget.init(elems, tapTarget('open'));
});</script> -->
</body>
</html>

Be sure to initialise the Feature Discovery:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.tap-target');
var instances = M.TapTarget.init(elems);
});
// Or with jQuery
$(document).ready(function(){
$('.tap-target').tapTarget();
});
https://materializecss.com/feature-discovery.html#initialization

CSS and Javascript aren't working inside my localhost PHP folder

Hello I am trying to implement a page that I originally designed in html and css with javascript in a PHP file. There doesn't seem to be anything wrong with the CSS and javascript as they work alright in the original html file. When I brought the code over to a php file it was originally working properly. Now the sidebar won't collapse and the buttons seem to have reverted back to the original default style. The exact same thing happens when I open the html file through localhost although it works find if I open it in a browser. I'm trying to back track and figure out what I changed that caused this. I'm new to PHP so any help is appreciated.
My PHP code:
<?php
include('database.php');
session_start();
if(!isset($_SESSION['id']) && !isset($_SESSION['type'])){
header('location: Index.php');
}
?>
<html>
<head>
<title>Yasalade</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-
1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-
theme.min.css" integrity="sha384-
fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r"
crossorigin="anonymous">
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-
0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<link rel="stylesheet" href="Style.css">
<script
src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js">
</script>
</head>
<body>
<!-- Sidebar -->
<div id="wrapper">
<div class="overlay"></div>
<!-- Sidebar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper"
role="navigation">
<ul class="nav sidebar-nav">
<li class="sidebar-brand">
<a href="Main.html">
Eventses
</a>
</li>
<li>
<span class="glyphicon glyphicon-th-list">Main</span>
</li>
<li>
<span class="glyphicon glyphicon-user">Profile</span>
</li>
<li>
<span class="glyphicon glyphicon-glass">Events</span>
</li>
<li>
<span class="glyphicon glyphicon-cog">Settings</span>
</li>
<li>
<span class="glyphicon glyphicon-envelope">Messages</span>
</li>
<li>
Logout
</li>
</ul>
</nav>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<button type="button" class="hamburger is-closed" data-toggle="offcanvas">
<span class="hamb-top"></span>
<span class="hamb-middle"></span>
<span class="hamb-bottom"></span>
</button>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
<!-- Main body -->
<div class="container" align="right">
<div class="col-sm-10">
<div class="bs-calltoaction bs-calltoaction-primary">
<div class="row">
<div class="col-md-9 cta-contents">
<h2 class="cta-title">Event Title</h2>
<center><img src="default.png" alt="pic"></center>
<div class="cta-desc">
<p3>Insert info about event</p3>
</div>
</div>
Analyse</button>
</div>
</div>
<div class="bs-calltoaction bs-calltoaction-primary">
<div class="row">
<div class="col-md-9 cta-contents">
<h2 class="cta-title">Event Title</h2>
<center><img src="default.png" alt="pic"></center>
<div class="cta-desc">
<p3>Insert info about events</p3>
</div>
</div>
Analyse</button>
</div>
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function () {
var trigger = $('.hamburger'),
overlay = $('.overlay'),
isClosed = false;
trigger.click(function () {
hamburger_cross();
});
function hamburger_cross() {
if (isClosed == true) {
overlay.hide();
trigger.removeClass('is-open');
trigger.addClass('is-closed');
isClosed = false;
} else {
overlay.show();
trigger.removeClass('is-closed');
trigger.addClass('is-open');
isClosed = true;
}
}
$('[data-toggle="offcanvas"]').click(function () {
$('#wrapper').toggleClass('toggled');
});
});
</script>

As other users pointed out the bootstrap and JQuery weren't the latest versions. It works fine now.

Ui-router not generating templates having checked all options

I'm trying to use a ui-router in Angular to generate a single page with multiple templates in <ui-view></ui-view> but it is unable to load a single template. It just gives a blank page with no JavaScript errors, even the nav bar does not appear.
I have gone through many questions about this on stack but even applying their solutions did not help:
Here is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!--stylesheets-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/css/normalize.css">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="assets/css/owl.css">
<link rel="stylesheet" type="text/css" href="assets/css/animate.css">
<link rel="stylesheet" type="text/css" href="assets/fonts/font-awesome-4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="assets/fonts/eleganticons/et-icons.css">
<link rel="stylesheet" type="text/css" href="assets/css/cardio.css">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap-theme.min.css">
</head>
<body ng-app="myShelfApp">
<nav class="navbar">
<div class="container" >
<!-- Brand and toggle get grouped for better mobile display -->
<!-- <div class="navbar-header">
<button type="button" class="navbar-toggle " data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="assets/img/logo.png" data-active-url="assets/img/logo-active.png" alt=""></a>
</div> -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right main-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="devices">Search</a></li>
<li><a ui-sref="addDevice">Add</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div ui-view></div>
<section id="service" class="section section-padded">
<!-- Holder for mobile navigation -->
</section>
<!-- scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="assets/js/angular.js"></script>
<script src="assets/js/angular-ui-router.js"></script>
<script src="https://unpkg.com/ng-table#2.0.2/bundles/ng-table.min.js"></script>
<script src="app.js"></script>
<script src="service/device.service.js"></script>
<script src="controller/main.controller.js"></script>
<script src="controller/shelf.controller.js"></script>
<script src="controller/device.controller.js"></script>
<script src="controller/newdevice.controller.js"></script>
</body>
</html>
This is the app.js
(function (){
"use strict";
var app=angular.module("myShelfApp",['ui.router','ngTable',"deviceservice"]);
// app.service('DeviceFactoryService',deviceservice(DeviceFactory));
app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise("/");
$stateProvider
.state("home",{
url:"/",
templateUrl:"main.html",
});
}]);
app.run(function($rootScope) {
$rootScope.$on("$stateChangeError", console.log.bind(console));
});
})();
and here are my templates:
<div id="home" ng-Controller="mainController">
<div class="container" >
<div class="row text-center title">
<!--<h2>Services</h2>
<h4 class="light muted">Achieve the best results with our wide variety of training options!</h4>-->
<div class="jumbotron">
<h1 class="display-3"> Device Farm </h1>
<hr class="my-4">
<p><span class="label label-info">{{count}}</span></p>
</div>
</div>
<div class="row services">
<div class="col-md-4">
<a href="/devices" >
<div class="service">
<div class="icon-holder">
<img src="assets/img/icons/phone-blue.png" alt="" class="icon">
</div>
<h3 class="description">My Devices</h3>
</div>
</a>
</div>
<div class="col-sm-4">
<a href="/add_device">
<div class="service">
<div class="icon-holder">
<img src="assets/img/icons/add-blue.png" alt="" class="icon">
</div>
<h3 class="description">Add Device</h3>
</div>
</a>
</div>
<div class="col-md-4">
<a href="">
<div class="service">
<div class="icon-holder">
<img src="assets/img/icons/search-blue.png" alt="" class="icon">
</div>
<h3 class="description">Search Device</h3>
</div></a>
</div>
</div>
</div>
<div ></div>
</div>
And this is my app.index.js where i m redirecting to index.js
var express=require("express");
var app= express();
var bodyParser = require('body-parser');
var methodOverride = require('method-override');
var router=require('./app.routes.js');
var port=8888;
app.use(express.static(__dirname + '/public'));
app.use(bodyParser.urlencoded({'extended':'true'}));
app.use(bodyParser.json());
app.use(methodOverride());
app.use((request,response,next)=>{
console.log(request.headers)
next()
});
app.use('/api',router);
app.get('*',function(req,res){
res.sendFile('index.html',{root:__dirname+'/public'});
});
app.listen(port,error);
function error(err){
if(err){
console.log(`Something went wrong`,err);
}
console.log(`Server is running on ${port}`);
}

So I guys i found the reason why my ui-router wasnt working.
Apparently you cant declare app.module('app',['dependency']) even in your controllers or other modules with angular.modular('app',[]) also will override your main app.module and because of this i the control wasnt entering app.config for the ui-router to work.
refer to answer :
Angular routing config function not called
for further understanding .
Thank you guys

GoodMap API3 with PhoneGap

I work on application in which i need map i worked in map module and in browser it shows correct result but as it is an mobile application so i run it into emulator and the following error occues
Uncaught TypeError: object is not a function at file:///android_asset/www/nav-map.html:3
my html file Nav-map.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.0.css">
<script src="js/hsmain.min.js"></script>
<link href="css/mobiscroll.custom-2.5.0.min.css" rel="stylesheet" type="text/css" />
<link href="photoswipe/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="photoswipe/klass.min.js"></script>
<script type="text/javascript" src="photoswipe/code.photoswipe.jquery-3.0.5.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jqm-datebox.min.css" />
<script src="js/jqm-datebox.core.min.js"></script>
<script src="js/jqm-datebox-1.1.0.mode.datebox.js"></script>
<script src="js/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src="js/camera.js"></script>
<script src="lib/work-space.js"></script>
<script src="lib/config.js"></script>
<script src="lib/userprofile.js"></script>
<script src="lib/loginlogout.js"></script>
<script src="lib/binder.js"></script>
<script src="lib/newsfeed.js"></script>
<script src="lib/harvestdata.js"></script>
<script src="lib/members.js"></script>
<script src="lib/pictures.js"></script>
<script src="lib/properties.js"></script>
<script src="lib/clubnewsfeeds.js"></script>
<script src="lib/jsutility.js"></script>
<script src="lib/weather.js"></script>
<script src="lib/groups.js"></script>
<script src="lib/groupnewsfeeds.js"></script>
<script src="lib/companies.js"></script>
<script src="lib/companynewsfeeds.js"></script>
<script src="lib/map.js"></script>
<script src="lib/searching.js"></script>
<script src="lib/notitfications.js"></script>
<link href="960/jquery-mobile-fluid960.css" rel="stylesheet" type="text/css"/>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style>
#map-canvas
{
margin: 0;
padding: 0;
height: 100%;
}
</style>
</head>
<body>
<div data-role="page" id="ClubMapPage">
<!--header-->
<script>$('#ClubMapPage').on('pageshow',function(){
UserProfile.loadProfile();
Notifications.getTopNotification();
Properties.getClubNameAndImage();
Map.getMap();
})
</script>
<div id="landing-header" data-role="header" data-position="fixed" data-tap-toggle="false">
<div class="container_12 padding5">
<div class="grid_1">
<span class="inline-button floatleft">Back</span>
</div>
<div class="grid_10">
<div class="hs-icon-wrap">
<span class="dropdown inline-button"><a class="hs-request dropdown-toggle showRequestsBtn" data-toggle="dropdown" data-role="button" href="#messages" data-iconpos="notext" >Requests</a>
</span>
<span class="dropdown inline-button"><a class="hs-notification dropdown-toggle showNotificationsBtn" data-role="button" href="#" data-toggle="dropdown" data-iconpos="notext" >Notifications</a>
</span>
</div>
</div>
<div class="grid_1">
<span class="inline-button floatright">Right</span>
</div>
</div>
</div>
<!--contents-->
<div data-role="content" class="hs-content">
<div class="hs-notifications-menu-contents-wrap feeds-content-header HSnotifications">
<div class="hs-notification-menu-heading">
Notifications
<a title="Remove" class="removebutton hideNotificationsBtn" href="javascript://" >Remove </a>
</div>
<div class="hs-notifications-menu-items-wrap" >
<ul class="hs-notificatin-list notificationul">
</ul>
</div>
<div class="hs-notification-menu-footer">
<a class="seemore" href="#" title="">
<span>See All</span>
</a>
</div>
</div>
<!-- End Of Notifications -->
<div class=" hs-notifications-menu-contents-wrap feeds-content-header HSrequests" >
<div class="hs-notification-menu-heading">
Requests
<a title="Remove" class="removebutton hideRequestsBtn" href="#" >Remove </a>
</div>
<div class="hs-notifications-menu-items-wrap" style="">
<ul class="hs-notificatin-list requestul">
</ul>
</div>
<div class="hs-notification-menu-footer">
<a class="seemore" href="#" title="">
<span>See All</span>
</a>
</div>
</div>
<!-- end of requests -->
<div class="container_12">
<div class="content-header">
<h4><img class="smallClubImage" alt="" src="images/header-small-image.png" /></h4>
Info
<div data-role="navbar" class="nav-glyphish-example" data-grid="c">
<ul>
<li class="no-border">Members</li>
<li class="active">Map</li>
<li>Harvest</li>
<li><a href="clubpages/albums.html" id="nav-picture" data-icon="custom" >Picture</a></li>
</ul>
</div>
</div>
<div class="content-wrap map-wrap">
<div id="map-canvas" style="height:500px; width:100%; margin:0; padding:0">
</div>
</div>
</div>
</div>
</div>

I had the same error but I solved it two months ago!
I was because a jquery plugin of mine was not ending in ;
You can Try to end your JS lines with ; I can see you don't follow this best practices advice. So, add it to you own js files (at the end) in order to let the files concatenation understand That a new file is really a new single function (or statement)
Sorry If this is not the solution to your problem! Thank you for reading

Hi there is some problem with your class names you put the class names same as some keywords like Image you cannot put Image as a class name also check if other same problem exist i think you should check by using some IDE it will shows the special names in different color.
also change the class name Map
I had the same error once i think it will help you
Thanks

We Keep Coding

JavaScript is the programming language of the Web.

Angular.js loading without reference? - javascript

I figured it out. The index.html file was calling Require.JS, which allows you to asynchronously load your scripts to the home page, but creates some issues in tracking dependencies. It's a JavaScript framework that basically allows you to load up an entire folder of JavaScript files asynchronously.

Related

Selenium: How to get the html code generated by javascript

How do I get the Materialize Feature Discovery Block to show up on my webpage?

CSS and Javascript aren't working inside my localhost PHP folder

Ui-router not generating templates having checked all options

GoodMap API3 with PhoneGap

Categories

Resources