How can i append the data from textarea to a div by pressing enter key using anglurjs. in this code i am appending the data on alertbox but i want to append the data on particular section(div) as like in chat apps
HTML
<div ng-app="miniapp">
<div ng-controller="Ctrl">
<input ng-enter="DoWork()" ng-model="MyText" />
<div id="chatContent" ng-model="chatData"></div>
</div>
</div>
app.js
var $scope;
var app = angular.module('miniapp', []).filter('moment', function() {
return function(dateString, format) {
return moment(dateString).format(format);
};
});
app.directive('ngEnter', function () {
return function (scope, element, attrs) {
element.bind("keydown keypress", function (event) {
if(event.which === 13) {
scope.$apply(function (){
scope.$eval(attrs.ngEnter);
});
event.preventDefault();
}
});
};
});
function Ctrl($scope) {
$scope.DoWork = function(){
alert('Hello World! ' + $scope.MyText);
$scope.chatData = $scope.$scope.MyText;
};
}
Check This Example.This example is on jquery.you can take help and use same login in your code.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function abc(){
var a=$("#mytext").val();
$("#mydiv").append(a);
}
</script>
</head>
<body>
<textarea id="mytext" rows="" cols=""></textarea>
<button onclick="abc()">Submit</button>
<div id="mydiv"></div>
</body>
</html>
Related
i have multiple tags, which is set as editable (contentEditable="true"). is there any way to store contents in divs before load and paste the same after reload or any alternative way to do this?. I am very new in the programming field
<div contentEditable="true" id="main" key="main" class="main" >
<div contentEditable="true" id="div1" onfocusout="myFunction()"><p>sample para</p></div>
<div contentEditable="true" id="div2" onfocusout="myFunction()"><p>sample para</p></div>
</div >
window.onload = function()
{
var a = sessionStorage.getItem('main');
//alert(a);
document.getElementById("main").value = a;
}
window.onbeforeunload = function() {
sessionStorage.setItem("main", $('#main').val());
}
I tried this, but it is only for forms with known input field
My body html looks like
<body>
<div>Math in TeX notation</div>
<div contentEditable="true" id="main" key="main" class="main" >
<div contentEditable="true" id="div1" onfocusout="myFunction()"><p>sample para</p></div>
<div contentEditable="true" id="div2" onfocusout="myFunction()"><p>sample para</p></div>
</div>
</body>
You can save any data to session storage and use it later with JavaScript:
window.onload = function () {
const content = sessionStorage.getItem('main');
if (content) {
document.getElementById("main").innerHTML = content;
}
}
window.onbeforeunload = function () {
sessionStorage.setItem("main", document.getElementById("main").innerHTML);
}
I hacked this together, it works for me (using Firefox), i tested it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="memo-pad">
<pre id="memo" contenteditable="true" onkeyup="storeUserMemo(this.id);"></pre>
</div>
<script>
function storeUserMemo(id) {
let memo = document.getElementById("memo").innerHTML;
localStorage.setItem("userMemo", memo);
}
function getUserMemo() {
let memo;
if (localStorage.getItem("userMemo")) {
memo = localStorage.getItem("userMemo");
} else {
memo = "Please write something here!";
}
document.getElementById("memo").innerHTML = memo;
}
function clearLocal() {
localStorage.clear();
document.getElementById("memo").innerHTML = "Please write something here!";
}
getUserMemo();
let memo = document.getElementById("memo");
memo.addEventListener("input", function () {
console.log("Wer ändert hier sein Memo?")
});
</script>
</body>
</html>
Whatever you put in there survives the page reload now.
I'm new to JavaScript and Node.js.
I'm trying to get a button in my webpage to call a method in my controller when clicked, but so far I'm getting no response from my controller.
How do I call the .submitEntry() function from my button?
Here's the index.html file:
<!DOCTYPE html>
<meta charset="UTF-8">
<html ng-app='app'>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div ng-controller='GameController' class='container'>
<h1>Palindrome Game</h1>
<h2>Submit a new word!</h2>
<form role='form'>
<div class='form-group'>
<input ng-model="name" class='form-control' placeholder="Your name">
<input ng-model="word" class='form-control' placeholder="Word">
<button ng-click='submitEntry()' class='btn btn-default'>Submit word</button>
</div>
</form>
<h2>Top Scores</h2>
<ul class='list-group'>
<li ng-repeat="score in scores | orderBy:'-points'" class='list-group-item'>
<strong>{{score.name}}</strong> {{score.points}} points
</li>
</ul>
</div>
<script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.4/angular.js'></script>
<script src='ng/app.js'></script>
</body>
And here's the app.js file:
var app = angular.module('app', []);
const button = document.getElementById('myButton');
button.addEventListener('click', function(e)
{
console.log('button was clicked');
});
app.controller('GameController', function($scope, GameService)
{
console.log("Debug 0");
$scope.submitEntry = function()
{
if (typeof $scope.name === 'undefined' || typeof $scope.word === 'undefined')
{
return;
}
var entry = {
name: $scope.name,
word: $scope.word
};
GameService.submitEntry(entry).success(function(points)
{
$scope.word = undefined;
GameService.getScores().success(function(scores)
{
$scope.scores = scores;
});
});
};
GameService.getScores().success(function(scores)
{
$scope.scores = scores;
});
});
app.service('GameService', function($http)
{
this.getScores = function() {
return $http.get('/api/getScores');
};
this.submitEntry = function(entry) {
return $http.post('/api/submitEntry', entry);
};
});
Thank you very much! Any help that could point me in the right direction will be very appreciated.
Here's a simple button that displays an alert once clicked.
function Channels($scope) {
$scope.test = function() {
alert('button clicked!')
}
}
angular.module('app', [])
.controller('Channels', Channels);
angular.bootstrap(document.body, ['app']);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-controller="Channels">
<button ng-click="test()">
test
</button>
</body>
I have tried the tutorial are there, but still could not work, what's wrong with my code?
Parent Page Script:
<!DOCTYPE html>
<html>
<head>
<title>Parent</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.slim.js"></script>
<script>
$(function() {
var money = 20000;
$("#iframe1").contents().find("#nominal").on("change keyup", function() {
var input = $(this);
// remove possible existing message
if( input.next().is("form") )
input.next().remove();
// show message
if( input.val() > money )
alert('Hello');
});
});
</script>
</head>
<body>
<iframe id="iframe1" src="iframe.html">
</iframe>
</body>
</html>
Iframe script:
<!DOCTYPE html>
<html>
<head>
<title>Iframe</title>
</head>
<body>
<input type="text" id="nominal" value="" />
</body>
</html>
please tell me what was wrong, thanks advance.
In your HTML page
<!DOCTYPE html>
<html>
<head>
<title>Parent</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.slim.js"></script>
<script>
var money = 20000;
function my_custom_function(input)
{
// remove possible existing message
if( input.next().is("form") ) input.next().remove();
// show message
if( input.val() > money ) alert('Hello');
}
</script>
</head>
<body>
<iframe id="iframe1" src="iframe.html">
</iframe>
</body>
</html>
In your iframe code
<!DOCTYPE html>
<html>
<head>
<title>Iframe</title>
<script>
$(function() {
$("#nominal").change("change", function() {
parent.my_custom_function($(this));
});
$("#nominal").change("keyup", function() {
parent.my_custom_function($(this));
});
});
</script>
</head>
<body>
<input type="text" id="nominal" value="" />
</body>
</html>
Hope this trick will be helpful to you.
You have two possible scenarios:
if you can modify iframe page;
if you can't.
Your problem is that when your javascript run, the content of iframe could be not available, so JQuery cannot "attach" to child controls.
If you can change your iframe code, you can add this script to your iframe page
window.onload = function() {
parent.iframeLoaded();
}
and obviously on the parent page you must change your code to
$(function() {
var money = 20000;
window.iframeLoaded = function() {
$("#iframe1").contents().find('#nominal').on('keyup', null, function(event) {
var input = $(this);
// show message
if( input.val() > money )
alert('Hello');
});
}
});
});
If you instead cannot change iframe html, you cannot bind to keyup event of controls but you can bind to iframe one, so in this case you need to bind keyup of iframe and then filter for #nominal originated event, and your code should be like this
$(function() {
var money = 20000;
$("#iframe1").contents().on('keyup', null, function(event) {
if(event.target.id === 'nominal'){
var input = $("#iframe1").contents().find('#nominal');
// show message
if( input.val() > money )
alert('Hello');
}
});
});
<input type="button" class="button" value="click"/><div class="text_block">start</div>
In jquery this code is right for me:
$(".button").click(function() {
if($(this).val() == "click"){
$(this).val('clicked');
$(".text_block").html("stop");
}
else if($(this).val() == "clicked"){
$(this).val('click');
$(".text_block").html("start");
}
});
And how can I do this right using angular js?
AngularJs code sample
Use angular watch DEMO
var app = angular.module('my-app', [], function () {
})
app.controller('AppController', function ($scope) {
$scope.toggle = true;
$scope.$watch('toggle', function(){
$scope.toggleText = $scope.toggle ? 'Click' : 'Cliked';
$scope.divText = $scope.toggle ? 'Start' : 'Stop';
})
})
HTML code sample
<button ng-click="toggle = !toggle">{{toggleText}}</button>
<div class="box on" >{{divText}}</div>
You actually don't need a bit of javascript. You can do it in plain angular HTML code:
<input type="button" class="button" ng-model="toggle" ng-click="toggle = !toggle" value="{{toggle ? 'clicked' : 'click'}}" />
<div class="text_block">{{toggle ? 'Stop' : 'Start'}}</div>
Just create two local variable inside the scope and change their value according to the current value of clicked button.
Like :-
<body ng-controller="hello">
<input type="button" class="button" ng-click="click()" value="{{myvalue}}"/><div class="text_block">{{value}}</div>
<script>
var app=angular.module('app',[ ]);
app.controller("hello",function($scope){
$scope.value="STOP";//default value
$scope.myvalue="click";
$scope.click=function(){
if($scope.myvalue=="click"){
$scope.myvalue="clicked";
$scope.value="START";
}else{
$scope.myvalue="click";
$scope.value="STOP";
}
}
});
</script>
</body>
Here is the plunker:-
http://plnkr.co/edit/QsW1zzQF4BdslMwMFPxU?p=preview
live demo: http://plnkr.co/edit/zflkeo
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.10/angular.js" data-semver="1.3.10"></script>
</head>
<body ng-controller="MainCtrl">
<button type="button" ng-click="theAngularWay()">{{btnState}}</button>
<div class="text_block">{{textBlock}}</div>
</body>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.btnState = 'clicked';
$scope.textBlock = 'start';
$scope.theAngularWay = function() {
if($scope.textBlock === 'start') {
$scope.btnState = 'clicked';
$scope.textBlock = 'stop';
} else {
$scope.btnState = 'click';
$scope.textBlock = 'start';
}
}
});
</script
</html>
see
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-controller="MyController">
<input type="button" class="button" value="{{Start}}" ng-click="showMessage()" /> <div class="text_block">{{message}}</div>
</div>
<script>
function MyController($scope) {
$scope.Start = "click";
$scope.message = "";
$scope.showMessage = function () {
if ($scope.Start == "click") {
$scope.Start = "clicked";
$scope.message = "stop";
}
else {
$scope.Start = "click";
$scope.message = "start";
}
}
}
</script>
</body>
</html>
How I can call "click" event on input type="file" by calling "context" event on other element?
I am trying this code:
HTML Markup:
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<input type="file" id="file"/>
<button id="trigger">Click</button>
</body>
JavaScript file:
window.onload = function() {
window.oncontextmenu = function(){
return false;
};
$("#trigger").on("contextmenu", function(){
$("#file").trigger("click");
});
}
But I haven't got window to choose file, when I click the right mouse button on button with id="trigger".
Resolved!
window.onload = function() {
$("#trigger").mousedown(function(e){
if(e.button == 2){
$("#file").trigger("click");
}
});
}
try like this:
Script:
$('#trigger').click(function() {
$('#file').trigger('click');
});