beforeActivate not firing jeasyui - tabs

I've read through many of these questions and they are answered the same. I've tried it but can't get it to work. I've gotten the code very small. What am I doing wrong? The tabs work fine, but no event getting fired.
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#tabs').tabs({
beforeActivate: function(event,ui) {
alert("Tabs Changed");
}
});
});
</script>
</head>
<body>
<div class="easyui-tabs" id="tabs">
<div Title="Home" >
Home
</div>
<div Title="Admin">
Admin
</div>
</div>
</body>
</html>
thanks,
dave

Related

React in HTML, blank page

i have my react code in plain HTML
<!Doctype html>
<html>
<head>
<meta charset="uttf-8">
<title>React! React! React!</title>
<script src="https://unpkg.com/react#16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<script>
ReactDOM.render(
<h1>Sherlock Holmes</h1>,
document.body
);
</script>
</body>
</html>
but he not work, after run this index.html in Chrome i have only blank white page,
can someone explain me what i am doing wrong?
i use vscode
To make this work, use the development version, not the production version of the react and react-dom files. Also note that you need to specify the type of your script as "text/babel" or babel won't parse it.
Check out the code below:
<html>
<head>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
</head>
</head>
<body>
<script type="text/babel"> /* notice type="text/babel"*/
ReactDOM.render(
<h1>Sherlock Holmes</h1>,
document.body
);
</script>
</body>
</html>
RESULT:
I did react for the first time and it edited your code like that. I guess the two scripts I added are not needed, but just try it. As I understood you have to set an section to place the text. These two links could help too.
Where to place line of code in html for ReactDOM.render?
https://www.w3schools.com/react/react_render.asp
My Code:
<!Doctype html>
<html>
<head>
<meta charset="uttf-8">
<title>React! React! React!</title>
<link rel="stylesheet" href="lib/style.css" />
</head>
<body>
<section id="entry-point"></section>
<script src="https://unpkg.com/react#16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<script type="text/javascript">
var h = React.createElement('p', null, 'Sherlock Holmes');
ReactDOM.render(h, document.getElementById('entry-point'));
</script>
</body>
</html>

Bootstrap timepicker not appearing

I have the following piece of code in my front end. I couldn't get the timepicker to show up. Any help please?
<!DOCTYPE HTML>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.js"></script>
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.min.css" />
<script type="text/javascript">
$(() => {
$('#timepicker1').timepicker();
});
</script>
</head>
<body>
<div class="input-group bootstrap-timepicker timepicker">
<input id="timepicker1" type="text" class="form-control input-small">
<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>
</body>
<html>
I have all the required source files in my the correct path as mentioned in the code above. Also, I am not seeing any errors in the browser logs. Please help me fix this.
Thank you all
EDIT: I have now used the direct cdn links for all the source files as provided in jsfiddle.
To use the time picker on bootstrap. You must use the datetimepicker component. And use the format property to allow only hours and minutes to be captured
<!DOCTYPE HTML>
<html>
<head>
<link href="bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap-3.3.7/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="bootstrap-3.3.7/js/jquery-1.11.3.min.js"></script>
<script src="bootstrap-3.3.7/js/moment.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap-datetimepicker.min.js"</script>
<script src="bootstrap-3.3.7/js/transition.js"></script>
<script src="bootstrap-3.3.7/js/collapse.js"></script>
</head>
<body>
<div class="input-group bootstrap-timepicker timepicker">
<input id="timepicker1" type="text" class="form-control input-small">
<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>
<script type="text/javascript">
$(function () {
$('#timepicker1').datetimepicker({
format: 'HH:mm'
});
});
</script>
</body>
<html>
rel="stylesheet" was missing in one of the css tags. That was the issue.

AngularJS function unable to be called in ng-view

