I do not know why I can not trigger a click event on my controller upon page load. What I want is the checkboxed to be click literally.
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
</head>
<body ng-app="ngToggle">
<div ng-controller="AppCtrl">
<input type="checkbox" ng-model="dean" ng-click="btnChange($event, values, 1)" id="one" name="one" class="here" >
<input type="checkbox" ng-model="armada" ng-click="btnChange($event, values, 2)" id="two" name="one" class="here" >
<!--<p ng-repeat="btn in btns">-->
<!-- <input type="checkbox" ng-model="btn.bool" class="here" > {{ btn.value }}-->
<!--</p>-->
{{btn }}
{{values }}
</div>
<script type="text/javascript">
angular.module('ngToggle', [])
.controller('AppCtrl',['$scope', function($scope){
$scope.btns = [{}, {}, {}];
$scope.values = [];
$scope.btnChange = function(event, model, val){
_this = angular.element(event.target);
x = _this.prop("checked");
if(x){
model.push(val);
}else{
index = model.indexOf(val);
model.splice(index, 1);
}
};
angular.element("#one").triggerHandler("click");
}]);
</script>
</body>
</html>
Here is the plunker: http://plnkr.co/edit/7DpCvkKLlKhRc3YwFTq0?p=preview
I see that you have used jQuery on the page. So you can simply do this :
$(function(){
angular.element("#one").trigger("click");
});
A complete jQuery solution would be :
$(function(){
$("#one").click();
});
A complete angular solution would be (like others mentioned) :
angular.element(document).ready(function() {
angular.element("#one").trigger("click");
});
http://plnkr.co/edit/0OHDIVB2JGqDZnF56E6M?p=preview
You are triggering the code to click when the document is not completely ready/rendered so you need to wait till the entire document(or in this case, your checkbox) is loaded and only then you can perform actions on your elements.
You can place it on controller like this
angular.element(document).ready(function() {
angular.element("#one").trigger("click");
});
Here is the Plunker
You just need to add a small timeout to trigger a click
$timeout(function() {
angular.element('#one').click();
}, 100);
I have updated your plunker link check it out Plunker
Or You can do
angular.element(document).ready(function() {
angular.element("#one").trigger("click");
});
Related
I am using daterangepicker like this :
$('#myInput').daterangepicker({
'param1': value1,
'param2': value2,
'param3': value3,
...
}, function(...) {
...
})
This works fine if my input is created with the DOM. But if my input is created dynamically after the DOM, this does not work, normally I should do something like this :
$('body').on('daterangepicker..........event', '#myInput', function() {
})
But I don't know how to do it, thanks for help
You need to make a container and inject it into.
$(function() {
let html = document.getElementById('container');
setTimeout(() => {
// Dynamically adding datepicker
html.innerHTML = '<input type="text" id="datepicker"/>'; //
let dp = document.getElementById('datepicker');
dp.classList.add('DatePicker');
$('.DatePicker').datepicker();
}, 500)
});
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<div id="container"></div>
</body>
</html>
Simply becuz Your DOM has not been created.
So you can archive this by register element wrapper the #my-input
So that is the reason why you use "body" and works fine.
You can give it a try the following sample
<div id="my-div"> <input id="my-input" /> </div>
$("#my-div").on('daterangepicker..........event', '#myInput', function() {
})
I am using a checkbox binded to a $scope variable in AngularJS. My code is something like:
<input type="checkbox" ng-model="value.selected"> and I have an object in my controller $scope.value which has the selected property. The changes in the DOM i.e. clicking the checkbox changes the values of the selected property in the value object but the vice versa, i.e. if I change the selected property in the controller it doesn't change the DOM checkbox. Any suggestions or workarounds would be welcome.
Button select selects checkbox and button deselect - deselects it:
<!doctype html>
<html ng-app="myApp">
<head lang="en">
<meta charset="utf-8">
<title>Angular Ajax with PHP</title>
</head>
<body>
<h2>The form</h2>
<div ng-app="myApp" ng-controller="mainController">
<input type="checkbox" ng-model="value.selected"/>
<p>{{value.selected}}</p>
<button ng-click="select()">Select</button>
<button ng-click="deselect()">Deselect</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller('mainController',function($scope){
$scope.value = {
selected:false
};
$scope.select = function(){
$scope.value.selected = true;
}
$scope.deselect = function() {
$scope.value.selected = false;
}
});
</script>
</body>
</html>
When I surround my input with ng-if, after hide and show the autofocus attribute does not take effect:
Here is the code:
<!DOCTYPE html>
<html ng-app>
<head>
<script data-require="angularjs#1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-init="view={}; view.show = true">
<button ng-click="view.show = !view.show">{{view.show ? "hide" : "show"}}</button>
<div ng-if="view.show">
<input autofocus />
</div>
</body>
</html>
And here is the plunker:
http://plnkr.co/edit/k7tb3xw5AsBYrhdlr3bA?p=preview
Just click on hide and after that on show and you will see the autofocus does not working!
In Chrome is working only on the first show, in FF and IE it's not working at all!
The problem is the attribute autofocus isnt an Angular directive. It is a browser supported specification of the <input> element. If you want this to work as intended across multiple browsers and auto focus every time you click hide/show you will need to make a directive.
I took this directive right off Github Gist, credit to mlynch for building this directive.
Heres a working example of your application
angular
.module('App', [
'utils.autofocus',
]);
/**
* the HTML5 autofocus property can be finicky when it comes to dynamically loaded
* templates and such with AngularJS. Use this simple directive to
* tame this beast once and for all.
*
* Usage:
* <input type="text" autofocus>
*
* License: MIT
*/
angular.module('utils.autofocus', [])
.directive('autofocus', ['$timeout', function($timeout) {
return {
restrict: 'A',
link : function($scope, $element) {
$timeout(function() {
$element[0].focus();
});
}
}
}]);
<!DOCTYPE html>
<html ng-app="App">
<head ng-init="view={}; view.show = true">
<script data-require="angularjs#1.5.0" data-semver="1.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<button ng-click="view.show = !view.show">{{view.show ? "hide" : "show"}}</button>
</body>
<div ng-if="view.show">
<input autofocus />
</div>
<script src="script.js"></script>
</html>
You can use a directive for this. Plunker Demo
angular.module('myApp', []).directive('focusMe', function($timeout) {
return {
scope: {
focusMeIf:"="
},
link: function ( scope, element, attrs ) {
if (scope.focusMeIf===undefined || scope.focusMeIf) {
$timeout( function () { element[0].focus(); } );
}
}
};
});
You could also define a condition in it in focus-me-if attribute in it.
Hope it helps.
First of all you have to wrap the div and it's content inside the body element. You have it outside. please correct it.
Input element should not be blank and may not work sometimes. please add some more attribute like name and type="text" or appropriate.
This is html5 feature and should start with <!DOCTYPE html>.
Please Note : The autofocus attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.visit here for more details
I am trying to test for the filling out of an HTML form and the subsequent change of an HTML elements Text. I need to create some form of event using jasmine-jquery...
HTML
<div class="response" id="text-response">Unknown</div>
<div class="form-holder">
<form>
<input id="input-text" type="text" name="user-input" placeholder="Test Your Text" value="">
<input id="submit-button" type="submit" value="Submit">
</form>
</div>
I am trying to test drive id='text-response' changing to 'Correct' based on some script logic.
describe('Interface logic', function(){
it('Will return correct if logic applies', function(){
expect('#emotion').toContainText('Correct');
});
});
Any help would be much appreciated
You might just need to trigger an event, for example:
$('#submit-button').click();
That should fire the click event. Then you can check for whatever condition this event changes on the page.
$('#submit-button').click();
Was the solution for me but the spec runner constant refresh is because you're hitting http://localhost:3000/specs/ rather than http://localhost:3000/SpecRunner.html
If you have your form html in a separate template in a file named for example
templates/form.tmpl.html
and your jquery in a separate file also named for example
js/validation.js
And containing validation code like
$(".form-holder").on("submit", function() {
event.preventDefault();
var userInput = $('#input-text').val();
if (userInput === 'the correct text') {
$('#text-response').text('Correct');
return;
}
$('#text-response').text('Incorrect');
});
Then your test spec can be something similar to this
describe('Interface logic', function() {
jasmine.getFixtures().fixturesPath = '';
beforeEach(function() {
loadFixtures('templates/form.tmpl.html');
appendSetFixtures('<script src="js/validation.js"></script>')
});
it('Will return correct if logic applies', function(){
$('#input-text').val('the correct text');
$('#submit-button').trigger("click");
expect($('#text-response').text()).toBe('Correct');
});
it('Will return incorrect if logic applies', function(){
$('#input-text').val('the incorrect text');
$('#submit-button').trigger("click");
expect($('#text-response').text()).toBe('Incorrect');
});
});
And the spec runner html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Spec Runner</title>
<link rel="stylesheet" type="text/css" href="lib/jasmine-2.0.3/jasmine.css">
<script type="text/javascript" src="lib/jasmine-2.0.3/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-2.0.3/jasmine-html.js"></script>
<script src="lib/jasmine-2.2/boot.js"></script>
<script type="text/javascript" src="lib/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="lib/jasmine-jquery.js"></script>
<script type="text/javascript" src="specs/form.spec.js"></script>
</head>
<body>
</body>
</html>
On clicking the radio button nothing happens, why?
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="jquery.js">
$("input[name='check1']",$('#Search_By')).change(function()
{
alert('yo');
});
</script>
</head>
<body class="well">
<form action="/abc/readservlet" method="post">
<div class="well" id="Search_By">
<h3><b/>Search BY</h3>
<input type="Radio" name="check1" value="Search BY Key"> Key<br/><br/>
<input type="Radio" name="check1" value="Search By Tablename"> Tab_name
<br/>
</div>
On clicking radio button nothing happens...
If your <script> tag has a src attribute, its contents will be ignored, so your code isn't going to actually run at all.
You need to put your code into a separate script tag and run the code when the document is ready:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#Search_By input[name='check1']")).change(function() {
alert('yo');
});
});
</script>
Or put both of those script tags at the very bottom of the <body> tag.
The javascript code to create the onchange handler should be as follows. Try it out.
...
$("#Search_By input[name='check1']").change(
function()
{
alert('yo');
});
...