Angular not working in app launch - javascript

I've working in Cordova app with Angularjs and all looks fine in Chrome and other browsers. But if I try install the apk to Android, Angularjs not execute the index.html in the launch.
However, that's is the weirdest: if I change for other pages and go back to the index.html, all looks fine! And if I close the app and relaunch, everything goes to normal. And sometimes, just in few times, it repeats, only in the index.html.
My index.html when launch:
enter image description here
Just as I said, the pages works fine in the most cases:
enter image description here
I'm using Android 7.1.1 / Cordova 7.0.1 / Angular 1.6.4
index.html: (Each 'ng-init' inside 'ng-owl-carousel' makes a $http request)
<!DOCTYPE html>
<html ng-app="baseApp">
<head>
<link rel="stylesheet" href="css/uikit.css" />
<link rel="stylesheet" href="css/header.css" />
<link rel="stylesheet" href="css/custom.css" />
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/animate.css" />
<script src="js/jquery.js"></script>
<script src="js/uikit.min.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-owl-carousel-2.js"></script>
<script src="js/index.js"></script>
<script src="js/controller-home.js"></script>
<script src="js/controller-list.js"></script>
<script src="js/controller-rede.js"></script>
<script src="js/controller-config.js"></script>
</head>
<body ng-controller="carousel" ng-cloak>
<header ng-include="'templates/header-search.html'"></header>
<section>
<ng-owl-carousel class="owl-theme" owl-items="items" owl-properties="properties" owl-ready="ready($api)">
<div ng-controller="home">
<div ng-include="'templates/home.html'" ng-show="owl_page == 0" ng-init="init_home();"></div>
</div>
<div ng-controller="listas">
<div ng-include="'templates/listas.html'" ng-show="owl_page == 1" ng-init="init_listas();"></div>
</div>
<div ng-controller="rede">
<div ng-include="'templates/rede.html'" ng-show="owl_page == 2" ng-init="generalSearchFilter('notify');"></div>
</div>
<div ng-controller="config">
<div ng-include="'templates/config.html'" ng-show="owl_page == 3" ng-init="init_config();"></div>
</div>
</ng-owl-carousel>
</section>
<footer id="footer" ng-include="'templates/footer.html'"></footer>
<script src="cordova.js"></script>
</body>
</html>

After some days I decided to change all my index.html and I change my code to use $routeProvider instead ng-include, also I replace my initial function with a 'angular.element(document).ready' + $timeout. Happy end! :)

Related

JS function works on console, but not in code

When I run $('#slides').superslides() in my console my function works properly, however when I run it in a separate JS file it displays nothing.
$(document).ready(function() {
$('#slides').superslides();
});
File is correctly referenced in script
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Brandon Bracho</title>
<link rel="stylesheet" href="CSS/superslides.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="slides">
<div class="slides-container">
<img src="https://via.placeholder.com/150" alt="">
<img src="https://via.placeholder.com/150" alt="">
</div>
</div>
<script src="Javascript/jquery.superslides.min.js"</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="Javascript/script.js"</script>
</body>
</html>
it should not work, u have typo on your script
<script src="Javascript/jquery.superslides.min.js"</script>
you are not closing the start tag, please close it:
<script src="Javascript/jquery.superslides.min.js"></script>
and also your reference to your script Javascript/script.js maybe invalid as it is mean an absolute path, please check it on the browser console (check if it is loaded)

JavaScript will not run at all

I have this template as my sinatra layout.erb
<!DOCTYPE html>
<html>
<head>
<title>Invoicer</title>
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/static/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-default">
...
</nav>
<div class="container">
<%= yield %>
</div>
<%#<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>%>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="/static/js/bootstrap.min.js"/>
<script src="/static/js/jobs/new.js" />
</body>
</html>
and this small javascript call
console.log("running")
$('#datepicker').datepicker()
the server gets a 200 call to the js file but nothing will print to the console or execute.
Always use <script></script>.
<script src="..." /> is not a valid tag. When the HTML is parsed, it thinks that <script src="/static/js/jobs/new.js" /> is in the body of the <script src="/static/js/bootstrap.min.js"/> tag like this:
...
<script src="/static/js/bootstrap.min.js">
<script src="/static/js/jobs/new.js">
...
From MDN <script> documentation:
Tag omission
None, both the starting and ending tag are mandatory.

why custom aside or slide panel not slide using angular strap?

