I am using materializecss in my app script add-on, When I try and add a tooltip dynamically the tip does not update with the new label. I have tried several variations and even double-checked that the tip was being changed, which it was. The problem is that it does not seem to reinitialize with the updated text.
Here is a jfiddle: https://jsfiddle.net/edlisten/grafo4su/1/
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<script>
$(function() {
$('.tooltipped').tooltip({delay: 50,tooltip:"new",position:"bottom"});
});
</script>
</head>
<body>
<div class="container">
<a class="btn tooltipped">Hover me!</a>
</div>
</body>
</html>
What you can do is set an id to the anchor.
Lets say <a class="btn tooltipped" id="tooltip">Hover me!</a>
Now we can find easily the element with jquery.
var anchorElement = $('#tooltip');
Materialize has an atribute data-tooltip you need to have on the element so that the tooltip will pop out.
anchorElement.attr('data-tooltip', 'New tooltip value');
And finally we need to initialize the materialize tooltip on the element
anchorElement.tooltip();
You can play around with it and put it in a function.
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.
is there a way to render only the <%-body%> in ejs? I have a sidebar(with animation) in my layout and when i click every link in the sidebar it refresh the whole page and the animation of the sidebar.
can you only change the body without refreshing the page?
Below is an example of what you'd have to do to switch the current page in HTML.
<!doctype html>
<html lang="en">
<body>
<div class="sidebar">
...
</div>
<div class="wrapper-1">
<!-- First page -->
</div>
<div class="wrapper-2">
<!-- Second page -->
</div>
</body>
<script>
let wrapper1 = document.getElementsByClassName("wrapper-1");
let wrapper2 = document.getElementsByClassName("wrapper-2");
function linkClicked(event) {
// Check which link was clicked
// Hide wrapper1 and show wrapper2
wrapper1.style.display = 'none';
wrapper2.style.display = 'unset';
}
document.querySelector('HTML class/ID of a button').addEventListener('click', linkClicked, false);
<script>
</html>
The issue is a validation messages appears and the textfield turns red when specific fields are clicked and blurred out. But when I click the submit button of the form without touching any of the input fields, no error messages are shown and none of the textfields turn red.
The correct way is, it has to show all the validation messages during the submission and all the textfields have to turn red.
The plunk for this is
http://plnkr.co/edit/fNUdp7Qdd0ysrd0eiPFT
<!DOCTYPE html>
<html>
<head>
<title>Angular-Formly</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
</head>
<!-- form declaration-->
<body ng-app="app" ng-controller="MainController as vm">
<div class="container col-md-4 col-md-offset-4">
<form novalidate name="vm.form" ng-submit="vm.formsubmit()" >
<formly-form model="vm.user" fields="vm.fields" form="vm.form" >
</formly-form>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!-- Application Dependencies -->
<script src="//cdnjs.cloudflare.com/ajax/libs/api-check/7.2.4/api-check.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script data-require="angular-messages#1.4.8" data-semver="1.4.8" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-formly/6.11.0/formly.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-formly-templates-bootstrap/4.3.1/angular-formly-templates-bootstrap.js"></script>
<!-- Application Scripts -->
<script src="app.js"></script>
<script src="MainController.js"></script>
<script type="text/ng-template" id="custom-messages.html">
<div class="my-messages" ng-messages="field.$error" ng-style="{color: 'red'}" ng-if="form.$submitted">
<div class="my-message" ng-message"required">required Message</div>
</div>
</script>
<script type="text/ng-template" id="formly-messages.html">
<formly-transclude></formly-transclude>
<div class="my-messages" ng-messages="form.$error" ng-style="{color: 'red'}" ng-if="fc.$touched">
<div ng-repeat="(name, message) in ::options.validation.messages" ng-message="{{::name}}">{{message(fc.$viewValue, fc.$modelValue, this)}}
</div>
</div>
</script>
</body>
</html>
Can anyone kindly give me the solution for this? Thanks in advance
It seems the form won't allow you to submit it, because you've got required fields in there.
Therefore the form.$submitted value will never be true in your option setting formlyConfigProvider.extras.errorExistsAndShouldBeVisibleExpression.
I would like to change the label of a button on click from "start" to "restart". My app will be available in several languages and I am using the L10n.js library for that. The label of the button can have 2 values ("Start" and "Restart")) defined as followed in the app.properties:
start = Start
restart = Restart
text = this is some text
another-text = this is another text
The button is defined like this (using buttons building block):
<body>
<p id="sometext" data-l10n-id="text"></p>
<section data-type="sidebar" role="region" class="skin-dark">
<section style="margin-bottom: 30px">
<button id="startbutton" class = "recommend" data-l10n-id="start">Start</button>
</section>
</div>
</section>
</body>
Once the page is loaded the correct button (and paragraph) value is displayed. The data-l10n-id attribute and corresponding value should change upon click:
document.getElementById("startbutton").addEventListener("click", function( event ) {
this.setAttribute("data-l10n-id", "restart");
document.getElementById("sometext").setAttribute("data-l10n-id", "another-text");
});
Looking at DOM the attribute has changed but not the value it should display:
<p id="sometext" data-l10n-id="another-text">this is some text</p>
<section data-type="sidebar" role="region" class="skin-dark">
<section style="margin-bottom: 30px">
<button id="startbutton" class="recommend" data-l10n-id="restart">Start</button>
</section>
</section>
Is there something I am doing wrong? Any comment is welcome! Thank you.
Here is a demo app for the usage of l10n.js: https://github.com/tuxor1337/fxos-l10n-demo
Note that the <head> part of the HTML document contains information about the available locales:
<link rel="localization" href="locales/testing.{locale}.properties" />
<meta name="availableLanguages" content="en-US" />
Furthermore we include not only l10n.js, but also a shim for JavaScript's Promise since that's required by l10n.js, but it's not part of Firefox OS 1.3:
<script src="es6-promise.js" defer></script>
<script src="l10n.js" defer></script>
<script src="app.js" defer></script>
I successfully tested the code with the Firefox OS emulators for versions 1.3 and 2.0. Note that there are slightly different implementations of l10n.js around. I used Mozilla's implementation used in gaia: https://github.com/mozilla-b2g/gaia/blob/master/shared/js/l10n.js
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