My slider wont come up on first time navigation of the page. However when I hard refresh the page then it comes up and also if I replace the <div ng-view></div> code with the front.html page content then also the slider starts working. Let me know what I am doing wrong in angular as I believe it is something basic that I am missing.
Following is my layout code -
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>WEBSITE</title>
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="assets/css/flexslider.css" type="text/css" media="screen" />
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/jquery.flexslider.js"></script>
<script src="assets/js/angular.js"></script>
<script src="assets/js/angular-route.js"></script>
<script src="controllers/mainController.js"></script>
<script>
jQuery(document).ready(function($) {
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
animation: "slide"
});
});
});
</script>
</head>
<body ng-controller="mainController">
<header ng-include="'includes/header.html'"></header>
<nav ng-include="'includes/navmenu.html'"></nav>
<div ng-view></div>
<footer ng-include="'includes/footer.html'"></footer>
</body>
</html>
Following is my main controller code -
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'views/pages/front.html',
controller: 'frontCtrl'
})
});
In front.html I have slider code -
<div class="flexslider">
<ul class="slides">
<li>
<img src="assets/images/banner1.jpg">
</li>
<li>
<img src="assets/images/banner2.jpg">
</li>
<li>
<img src="assets/images/banner3.jpg">
</li>
<li>
<img src="assets/images/banner4.jpg">
</li>
</ul>
</div>
EDIT -
If I also write this code in the Firebug console then also slider starts working but not on page load -
jQuery('.flexslider').flexslider();
The event handler attached with jQuery(window).load will run when the page is fully loaded. However, ng-view hasn't loaded your view yet, which means <div class="flexslider"> doesn't exist.
Move the initialization into a directive:
myApp.directive('flexslider', function () {
return {
link: function (scope, element, attrs) {
element.flexslider({
animation: "slide"
});
}
}
});
And use like this:
<div class="flexslider" flexslider>
Demo: http://plnkr.co/edit/aVC9fnRhMkKw3xfpm4No?p=preview
Related
I am using thymeleaf for my front end design ,I create a nav bar and
I want this nav bar work for all pages, my Requirement is make one nav
bar and use this nav bar in every page ,with out define another nav
bar in separate page .
I create a nav bar inside my fragments folder that situated inside
template folder
When i call my nav bar in my index page it is not working
Here is my code of index page
index.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Coursel</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
<script type="text/javascript" src="/static/demo.js"></script>
</head>
<body>
<nav th:replace="/fragments/nav :: nav-front"></nav>
<div class="container-fluid">
here my register form codes
</div>
</body>
</html>
nav.html
<nav class="nav">
<a class="nav-link active" th:href="#{/templates/index.html}">Active</a>
<a class="nav-link active" th:href="#{/templates/index.html}">Register</a>
<a class="nav-link active" th:href="#{/templates/index.html}">Login</a>
<a class="nav-link active" th:href="#{/templates/index.html}">AboutUs</a>
</nav>
Here is my project structure
I use IntelliJ IDEA as code editor.
It is possible, look into Thymeleaf Layout Dialect.
In short:
you create some layout.html in your templates folder. In it:
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<!-- all common head tags - meta etc. -->
<title layout:title-pattern="$CONTENT_TITLE - $LAYOUT_TITLE">App name</title><!-- define title in your page template and it will be added too your app name, e.g. 'Home - My App' -->
</head>
<body>
<nav>
<!-- your nav here -->
</nav>
<section layout:fragment="content">
<!-- don't put anything here, it will be replaced by the page contents -->
</section>
</body>
</html>
And in you page templates:
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{/path/to/layout.html}">
<head>
<title>Page name</title>
</head>
<body>
<section layout:fragment="content">
<p>This will be added into your layout!</p>
</section>
</body>
</html>
In order to make it work, you will need to add it to your templateEngine() bean definition:
#Bean
public SpringTemplateEngine templateEngine() {
SpringTemplateEngine templateEngine = new SpringTemplateEngine();
templateEngine.setTemplateResolver( thymeleafTemplateResolver() );
templateEngine.addDialect( new LayoutDialect() );
return templateEngine;
}
See mvnrepository to import this dialect using maven.
Using requirejs, I can use simple routes like /register, but I always get an error when I try a nested route like /register/1 or something.
This works (where the route is just /register):
layout.js
define(['require', 'axios'], (require, axios) => {
const layout = `
<div class="container">
<div class="row">
<div class="header clearfix">
<nav style="padding-top: 10px">
<ul class="nav nav-pills pull-left">
<li role="presentation">
<h3>My App</h3>
</li>
</ul>
<ul class="nav nav-pills pull-right">
<li role="presentation">Login</li>
<li role="presentation">Register</li>
</ul>
</nav>
</div>
</div>
</div>
`;
if (window.location.pathname === '/') {
window.location.pathname = '/home'
}
axios.defaults.headers.common['authorization'] = Cookies.get('token')
return layout
})
register.js
define(['layout'], layout => {
if (window.location.pathname === '/register') {
console.log("Got it") // This works since the route is just '/register'
}
})
This does not work (where the route is /register/1):
layout.js
define(['require', 'axios'], (require, axios) => {
const layout = `
<div class="container">
<div class="row">
<div class="header clearfix">
<nav style="padding-top: 10px">
<ul class="nav nav-pills pull-left">
<li role="presentation">
<h3>My App</h3>
</li>
</ul>
<ul class="nav nav-pills pull-right">
<li role="presentation">Login</li>
<li role="presentation">Register</li>
</ul>
</nav>
</div>
</div>
</div>
`;
if (window.location.pathname === '/') {
window.location.pathname = '/home'
}
axios.defaults.headers.common['authorization'] = Cookies.get('token')
return layout
})
register.js
define(['layout'], layout => {
if (window.location.pathname === '/register/1') {
console.log("Got it") // Error
}
})
index.html
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<link
rel="stylesheet"
type="text/css"
href="/stylesheets/style.css">
<link
rel="stylesheet"
type="text/css"
href="/stylesheets/registration.css">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<script
type="text/javascript"
src="/javascripts/styles/js.cookie.js">
</script>
<script data-main="config" src="require.js"></script>
<script>require(['config'])</script>
</head>
<body>
<div id="my-app"></div>
</body>
</html>
config.js
requirejs.config({
baseUrl: 'javascripts/views',
paths: {
allConversations: 'allConversations',
conversation: 'conversation',
home: 'home',
layout: 'layout',
loginView: 'login',
login: '../scripts/login',
logoutHandler: '../scripts/logout',
memberProfile: 'memberProfile',
profile: 'profile',
register: 'register',
conversationCount: 'conversationCount',
nav: 'nav',
axios: '//unpkg.com/axios/dist/axios.min',
jquery: [
'//code.jquery.com/jquery-3.3.1.min',
'//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min'
],
bootstrap: ['//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min'],
fontAwesome: ['//use.fontawesome.com/7973784de3'],
},
})
require([
'home',
'layout',
'loginView',
'login',
'logoutHandler',
'nav',
'register'
])
How do I use nested URL routes with requirejs?
First problem. You are loading config module twice. data-main attribute specifies what modules should be loaded after the RequireJS load. So the second line is basically a duplicate of this
<script data-main="config" src="require.js"></script>
<script>require(['config'])</script>
Please replace this with just
<script data-main="config" src="require.js"></script>
Second problem, you have syntax error in layout.js. Your syntax looks like JSX, not regular JavaScript. Please amend this or use RequireJS JSX files loader plugin -> https://github.com/philix/jsx-requirejs-plugin
Can you please show use you config module?
Cheers.
I am using angular along with node.
I am using routes to redirect page.
Onto my html page i have defined 2 links as:
<!DOCTYPE html>
<html >
<head>
<title>My Angular App!</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="../public/javascript/angular-route.min.js"></script>
<link data-require="bootstrap-css#*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script src="/webstorm1/app.js"></script>
<script src="../controllers/registration.js"></script>
</head>
<body>
<div ng-app="test">
<a ng-href="#/login">Login</a>
<a ng-href="#/register">Register</a>
</div>
<div ng-view></div>
</body>
</html>
and onto the app.js file i have defined the route as:
var test = angular.module('test', ['ngRoute'])
.config(function($routeProvider, $locationProvider) {
console.log('test');
$routeProvider.when('/register',
{
templateUrl: '/webstorm1/partials/register.html',
controller: 'registration'
});
$routeProvider.when('/login',
{
templateUrl: '../partials/login.html',
controller: 'login'
});
});
when i run the html file and click on register link, it prints the 'test', but doesnot show the page on browser.
Your <div ng-view></div> is outside of <div ng-app="test"> scope.
<div ng-app="test"> <!-- ng-app starts -->
<a ng-href="#/login">Login</a>
<a ng-href="#/register">Register</a>
</div> <!-- ng-app ends -->
<div ng-view></div> <!-- outside from ng-app -->
Simply put that ng-app="test" to some parent element like body or html to make all elements inside their scope.
Hello i have something very simple:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="{{adminUrl}}/assets/css/bootstrap/bootstrap-responsive.min.css">
<link rel="stylesheet" href="{{adminUrl}}/assets/css/bootstrap/bootstrap.min.css">
<script type="text/javascript" src="{{adminUrl}}/assets/js/vendors/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="{{adminUrl}}/assets/js/bootstrap/bootstrap.min.js"></script>
</head>
<body>
<div style="padding: 20px; background: #fafafa; border-bottom: solid 1px #eee">
users list/no paging
create new user
</div>
<h1>List data:</h1>
<ol>
{{#each data}}
<li>
<div><b>{{username}} - {{id}}</b></div>
{{email}}
<div> </div>
</li>
{{/each}}
</ol>
</body>
</html>
This is an expressjs view that uses handlebars. 'adminUrl' is in app.locals.
app.locals({
adminUrl: _config.rootUrl
});
In the css, js and a href links outside the {{#each works just fine, but in the {{#each... does not. How can i fix it to work?
try {{../adminUrl}} within your {{#each}} block as I believe handlebars will change the context to be the current member of data and thus you need .. to access the parent context.
I am using JQuery Mobile and setting up the dialog box link dynamically. Upon user clicking the link, the dialog opens in a separate page, NOT in a dialog box popup. I have the working code below. Can somebody please tell me what I am doing wrong?
Thanks in advance,
Vish
Here is a link to this sample on jsfiddle
http://jsfiddle.net/vishr/ekLWd/
When user clicks on Add Item, I dynamically change the text to Remove Item and when user clicks Remove Item, I put up a dialog box, which in this case opens in a separate page, not a dialog pop-up
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"> </script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<script type="text/javascript">
(function(){
$(document).ready(function() {
$("#del-item").live('click', function(){
$.mobile.changePage($('#del-dialog'), 'pop');
});
$("#add-item").live('click', function(){
$('#add-item .ui-btn-text').text('Remove Item');
$('.item').attr('id', 'del-item');
$('.item').attr('href', '#del-dialog');
$('.item').attr('data-rel', 'dialog');
});
$("#close-dialog").click(function(){
$('.ui-dialog').dialog('close');
});
});
})();
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<div id="dialog-container" data-inline="true">
Add Item
</div>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="dialog" role="dialog" id="del-dialog">
<div data-role="content">
<div style="text-align:center;"><strong>Remove Item?</strong></div>
<form id="myForm">
<div data-role="fieldcontain">
<fieldset class="ui-grid-a">
<div class="ui-block-a">Cancel</div>
<div class="ui-block-b">OK</div>
</fieldset>
</div>
</form>
</div>
</div>
</body>
</html>
If you want the dialog box to open in the same page then you should use SimpleDialog plugin available for jquery mobile.
Below is your code which i have customized using SimpleDialog plugin so that the dialog box appears in the same page
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.js"></script>
<script type="text/javascript">
(function(){
$(document).ready(function() {
$("#del-item").live('click', function(){
//$.mobile.changePage($('#del-dialog'), 'pop');
$(this).simpledialog({
'prompt' : 'What do you say?',
'cleanOnClose': true,
'buttons' : {
'OK': {
click: function () {
$('#simplestringout').text($('#simplestring').attr('data-string'));
}
},
'Cancel': {
click: function () { console.log(this); },
icon: "delete",
theme: "c"
}
}
})
});
$("#add-item").live('click', function(){
$('#add-item .ui-btn-text').text('Remove Item');
$('.item').attr('id', 'del-item');
$('.item').attr('href', '#del-dialog');
$('.item').attr('data-rel', 'dialog');
});
$("#close-dialog").click(function(){
$('.ui-dialog').dialog('close');
});
});
})();
</script>
<title>Page Title</title>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<div id="dialog-container" data-inline="true">
Add Item
</div>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>