How do I go to next page when a button "Press me" is pressed?
Here is my code:
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="PaginationDemoCtrl">
<pagination num-pages="noOfPages" current-page="currentPage" max-size="maxSize"></pagination>
The selected page no: {{currentPage}}
</div>
<button>Press me</button>
</body>
</html>
http://plnkr.co/edit/NVgCX8nrx0ovnCWE2eok?p=preview
... Your question is pretty vague, but I believe this is what you're looking for:
<button value='Press me' onClick='document.location="./NVgCX8nrx0ovnCWE2eok?p=preview"'>
In your html move your controller to the body tag and add a click event for the button
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body ng-controller="PaginationDemoCtrl">
<div>
<pagination num-pages="noOfPages" current-page="currentPage" max-size="maxSize"></pagination>
The selected page no: {{currentPage}}
</div>
<button ng-click="goToNext()">Press me</button>
</body>
</html>
In your script add a function to handle the click event. I simply increment the current page number.
angular.module('plunker', ['ui.bootstrap']);
var PaginationDemoCtrl = function($scope) {
$scope.noOfPages = 20;
$scope.currentPage = 4;
$scope.maxSize = 5;
$scope.setPage = function(pageNo) {
$scope.currentPage = pageNo;
};
$scope.goToNext = function() {
$scope.currentPage = ++$scope.currentPage;
};
};
Link to Plunk
move ng-controller="PaginationDemoCtrl" to body tag.
add directive to button ng-click="setPage(currentPage+1)
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body ng-controller="PaginationDemoCtrl">
<div>
<pagination num-pages="noOfPages" current-page="currentPage" max-size="maxSize"></pagination>
The selected page no: {{currentPage}}
</div>
<button ng-click="setPage(currentPage+1)">Press me</button>
</body>
</html>
Related
My issue is that when I click on the button, the div container wouldn't fade in. Can anyone help?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="stlye1.css">
<title>Document</title>
<script src="myscripts.js"></script>
</head>
<script>
$("#header1").click(function () {
$("#section_one").fadeIn('fast');
});
</script>
<body>
<button type="button" id="header1">div 1</button>
<div id="section_one" class="parallax1">
<div>
<h1>text</h1>
</div>
</div>
</body>
</html>
Your problem is that you don't tell the div to hide with the style="display: none".
There is you code back
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="stlye1.css" />
<title>Document</title>
<script src="myscripts.js"></script>
</head>
<body>
<button type="button" id="btn1">div 1</button>
<div id="div1" class="parallax1" style="display: none">
<div>
<h1>text</h1>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("#div1").fadeIn("fast");
});
});
</script>
I need your help with AngularStrap tabs and displaying calculated data. So, let's say I have a few inputs with ng-model. I calculate them and display in ng-bind. Everything works fine until I use tabs from AngularStrap. Then my output goes NaN - it looks like ng-model doesn't update, when I'm changing it's content.
You can take a look at what I mean here:
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<div bs-active-pane="tabs.activeTab" bs-tabs>
<div ng-repeat="tab in tabs" data-title="{{ tab.title }}" name="{{ tab.title }}" disabled="{{ tab.disabled }}" ng-include="tab.templateUrl" bs-pane>
</div>
</div>
</div>
</body>
</html>
main.js
angular.module('myApp', ['ngAnimate', 'mgcrea.ngStrap'])
.controller('myCtrl', ['$scope', function($scope){
$scope.multiply = function(){
return $scope.first * $scope.second;
};
$scope.add = function(){
return $scope.first + $scope.second;
};
$scope.tabs = [
{
"title": "First",
"templateUrl": "first.html"
},
{
"title": "Second",
"templateUrl": "second.html"
}];
$scope.tabs.activeTab = "First";
}]);
first.html
<input type="number" ng-model="first">
<input type="number" ng-model="second">
{{first}}
{{second}}
{{multiply()}}
second.html
<input type="number" ng-model="first">
<input type="number" ng-model="second">
{{first}}
{{second}}
{{add()}}
What is really weird, is that when I use it without the tabs, it's working perfectly. Where is the mistake? How can I make it work with tabs?
This example is working like a charm:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
<script src="bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<input type="number" ng-model="first">
<input type="number" ng-model="second">
{{first}}
{{second}}
{{multiply()}}
</div>
</body>
</html>
To insert HTML code using javascript dynamically, we use innerHTML after a tag is selected. Simple, but for me is not working. I've seen some links on SO and internet to do that.
My code is the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Javascript experiments</title>
<link rel="stylesheet" type="text/css" href="assets/app_item.css"/>
<!--script language="javascript" type="text/javascript" href="assets/inserting_items.js"></script-->
<script language="javascript" type="text/javascript">
function insert_items(how_much){
for(var i=0; i < how_much; i++){
var div_cont = document.getElementById("my_container");
console.log(div_cont);
div_cont.innerHtml = "<div class='desc_container'><span class='desc'>Some text</span></div>";
}
}
</script>
</head>
<body>
<header>
<h3>Inserting code dynamically in webpage.</h3>
</header>
<p>By pressing the button, it will insert items in webpage</p>
<label>How much:</label>
<input type="text" id="how_much"/>
<input type="button" value="Submit" onclick="insert_items(document.getElementById('how_much').value)"/>
<div id="my_container"></div>
</body>
</html>
When I press the button, nothing occurs. Dynamic content isn't added on the page. I tested on Firefox and Chrome. Even the simplest div_cont.innerHtml = 'asdasd' won't work.
This code is so simple but isn't working. Is there a specific reason for this behavior?
Pay attention to your capitalization of .innerHTML:
div_cont.innerHTML = "<div class='desc_container'><span class='desc'>Some text</span></div>";
It should be div_cont.innerHTML = 'asdasd'.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Javascript experiments</title>
<link rel="stylesheet" type="text/css" href="assets/app_item.css" />
<!--script language="javascript" type="text/javascript" href="assets/inserting_items.js"></script-->
<script language="javascript" type="text/javascript">
function insert_items(how_much) {
for (var i = 0; i < how_much; i++) {
var div_cont = document.getElementById("my_container");
console.log(div_cont);
div_cont.innerHTML = "<div class='desc_container'><span class='desc'>Some text</span></div>";
}
}
</script>
</head>
<body>
<header>
<h3>Inserting code dynamically in webpage.</h3>
</header>
<p>By pressing the button, it will insert items in webpage</p>
<label>How much:</label>
<input type="text" id="how_much" />
<input type="button" value="Submit" onclick="insert_items(document.getElementById('how_much').value)" />
<div id="my_container"></div>
</body>
</html>
Here in this code i have used two dynamic variables fbid and fburl. fburl is a expression using fbid.
$scope.fburl = "https://graph.facebook.com/"+$scope.fbid+"/picture?type=normal";
Here is my code.
// Code goes here
angular.module("testApp", [])
.controller("testCtrl", function($scope) {
$scope.fbid = "bennadel";
$scope.fburl = "https://graph.facebook.com/"+$scope.fbid+"/picture?type=normal";
console.log($scope.fburl);
})
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
FacebookID<input type="text" ng-model="fbid" >
<img ng-src= "{{fburl}}"/>
<div>{{fburl}}</div>
</body>
</html>
Now my question is when I am updating the fbid why fburl is not updating automatically ?
It's because the value can't update after the fact, you need to add a watcher on the variable fbid.
AngularJS docuemntation for $watch
// Code goes here
angular.module("testApp", [])
.controller("testCtrl", function($scope) {
$scope.fbid = "bennadel";
$scope.fburl = "";
$scope.$watch('fbid ', function(newValue, oldValue) {
$scope.fburl = "https://graph.facebook.com/"+newValue+"/picture?type=normal";
console.log($scope.fburl);
});
})
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
FacebookID<input type="text" ng-model="fbid" >
<img ng-src= "{{fburl}}"/>
<div ng-bind="fburl"></div>
</body>
</html>
Alternate solution - cleaner way.
// Code goes here
angular.module("testApp", [])
.controller("testCtrl", function($scope) {
$scope.fbid = "bennadel";
$scope.fbFn = function() {
return "https://graph.facebook.com/"+$scope.fbid+"/picture?type=normal";
};
})
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script data-require="angular.js#*" data-semver="1.4.0-beta.4" src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-controller="testCtrl">
FacebookID<input type="text" ng-model="fbid" >
<img ng-src= "{{fbFn()}}"/>
<div >{{fbFn()}}</div>
</body>
</html>
Happy Helping!
I am new to qunit.I am running simple testcase in qunit.but nothing is getting displayed on screen.
This is HTML Runner:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Demo</title>
<link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.14.0.css">
<script src="//code.jquery.com/qunit/qunit-1.14.0.js"></script>
<script src="MyJsUnitTests.js"></script>
<script src="MyJsSourceCode.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>
This is MyJsSourceCode.js
var ArthimeticOperations = {
addTwoNumbers : function (number1, number2) {
return number1 + number2;
}
}
This is MyJsUnitTests.js
test('Addition Test', function () {
strictEqual(ArthimeticOperations.addTwoNumbers(3, 5), 8, "Tested the addition functionality");
});
Try swapping the source code and test code includes... my guess is that your tests start running before the source code is included in the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Demo</title>
<link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.14.0.css">
<script src="//code.jquery.com/qunit/qunit-1.14.0.js"></script>
<!-- SWAP THESE TWO...
<script src="MyJsUnitTests.js"></script>
<script src="MyJsSourceCode.js"></script>
Like so:
-->
<script src="MyJsSourceCode.js"></script>
<script src="MyJsUnitTests.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>