This is my textarea :
<div>#Html.TextAreaFor(m => m.Article.ArticleContent, new { #class = "my_textarea", id = "textareaInput" })
and script :
<script type="text/javascript">
$(document).ready(function () {
$('#textareaInput').click(function () {
var htmlStr = $('#textareaInput').val();
$('#textareaInput').val($('<div/>').text(htmlStr).html());
});
});
</script>
when I write <p>some code</p> output is : <p>some code</p> . But I expect : some code.
How may I do this? Thanks.
If your intention is to clear the tags, then try $('<div/>').html(htmlStr).text():
$(document).ready(function () {
$('#textareaInput').change(function () {
var htmlStr = $('#textareaInput').val();
$('#textareaInput').val( $.trim( $('<div/>').html(htmlStr).text() ) );
});
});
Related
'Remove Choice' is not working. Here are two functions addNewChoice and removeChoice. The addNewChoice is working however removeChoice is not working. I don't know how to solve it. Here my code is below:
<?php $obj = 1;?>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js">
</script>
<script type="text/javascript">
var app = angular.module('shanidkvApp', []);
app.controller('MainCtrl', function($scope)
{
$scope.choices = [{id: 'choice1'}];
$scope.addNewChoice = function()
{
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};
$scope.removeChoice = function(index)
{
var lastItem = $scope.choices.length-1;
$scope.choices.splice(index,1);
};
});
</script>
<%--here is my html --%>
<div class="btn btn-primary" ng-show="$last" ng-click="removeChoice()">Remove</div>
If all you want to do is remove last item in array you can simply use Array.prototype.pop()
$scope.removeChoice = function(){
$scope.choices.pop();
};
Seems like you should be using lastItem to delete and remove index parameter
$scope.removeChoice = function()
{
var lastItem = $scope.choices.length-1;
$scope.choices.splice(lastItem,1);
};
You didn't pass index in your removeChoice function in ng-click. You need to pass index of item in this function -
<div class="btn btn-primary" ng-show="$last" ng-click="removeChoice(index)">Remove</div>
You can get index from ng-repeat loop.
OR if you want to remove alway last item then you shouldn't need to pass index key in function. But you need to change in you function as below -
$scope.removeChoice = function(index)
{
var lastItem = $scope.choices.length-1;
$scope.choices.splice(lastItem,1);
};
var app = angular.module('shanidkvApp', []);
app.controller('MainCtrl', function($scope)
{
$scope.choices = [{id: 'choice1'}];
$scope.addNewChoice = function()
{
var newItemNo = $scope.choices.length+1;
$scope.choices.push({'id':'choice'+newItemNo});
};
$scope.removeChoice = function()
{
console.log($scope.choices);
var lastItem = $scope.choices.length-1;
$scope.choices.splice(lastItem,1);
console.log($scope.choices);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--here is my html -->
<body ng-app="shanidkvApp" ng-controller="MainCtrl">
<div class="btn btn-primary" ng-click="removeChoice()">Remove</div>
<div class="btn btn-primary" ng-click="addNewChoice()">Add</div>
<p></p>
</body>
This is my html class, I have used one example from net for understanding how it's works.
<form>
<div ng-controller="ListController">
<div>
<strong>Gold: </strong>
{{player.gold}}
</div>
<div class="list-group">
<a href="#"
class="list-group-item"
ng-repeat="item in items"
context-menu="menuOptions">
<span class="badge">{{item.cost}}</span>
{{item.name}}
</a>
</div>
</div>
</form>
This is controller :
controller('ListController', ['$scope',
function ($scope) {
$scope.player = {
gold: 100
};
$scope.items = [
{ name: 'Small Health Potion', cost: 4 },
{ name: 'Small Mana Potion', cost: 5 },
{ name: 'Iron Short Sword', cost: 12 }
];
$scope.menuOptions = [
['Buy', function ($itemScope) {
$scope.player.gold -= $itemScope.item.cost;
}],
null,
['Sell', function ($itemScope) {
$scope.player.gold += $itemScope.item.cost;
}]
];
}
]);
This is my JS file, which is being used for contextmenu:
var app = angular.module("contextMenu",[]);
app.directive('contextMenu', function ($parse) {
var renderContextMenu = function ($scope, event, options) {
if (!$) { var $ = angular.element; }
$(event.currentTarget).addClass('context');
var $contextMenu = $('<div>');
$contextMenu.addClass('dropdown clearfix');
var $ul = $('<ul>');
$ul.addClass('dropdown-menu');
$ul.attr({ 'role': 'menu' });
$ul.css({
display: 'block',
position: 'absolute',
left: event.pageX + 'px',
top: event.pageY + 'px'
});
angular.forEach(options, function (item, i) {
var $li = $('<li>');
if (item === null) {
$li.addClass('divider');
} else {
$a = $('<a>');
$a.attr({ tabindex: '-1', href: '#' });
$a.text(typeof item[0] == 'string' ? item[0] : item[0].call($scope, $scope));
$li.append($a);
$li.on('click', function ($event) {
$event.preventDefault();
$scope.$apply(function () {
$(event.currentTarget).removeClass('context');
$contextMenu.remove();
item[1].call($scope, $scope);
});
});
}
$ul.append($li);
});
$contextMenu.append($ul);
var height = Math.max(
document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight,
document.body.clientHeight, document.documentElement.clientHeight
);
$contextMenu.css({
width: '100%',
height: height + 'px',
position: 'absolute',
top: 0,
left: 0,
zIndex: 9999
});
$(document).find('body').append($contextMenu);
$contextMenu.on("mousedown", function (e) {
if ($(e.target).hasClass('dropdown')) {
$(event.currentTarget).removeClass('context');
$contextMenu.remove();
}
}).on('contextmenu', function (event) {
$(event.currentTarget).removeClass('context');
event.preventDefault();
$contextMenu.remove();
});
};
return function ($scope, element, attrs) {
element.on('contextmenu', function (event) {
$scope.$apply(function () {
event.preventDefault();
var options = $scope.$eval(attrs.contextMenu);
if (options instanceof Array) {
renderContextMenu($scope, event, options);
} else {
throw '"' + attrs.contextMenu + '" not an array';
}
});
});
};
});
But this code is not working for me. My debug point never comes on contextmenu js file. And I am getting default window menu on right click.
Can anyone please suggest what I am doing wrong or missing in this. It would be a great help.
First you have to create a master app.js file to define your modules something like below. The file needs to be loaded first.
(function () {
var module = angular.module('app', [
'contextMenu',
'menu'
]);
})();
Now the file which holds controller needs to be something like below.
(function () {
var module = angular.module('menu');
module.controller('ListController', [
'$scope'
function ($scope) {
//Your controller code goes here
}]);
})();
Your html needs to be something like below.
<body ng-app="app">
//Your html goes here
</body>
Your js files needs to be added in below order.
Angularjs
app.js
menu.js
That's all i can say for now.
I am trying to use a service to set title in controller1 and then access title in controller2.
sharedProperties.setTitle(title) works in controller1, but when I try to get the title in controller2, it gets "title" (the initial value) instead of the new value.
I've also tried storing title in an object but it didn't work.
app.service('sharedProperties', function () {
var title = "title"
return {
getTitle: function () {
return title;
},
setTitle: function (val) {
title = val;
}
}
});
app.controller('controller1', ['$scope', 'sharedProperties', function ($scope, sharedProperties) {
$('body').on("click", "button[name=btnListItem]", function () {
// gets the title
var title = $(this).text();
// sets the title for storage in a service
sharedProperties.setTitle(title);
});
}]);
app.controller('controller2', ['$scope', 'sharedProperties', function ($scope, sharedProperties) {
$scope.sharedTitle = function() {
return sharedProperties.getTitle();
};
}]);
And in my view, I have {{ sharedTitle() }} which should, as I understand it, update the title text with the new title.
Also, in case this is relevant: the two controllers are linked to two different html pages.
What am I doing wrong?
EDIT
Updated button listener:
$('body').on("click", "button[name=btnListItem]", function () {
// gets the text of the button (title)
var title = $(this).text();
sharedTitle(title);
alert(sharedProperties.getTitle());
document.location.href = '/nextscreen.html';
});
$scope.sharedTitle = function (title) {
sharedProperties.setTitle(title);
};
It seems to be correct in your sample code. I setup jsfiddle and it seems work correctly. Finding out a difference between my jsfiddle and your actual code would help you to find the problem you should solve.
Javascript:
angular.module('testapp', [])
.service('sharedProperties', function(){
var title = 'title';
return {
getTitle: function(){
return title;
},
setTitle: function(val){
title = val;
}
};
})
.controller('controller1', function($scope, sharedProperties){
$scope.change_title = function(newvalue){
sharedProperties.setTitle(newvalue);
};
})
.controller('controller2', function($scope, sharedProperties){
$scope.sharedTitle = function(){
return sharedProperties.getTitle();
};
})
Html:
<div ng-app="testapp">
<div ng-controller="controller1">
<input ng-model="newvalue">
<button ng-click="change_title(newvalue)">Change Title</button>
</div>
<div ng-controller="controller2">
<span>{{sharedTitle()}}</span>
</div>
</div>
My jsfiddle is here.
You have to print console.log(sharedProperties.getTitle()); Dont need return from controller.
So your code of controller2 is $scope.sharedTitle = sharedProperties.getTitle();
You need to use the $apply so that angular can process changes made outside of the angular context (in this case changes made by jQuery).
$('body').on("click", "button[name=btnListItem]", function () {
// gets the title
var title = $(this).text();
// sets the title for storage in a service
$scope.$apply(function() {
sharedProperties.setTitle(title);
});
});
See plunker
That said, this is BAD PRACTICE because you're going against what angular is meant for. Check “Thinking in AngularJS” if I have a jQuery background?. There are cases when you need to use $apply like when integrating third party plugins but this is not one of those cases.
I have iScroll working OK. I have added a jQuery font sizer plugin into 3 scrollable divs containing text. Upon using the "A+" to increase text size I get the "rubber band" effect [which I expected]
I am aware of MASTERING THE REFRESH() METHOD however I do not know how to implement this correctly.
My iscroll code is
var scroll1, scroll2, scroll3,
scrollNav;
function loaded() {
setTimeout(function () {
scrollNav = new iScroll('transition1', { useTransition:true });
scroll1 = new iScroll('scrollpage01', { useTransition:true });
scroll2 = new iScroll('scrollpage02', { useTransition:true });
scroll3 = new iScroll('scrollpage03', { useTransition:true });
}, 250);
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
A sample of one of the divs with text is
<article id="scrollpage01">
<div id="contentScroller">
<div class="box">
<a class="jfontsize-button" id="jfontsize-m" href="#">A-</a>
<a class="jfontsize-button" id="jfontsize-d" href="#">A</a>
<a class="jfontsize-button" id="jfontsize-p" href="#">A+</a>
<p class="some-class-name">Lorem ipsum dolor sit amet, ....blah blah blah.... suspendisse potenti.
</p>
<script type="text/javascript" language="javascript">
$('.some-class-name').jfontsize({
btnMinusClasseId: '#jfontsize-m',
btnDefaultClasseId: '#jfontsize-d',
btnPlusClasseId: '#jfontsize-p'
});
</script>
</div>
</div>
</article>
Now how/where can I add
setTimeout(function() { scroll1.refresh(); }, 0);
Oh how simple it can be.... USE the full iscroll.js and not lite and add checkDOMChanges: true
<script type="text/javascript">
var scroll1, scroll2, scroll3,
scrollNav;
function loaded() {
setTimeout(function () {
// scrollNav = new iScroll('navWrapper');
scrollNav = new iScroll('transition1', { useTransition:true });
scroll1 = new iScroll('scrollpage01', { useTransition:true, checkDOMChanges: true });
scroll2 = new iScroll('scrollpage02', { useTransition:true, checkDOMChanges: true });
scroll3 = new iScroll('scrollpage03', { useTransition:true, checkDOMChanges: true });
}, 250);
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
You can also call refresh() function whenever your Dom changes or height of Dom changes.
setTimeout(function() { scroll1.refresh(); }, 200);
Make sure that call refresh() function after iScroll loaded in Dom.
Also after dom change fully then only call refresh() function with setTimeout.
i am trying to Refresh div using java script . setInterval() and clearInterval (), its working fine, but i want stop Refresh process for single div when i clicked stop button ..clear Interval not working herer
<script type ="text/javascript">
$(document).ready(function () {
$('.output').click(function () {
var id = $(this).closest('.g').attr('id');
Go(id);
})
$('.bt').click(function () {
var id = $(this).closest('.g').attr('id');
stop(id)
});
function Go(id) {
id = setInterval(function () {
Chat_msg('Ch04', id, u)
}, 3000);
};
function stop(id) {
clearInterval(id);
}
})
</script>
</head>
<body>
<div id="a" class='g'>
<div class="output"></div>
<input id="Button1" type="button" value="stop" class="bt" />
</div>
<div id="b">
<div class="output"></div>
<input id="Button2" type="button" value="stop" class="bt"/>
</div>
<div id="c">
<div class="output"></div>
<input id="Button3" type="button" value="stop" class="bt" />
</div>
</body>
</html>
Use a global variable for your interval.
var interv = null;
interv = setInterval(function { ... }, 5000);
$('#btn').on('click', function(){
if (interv) clearInterval(intev);
})
It's likely the reference you associated with setInterval is not within the scope of your stop-button handler.
$("#start").on("click", function(){
var interv = setInterval(function(){ /*...*/ }, 1000);
});
$("#stop").on("click", function(){
clearInterval(interv);
});
In the code above, our interv variable is not within the scope of our #stop button handler. We could change this by moving it up another level:
var interv;
$("#start").on("click", function(){
interv = setInterval(function(){ /*...*/ }, 1000);
});
$("#stop").on("click", function(){
clearInterval(interv);
});
Now both handlers have access to the interv variable.
Looks like a combination of a scoping issue, and interchangeably using id DOM attributes with setInterval response values.
<script type ="text/javascript">
$(document).ready(function () {
var timeouts = {};
$('.output').click(function () {
var id = $(this).closest('.g').attr('id');
go(id);
});
$('.bt').click(function () {
var id = $(this).closest('.g').attr('id');
stop(id);
});
function go(id) {
timeouts[id] = setInterval(function () {
Chat_msg('Ch04', id, u)
}, 3000);
}
function stop(id) {
clearInterval(timeouts[id]);
}
});
</script>
The way I have gone about this in the past is using a function that uses a set timeout to call itself.
var stop = false
function caller () {
if (stop === true){
//do something
setTimeout(caller() , 1000);
}
else{
//do something after button has been click and stop is set to true
}
}