I'm running an optimizely test in this page:
https://www.thelotter.com/pt/bilhetes-loteria/africa-sul-powerball/?player=0
This is the current javascript for the test:
/* Don't touch this code */
function waitForDelayedContent(selector, experiment, timeout, keepAlive) {
var intervalTime = 50;
var timeout = timeout || 3000;
var keepAlive = keepAlive || false;
var maxAttempts = timeout / intervalTime;
var attempts = 0;
var elementsCount = 0;
var interval = setInterval(function() {
if ($(selector).length > elementsCount) {
if (!keepAlive) {
clearInterval(interval);
}
experiment();
elementsCount = $(selector).length;
} else if (attempts > maxAttempts) {
clearInterval(interval);
}
attempts ++;
}, intervalTime);
}
/* --------------------------------------------- */
waitForDelayedContent(".jackpot", function(){
$("#ctl00_tdMainRightSite").css({"display":"none", "visibility":""});
$("#divMainLeftSite").addClass("Clean_content_left_wide");
$("#tdMainLeftSite").addClass("Clean_TdMainLeftSite");
$(".play-request-options").css({"display":"none", "visibility":""});
$(".play-request-options").attr("style", "display: none !important;");
$(".play-request-summary").addClass("Clean_play-request-summary");
$(".btn-lucky-numbers").css({"display":"none", "visibility":""});
$(".bonus-box").addClass("Clean_bonus-box");
$(".ticket-line-holder").attr("style", "width: 153px !important;");
$(".cell-value").attr("style", "height: 20px !important; width:22px !important; font-size:14px; padding-top: 3px; margin-right:1px;");
$(".SkipThisFixedPosition").css({"display":"none", "visibility":""});
$(".nav-tabs-simple").css({"display":"none", "visibility":""});
$(".wrapper").addClass("Clean_ticket-lines-container");
$(".long_regular_separator").addClass("Clean_long_regular_separator");
$(".nav-tab > .syndication").css({"display":"none", "visibility":""});
$(".nav-tab > .bundle").css({"display":"none", "visibility":""});
$(".nav-tab > .personal").css({"display":"none", "visibility":""});
$(".play-view-regular").addClass("Clean_play-view-regular");
$(".ticket-line-content").addClass("Clean_ticket-line-content");
$(".watermark").addClass("Clean_watermark");
$(".lottery-card").addClass("Clean_lottery-card");
$(".jackpot").addClass("Clean_jackpot");
$(".btn-size-large").addClass("Clean_btn-size-large");
$(".btn-size-large > .btn-content > .btn-text").addClass("Clean_btn-text");
$(".nav-buttons-group > .btn-color-blue").addClass("Clean_btn-color-blue");
$(".nav-buttons-group > .btn-color-blue > .btn-content").addClass("Clean_btn-color-blue_content");
$(".play-type-selection-wrapper").addClass("Clean_play-type-selection-wrapper");
});
But instead of the waitForDelayedContent function, I need the test to run with a function that will make the test run after the user clicks in any of the li tags below (part of the HTML already):
<div id="App-PlayRequest" data-ng-controller="PlayRequest.PlayRequestController" class="ng-scope">
<ul class="play-type-containers">
<li class="play-type-container" ng-click="setGameType(0)">...</li>
<li class="play-type-container" ng-click="setGameType(3)">...</li>
<li class="play-type-container" ng-click="setGameType(4)">...</li>
</ul>
</div>
How do I call a function after the user clicks in any of the ng-click?
I think it might be a simple code, but I'm not a developer and couldn't make the code in the answers work.
Thank you so much!
try bellow code snippet: IT will work if you want to work with angular js.
angular.module('app',[])
.controller('TodoListController', function ($scope) {
$scope.setGameType = setGameType;
function setGameType(index) {
console.log(index);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app'>
<div ng-controller="TodoListController as todoList">
<ul class="play-type-containers">
<li class="play-type-container" ng-click="setGameType(0);">a...</li>
<li class="play-type-container" ng-click="setGameType(3);">b...</li>
<li class="play-type-container" ng-click="setGameType(4);">c...</li>
</ul>
</div>
</div>
update
Also if you want to use only javscript:
try these:-
function setGameType(index) {
console.log(index);
}
<ul class="play-type-containers">
<li class="play-type-container" onclick="setGameType(0);">a...</li>
<li class="play-type-container" onclick="setGameType(3);">b...</li>
<li class="play-type-container" onclick="setGameType(4);">c...</li>
</ul>
Please try this.
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<button ng-click="setGameType(1)">OK</button>
<ul class="play-type-containers">
<li class="play-type-container" ng-click="setGameType(0)">One</li>
<li class="play-type-container" ng-click="setGameType(1)">Two</li>
<li class="play-type-container" ng-click="setGameType(2)">Three</li>
</ul>
</div>
<script>
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.count = 0;
$scope.setGameType = function(val) {
alert("Do something here with id "+val);
};
}]);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<button ng-click="setGameType(1)">OK</button>
<ul class="play-type-containers">
<li class="play-type-container" ng-click="setGameType(0)">One</li>
<li class="play-type-container" ng-click="setGameType(1)">Two</li>
<li class="play-type-container" ng-click="setGameType(2)">Three</li>
</ul>
</div>
//This script code according to john pappa's guideline.
<script>
(function() {
angular.module('myApp')
.controller('myCtrl', myCtrl);
function myCtrl(
$scope
) {
$scope.setGameType = setGameType;
function setGameType(val){
console.log('Selected game type value',val);
//do stuff which you want when user click.
}
})();
</script>
</body>
</html>
Related
I have created a tab using JQuery and JavaScript. It's working fine but I need one modification on that.
I want a tab loop type like once we reached the last one it should go to the first tab when I click the next button. but now it's not looping. I tried so many types but I am not getting the output what I expected. I have added my code here. anyone helps me to fix this.
$(document).ready(function () {
$(".tab_content div:not(:first)").toggle(),
$(".previous").css({
opacity: "0.8",
cursor: "not-allowed"
}),
$(".tabs li").click(function () {
var e = $(this).index();
$(this).is(":last-child") ? $(".next").next("li").trigger("click") : $(".next").next("li").trigger("click"),
$(this).is(":first-child") ? $(".previous").css({
opacity: "0.8",
cursor: "not-allowed"
}) : $(".previous").css({
opacity: "1",
cursor: "pointer"
});
var t = $(this).position(),
a = $(this).data("id");
(scroll = $(".tabs").scrollLeft()),
$(".tabs").animate({
scrollLeft: scroll + t.left - 30
}, 200),
$(".tab_content div").hide(),
$("div." + a).toggle(),
$(".tabs li").removeClass("active"),
// $(`.tabs li:nth-child(${e + 1})`).addClass("active");
$(".tabs li:nth-child(" + (e + 1) + ")").addClass("active");
}),
$(".next").click(function (e) {
e.preventDefault(), $("li.active").next("li").trigger("click");
}),
$(".previous").click(function (e) {
e.preventDefault(), $("li.active").prev("li").trigger("click");
});
});
.tabs_indicators li{
height:5px;
display: inline-block;
cursor:pointer;
width:5px;
border-radius:50%;
background:green;
}
ul{
list-style:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="content_wrapper">
<div class="tabs_wrapper">
<ul class="tabs tab_border">
<li data-id="contentOne" class="active">tab 1
</li>
<li data-id="contentTwo">
tab 2
</li>
<li data-id="contentThree">
tab 3
</li>
<li data-id="contentFour">
tab 4
</li>
<li data-id="contentFive">
tab 5
</li>
<li data-id="contentSix">
tab 6
</li>
</ul>
<div class="d_flex">
<div class="tabs_wrapper tabs_indicators">
<ul class="tabs list_unstyled d_flex">
<li data-id="contentOne" class="active"></li>
<li data-id="contentTwo"></li>
<li data-id="contentThree"></li>
<li data-id="contentFour"></li>
<li data-id="contentFive"></li>
<li data-id="contentSix"></li>
</ul>
</div>
<div class="tab_controller d_flex ">
<span class="tab_btn previous mr-10">left arrow</span><br>
<span class="tab_btn next">right arrow</span>
</div>
</div>
</div>
<div class="tab_content">
<div class="tab_content_item contentOne">
content 1
</div>
<div class="tab_content_item contentTwo">
content 2
</div>
<div class="tab_content_item contentThree">
content 3
</div>
<div class="tab_content_item contentFour">
content 4
</div>
<div class="tab_content_item contentFive">
content 5
</div>
<div class="tab_content_item contentSix">
content 6
</div>
</div>
</div>
</body>
</html>
Check next & prev element is there
$("li.active").next("li").length)
$("li.active").prev("li").length)
$(document).ready(function () {
$(document).ready(function() {
$(".tab_content div:not(:first)").toggle(),
$(".tabs li").click(function() {
var e = $(this).index();
var t = $(this).position(),
a = $(this).data("id");
(scroll = $(".tabs").scrollLeft()),
$(".tabs").animate({
scrollLeft: scroll + t.left - 30
}, 200),
$(".tab_content div").hide(),
$("div." + a).toggle(),
$(".tabs li").removeClass("active"),
// $(`.tabs li:nth-child(${e + 1})`).addClass("active");
$(".tabs li:nth-child(" + (e + 1) + ")").addClass("active");
}),
$(".next").click(function(e) {
if ($("li.active").next("li").length) {
e.preventDefault(), $("li.active").next("li").trigger("click");
} else {
e.preventDefault(), $("li:first-child").trigger("click");
}
}),
$(".previous").click(function(e) {
if ($("li.active").prev("li").length) {
e.preventDefault(), $("li.active").prev("li").trigger("click");
} else {
e.preventDefault(), $("li:last-child").trigger("click");
}
});
});
});
.tabs_indicators li{
height:5px;
display: inline-block;
cursor:pointer;
width:5px;
border-radius:50%;
background:green;
}
ul{
list-style:none;
}
.tabs_indicators li.active{background:red;}
.tabs li.active{color:red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="content_wrapper">
<div class="tabs_wrapper">
<ul class="tabs tab_border">
<li data-id="contentOne" class="active">tab 1
</li>
<li data-id="contentTwo">
tab 2
</li>
<li data-id="contentThree">
tab 3
</li>
<li data-id="contentFour">
tab 4
</li>
<li data-id="contentFive">
tab 5
</li>
<li data-id="contentSix">
tab 6
</li>
</ul>
<div class="d_flex">
<div class="tabs_wrapper tabs_indicators">
<ul class="tabs list_unstyled d_flex">
<li data-id="contentOne" class="active"></li>
<li data-id="contentTwo"></li>
<li data-id="contentThree"></li>
<li data-id="contentFour"></li>
<li data-id="contentFive"></li>
<li data-id="contentSix"></li>
</ul>
</div>
<div class="tab_controller d_flex ">
<span class="tab_btn previous mr-10">left arrow</span><br>
<span class="tab_btn next">right arrow</span>
</div>
</div>
</div>
<div class="tab_content">
<div class="tab_content_item contentOne">
content 1
</div>
<div class="tab_content_item contentTwo">
content 2
</div>
<div class="tab_content_item contentThree">
content 3
</div>
<div class="tab_content_item contentFour">
content 4
</div>
<div class="tab_content_item contentFive">
content 5
</div>
<div class="tab_content_item contentSix">
content 6
</div>
</div>
</div>
</body>
</html>
You just have to add 2 checks:
For the "next" case, if there is any next <li> element
For the "prev" case, if the is any previous <li> element
Just change your js like this:
$(".next").click(function (e) {
e.preventDefault();
if($("li.active").next("li").length == 0) {
$("li:first-child").trigger("click");
} else {
$("li.active").next("li").trigger("click");
}
}),
$(".previous").click(function (e) {
e.preventDefault();
if($("li.active").prev("li").length == 0) {
$("li:last-child").trigger("click");
} else {
$("li.active").prev("li").trigger("click");
}
});
$(document).ready(function () {
$(".tab_content div:not(:first)").toggle(),
$(".previous").css({
opacity: "0.8",
cursor: "not-allowed"
}),
$(".tabs li").click(function () {
var e = $(this).index();
$(this).is(":last-child") ? $(".next").next("li").trigger("click") : $(".next").next("li").trigger("click"),
$(this).is(":first-child") ? $(".previous").css({
opacity: "0.8",
cursor: "not-allowed"
}) : $(".previous").css({
opacity: "1",
cursor: "pointer"
});
var t = $(this).position(),
a = $(this).data("id");
(scroll = $(".tabs").scrollLeft()),
$(".tabs").animate({
scrollLeft: scroll + t.left - 30
}, 200),
$(".tab_content div").hide(),
$("div." + a).toggle(),
$(".tabs li").removeClass("active"),
// $(`.tabs li:nth-child(${e + 1})`).addClass("active");
$(".tabs li:nth-child(" + (e + 1) + ")").addClass("active");
}),
$(".next").click(function (e) {
e.preventDefault();
if($("li.active").next("li").length == 0) {
debugger;
$("li:first-child").trigger("click");
} else {
$("li.active").next("li").trigger("click");
}
}),
$(".previous").click(function (e) {
e.preventDefault();
if($("li.active").prev("li").length == 0) {
$("li:last-child").trigger("click");
} else {
$("li.active").prev("li").trigger("click");
}
});
});
.tabs_indicators li{
height:5px;
display: inline-block;
cursor:pointer;
width:5px;
border-radius:50%;
background:green;
}
ul{
list-style:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="content_wrapper">
<div class="tabs_wrapper">
<ul class="tabs tab_border">
<li data-id="contentOne" class="active">tab 1
</li>
<li data-id="contentTwo">
tab 2
</li>
<li data-id="contentThree">
tab 3
</li>
<li data-id="contentFour">
tab 4
</li>
<li data-id="contentFive">
tab 5
</li>
<li data-id="contentSix">
tab 6
</li>
</ul>
<div class="d_flex">
<div class="tabs_wrapper tabs_indicators">
<ul class="tabs list_unstyled d_flex">
<li data-id="contentOne" class="active"></li>
<li data-id="contentTwo"></li>
<li data-id="contentThree"></li>
<li data-id="contentFour"></li>
<li data-id="contentFive"></li>
<li data-id="contentSix"></li>
</ul>
</div>
<div class="tab_controller d_flex ">
<span class="tab_btn previous mr-10">left arrow</span><br>
<span class="tab_btn next">right arrow</span>
</div>
</div>
</div>
<div class="tab_content">
<div class="tab_content_item contentOne">
content 1
</div>
<div class="tab_content_item contentTwo">
content 2
</div>
<div class="tab_content_item contentThree">
content 3
</div>
<div class="tab_content_item contentFour">
content 4
</div>
<div class="tab_content_item contentFive">
content 5
</div>
<div class="tab_content_item contentSix">
content 6
</div>
</div>
</div>
</body>
</html>
I am writing a code to open and close navigation bar with the button
my code is as follows
#DIV1{
display:block;}
<div id="DIV1">
<ul class="topnav">
<li>About</li>
<li>Contact</li>
<li>News</li>
<li>Home</li>
</ul>
</div>
<button onClick="abc()">HIDE</button>
<script>
function abc()
{
var togg = document.getElementById('DIV1')
if (togg.style.display == "block")
{
togg.style.display="none";
}
else if (togg.style.display == "none")
{
togg.style.display="block";
}
}
</script>
It wont work what should I do or what am I doing wrong? There are other CSS properties for navigation bar which I have skipped.
It doesn't work because you have to set its display with javascript or with inline style to get something by yourDiv.style.display. In your case, when you click on your button, the display is not set and then you can't enter nor in your if neither in your else if statement. So try this:
var togg = document.getElementById('DIV1');
togg.style.display="block"; /* => I set a display value */
function abc(){
if (togg.style.display == "block")
{
togg.style.display="none";
}
else if (togg.style.display == "none")
{
togg.style.display="block";
}
}
#DIV1 {
display:block;
}
/*you can remove this rule. You are changing the display via javascript */
<div id="DIV1">
<ul class="topnav">
<li>About</li>
<li>Contact</li>
<li>News</li>
<li>Home</li>
</ul>
</div>
<button onClick="abc()">HIDE</button>
Another way: you could simply create a class to "hide" your div and then toggle it using classList and toggle:
function abc(){
var togg = document.getElementById('DIV1')
togg.classList.toggle("myClass");
}
.myClass {
display:none;
}
<div id="DIV1">
<ul class="topnav">
<li>About</li>
<li>Contact</li>
<li>News</li>
<li>Home</li>
</ul>
</div>
<button onClick="abc()">HIDE</button>
here is the correct code:
<style> #DIV1{
display:block;}
</style>
<div id="DIV1">
<ul class="topnav">
<li>About</li>
<li>Contact</li>
<li>News</li>
<li>Home</li>
</ul>
</div>
<button onClick="abc()">HIDE</button>
<script>
function abc()
{
var togg = document.getElementById('DIV1');
if (togg.style.display == "block")
{
togg.style.display="none";
}
else
{
togg.style.display="block";
}
}
</script>
if i understood your question try this one:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#div1{
display:block;}
</style>
<script>
function abc()
{
var togg = document.getElementById("div1")
if (togg.style.display === "none")// 3 ===
{
togg.style.display="block";
}
else {
togg.style.display="none";
}
}
</script>
</head>
<body>
<div id="div1">
<ul class="topnav">
<li>About</li>
<li>Contact</li>
<li>News</li>
<li>Home</li>
</ul>
</div>
<button onclick="abc()">HIDE</button>
</body>
</html>
I am trying to fetch the div with the id removeNav and paste it back in again.
but my div is undefined.
function init() {
var insertMenu = $("#removeNav").html();
console.log(insertMenu);
window.addEventListener('scroll', function (e) {
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
header = document.querySelector(".navbar-collapse"),
removeNav = document.getElementById('removeNav'),
insertNav = document.getElementById('insertNav'),
body = document.querySelector("body");
//var insertMenu = '<div id="removeNav" class="navbar-collapse collapse header"><img class="navbar-left" src="img/MRS_Logo_WEB_Interlaced.png" width="120" height="96"> <ul class="nav navbar-nav navbar-right"> <li class="divider-vertical"></li> <li><a data-toggle="modal" data-target="#myModal" href="#about">Login</a></li> <li class="divider-vertical"></li> <li>Download</li> <li class="divider-vertical"></li> <li class="divider-vertical"></li> <li>Karriere</li> <li>Sitemap</li> <li class="divider-vertical"></li> <li>Impressum</li> <li class="divider-vertical"></li> <form class="navbar-form navbar-right"> <div class="form-group"> <input class="form-control" placeholder="Suchen" type="text"> </div> <button type="submit" class="btn btn-default glyphicon glyphicon-search"></button> </form> </ul></div>';
if(distanceY > shrinkOn){
classie.add(header, "smaller");
removeNav.parentNode.removeChild(removeNav);
} else {
if (classie.has(header, "smaller")) {
classie.remove(header, "smaller");
insertNav.innerHTML = insertMenu;
}
}
});
}
window.onload = init();
My Code:
https://jsfiddle.net/t23nn1pp/
jsFiddle: https://jsfiddle.net/t23nn1pp/6/
I know my fix is a little off your original code, however have you tried just hiding and showing the nav bar?
jQuery
function init() {
var $insertMenu = $("#removeNav");
window.addEventListener('scroll', function (e) {
var distanceY = window.pageYOffset;
var shrinkOn = 100;
if(distanceY > shrinkOn){
$insertMenu.hide();
} else {
$insertMenu.show();
}
});
}
window.onload = init();
CSS for example
body{
min-height: 2000px;
}
#insertNav{
width: 100%;
max-height: 200px;
background-color: #F0F;
}
Html is the same as you provided.
You are mixing jQuery with vanilla JS, change this line:
var insertMenu = $("#removeNav").html();
for
var insertMenu = document.querySelector("#removeNav").innerHTML;
Snippet below (changed console.log for alert just for demo)
function init() {
var insertMenu = document.querySelector("#removeNav").innerHTML;
alert(insertMenu);
window.addEventListener('scroll', function(e) {
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
header = document.querySelector(".navbar-collapse"),
removeNav = document.getElementById('removeNav'),
insertNav = document.getElementById('insertNav'),
body = document.querySelector("body");
if (distanceY > shrinkOn) {
classie.add(header, "smaller");
removeNav.parentNode.removeChild(removeNav);
} else {
if (classie.has(header, "smaller")) {
classie.remove(header, "smaller");
insertNav.innerHTML = insertMenu;
}
}
});
}
window.onload = init();
<script src="https://cdnjs.cloudflare.com/ajax/libs/classie/1.0.1/classie.min.js"></script>
<div id="insertNav">
<div id="removeNav" class="navbar-collapse collapse header">
<img class="navbar-left img-responsive logo-margin" src="img/MRS_Logo_WEB_Interlaced.png" height="96" width="120" />
<ul class="nav navbar-nav navbar-right">
<li class="divider-vertical"></li>
<li><a data-toggle="modal" data-target="#myModal" href="#about">Login</a></li>
<li class="divider-vertical"></li>
<li>Download</li>
<li class="divider-vertical"></li>
<li class="divider-vertical"></li>
<li>Karriere</li>
<li>Sitemap</li>
<li class="divider-vertical"></li>
<li>Impressum</li>
<li class="divider-vertical"></li>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Suchen">
</div>
<button type="submit" class="btn btn-default glyphicon glyphicon-search"></button>
</form>
</ul>
</div>
</div>
Updated
Running your code with the link provided, there are a few things missing.
- jQuery
- Classie
As for jQuery, you can try adding:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
If you fix (or remove, as suggested by others), it'll work.
I have some scripts which needs to be run when partial page changes. On 1st page Load it seems to be working fine but after partial page is updated javascript stopped working
1st Try:
I tried to put javascript in partial page itself but its not working
2nd Try:
I tried to put javascript on the parent page from which partial page is upadted
Code To Load Partial Page:
#Html.DropDownList("UserType", DirectCast(ViewBag.UserType, SelectList), New With {.onchange = "ChangeUserType(this.value)"})
<div id="renderTreeView">
#Html.Partial("_TreeView")
</div>
<script>
function ChangeUserType(UserType) {
$('#renderTreeView').load("/UserMaster/ChangePermission?iUserTypeID=" + UserType);
}
//And Somme of my other javascript function to create tree view
</script>
This script doesnot work on partial page update
<script>
$(document).ready(function () {
$('#check-all').click(function () {
$("input:checkbox").attr('checked', true);
});
$('#uncheck-all').click(function () {
$("input:checkbox").attr('checked', false);
});
});
$(document).ready(function () {
$('.tree li').each(function () {
if ($(this).children('ul').length > 0) {
$(this).addClass('parent');
}
});
$('.tree li.parent > a').click(function () {
$(this).parent().toggleClass('active');
$(this).parent().children('ul').slideToggle('fast');
});
$('#all').click(function () {
$('.tree li').each(function () {
$(this).toggleClass('active');
$(this).children('ul').slideToggle('fast');
});
});
$('#Add').change(function () {
AddPermission();
});
$('#Change').change(function () {
AddPermission();
});
$('#Delete').change(function () {
AddPermission();
});
$('#View').change(function () {
AddPermission();
});
$('#Print').change(function () {
AddPermission();
});
});
function SetPageNumber(pageID) {
var PageID = document.getElementById("pageID");
PageID.value = pageID
var PermissionsofPage = document.getElementById(pageID).value
var AddCheck = PermissionsofPage.charAt(0);
var ChangeCheck = PermissionsofPage.charAt(1);
var DeleteCheck = PermissionsofPage.charAt(2);
var ViewCheck = PermissionsofPage.charAt(3);
var PrintCheck = PermissionsofPage.charAt(4);
checkUncheckCheckBoxes(AddCheck, ChangeCheck, DeleteCheck, ViewCheck, PrintCheck)
}
function checkUncheckCheckBoxes(AddCheck,
ChangeCheck,
DeleteCheck,
ViewCheck,
PrintCheck) {
//$('#Permission input:checked').removeAttr('checked');
if (AddCheck == 1) {
$('#Add').attr('checked', true);
}
else {
$('#Add').removeAttr('checked');
//$('#Add').attr('checked', false);
}
if (ChangeCheck == 1) {
$("#Change").attr("checked", true);
}
else {
$("#Change").attr("checked", false);
}
if (DeleteCheck == 1) {
$("#Delete").attr("checked", true);
}
else {
$("#Delete").attr("checked", false);
}
if (ViewCheck == 1) {
$("#View").attr("checked", true);
}
else {
$("#View").attr("checked", false);
}
if (PrintCheck == 1) {
$("#Print").attr("checked", true);
}
else {
$("#Print").attr("checked", false);
}
}
function AddPermission() {
var PageIDPermission = document.getElementById("pageID").value;
var Permissions
if ($("#Add").is(":checked")) {
Permissions = "1"
}
else {
Permissions = "0"
}
if ($("#Change").is(":checked")) {
Permissions = Permissions += 1
}
else {
Permissions = Permissions += 0
}
if ($("#Delete").is(":checked")) {
Permissions = Permissions += 1
}
else {
Permissions = Permissions += 0
}
if ($("#View").is(":checked")) {
Permissions = Permissions += 1
}
else {
Permissions = Permissions += 0
}
if ($("#Print").is(":checked")) {
Permissions = Permissions += 1
}
else {
Permissions = Permissions += 0
}
var toSet = document.getElementById(PageIDPermission)
toSet.value = Permissions
}
</script>
This is my Partial Page
<link href="~/assets/css/treeview.css" rel="stylesheet" />
<div class="span6">
<div class="portlet box grey">
<div class="portlet-title">
<div class="caption"><i class="icon-sitemap"></i>Page Permission (#ViewBag.PageNo)</div>
<div class="actions">
Toggle All
</div>
</div>
<div class="portlet-body fuelux">
<div class="tree">
<ul>
<li>
<a >First Level</a>
<ul>
<li>Second Level<input type="text" id="page_2" #*style="display:none"*# value="00000" /></li>
<li><a onclick ="SetPageNumber('page_1')">Second Level</a><input type="text" id="page_1" #*style="display:none"*# value="00000" /></li>
<li><a>Second Level</a></li>
</ul>
</li>
<li>
<a>First Level</a>
<ul>
<li>
<a>Second Level</a>
<ul>
<li><a>Third Level</a></li>
<li><a>Third Level</a></li>
<li>
<a>Third Level</a>
<ul>
<li><a>Fourth Level</a></li>
<li><a>Fourth Level</a></li>
<li>
<a>Fourth Level</a>
<ul>
<li><a>Fifth Level</a></li>
<li><a>Fifth Level</a></li>
<li><a>Fifth Level</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a>Second Level</a></li>
</ul>
</li>
<li>
<a>First Level</a>
<ul>
<li><a>Second Level</a></li>
<li><a>Second Level</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="span2" id="Permission">
<div class="portlet box grey">
<div class="portlet-title">
<div class="caption"><i class="icon-key"></i> Rights</div>
</div>
<div class="portlet-body fuelux">
<div>
<input type="checkbox" id="Add" /> Add
</div>
<div>
<input type="checkbox" id="Change" /> Change
</div>
<div>
<input type="checkbox" id="Delete" /> Delete
</div>
<div>
<input type="checkbox" id="View" /> View
</div>
<div>
<input type="checkbox" id="Print"/> Print
</div>
<div>
<input type="text" id="pageID" #*style="display:none"*# value="0" />
#* <button onclick="ChangeCheckBox()">Toggle</button>*#
</div>
</div>
</div>
</div>
Moving along in AngularJS, I get a JavaScript error on the // ERROR line below.
Why do I get Cannot set property 'show' of undefined?
<html ng-app>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js">
</script>
<div ng-controller='DeathrayMenuController'>
<button ng-click='toggleMenu()'>Toggle Menu</button>
<ul ng-show='menuState.show'>
<li ng-click='stun()'>Stun</li>
<li ng-click='disintegrate()'>Disintegrate</li>
<li ng-click='erase()'>Erase from history</li>
</ul>
<div/>
<script>
function DeathrayMenuController($scope) {
$scope.menuState.show = false; // ERROR HERE
$scope.toggleMenu = function() {
$scope.menuState.show = !$scope.menuState.show;
};
}
</script>
</body>
</html>
you never define $scope.menuState. Instead consider:
<html ng-app>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-controller='DeathrayMenuController'>
<button ng-click='toggleMenu()'>Toggle Menu</button>
<ul ng-show='menuState_show'>
<li ng-click='stun()'>Stun</li>
<li ng-click='disintegrate()'>Disintegrate</li>
<li ng-click='erase()'>Erase from history</li>
</ul>
<div/>
<script>
function DeathrayMenuController($scope) {
$scope.menuState_show = false;
$scope.toggleMenu = function() {
$scope.menuState_show = !$scope.menuState_show;
};
}
</script>
</body>
</html>
Just working through the same book and came across this issue. Thought I'd add that the following works as well:
<html ng-app>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js">
</script>
<div ng-controller='DeathrayMenuController'>
<button ng-click='toggleMenu()'>Toggle Menu</button>
<ul ng-show='menuState.show'>
<li ng-click='stun()'>Stun</li>
<li ng-click='disintegrate()'>Disintegrate</li>
<li ng-click='erase()'>Erase from history</li>
</ul>
<div/>
<script>
function DeathrayMenuController($scope) {
$scope.menuState = {show: false}; // ERROR HERE
$scope.toggleMenu = function() {
$scope.menuState.show = !$scope.menuState.show;
};
}
</script>
</body>
</html>
The Errata shows the correction: http://oreilly.com/catalog/errata.csp?isbn=0636920028055
$scope.menuState.show = false; will give an undefined error
Added $scope.menuState = {} before to fix the issue i.e.
function DeathrayMenuController($scope) {
$scope.menuState = {}
$scope.menuState.show = false;
...