I am making a slide panel .So I googled it and found angrular stap library .I study that library try to make slide panel .
http://mgcrea.github.io/angular-strap/##asides .I import all js required for that but my side panel not slide as given on site.I don't know where I am wrong .
Here is my code with plunker.
http://plnkr.co/edit/GIFyFSdyJI8tHq5nlBBn?p=preview
<!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="jquery#2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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/8km0nfoc9noz9ns/modal.js?m="></script>
<script src="https://dl.dropboxusercontent.com/s/40vdgl5hglimwfi/aside.js?m="></script>
</head>
<body class="container">
<button type="button" class="btn btn-lg btn-danger" data-template="aside.html" data-placement="left" data-animation="am-slide-left" bs-aside="aside" data-container="body">Custom aside
<br>
<small>(using data-template)</small>
</button>
<script>
var myapp = angular.module('myApp', ['mgcrea.ngStrap','mgcrea.ngStrap.modal', 'mgcrea.ngStrap.aside']);
</script>
</body>
</html>
According to their documentation:
1) You should include angular-animate module:
<script src="//code.angularjs.org/1.3.0-beta.5/angular-animate.min.js"></script>
2) You have to include additional CSS animation styles from AngularMotion project:
<link rel="stylesheet" href="//rawgithub.com/mgcrea/angular-motion/master/dist/angular-motion.min.css">
3) You also have to include another additional CSS file for asides:
<link rel="stylesheet" href="//mgcrea.github.io/angular-strap/static/styles/bootstrap-additions.min.css">
4) What is not mentioned in documentation - you have to add 'ngAnimate' module to dependencies:
var myapp = angular.module('myApp', ['ngAnimate', 'mgcrea.ngStrap']);
Plunker example
http://plnkr.co/edit/WVx7F92xE8XcfeUqwV7l?p=preview

angularjs import makes html page not functional

I have very simple code
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="assets/css/app.css" />
<script type="text/javascript" src="assets/js/angular.min.js" />
<script type="text/javascript" src="assets/js/app.js" />
</head>
<body>
asdfasdf
{{1+2}}
</body>
</html>
and I'm pretty sure everything is pointing to the right directory. My app.js is:
( function () {
var app = angular.module( 'app' , [] );
}) ();
However, opening index.html on localhost all I can see is a blank page but when I delete the lines
<script type="text/javascript" src="assets/js/angular.min.js" />
<script type="text/javascript" src="assets/js/app.js" />
I get a page that says "asdfasdf {{1+2}}" How can I get angular working? Is there a big mistake I'm making somewhere?
Script tags must have an end tag. They cannot be self-terminating.
<script type="text/javascript" src="assets/js/app.js"></script>

Jquery Mobile - $(document).ready not firing

So I have a listview in which each component wired to an on click function which looks like this:
function launchNewPage() {
$.mobile.changePage( "newPage.html", { transition: "slide"} );
}
The problem I am encountering has to do with the next page. The page shows up just fine, but none of the resources are loading. When I inspect the page in firebug, none of the necessary JS files are loaded. On top of this, it doesn't seem like the $(document).ready function is ever getting executed. Does anyone have any insight as to what I am doing wrong? Sorry, I am a bit new to JQ... Thanks in advance.
Requested HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" href="CSS/JqueryMobile.css" />
<link rel="stylesheet" href="CSS/theme.css" />
<link rel="stylesheet" href="CSS/JQM-DatePicker.css" />
<script type="text/javascript" src="JS/jquery-1.6.2.js"></script>
<script type="text/javascript" src="JS/JqueryMobile.js"></script>
<script type="text/javascript" src="JS/JQM-DatePicker.js"></script>
<script type="text/javascript" src="JS/mockjax.js"></script>
<script type="text/javascript" src="JS/soyutils.js"></script>
<script type="text/javascript" src="JS/fields.js"></script>
<script type="text/javascript" src="JS/JSDictionaryObject.js"></script>
<script type="text/javascript" src="JS/AddingForm.js"></script>
</head>
<body>
<div id="page" data-role="page" data-theme="x">
<div class="ui-body-x" data-role="header" data-position="fixed">
<h1 class="ui-header-style" style="text-align:left; margin-left:10px;">Add New Record</h1>
<div data-type="horizontal" class="ui-btn-right ui-button-group">
<a id="cancelButton" href="http://www.google.com" data-role="link" data-ajax="false">Cancel</a>
<a id="submitButton" form="f" class="ui-btn-up-x" onClick="javascript:return submitPressed();"data-role="button" data-icon="" data-ajax="false">Submit</a>
</div>
</div><!-- /header -->
<div data-role="content" data-theme="x">
<form id="f" src="#"></form>
</div><!-- /content -->
</div><!-- /page -->
</body>
You cannot start the jQuery mobile with $(document).ready() you should started like this:
try to work with this in the first HTML
$("div[data-role*='page']").live('pageshow', function(event, ui) {
document.location.href="newPage.html";
});
Geoff, if you are using the Beta 3 version of the JQM framework, read this. It will help shed light on the DOM and $(document).ready(). You may want to consider the "pagecreate" and "pagebeforecreate" events. They are delineated in the doc referenced in the above link.

Categories