I have a problem where my Ionic app won't render my views but I'm not getting an error. When I run this app only the navbar and a blank page is showing.
index.html:
<html ng-app="App">
<head>
<!-- Project setup: https://scotch.io/tutorials/angularjs-best-practices-directory-structure -->
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>TEST Mobile</title>
<!-- Assets -->
<link href="assets/libs/ionic/ionic.css" rel="stylesheet" />
<script src="assets/libs/ionic/ionic.bundle.js"></script>
<script src="app/app.module.js"></script>
<script src="app/app.route.js"></script>
<!-- Controllers -->
<script src="app/components/home/homeController.js"></script>
<script src="app/components/projects/projectsController.js"></script>
<script src="app/components/vms/vmsController.js"></script>
<script src="app/components/auth/authController.js"></script>
<!-- Services -->
<script src="app/components/home/homeService.js"></script>
<script src="app/components/projects/projectsService.js"></script>
<script src="app/components/vms/vmsService.js"></script>
<script src="app/components/auth/authService.js"></script>
<!-- Cordova.js isn't loaded until build for a specific platform, this will give 404 when viewing from ordinary browser -->
<script src="cordova.js"></script>
</head>
<body>
<ion-nav-bar class="bar-assertive">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
I have a module file and a seperate routing file:
var app = angular.module('App', ['ionic']);
routing js file:
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'app/components/home/homeView.html',
controller: 'homeController'
});
$urlRouterProvider.otherwise('/home');
})
When I run this I only get the nav bar to show but not the ion-view home, which is now just for demonstration:
<ion-view view-title="Forgot Password">
<ion-content padding="true">
<p>
Yeah this is just a demo showing how views can be shown without tabs, then you can navigate
to views within tabs. Additionally, only one set of tabs needs to be written for all of the different views that should go inside the tabs. (Compared to written the same tab links in the footer of every view that's in a tab.)
</p>
<p>
There's no username/password, just click
the Sign-In button back a the sign-in view.
</p>
<p>
Return to Sign-In.
</p>
</ion-content>
</ion-view>
I suspect my issue is in the routing config but I wasn't able to find a working fix for this problem.
Add ui-view to your ion-nav-view in your index.html and it will work.
<ion-nav-view ui-view></ion-nav-view>
The issue wasn't with the routing config. The issue was that in another file (controller file) I also stated the angular.module('App', ['ionic']); this overrided my app.config.
Related
I am new in SAP and trying to develop a SAPUI5 application, but faced some problems when reusing views/partial views. I want to have a partial view and pass custom data in a specefic format (data changes but model is same), and reuse these partial view many times in one page, every time passing different data. Somehow like Tiles, but very cuszomized.
what do you suggest me to use?
I have tryied to make new instance of a regular view but faced this error:
GET https://sapui5.hana.ondemand.com/resources/view/List.view.xml 404
(Not Found)
this is my code to make new instance:
var firstListView=sap.ui.xmlview("firstViw", "view.List");
thanks for your help
Update:
this is my index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m, sap.ushell"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-theme="sap_belize"
data-sap-ui-resourceroots='{
"sap.ui.appName": "./"
}'>
</script>
<script src="../libs/jquery.cookie.js"></script>
<link href="css/site.css" rel="stylesheet" type="text/css" />
<link href="css/library.css" rel="stylesheet" type="text/css" />
<link href="css/theme/library.css" rel="stylesheet" type="text/css" />
<script>
sap.ui.getCore().attachInit(function () {
new sap.m.Shell({
appWidthLimited:false,
app: new sap.ui.core.ComponentContainer({
name: "sap.ui.appName"
})
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
and this is the folder structered:
Please have a look at chapter “Reusing UI Parts: Fragments” of the UI5 SDK.
Here is an excerpt. Please have a look whether this helps.
i have problems to load my application. I created a Spring Web application and using Sencha cmd, i created an app inside webapp/resources folder.
This is my view.jsp
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%# page session="false" %>
<html>
<head>
<title>LOGIN</title>
<link rel="stylesheet" type="text/css" href="<c:url value="/resources/apps/BetsTrackerAuth/ext/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css"/>">
<script type="text/javascript" src="<c:url value="/resources/apps/BetsTrackerAuth/ext/build/ext-all.js"/>"</script>
<script type="text/javascript" src="<c:url value="/resources/apps/BetsTrackerAuth/ext/packages/ext-theme-neptune/build/ext-theme-neptune.js"/>"</script>
<script type="text/javascript" src="<c:url value="/resources/apps/BetsTrackerAuth/app.js"/>" charset="utf-8"></script>
</head>
<body>
<h1>
LOGIN Hello world!
</h1>
<P> The time on the server is ${serverTime}. </P>
</body>
</html>
And my error is:
GET http://localhost:8084/app/app/Application.js?_dc=1433427933321 404 (Not Found)
What's wrong in my view?
It's a bit hard to say for sure without seeing your app.js file, but I would guess it is trying to load various dependencies -- namely Application.js.
Looking at the URL, I can see two levels of /app/, which tells me it's probably looking in the wrong place (for whatever reason).
Try setting the Ext.Loader paths before you load app.js:
<script type="text/javascript">
Ext.Loader.setConfig({
enabled: true,
paths: {
'MyApp': 'path/to/app'
}
});
</script>
I'm currently building a page with jQuery mobile.
I need to load some custon JavaScript on one page, so I found the pageInit function.
Here's a short example of what i'm using:
page1.html:
<!doctype html>
<meta charset="uft-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>page1 | test page for jquery mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="js.js"></script>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page 1 Title</h1>
</div>
<div data-role="content">
go to page2
<p>Page 1 content goes here.</p>
</div>
<div data-role="footer">
<h4>Page 1 Footer</h4>
</div>
</div>
page2.html:
<!doctype html>
<meta charset="uft-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>page1 | test page for jquery mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="js.js"></script>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page 2 Title</h1>
</div>
<div data-role="content">
go to page1
<p id="addstuff">Page 2 content goes here.</p>
</div>
<div data-role="footer">
<h4>Page 2 Footer</h4>
</div>
</div>
js.js
$(document).delegate('#page2', 'pageinit', function() {
$('<div />', {
html: 'Some text that was added via jQuery'
}).appendTo('#addstuff');
});
So I need to execute some JavaScript on page2.html. It actually works great (the div was created and you see the text). But when I'm clicking on a link to change the page, you can see, that jQuery is calling a hashtag in the URL first. So it looks like:
example.org/page1.html#/page2.html
when I clicked on the link on page1.html (just for a few milliseconds maybe) and then it redirects to
example.org/page2.html
I guess it's because of the id .. but I need this one for the pageInit (as far as I know).
Is this behavior normal ? Or am I doing something wrong. Maybe there's even a command to not call the hash tag.
Here you go:
It's important to note that if you are linking from a mobile page that was loaded via AJAX to a page that contains multiple internal pages, you need to add a rel="external" or data-ajax="false" to the link. This tells the framework to do a full page reload to clear out the AJAX hash in the URL. This is critical because AJAX pages use the hash (#) to track the AJAX history, while multiple internal pages use the hash to indicate internal pages so there will be conflicts in the hash between these two modes.
For example, a link to a page containing multiple internal pages would
look like this:
< a href="multipage.html" rel="external">Multi-page link< /a>
Src: http://view.jquerymobile.com/1.3.0/#Linkingwithinamulti-pagedocument
IE is a mystery to me. My web app is working on Safari, Firefox, Chrome, even iPhones and iPads, but when it comes to IE, I simply can't comprehend how hard it is to comply to the given standards. Anyway enough ranting.
My Twitter bootstrap buttons are completely ignored in IE8. Absolutely nothing happens when I click on any button. I couldnt find anything on google, has anyone come across this?
Many Thanks,
#Kave You uploaded only plain html to jsfiddle - which includes links to js which doesn't exists (so its kind of hard to debug when js is not attached)..
Try using a href instead of so many buttons.. twitter bootsrap supports styling of links to look like buttons, example is at first page of twitter bootstrap like this: (source copied & bit of modified):
<a class="btn btn-success btn-large" href="http://twitter.github.com/bootstrap/base-css.html">Example link with button styles</a>
Edit: Alternatively, full example with twitter bootstrap (modified from demo templates - link with button styles inside a hero unit) - copy & paste to file, save as testing.html and open with browser - enjoy!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="http://getbootstrap.com/2.3.2/assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://getbootstrap.com/2.3.2/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://getbootstrap.com/2.3.2/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://getbootstrap.com/2.3.2/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="http://getbootstrap.com/2.3.2/assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-success btn-large" onclick="alert('its working :)')">Learn more »</a></p>
</div>
</div>
</div>
<hr>
<footer>
<p>© Company 2012</p>
</footer>
</div><!--/.fluid-container-->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://getbootstrap.com/2.3.2/assets/js/jquery.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-transition.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-alert.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-modal.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-dropdown.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-scrollspy.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tab.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tooltip.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-popover.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-button.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-collapse.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-carousel.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
IF still not working, make sure when you restart IE that you click "Allow blocked content" if pop-up for asking it is shown.
Allow blocked content referes to javascript content,the buttons are purelly CSS code,the problem is that IE 6....8 don't have a very good support for CSS3.
If you look on the getbootstrao.com website you dont see them using their own buttons :))
the best solution is create buttons using simple CSS,if someone using IE is browsing your website they might not see the border-radius effect but they will find actual square but working buttons.
I had the same problem and solved it using this jQuery/js:
<a href="http://www.example.com">
<button class="btn"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Button text</button>
</a>
<!--[if lt IE 9]>
<script>
$(".btn").click(function() {
var t = $(this).parent();
window.location.href = t.attr("href");
});
</script>
<!--[if lt IE 9]>
Maybe I am working with it wrong. I don't know. All I know is its something to do specifically with the XHR.js that comes with appMobi. I have the latest build as of what ever was on there site 2 days ago. I am developing on a Macbook Pro. I am attempting to Test locally with the XDK and via Local Wifi/Test anywhere with an HTC Evo 3D using the Android platform. As well as I am using an iPhone 4S and iPad2. Its the same result every time.
I see no errors in the console debug window. All I see is the words "RemoteBridge" or "RemoteBridge2". My script is simple over all. Just a plain jQuery based $.ajax post and a little html to go with it. The URL though I will be changing it when I post it as I don't want it visible via public forum is a valid URL and drops a valid JSON object as its output. So I need input, I have no idea where to go from here as my app requires a lot of dynamic data that updates on the fly. And allegedly all I had to do was include xhr.js and my standard jQuery should have worked.
Anyway here is my code.
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" media="all" href="./src/global.css">
</head>
<body>
<div id="header">
<div id="logo"></div>
<div id="coname">COMPANY</div>
</div>
<div id="content"></div>
<div id="footer">
<div id="advert"></div>
</div>
<script type="text/javascript" charset="utf-8" src="./src/appmobi.js"></script>
<script type="text/javascript" charset="utf-8" src="./src/xhr.js"></script>
<script type="text/javascript" charset="utf-8" src="./src/jquery-1.7.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="./src/global.js"></script>
</body>
</html>
and the contents of global.js
// This event handler is fired once the AppMobi libraries are ready
function onDeviceReady() {
//use AppMobi viewport to handle device resolution differences if you want
//AppMobi.display.useViewport(768,1024);
//hide splash screen now that our app is ready to run
AppMobi.device.hideSplashScreen();
}
//initial event handler to detect when appMobi is ready to roll
document.addEventListener("appMobi.device.ready",onDeviceReady,false);
$(document).ready(function()
{
/*
var request = $.ajax({
url: "http://this.url-has-been-changed.net/geo/suggest",
type: "POST",
data: {"entry" : "951"},
dataType: "json"
});
request.done(function(data){$('#advert').append('done');});
request.fail(function(data){$('#advert').append('fail');})
request.error(function(data){$('#advert').append('error');})
request.complete(function(data){$('#advert').append('complete');})
request.success(function(data){$('#advert').append('success');})
*/
$.ajax({
type: 'POST',
url: "http://this.url-has-been-changed.net/geo/suggest?entry=951",
success: function(data){$('#advert').html('success');},
error : function(data){$('#advert').html('failed');},
complete : function(data){$('#advert').html('complete');},
dataType: "json"
});
});
all other files found to be included are stock from appmobi
Chris,
Just a couple of things to help you figure this one out.
Make sure you reference appMobi.js and XHR.js from
http://localhost:58888/_appMobi
in order to take advantage of JavaScript API bridge commands (http://www.appmobi.com/documentation/jsAPI.html).
Wait until the "appMobi.device.ready" event has fired before using those JavaScript API bridge commands. In your case, the XHR.js library is actually translating XMLHttp calls to native AppMobi.device.getRemoteData calls.
Try this index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<!--
<link rel="stylesheet" media="all" href="./src/global.css">
-->
</head>
<body style="background-color:white;">
<div id="header">
<div id="logo"></div>
<div id="coname">COMPANY</div>
</div>
<div id="content"></div>
<div id="footer">
<div id="advert"></div>
</div>
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/appmobi.js"></script>
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/xhr.js"></script>
<script type="text/javascript" charset="utf-8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="global.js"></script>
</body>
</html>
Along with this global.js
// This event handler is fired once the AppMobi libraries are ready
function onDeviceReady() {
//use AppMobi viewport to handle device resolution differences if you want
//AppMobi.display.useViewport(768,1024);
//hide splash screen now that our app is ready to run
AppMobi.device.hideSplashScreen();
$.ajax({
type: 'POST',
url: "http://this.url-has-been-changed.net/geo/suggest?entry=951",
success: function(data){$('#advert').html('success');},
error : function(data){$('#advert').html('failed');},
complete : function(data){$('#advert').html('complete');},
dataType: "json"
});
}
//initial event handler to detect when appMobi is ready to roll
document.addEventListener("appMobi.device.ready",onDeviceReady,false);
The XHR.js and appMobi.js libraries are provided by the wrapping application itself in order to "listen" for JavaScript calls that would require native-level functionality. For example, the AppMobi.device.getRemoteData command that would allow you to make a cross-domain data request. For convenience, the XHR.js library translates XmlHTTP calls into the AppMobi.device.getRemoteData command.
For more information on the JavaScript API, check out the documentation at:
http://www.appmobi.com/documentation