Using the following code, I am successfully able to use this angularjs carousel.
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.1.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript">
var app = angular.module('app', ['ui.bootstrap']);
app.controller('CarouselDemoCtrl', CarouselDemoCtrl);
function CarouselDemoCtrl($scope){
$scope.myInterval = 3000;
$scope.noWrapSlides = false;
$scope.activeSlide = 0;
$scope.slides = [
{
image: 'http://lorempixel.com/400/200/'
},
{
image: 'http://lorempixel.com/400/200/food'
},
{
image: 'http://lorempixel.com/400/200/sports'
},
{
image: 'http://lorempixel.com/400/200/people'
}
];
}
</script>
</head>
<body>
<div>
Write your name here <input type="text" ng-model="name">
Hi {{name}} Those are your photos:
<div ng-controller="CarouselDemoCtrl" id="slides_control">
<div>
<uib-carousel interval="myInterval" active="activeSlide">
<uib-slide ng-repeat="slide in slides" index="$index">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{$index+1}}</h4>
</div>
</uib-slide>
</uib-carousel>
</div>
</div>
</div>
</body>
</html>
However, when I divide the content up into a subsequent app.js and then serve it as an html snippet including the carousel using ng-view as follows, it then doesn't work.
<body ng-app="app">
<div ng-include='"./templates/header.html"'></div>
<div ng-view></div>
<div ng-include='"./templates/footer.html"'></div>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.min.js"></script>
<script src="scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<script src="scripts/app.js"></script>
</body>
It seems it's not able to refer to the function? I get the following console error
angular.js:13708 Error: [ng:areq] Argument 'CarouselDemoCtrl' is not a function, got undefined
Any help would be greatly appreciated! I got the code for the carouseldemo from https://codepen.io/Fabiano/pen/LACzk

Angularjs UI-Router Issue

So here I have my index.html and app.js. I'm trying to use prismjs to show a code block on my view .If you run the snippet below me. This is how I like my app to do. But in my real app I'd like to not include a tag that contain my secondview.html. I would like it to be in its own separate file. But when I do that the prism css file won't work inside the ui-view.
Is there any configuration I would have to do? I believe it has something to do with the ng-binding.Here is what it looks like inside the ui-view. I wish I can provide another link to show you what it looks like outside the ui-view but I don't have enough reputation to post more than 2 links...lol But it just pretty much has all of the classes that the prism js injected into the elements which the prism.css will render.
This is what it looks like when the view is in its own separate file(Not Working)
The Code below me has the secondview.html inside the index.html(Works)
myApp = angular.module("myApp", ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home',{
url: '/',
templateUrl: 'secondview.html'
});
});
<html ng-app="myApp">
<head>
<!-- <meta charset="utf-8" />-->
<title>AngularJS Prism</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/themes/prism.min.css">
</head>
<body style="background-color: grey">
<h1>Firsts View(Not Inside ui-view)</h1>
<pre>
<code class="language-html">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="stylesheets/style.css">
</head>
<body>
<div class="container">
<p>Hello There this is a short test</p>
</div>
<script src="javascripts/app.js"></script>
</body>
</html>
</code>
</pre>
<script type="text/ng-template" id="secondview.html">
<h1>Second View(Inside ui-view)</h1>
<pre>
<code class="language-html">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="stylesheets/style.css">
</head>
<body>
<div class="container">
<p>Hello There this is a short test</p>
</div>
<script src="javascripts/app.js"></script>
</body>
</html>
</code>
</pre>
</script>
<div ui-view></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/prism.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Need a directive :
.directive('ngPrism', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
Prism.highlightElement(element.find('code')[0]);
}
}
})
Then wrap your code html by <div ng-prism> ... </div>:
<div ng-prism>
<pre>
<code class="language-html">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="stylesheets/style.css">
</head>
<body>
<div class="container">
<p>Hello There this is a short test</p>
</div>
<script src="javascripts/app.js"></script>
</body>
</html>
</code>
</pre>
</div>
Then it worked.
Plunder demo here.

"Tag start is not closed" when using Handlebars.js

I'm getting an error that says "Tag start is not closed" in the following HTML code after the input tag. I can't seem to figure out why since I am using the Handlebars syntax properly. Can someone help me out please?:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="todo">
</div>
<script id="item-template" type="text/x-handlebars-template">
// Your code goes here
<div>
<input id="todo-complete" type="checkbox" {{#if completed}} "checked" {{/if}}>
<label>{{title}}</label>
</div>
</script>
<script src= "underscore.js"> </script>
<script src="handlebars-v1.3.0.js"> </script>
<script src="backbone.js"> </script>
<script src="jquery-1.11.1.js"> </script>
<script src="main.js"> </script>
</body>
You IDE doesn't understand Handlebars syntax, hence reporting a Error, which you should ignore.