I am not sure what to do after this:
<link rel="stylesheet" href="lib/codemirror.css">
<script src="lib/codemirror.js"></script>
<script>
var editor = CodeMirror.fromTextArea(myTextarea, {
mode: "text/html"
});
</script>
can someone help me?
does this points you to the right direction?
<link rel="stylesheet" href="lib/codemirror.css">
<script src="lib/codemirror.js"></script>
<script src="mode/javascript/javascript.js"></script>
<script src="addon/fold/foldcode.js"></script>
</head>
<body>
<form style="width:500px;">
<textarea id="code" name="code">
alert("HI");
//says HII
</textarea>
</form>
<script>
window.onload = function() {
window.editor = CodeMirror.fromTextArea(code, {
mode: "javascript",
lineNumbers: true,
lineWrapping: true,
foldGutter: {
rangeFinder: new CodeMirror.fold.combine(CodeMirror.fold.brace, CodeMirror.fold.comment)
},
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
});
};
</script>
</body>
</html>
First: you have to select the first element that matches the selector.
$("#editor") won't do it, it has to be $("#editor")[0]
Second: The following code is all you need to get it to work:
window.onload = function () {
var editor = CodeMirror.fromTextArea($("#editor")[0], {
lineNumbers: true,
lineWrapping: true,
});
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/codemirror.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/codemirror.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.29.0/mode/javascript/javascript.js"></script>
</head>
<body>
<p>Type some javascript below</p>
<textarea id="editor"></textarea>
</body>
</html>
Related
I have used the Summernote editor. I am able to get the editor but I am unable to get the data entered in the editor.
I have followed instructions in this url but I am unable to get the entered data in the editor while clicking button. Can anyone help me on this? Thank you
$('#summernote').summernote({
tabsize: 2,
height: 100
});
$("#test").click(function() {
var markupStr = $('#summernote').summernote('code');
alert(markupStr);
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/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.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.js"></script>
<div id="summernote"></div>
<div> <button id="test">click</button> </div>
Add code like this
$(document).ready(function() {
$('#summernote').summernote({
tabsize: 2,
height: 100
});
$("#test").click(function() {
var markupStr = $('#summernote').summernote('code');
alert(markupStr);
});
});
I have to make a work with the trello API, but I'm getting error 400 (invalid token) and I have no idea why.
This is my code (I have replaced my actual key with mykey)
<html>
<head>
<title>A Trello Dashboard</title>
<link rel="stylesheet" media="screen" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Trello Dashboard</h1>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://trello.com/1/client.js?key=mykey"></script>
<script type="text/javascript">
Trello.authorize({
type: 'popup',
name: 'A Trello Dashboard',
scope: {
read: 'true',
write: 'true'
},
expiration: 'never',
success: function() { console.log("Successful authentication"); },
error: function() { console.log("Failed authentication"); }
});
</script>
</html>
You should put all your code logic inside document.ready, so the entire document will be ready and then only you will get the popup for authentication / authorization. you can get a valid app key here : https://trello.com/app-key See the code example :
<html>
<head>
<title>A Trello Dashboard</title>
<link rel="stylesheet" media="screen" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>Trello Dashboard</h1>
</div>
<div id="loggedin">
<div id="header">
Logged in to as <span id="fullName"></span>
</div>
<div id="output"></div>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://api.trello.com/1/client.js?key=[appKeygoeshere]"></script>
<script type="text/javascript">
$(window).load(function(){
Trello.authorize({
type: 'popup',
name: 'A Trello Dashboard',
scope: {
read: 'true',
write: 'true'
},
expiration: 'never',
success: function() { console.log("Successful authentication");
Trello.members.get("me", function(member){
$("#fullName").text(member.fullName);
var $cards = $("<div>")
.text("Loading Cards...")
.appendTo("#output");
// Output a list of all of the cards that the member
// is assigned to
Trello.get("members/senthil192/cards/all", function(cards) {
$cards.empty();
$.each(cards, function(ix, card) {
//alert(card.name);
$("<a>")
.attr({href: card.url, target: "trello"})
.addClass("card")
.text(card.name)
.appendTo($cards);
});
});
});
},
error: function() { console.log("Failed authentication"); }
});
});
</script>
</html>
code ref url : http://jsfiddle.net/danlec/nNesx/
I am trying to implement a modal popup in angularjs using ngmodal. The code runs ,there is no error returned on the browser console but nothing happens when the modal is clicked. Below is my attempt and code
Index.html file
<html ng-appp="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js">
<script src="ngDialog.js"></script>
<link src="ngDialog.css"></link>
<script src="ngDialog.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MyCtrl">
<button ng-click="clickToOpen()">My Modal</button>
<script type="text/ng-template" id="templateId">
<div id="target" ng-click="test()" ng-controller="tt">
Click here
</div>
</script>
</div>
</body>
</html>
app.js file
var myApp = angular.module('myApp',['ngDialog']);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope, ngDialog) {
$scope.clickToOpen = function () {
ngDialog.open({ template: 'templateId' });
};
}
function tt($scope)
{
$scope.test = function()
{
console.log("AaA");
}
}
Source of tutorial http://jsfiddle.net/mb6o4yd1/6/
Kindly assist
HTML Page.
You didnt put ng-app
<!DOCTYPE html>
<html lang="en">
<head>
<script src="Scripts/angular.js"></script>
<script src="Scripts/ngDialog.js"></script>
<script src="Scripts/app.js"></script>
<link href="Content/ngDialog.css" rel="stylesheet" />
<link href="Content/ngDialog-theme-default.css" rel="stylesheet" />
<title></title>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<button ng-click="clickToOpen()">My Modal</button>
</div>
<script type="text/ng-template" id="templateId">
<div ng-controller="tt" class="ngdialog-message">
<button ng-click="test()">Click here </button>
</div>
</script>
</div>
Here is your app.js
var myApp = angular.module('myApp', ['ngDialog']);
myApp.controller('MyCtrl', function ($scope,ngDialog) {
$scope.clickToOpen = function () {
ngDialog.open({
template: 'templateId'
});
};
});
myApp.controller('tt', function ($scope) {
$scope.test = function () {
alert('It works');
}
});
Let me know still you find any problem.(I have added ngDialog-theme-default.css )
I've followed this basic AngularJS tutorial : https://www.youtube.com/watch?v=WuiHuZq_cg4&list=PL173F1A311439C05D
Everything went well until I added the clearCompleted() method. it does not seem to be working:
HTML:
<!DOCTYPE html>
<html ng-app>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="todo.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="todo.css">
</head>
<body>
<div ng-controller="TodoCtrl">
<h2>Total todos: {{getTotalTodos()}} </h2>
<ul class="unstyled">
<li ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li>
</ul>
<form class="form-horizontal">
<input type="text" ng-model="formTodoText" ng-model-instant>
<button class="btn" ng-click="addTodo()"><i class="icon-plus"></i>Add</button>
</form>
<button class="btn-large" ng-click="clearCompletedTodos()">
Clear Completed
</button>
</div>
</body>
</html>
JS:
function TodoCtrl($scope) {
$scope.todos = [
{text: 'Learn Anagular', done:false},
{text: 'Build an app', done:false}
];
$scope.getTotalTodos = function() {
return $scope.todos.length;
};
$scope.addTodo = function() {
$scope.todos.push({text: $scope.formTodoText, done: false});
$scope.formTodoText = '';
};
$scope.clearCompletedTodos = function() {
$scope.todos = _.filter($scope.todos, function(todo) {
return !todo.done;
});
};
}
the "completed todos" are not getting removed .
Here is what I have done and it works for me:
Please notice that the follow lines has been changed (http:// added)
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="todo.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
to the follow
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="todo.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
I met the same problem, actually, write it like below, it works fine:
$scope.clearCompleted = function(){
$scope.todos = $scope.todos.filter(function(todo){
return !todo.done;
})
};
Actually none of those worked for me; I used this one.
var t = [];
angular.forEach($scope.todos, function (i)
{
if (!i.done)
t.push({text: i.text, done: i.done});
});
$scope.todos = t;
I am using YUI layout and autocomplete in the same page. The problem is that autocomplete field dropdown goes behind the layout.
I think the problem is with z-order but couldn't find it after a bit of research.
Here is the simplified piece of code I have, just copy it to html file and it should work (enter letter a for example to see the problem):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/resize/assets/skins/sam/resize.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/autocomplete/assets/skins/sam/autocomplete.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/assets/skins/sam/layout.css">
<link rel="stylesheet" type="text/css" href="main.css"></link>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/animation/animation-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/layout/layout-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/datasource/datasource-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/autocomplete/autocomplete-min.js"></script>
</head>
<body class="yui-skin-sam">
<div id="header" >
<div class="header2">
<span class="right-float topPad4px" id="myAutoComplete">
<input class="searchInput" id="searchInput" type="text" size="25" value=""/>
<div id="results"></div>
<input id="myHidden" type="hidden">
</span>
</div>
</div>
<div class="mainArea">
<div id="tree" class="tree" style="margin-left :20px">
</div>
<div id="center" class="centerDiv">
</div>
</div>
<script>
(function() {
var Dom = YAHOO.util.Dom,
Event = YAHOO.util.Event;
Event.onDOMReady(function() {
var layout = new YAHOO.widget.Layout({
units: [
{ position: 'top', height: 40, body: 'header', gutter: '0px'},
{ position: 'left', width: 280, resize: true, body: 'tree', scroll: true, animate: false },
{ position: 'center', body: 'center', scroll: true }
]
});
layout.render();
Event.on('tLeft', 'click', function(ev) {
Event.stopEvent(ev);
layout.getUnitByPosition('left').toggle();
});
});
})();
var ds = new YAHOO.util.LocalDataSource(["apples", "apricots", "bananas"]);
var ac = new YAHOO.widget.AutoComplete("searchInput", "results", ds);
</script>
</body>
</html>
my question is - what do I need to modify for the autocomplete dropdown to appear on top of layout?
Ok, found the answer on yui forum, basically I need to add bold items:
{ position: 'top', height: 28, body: 'top1', scroll: null, zIndex: 2 },
see http://developer.yahoo.com/yui/examples/layout/menu_layout.html for more details in the "Fixing the hidden Menus" section.