I cannot figure out how to correctly use ui-route, the samples on the angular-ui web site do not help.
Here is my code. I want to implement a simple navigation menu. When the route matches that of the item then I want to show the <span> otherwise I want to show <a>. I expected $uiRoute to reflect the current route, but apparently it does not because I get <span> elements in the output no matter what the route is.
http://jsbin.com/ugefoq/2/edit
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset=utf-8 />
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
angular.module('app', ['ng', 'ui']);
</script>
</head>
<body>
<ul>
<li ui-route="#/link0">
<a ui-if="$uiRoute" ng-href="#/link0">link0</a>
<span ui-if="!$uiRoute">link0</span>
</li>
<li ui-route="#/link1">
<a ui-if="$uiRoute" ng-href="#/link1">link1</a>
<span ui-if="!$uiRoute">link1</span>
</li>
</ul>
</body>
</html>
It looks like you have it right, except that based on your description, you have your ui-if statements reversed. Right now, your saying, show the link if the url matches my href, show the span if they don't.
On another note, if you are doing a single page application here, you may not want to use ui-if as it completely removes the element, meaning you cannot dynamically show it later when your route changes.
Related
I'm creating a spring-boot web application. I'm new to spring-boot as well as AngularJS and have tried integrating this with my application without any success. I have a page of JSON that I want to format as a table in my HTML page ("index.html") but my AngularJS variables are not visible on this page. I formatted some of my HTML code based off this tutorial on YouTube: https://www.youtube.com/watch?v=fUtVRKoBlbQ&list=PLVApX3evDwJ1i1KQYCcyS9hpSy_zOgU0Y&index=6 . I have attached the page of JSON along with my JavaScript code, HTML file, and the result of compiling my program:
JavaScript:
var app = angular.module("User", []);
app.controller("UsersController", function($scope, $http) {
$http.get("http://localhost:7070/user/all")
.success(function(result) {
$scope.tickets = result.tickets
})
});
HTML:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:insert="fragments.html :: headerfiles">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript" src="/static/app/users.controller.js" th:src="#{/app/users.controller.js}"></script>
</head>
<body>
<base href>
<header th:insert="fragments.html :: nav"></header>
<!-- Page content goes here -->
<div class="container">
<p>This is User\Index. Only people with role_user can see this.</p>
<div ng-app="User" ng-controller="UsersController">
<ul>
<li ng-repeat="t in tickets">
{{t.ticket_id}} - {{t.title}} - {{t.body}}
</li>
</ul>
</div>
</div>
</body>
</html>
JSON:
A screenshot of the tickets (JSON) (
RESULT:
A screenshot of the result when I compile my code
Please note that I highly doubt this is the best solution. It worked for me so I'll post it here. In my HTML file, I moved my starting body tag <body> to line 4, immediately underneath the starting head tag <head th:insert="fragments.html :: headerfiles">. I also removed static as suggested by Ciao Costa in the earlier answer, https://stackoverflow.com/users/4405995/caio-costa . Here is the link on removing the static: (Image does not show using thymeleaf and spring) . Another small change I made was changing the variable {{t.ticket_id}} to {{t.id}} but that's only because the JSON showed it as id
HTML:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:insert="fragments.html :: headerfiles">
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script type="text/javascript" src="/app/users.controller.js" th:src="#{/app/users.controller.js}"></script>
</head>
<base href>
<header th:insert="fragments.html :: nav"></header>
<!-- Page content goes here -->
<div class="container">
<p>This is User\Index. Only people with role_user can see this.</p>
<div ng-app="User" ng-controller="UsersController">
<ul>
<li ng-repeat="t in tickets">
{{t.id}} - {{t.title}} - {{t.body}}
</li>
</ul>
</div>
</div>
</body>
</html>
RESULT:
Since your screen still displays the {{ }}, we know ng-app hasn't initialized properly. A good first approach would be to have a look at the Console, since failing to initialize ng-app usually results in a error message.
If ng-app had initialized, even if the variable you were trying to access in scope was undefined, you would not see the curly brackets.
When AngularJS initializes correctly and doesn't find the variable you are trying to render in DOM, it just leave its space blank and moves on like nothing happened. It also shows no error message in such cases.
I've done some tests and I believe the problem is in here:
<script type="text/javascript" src="/static/app/users.controller.js" th:src="#{/app/users.controller.js}"></script>
It looks like th:src is breaking your application because it is unable to find the file and thus generates a module error.
Try using it this way:
<script type="text/javascript" src="/static/app/users.controller.js" th:src=b"#{baseUrl + '/app/users.controller.js'}"></script>
Or:
<script type="text/javascript" src="/static/app/users.controller.js" th:src="#{~/app/users.controller.js}"></script>
If none of the above work, try removing the static.
Sometimes it happens when you forget to hit ng serve inside your terminal.
I have an HTML template file which uses Spring MVC + thymeleaf and I'm trying to create a navigable menu at the top of the page using Foundation's "top-bar" component.
So far, the menu bar is displayed but menus are not being shown when the cursor is placed on top.
I can display the sub-menus related to my main menu options (the ones placed at the bar) but sub-menus are not working because when I click an option on the first sub-menu, the menu closes instead of displaying another sub-menu.
My HTML file looks like this:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="stylesheet" type="text/css" media="all" th:href="#{/css/foundation.min.css}" />
</head>
<body>
<nav class="top-bar" role="navigation" data-topbar="true">
<ul class="title-area">
<li class="name">
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span>
</li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="divider"></li>
<li class="has-dropdown"><span th:text="#{menu.administration}"></span>
<ul class="dropdown">
<li class="has-dropdown"><span th:text="#{menu.administration.material}"></span>
<ul class="dropdown">
<li><span th:text="#{menu.administration.ontology}"></span></li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
</nav>
<div>
<div class="large-12 columns">
<h2 th:text="#{material.search.title}"></h2>
</div>
</div>
<script th:href="#{/js/vendor/jquery.js}"></script>
<script th:href="#{/js/foundation.min.js}"></script>
<script th:href="#{/js/foundation/foundation.topbar.js}"></script>
<script th:href="#{/js/vendor/modernizr.js}"></script>
<script>
jQuery(document).ready({
jQuery(document).foundation();
});
</script>
</body>
</html>
I'm sure my resources are being properly imported.
Also, I had to use data-topbar="true" because if I use data-topbar only, my page fails while rendering saying it a expecting for a = after the property name.
Am I doing something wrong?
Thank you so much for any help guys!
The problem was located in the property I was using to import my JS files.
As seen in my code, the import looks like this:
<script th:href="#{/js/foundation.min.js}"></script>
But to import a script file the href property is wrong, it must be src so the correct format is:
<script th:src="#{/js/foundation.min.js}"></script>
I know it was a silly mistake but I hope it helps someone else.
The fact that an error was never shown while compiling nor while generating the page worries me a little.
your th:text="#{menu.administration} is not working
the structure should be
<h1 th:text="${header.title}">title</h1>
<small th:text="${header.subtitle}">Subtitle</small>
you can't leave the empty and expect a value
please take a look at the tutorial http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html
I found this script, that i want to implement into my webside.
http://codepen.io/johnmotyljr/pen/qhvue
It does exactly what i want it to do, BUT! I don't know how to put into my webside?! Where to put the JS and how?
The content that i need to change is stored in an html-file, but how do i get that content into my div with this script?
Hope you can understand what i'm asking for and sorry for my limited/bad english!
View the source code of your link, find the <iframe> tab, and the demo html is inside.
You can load that content via AJAX. So, building on the CodePen-example you gave, you could do something like this:
$('#kittens').click(function() {
$('div').load('kittens.html');
});
Where kittens.html is the URL of the html file you want to load.
Update:
Now that you have posted a link to your website, I notice a few more things:
You haven't got jQuery included. Between you <head></head> tags you
should include <script type="text/javascript"
src="//code.jquery.com/jquery-1.10.2.min.js"></script>
Probably, you want the Resultater | Billeder | Video | Afkom links to load different content, right? Then, you should use
something like this:
In between <script type="text/javascript"></script>:
$('.hesteundertop a[href="#resul"]').click(function(e) {
$('.hestetekst').load('... Resultater URL ...');
e.preventDefault();
});
try this type of method.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function(){
var kittens = "Kittens";
var puppies = "puppies";
var aardvark = "aardvark";
$('#kittens').click(function(){
$('div').html(kittens);
//$('div').load('kittens.html');
});
})
</script>
<body>
<ul>
<li id="kittens"></li>
<li id="puppies"></li>
<li id="aardvark"></li>
</ul>
<div>Click on the picture for description.</div>
</body>
</html>
Seems my question is too difficult or I am unable to explain my issue properly!!
I am using barelyfitz tabifier.
My html is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Simple Tabber Example</title>
<script type="text/javascript" src="tabber.js"></script>
<link rel="stylesheet" href="example.css" TYPE="text/css" MEDIA="screen">
<link rel="stylesheet" href="example-print.css" TYPE="text/css" MEDIA="print">
<script type="text/javascript">
/* Optional: Temporarily hide the "tabber" class so it does not "flash"
on the page as plain HTML. After tabber runs, the class is changed
to "tabberlive" and it will appear. */
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
function loadDetails()
{
alert("here");
document.getElementById('myTab').tabber.tabShow(1);
alert("not here");
}
</script>
</head>
<body>
<h1>Tabber Example</h1>
<div class="tabber" id="myTab">
<div class="tabbertab">
<h2>Tab 1</h2>
<A href="#" onclick="loadDetails()";>Banana</A>
</div>
<div class="tabbertabhide">
<h2>Tab 4</h2>
<p>Tab 4 content.</p>
</div>
</div>
</body>
</html>
As clear, tab 4 is initially hidden as its class is tabbertabhide.
And tab 1 is having a text banana with onclick reference to loadDetails method.
What I want to do is, on clicking banana, I want tab 4 to become visible.
However, document.getElementById line in loadDetails method does not have any effect.
Can any one please help me with this specific technical issue!!
Below is the same issue I asked before in a generalized manner!!
Issue:
I have a webapplication with a search form on the index page which searches for fruits.
Based on the search criteria entered, the result will have a list of fruits. Each member of this will have a call back link to a javascript function. Something like:
<html>
<head>
<script type="text/javascript">
//Function to load further details on fruits
function loadDetails(){
//this will do a call back to server and will fetch details in a transfer object
}
</script>
</head>
<body>
<form method="post">
<A href="#" onclick="loadDetails('banana')";>Banana</A>
<A href="#" onclick="loadDetails('apple')";>Apple</A>
</form>
</body>
</html>
Now my issue is, I want to show the details on a tab which gets generated in a loadDetails function.
Something in the lines of www.barelyfitz.com/projects/tabber/
But dynamic tab generation on the onclick event in the content of first tab.
In other words, first tab will have the clickable list of fruits and on clicking a fruit, a new tab will get opened with more details on that fruit fetched from database.
Is it possible using simple javascript ??
Also, is it possible to do this in jquery without AJAX. I can not use ajax.
I am extremely extremely new to javascript. So I dont know how well am able to describe my question. But have tried my best.
Hope to get some help!!
Can you post this on a fiddle?
Also try the jQuery way of doing it which would be:
function loadDetails()
{
$('.tabbertabhide').show(); //make it appear without any animation OR
$('.tabbertabhide').fadeIn(); //make it to fade in.
}
The above code uses a class selector- in this case your selecting the items with class "tabbertabhide" and making them appear. Similarly you could also use an ID selector if you wanted.
I am new to JavaScript (only a couple of days of reading a book) and I am stuck on this code snippet. I have looked at it over and over again but cannot seem to figure out why it is not working. I am sure it is something really simple that I have just overlooked, and I just need a fresh pair of eyes to look at this.
The code is supposed to update a placeholder image on a page without the page having to reload. But when I am clicking on the link of an image, it is taking me to the link where the image is located instead of replacing the placeholder image. Here is my HTML code:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Image Gallery</title>
<script type="text/javascript" src="scripts/showPic.js"></script>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li>
Cat
</li>
<li>
Night
</li>
<li>
Coke
</li>
<li>
Sport
</li>
<li>
MnM's
</li>
<li>
Kid
</li>
</ul>
<br />
<img id="placeholder" src="images/placeholder.jpg" alt="Place Holder Image" />
</body>
</html>
And here is the JavaScript function I am using to get this done:
<script type="text/javascript">
function showPic(whichpic) {
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
}
</script>
You are missing the id attribute of img tag
<img id="placeholder" src="images/placeholder.jpg" title="Place Holder Image" />
Btw, since you are claiming XHTML, make sure you close your tags.
your script uses
document.getElementById("placeholder");
to get the place holder element reference. Be sure that you set your HTML elements' id attributes if you want to be able to use this function. So, whichever is your placeholder element, (i guess it is the IMG tag at bottom) set id="placeholder" attribute.
since you are starting, have a look at documentations :
https://developer.mozilla.org/en/DOM/document.getElementByID
From your problem it seems that you are linking to javaScript. Make sure you are pointing to right location in your
If adding div and checking your .js file's location does not help, you try to open the page on "Firefox", then click on the links and look for script errors. How to do that is :
From Tools menu, choose Error console.
This will give you useful info on what is going wrong. If you have error and can't figure out what is going on, post it here.