I want to disable my image when I click the toggle button. I think I made the code right but it doesn't work fine. When the toggle is set to true then I click the image it should alert 'test' and when the toggle is set to false then the image is disabled so no alert will show.
But my problem is either true or false when I click the button it's alert test. What is wrong?
var app = angular.module('main', []).
controller('DemoCtrl', function($scope, $filter) {
$scope.isEnabled=true;
$scope.test = function() {
alert('test');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="main" ng-controller="DemoCtrl">
<h1>Image disable</h1>
<img src="http://s7.postimg.org/w7w78jgjf/check_box_1.png" alt="Add" height="25" width="25" ng-disabled="!isEnabled" ng-click="test()"></img>
<br/>
<button title="Toggle" ng-click="isEnabled = !isEnabled">toggle</button>
{{isEnabled}}
</body>
ng-click will be triggered even there is a ng-disabled for img elements.
A simple solution is to change your ng-click to check the parameter
<img src="http://s7.postimg.org/w7w78jgjf/check_box_1.png" alt="Add" height="25" width="25" ng-disabled="!isEnabled" ng-click="!isEnabled || test()"></img>
Do this in controller.You don't have add anything new in your Html
var app = angular.module('main', []).
controller('DemoCtrl', function($scope, $filter) {
$scope.isEnabled=true;
$scope.test = function() {
if(!$scope.isEnabled) return;
alert('test');
}
});
Related
I have tried a few things currently from what I could search online however I, unfortunately, haven't found anything.
enter image description here
I would like to disable the pagination when I click on the replace button. Since it's loading with a spinner and there is a wait I thought it would make sense to disable it but not remove it. I know how to remove, both on the css side and angularjs. However, in all honesty, I am unsure how to disable this particular feature compared to other works that I have done.
HTML:
<button class="btn btn-blue" ng-click="handleLoadAndDeactivate()"
ng-show="'Load' == importAction && 0 == errors"
title="Load">
Replace
</button>
AngularJS (Button):
$scope.handleLoadAndDeactivate = function () {
$scope.onCompleteData.targetBody.withDeactivation = true;
onComplete($scope.onCompleteData, $scope.handleLoadAndDeactivateCompleted);
};
AngularJS (Table):
$scope.operationsPreloadCompletedTableOptions = new NgTableParams({}, {
dataset: importLog
});
html
Here's how you could achive this:
(function () {
"use strict";
const app = angular.module("app", []);
app.controller("app.AppCtrl", ($scope, $timeout) => {
$scope.disablePagination = false;
$scope.handleReplace = () => {
$scope.disablePagination = true;
//Your replace logic goes here
$timeout(() => {
$scope.disablePagination = false;
}, 2000);
};
}
);
})();
body {
margin: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="app.AppCtrl">
<button ng-disabled="disablePagination"><</button>
<button ng-disabled="disablePagination">1</button>
<button ng-disabled="disablePagination">2</button>
<button ng-disabled="disablePagination">></button>
<button ng-click="handleReplace();">Replace</button>
</div>
I am generating dynamic html element from angularjs controller.I have used $compile
to make ng-click work inside html element.But still it is not calling the function.
Here is my js
var accountApp = angular.module('accountApp', ['ngRoute']);
accountApp.config(['$compileProvider',function($compileProvider )
.controller('myController',function($scope,$compile)
{
var searchHTML = '<li><a href="javascript:void(0)" data-ng-
click="setMarkerToCenterA()">'+item.title+'</a></li>';
$compile(searchHTML)($scope);
$scope.setMarkerToCenterA = function() {
alert("this alert is not calling");
}
});
}]);
I have injected the dependencies also.Can anyone tell why ng-click is not calling function even though i am using $compile?
First you need an element where this li element will be located.
<div ng-controller="myController">
<ul id="list"></ul>
</div>
Then in your controller:
var element = angular.element("#list");
element.html($compile(html)($scope));
$scope.setMarkerToCenterA = function() {
alert("Here");
};
Probably you missed to parse the HTML string using angular.element(htmlString) which is then compiled.
var app = angular.module('stackoverflow', []);
app.controller('MainCtrl', function($scope, $compile, $sce) {
var searchHTML = 'hello';
var template = angular.element(searchHTML);
$compile(template)($scope);
angular.element(document.querySelector('#container')).append(template);
$scope.setMarkerToCenterA = function() {
alert("this alert is now calling");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<div ng-app="stackoverflow" ng-controller="MainCtrl">
<div id="container"></div>
</div>
Here is my clickable image in html
<img title="Sans titre." src="upload/docs/image/png/2014-10/sans_titre.png" alt="Sans titre" width="964" height="260" usemap="#map" />
<map name="map">
<area shape="rect" coords="545,45,567,65" href="www.google.fr" alt="txte alternatif" target="_parent" /> </map>
I'm looking how to get the click result into a popup and not in the current window, nor in a new tab.
Any idea ?
I think that you have to use jquery like this:
$(document).ready(function() {
$('img').on('click', function() {
window.alert("yourUrl");
});
});
That way when you click the img it will alert a popup with yourUrl in it, indeed you have to change the yourUrl string in your URL.
You can communicate with popup windows by keeping a reference of the window you opened. For example, this code opens a popup window and writes to it - you can also easily call methods in the popup window using popupReference.methodName (window scope).
Here is a simple example to help get you going:
html
open
<br/>
<input type="text" id="somethingToSend"></input>send to popuop
js
(function () {
var popupReference = null;
document.getElementById('popupopener').addEventListener('click', function () {
popupReference = window.open("", null, "height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
});
document.getElementById('popupwriter').addEventListener('click', function () {
popupReference.document.write('<br/>' + document.getElementById('somethingToSend').value);
});
})();
all together:
<html>
<body>
open
<br/>
<input type="text" id="somethingToSend"></input>send to popuop
<script>
(function () {
var popupReference = null;
document.getElementById('popupopener').addEventListener('click', function () {
popupReference = window.open("", null, "height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
});
document.getElementById('popupwriter').addEventListener('click', function () {
popupReference.document.write('<br/>' + document.getElementById('somethingToSend').value);
});
})();
</script>
</body>
</html>
<a ng-attr-href="{{page==1 && 'javascript:void(0)' || '#a/'+tid+'/'+(page-1)}}">Prev</a>
I want to get that when page = 1
Prev
But the result:
Prev
use ng-click on a and pass $event to your function.
Click
In your function do the following
$scope.yourFunction = function(e) {
e.preventDefault();
};
new angular you have to white list javascript
angular.module("app", [])
.config(['$compileProvider', function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|javascript):/);
}]);
or
Click
$scope.foo = function(e) {
e.preventDefault();
};
or
<a ng-click="foo($event);">Click</a>
Use ng-click in <a>
<a href="" ng-click="go(tid)">
And in controller
app.controller('whatever', function($scope, $location){
$scope.go = function(id){
if($scope.page == 1) {
return;
}
var url = '/a/' + id + '/' + ($scope.page - 1);
$location.url(url);
}
});
This way you also move logic out of template.
don't use href="javascript:void(0);"; try href="" or href="#" instead.
I've got a jQuery code, which
$("a.reply").click(function() {
//code
});
When I click the link with .reply class the first time, nothing happens. The second time I click, the code inside the click function works.
The link is being inserted on the page using PHP from a mysql database. so it's not being inserted dynamically.
Why is this happening? Any solution?
The BadASS Code:
$(function(){
//TextArea Max Width
var textmaxwidth = $('#wrapper').css('width');
//Initialize Focus ids To Different Initially
var oldcommentid = -1;
var newcommentid = -2;
//End Of initialization
$("a.reply").click(function() {
newcommentid = $(this).attr('id');
if (newcommentid == oldcommentid)
{
oldcommentid=newcommentid;
$("#comment_body").focus();
}
else
{
$('#comment_form').fadeOut(0, function(){$(this).remove()});
var commetformcode = $('<form id="comment_form" action="post_comment.php" method="post"><textarea name="comment_body" id="comment_body" class="added_comment_body" rows="2"></textarea> <input type="hidden" name="parent_id" id="parent_id" value="0"/> <div id="submit_button"> <input type="submit" value="Share"/><input type="button" id="cancelbutton" value="Cancel"/></div></form>');
commetformcode.hide().insertAfter($(this)).fadeIn(300);
//
var id = $(this).attr("id");
$("#parent_id").attr("value", id);
oldcommentid=newcommentid;
//dynamicformcreation function
dynarun();
//
}
return false;
});
dynarun();
function dynarun()
{
//Form Re-Run Functions
$('#comment_body').elastic();
texthover();
$("#comment_form input, select, button").uniform();
textareasizer();
$("#comment_body").focus();
$("abbr.timestamp").timeago();
return false;
}
//TextArea Resizer Function
function textareasizer(){$("#comment_body").css('max-width', textmaxwidth);return false;}
//Other Miscellaneous Functions
$('.comment-holder').hover(
function(event) {
$(this).addClass('highlight');
},
function(event) {
$('.comment-holder').removeClass('highlight');
}
);
function texthover()
{
$('.added_comment_body').hover(
function(event) {
$(this).parent().parent().addClass('highlight');
},
function(event) {
$('.comment-holder').removeClass('highlight');
}
);
return false;
}
});
This is a longshot, but are you running some sort of tracking script? Like webtrends or coremetrics (or even some of your own script, that's globally looking for all clicks)? I ran into a similar problem a while ago, where the initial-click was being captured by coremetrics. Just a thought.
Does it still happen if you comment out all your code and simply have an alert("hi") inside the click function?
Update
I think Sarfaz has the right idea, but I would use the document ready function like so
$(document).ready(function(){
$("a.reply").click(function() {
//code
});
});
I just ran into same problem and I resolved my problem by removing:
<script src="bootstrap.js"></script>
you can use bootstrap.min.js
Use Inline CSS for hiding div and use JS/jQuery to show . This way Jquery Click Event will Fire On First Click
<div class="about-block">
<div class="title">About us</div>
<div class="" id="content-text" style="display:none;">
<p>Show me.</p>
</div>
</div>
<script>
var x = document.getElementById("content-text");
jQuery( '.about-block' ).click(function() {
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
});
</script>