I am using UI-Router to do the routing for my new application.I have my state defined for home page. I have link in my page for "Sign Up" which needs to open as a modal window as separate state and i am using "onEnter" to trigger the modal window . When a user clicks the close button of modal window, i want the user to be re-directed to home page state. I am able to route back to home state using "ui-sref" but not able to close the modal window. I tried using data-dismiss="modal". Am i doing anything wrong?
Below is the configuration i am trying:
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title>Idea Generation App</title>
<!-- inject:css -->
<link rel="stylesheet" href="app/styles/css/bootstrap.min.css">
<link rel="stylesheet" href="app/styles/css/ideaManagementUI.css">
<!-- endinject -->
</head>
<body ng-app="app">
<div id="mainContainer">
<div id="ideaDriveImgContainer" class="backgroundSize">
<img id="ideaDriveImg" class="backgroundSize">
</div>
<div ui-view></div>
</div>
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-ui-bootstrap-bower/ui-bootstrap-tpls.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- endinject -->
<!-- inject:js -->
<script src="app/scripts/module/app.js"></script>
<script src="app/scripts/controllers/IdeaMgmtMainController.js"></script>
<!-- endinject -->
</body>
</html>
ideaMgmt-landing.html(html for my homepage)
<div id="signUpContainer" style="cursor: pointer;">
<div id="signUpArea" class="text">
<a ui-sref="signUp"><span>SignUp</span></a> //to trigger the signUp state
</div>
</div>
signUpModal.html
<div id="close" class="ax_shape">
<a ui-sref="home">
<button type="button" class="close" aria-label="Close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button></a>
</div>
app.js (route-configuration)
(function(){
'use strict';
var App = angular.module('app', ['ui.router','ui.bootstrap']);
App.config(function($stateProvider, $urlRouterProvider) {
$stateProvider.state('home', {
url:'/home',
templateUrl:'app/views/ideaMgmt-landing.html' ,
controller: 'IdeaMgmtMainController'
}),
$stateProvider.state('signUp', {
url: '/signUp',
// trigger the modal to open when this route is active
onEnter: ['$stateParams', '$state', '$modal',
function($stateParams, $state, $modal) {
// handle modal open
$modal.open({
templateUrl: 'app/views/modalTemplates/signUpModal.html',
});
}]
});
$urlRouterProvider.otherwise('/home');
});
}
());
You can add a controller to your modal:
$modal.open({
templateUrl: 'app/views/modalTemplates/signUpModal.html',
controller: 'signupModalCtrl'
});
And do the closing and state change from there:
angular.module('app').controller('signupModalCtrl',
function($uibModalInstance, $state){
$scope.close = function(){
$uibModalInstance.dismiss('cancel');
$state.go('home');
};
});
HTML:
<a ng-click="close()">
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</a>
Related
I am very new to ionic. Trying to put a nice looking picture into the header. So right after I added the ion-nav-title in index.html it becomes like this http://imgur.com/a/XzCpS , the picture was too big. I need the image to fully be shown and also the top nav to not block the form the page.All help will be greatly appreciated :)
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="lib/ngStorage.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar bar-header navBar" align-title="center">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-title>
<img alt="Company Logo" height="100" src="img/logo.png">
</ion-nav-title>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
style.css*
.navBar {
height: 100px;
background: #fffef1;
}
Eventsearch.html
<ion-view>
<ion-content padding="true" class="has-header">
<form id="othername-form1" class="list">
<label class="item item-input">
<span class="input-label">Name</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">Date</span>
<input type="date">
</label>
<label class="item item-select" >
<span class="input-label">Country</span>
<select ng-model="selected">
<option>Hong Kong</option>
<option>Tokyo</option>
<option>Paris</option>
</select>
</label>
</form>
<a class="button button-positive button-block" ui-sref="tab.schedule({country:selected})">Go</a>
<p>You are searching for events in {{selected}}</p>
</ion-content>
</ion-view>
Try setting the height to auto and the maximum to a huge value:
.navBar {
height: 100;
background: #fffef1;
}
ion-nav-title {
height: 100;
}
I am trying to redirect to home.html on click of a button in index.html
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/home.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-royal">
<h1 class="title">Index</h1>
</ion-header-bar>
<ion-content>
<div ng-controller="LoginCtrl">
<button ng-click="login()">Login</button>
</div>
</ion-content>
</ion-pane>
</body>
</html>
home.js
var VLogin = angular.module('starter', ['ionic']);
VLogin.controller('LoginCtrl', ['$scope','$location', function($scope, $location) {
$scope.login = function(){
$location.path("#/home.html");
};
}]);
And here is the hierarchy of both files
$location.path() is not working. Where am I going wrong? TIA.
take a look here: http://learn.ionicframework.com/formulas/navigation-and-routing-part-1/
but the simple answer is that you should set up routes
$stateProvider.state('app', {
url: '',
templateUrl: 'app.html',
controller: 'AppCtrl'
}
}).state('login', {
url: '/login',
templateUrl: 'login.html',
controller: 'LoginCtrl'
}
})
and then I would recommend using the $state provider to do something like this
login.controller('LoginCtrl', function($scope, $state) {
$state.go('app',{});
})
This is not the EXACT code, but an overview, I would recommed reading the link provided for additional information
I want to do this Dojo transition to another html file in same project. Select a view from an other html page, the code available on the link is very similar to what I have in my project. While the solution is accepted, I'm unable to have success with it whereas I have tested it several times. Can someone check it, please ?
Thank you in advance
Here are two html files that allow you testing it, it's not my real code but that provides same result :
Index.html
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>Index</title>
<!-- application stylesheet will go here -->
<!-- dynamically apply native visual theme according to the browser user agent -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.6/dojox/mobile/deviceTheme.js"></script>
<!-- dojo configuration options -->
<script type="text/javascript">
dojoConfig = {
async: true,
parseOnLoad: false
};
</script>
<!-- dojo bootstrap -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs /dojo/1.9.6/dojo/dojo.js"></script>
<!-- dojo application code -->
<script type="text/javascript">
require(["dojox/mobile/parser",
"dojox/mobile/ViewController",
"dojox/mobile",
"dojox/mobile/ScrollableView",
"dojox/mobile/TabBar",
"dojox/mobile/Switch",
"dojox/mobile/deviceTheme",
"dojox/mobile/compat",
"dojox/mobile/IconMenu",
"dojox/mobile/SimpleDialog",
"dojox/mobile/Button",
"dojox/mobile/Heading",
"dijit/registry",
"dojo/domReady!",
"dojo/dom",
"dojo/ready"
], function(parser) {
parser.parse();
});
</script>
</head>
<body>
<div id="detailsHeading" data-dojo-type="dojox.mobile.Heading"
data-dojo-props="fixed: 'top', label: 'Details', back:'Back', moveTo:'view1', transition:'slide', transitionDir:'-1',url:'sample.html'">
</div>
</body>
<html>
sample.html
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>Sample</title>
<!-- application stylesheet will go here -->
<!-- dynamically apply native visual theme according to the browser user agent -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.6/dojox/mobile/deviceTheme.js"></script>
<!-- dojo configuration options -->
<script type="text/javascript">
dojoConfig = {
async: true,
parseOnLoad: false
};
</script>
<!-- dojo bootstrap -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.6/dojo/dojo.js"></script>
<!-- dojo application code -->
<script type="text/javascript">
require(["dojox/mobile/parser",
"dojox/mobile/ViewController",
"dojox/mobile",
"dojox/mobile/ScrollableView",
"dojox/mobile/TabBar",
"dojox/mobile/Switch",
"dojox/mobile/deviceTheme",
"dojox/mobile/compat",
"dojox/mobile/IconMenu",
"dojox/mobile/SimpleDialog",
"dojox/mobile/Button",
"dojox/mobile/Heading",
"dijit/registry",
"dojo/domReady!",
"dojo/dom",
"dojo/ready"
], function(parser) {
parser.parse();
});
</script>
</head>
<body>
<div data-dojo-type="dojox.mobile.ScrollableView" id="view1" data-dojo-props="selected:false,scrollDir:'v'">
</div>
</body>
</html>
Put them in a same directory and test it
The Main Html File.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- dojo stylesheet will go here -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.6/dojox/mobile/deviceTheme.js"></script>
<title>Dojo Mobile Simple View</title>
<!-- dojo configuration options -->
<script>
dojoConfig = {
async: true,
parseOnLoad: false
};
</script>
<!-- dojo bootstrap -->
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.6/dojo/dojo.js"></script>
<script>
require([
"dojox/mobile/parser",
"dojo/ready",
"dojox/mobile/ScrollableView",
"dojox/mobile/Heading",
"dojox/mobile/ToolBarButton"
], function (parser, ready ) {
ready ( function() {
parser.parse();
});
});
</script>
</head>
<body style="visibility:hidden;">
<!-- the view or "page"; select it as the "home" screen -->
<div id="view1" data-dojo-type="dojox/mobile/ScrollableView" data-dojo-props="selected:true">
<div id="detailsHeading" data-dojo-type="dojox/mobile/Heading"
data-dojo-props="fixed: 'top', label: 'View1'">
<span id="rightbtn" data-dojo-type="dojox/mobile/ToolBarButton"
style="float:right;"
data-dojo-props="transition:'slide', transitionDir:'-1',url:'Sample.html' ">Sample
</span>
</div>
</div>
</body>
</html>
The Sample.html file is a HTML Fragment it should NOT contain head, body tags.
<!-- Sample View -->
<div id="sample" data-dojo-type="dojox/mobile/ScrollableView" >
<!-- heading -->
<h1 id="edit1" data-dojo-type="dojox/mobile/Heading"
data-dojo-props=" fixed:'top' ">Sample
</h1>
</div>
I'm making an app using intel xdk. It works in many devices but when i try in tablets with android 3.1 it doesn't work. The title of pannels is not displayed and the $.ui.ready is not fired. Even trying with this simple code it fails (the hello world button is not displayed either):
<!DOCTYPE html>
<html><!--HTML5 doctype-->
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="Pragma" content="no-cache">
<script type="text/javascript" charset="utf-8" src="intelxdk.js"></script>
<script type="text/javascript" language="javascript">
var isIntel=window.intel&&window.intel.xdk
// This event handler is fired once the intel libraries are ready
function onDeviceReady() {
//hide splash screen now that our app is ready to run
intel.xdk.device.hideSplashScreen();
setTimeout(function () {
$.ui.launch();
}, 50);
}
//initial event handler to detect when intel is ready to roll
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
</script>
<script src="js/appframework.ui.min.js"></script>
<script>
if(isIntel)
$.ui.autoLaunch = false;
$.ui.useOSThemes = false; //Change this to false to force a device theme
$.ui.blockPageScroll();
$(document).ready(function () {
if ($.ui.useOSThemes && (!$.os.ios||$.os.ios7))
$("#afui").removeClass("ios");
});
$.ui.ready(function(){
alert('uiready');
//App is ready lets check if a user exists.
});
</script>
<link href="css/icons.css" rel="stylesheet" type="text/css">
<link href="css/af.ui.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="afui" class="ios">
<div id="header" class="header"></div>
<div id="content" style="">
<div class="panel" title="Main" id="main" selected="selected"
style="">
<a class="button" href="#" style="" data-appbuilder-object="button">Hello World</a>
</div>
</div>
<div id="navbar" class="footer">
Home
</div>
</div>
</body>
</html>
Any ideas?
Check your text/html Content-Encoding in Header Data. With Content-Encoding: gzip this will not work. Maybe .htaccess => Modul mod_filter.c
I want to include the fuelUx wizard into my jsf/java project. However, I am struggeling to convert the component into jsf:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui">
<h:head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap-responsive.css" rel="stylesheet"
type="text/css" />
<link href="css/override.css" rel="stylesheet" type="text/css" />
<link href="dist/css/fuelux.css" rel="stylesheet" type="text/css" />
<link href="dist/css/fuelux-responsive.css" rel="stylesheet"
type="text/css" />
<link href="dist/css/fuelux.min.css" rel="stylesheet" type="text/css" />
<link href="dist/css/fuelux-responsive.min.css" rel="stylesheet"
type="text/css" />
<!-- 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="../assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
-->
<h:outputScript name="js/require.js" />
<script>
//<![CDATA[
requirejs.config({
paths: {
'jquery': 'lib/jquery',
'underscore': 'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min',
'bootstrap': 'lib/bootstrap/js',
'fuelux': 'src'
}
});
require(['jquery', 'sample/data', 'sample/datasource', 'sample/datasourceTree', 'fuelux/all'], function ($, sampleData, StaticDataSource, DataSourceTree) {
// WIZARD
$('#MyWizard').on('change', function(e, data) {
console.log('change');
if(data.step===3 && data.direction==='next') {
// return e.preventDefault();
}
});
$('#MyWizard').on('changed', function(e, data) {
console.log('changed');
});
$('#MyWizard').on('finished', function(e, data) {
console.log('finished');
});
$('#btnWizardPrev').on('click', function() {
$('#MyWizard').wizard('previous');
});
$('#btnWizardNext').on('click', function() {
$('#MyWizard').wizard('next','foo');
});
$('#btnWizardStep').on('click', function() {
var item = $('#MyWizard').wizard('selectedItem');
console.log(item.step);
});
$('#MyWizard').on('stepclick', function(e, data) {
console.log('step' + data.step + ' clicked');
if(data.step===1) {
// return e.preventDefault();
}
});
});
//]]>
</script>
</h:head>
<h:body>
<div class="container">
<!-- WIZARD -->
<div>
<div id="MyWizard" class="wizard">
<ul class="steps">
<li data-target="#step1" class="active"><span
class="badge badge-info">1</span>Step 1<span class="chevron"></span></li>
<li data-target="#step2"><span class="badge">2</span>Step 2<span
class="chevron"></span></li>
<li data-target="#step3"><span class="badge">3</span>Step 3<span
class="chevron"></span></li>
<li data-target="#step4"><span class="badge">4</span>Step 4<span
class="chevron"></span></li>
<li data-target="#step5"><span class="badge">5</span>Step 5<span
class="chevron"></span></li>
</ul>
<div class="actions">
<button class="btn btn-mini btn-prev">
<i class="icon-arrow-left"></i>Prev
</button>
<button class="btn btn-mini btn-next" data-last="Finish">
Next<i class="icon-arrow-right"></i>
</button>
</div>
</div>
<div class="step-content">
<div class="step-pane active" id="step1">This is step 1</div>
<div class="step-pane" id="step2">This is step 2</div>
<div class="step-pane" id="step3">This is step 3</div>
<div class="step-pane" id="step4">This is step 4</div>
<div class="step-pane" id="step5">This is step 5</div>
</div>
<h:button type="button" class="btn btn-mini" id="btnWizardPrev"
value="prev" />
<h:button type="button" class="btn btn-mini" id="btnWizardNext"
value="next" />
<h:button type="button" class="btn btn-mini" id="btnWizardStep"
value="current step" />
</div>
</div>
<!--/.fluid-container-->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<h:outputScript name="js/jquery-1.7.2.min.js" />
<h:outputScript name="js/bootstrap.min.js" />
<h:outputScript name="js/jquery.dataTables.min.js" />
<h:outputScript name="js/bootstrap.js" />
</h:body>
</html>
When I tested the component on a clear html page, whithout jsf, I saw that I had to include to make it work:
<html lang="en" class="fuelux">
However, I think thats not possible in jsf. Therefore, how to implement the component in jsf? I appreciate your answer!!!
If you're unable to include that class in your markup, you could try doing the following with jQuery:
$('html').addClass('fuelux');