I want to make my div tag clickable, but I can't get it to work.
I am working with Angular 1.5 and Ionic V1.
When an user logs in I want he/she to be presented with this view:
<ion-modal-view>
<ion-header-bar>
<div class="buttons">
<button class="button" ng-click="closeModal()"><i class="ion-chevron-left big-icon"></i></button>
</div>
</ion-header-bar>
<ion-content>
<div class="modal" style="background-color: #EDEEF1;" ng-controller="LoginCtrl">
<div class="row row-white">
<div class="col col-grey">
<div class="divider20"></div>
<h4 style="margin-top:30px;">Martin Nordström</h4>
</div>
</div>
<div class="row row-white">
<div class="col col-grey">
<p style="color: #006E78; margin-bottom:40px;">990624****</p>
</div>
</div>
<div class="divider20"></div>
<div class="row row-white main-container">
<div class="col col-grey">
<p style="color:#006E78;">Vart vill du ta emot dina leveranser?</p>
</div>
</div>
<div class="info-box" ng-class="{'info-box-active':isActive}" ng-click="activeBtn()" ng-controller="LoginCtrl">
<div class="box-row">
<div class="header">
<p class="leftText">IKANO Bostad</p>
<p class="rightText">Leveransrum</p>
</div>
</div>
<div class="box-row">
<div class="fields">
<p class="leftText">Folkungagatan 100</p>
<p class="rightText">10 kr/månad</p>
</div>
</div>
</div>
<div class="info-box">
<div class="box-row">
<div class="fields mixed">
<p class="leftText">Lägg till en ny leveransbox</p>
<p class="rightText">0 kr/månad</p>
</div>
</div>
</div>
<div class="row row-white">
<div class="col col-grey">
<button style="border-radius:50px; width:200px; height:45px;" class="button" ng-click="closeModal()">Klar</button>
</div>
</div>
<div class="divider20"></div>
</div>
</ion-content>
That view is showing up after the user has logged in, but all the ng-clicks are not working. Here's the controller:
.controller('LoginCtrl', function ($scope, alerter, $localStorage, WizardHandler, datamapper, data, api, $state, authToken, $ionicModal, storage, endpointHandler, loadingHandler, $ionicPopup, $timeout) {
And inside the controller I have this function:
$timeout(function () {
$ionicModal.fromTemplateUrl('templates/deliveryDestination.modal.html', {
scope: $scope.$scope,
animation: 'slide-in-up'
}).then(function (modal) {
$scope.modal = modal
modal.show()
})
}, 1000)
EDIT: Here's the implementation of the activeBtn()
$scope.isActive = false
$scope.activeBtn = function () {
console.log("clicked!");
$scope.isActive = !$scope.isActive
}
I am new to Angular, but with my (little) experience I think that the problem has something to do with the controller who is not connected properly. But I can be wrong! Hopefully we can solve this problem together, and I am grateful for all the support I can get.
Thanks
var app = angular.module('app', []);
app.controller('LoginCtrl', function($scope) {
$scope.isActive = false
$scope.activeBtn = function () {
alert("clicked!");
$scope.isActive = !$scope.isActive
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ion-header-bar>
<div class="buttons">
<button class="button" ng-click="closeModal()"><i class="ion-chevron-left big-icon"></i></button>
</div>
</ion-header-bar>
<ion-content ng-app="app" ng-controller="LoginCtrl">
<div class="modal" style="background-color: #EDEEF1;" >
<div class="row row-white">
<div class="col col-grey">
<div class="divider20"></div>
<h4 style="margin-top:30px;">Martin Nordström</h4>
</div>
</div>
<div class="row row-white">
<div class="col col-grey">
<p style="color: #006E78; margin-bottom:40px;">990624****</p>
</div>
</div>
<div class="divider20"></div>
<div class="row row-white main-container">
<div class="col col-grey">
<p style="color:#006E78;">Vart vill du ta emot dina leveranser?</p>
</div>
</div>
<div class="info-box" ng-class="{'info-box-active':isActive}" ng-click="activeBtn()">
<div class="box-row">
<div class="header">
<p class="leftText">IKANO Bostad</p>
<p class="rightText">Leveransrum</p>
</div>
</div>
<div class="box-row">
<div class="fields">
<p class="leftText">Folkungagatan 100</p>
<p class="rightText">10 kr/månad</p>
</div>
</div>
</div>
<div class="info-box">
<div class="box-row">
<div class="fields mixed">
<p class="leftText">Lägg till en ny leveransbox</p>
<p class="rightText">0 kr/månad</p>
</div>
</div>
</div>
<div class="row row-white">
<div class="col col-grey">
<button style="border-radius:50px; width:200px; height:45px;" class="button" ng-click="closeModal()">Klar</button>
</div>
</div>
<div class="divider20"></div>
</div>
</ion-content>
I don't see problem with this,can you check and compare with your's
You need to place the ng-controller="LoginCtrl" outside all the div, otherwise $scope won't get the context.
<ion-modal-view ng-controller="LoginCtrl">
angular.module('myApp', [])
.controller('LoginCtrl', function($scope) {
$scope.activeBtn = function(){
alert("asdasd")
}
});
<html ng-app="myApp">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
<title>Angular-Google-Charts Example</title>
</head>
<body>
<div class="modal" style="background-color: #EDEEF1;" ng-controller="LoginCtrl">
<div class="row row-white">
<div class="col col-grey">
<div class="divider20"></div>
<h4 style="margin-top:30px;">Martin Nordström</h4>
</div>
</div>
<div class="row row-white">
<div class="col col-grey">
<p style="color: #006E78; margin-bottom:40px;">990624****</p>
</div>
</div>
<div class="divider20"></div>
<div class="row row-white main-container">
<div class="col col-grey">
<p style="color:#006E78;">Vart vill du ta emot dina leveranser?</p>
</div>
</div>
<div class="info-box" style="background-color:red;" ng-click="activeBtn()">
<div class="box-row">
<div class="header">
<p class="leftText">IKANO Bostad</p>
<p class="rightText">Leveransrum</p>
</div>
</div>
<div class="box-row">
<div class="fields">
<p class="leftText">Folkungagatan 100</p>
<p class="rightText">10 kr/månad</p>
</div>
</div>
</div>
<div class="info-box">
<div class="box-row">
<div class="fields mixed">
<p class="leftText">Lägg till en ny leveransbox</p>
<p class="rightText">0 kr/månad</p>
</div>
</div>
</div>
<div class="row row-white">
<div class="col col-grey">
<button style="border-radius:50px; width:200px; height:45px;" class="button" ng-click="closeModal()">Klar</button>
</div>
</div>
<div class="divider20"></div>
</div>
</body>
</html>
Works perfectly fine.Just removed ng-controller="LoginCtrl" next to ng-click="activeBtn"
Related
I have dropdown list with some file names.
What I want to achieve is to find file name parents so when checkbox is checked I can get their respective values and build them into path of some sort. For example you are clicking
updates > second_folder_updates > CSD_update checkbox
on that CSD_update checbox click you can see updates/second_folder_updates/CSD_update being console logged, same goes for first update on click you will get updates/first_update in the console
my current solution it works in a way? but this returns a lot of duplicates and incorrect data
var elem = document.getElementById("AQW_update");
function getParents(elem) {
var parents = [];
while(elem.parentNode && elem.parentNode.nodeName.toLowerCase() != 'body') {
elem = elem.parentNode;
parents.push(elem.textContent);
}
return parents;
}
var abc = getParents(elem)
for(var i = 0; i < abc.length; ++i)
abc[i] = abc[i].replace(/(\r\n|\n|\r)/gm,"")
console.log(abc.toString())
$(document).ready(function () {
$('.clickFaq').click(function () {
$('.displayDir').toggle('1000');
$("i", this).toggleClass("icon-up-circled icon-down-circled");
var $data = $('.SWCheckBox:checked').val();
console.log($data)
});
$(".open").hide();
$('.dirTitle').click(function () {
$(this).next().slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
<div class="container">
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
updates
<i class=" .displayDir "></i>
</div>
<div class="faqQuestionsTextPreview open" style="display: none;">
<ul>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
first_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
second_folder_updates
<i class=" .displayDir "></i>
</div>
<div class="faqQuestionsTextPreview open" style="display: none;">
<ul>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
AQW_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox" >
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
CSD_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</ul>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</ul>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js"
crossorigin="anonymous"></script>
I have a problem and that is I can not update all charts in my program.
I can update one of the four charts with the following command, but I cannot update the other three.
$('.chart').data('easyPieChart').update(60);
This is my html code
<div id="content">
<div class="b-skills">
<div class="container">
<div id="row">
<div class="col-md-5">
<div class="skill-item center-block align:center">
<div class="chart-container">
<div id="CO" class="chart" data-percent="0">
</div>
</div>
<p id="COP">CO</p>
<p id="colim"></p>
</div>
</div>
<div class="col-md-5">
<div class="skill-item center-block">
<div class="chart-container">
<div id="CO2" class="chart" class="boba" data-percent="90">
<a class="percent" data-after="%" style="text-decoration: none; color:black"></a>
</div>
</div>
<p id="CO2P">CO2</p>
<p id="valueCO2"></p>
</div>
</div>
</div>
<div id="row">
<div class="col-md-5">
<div class="skill-item center-block">
<div class="chart-container">
<div id="Volume" class="chart" data-percent="0">
<a class="percent" data-after="%" style="text-decoration: none; color:black"></a>
</div>
</div>
<p id="laermP">Lautstärke</p>
<p id="laemlim"></p>
</div>
</div>
<div class="col-md-5">
<div class="skill-item center-block">
<div class="chart-container">
<div id="yes4" class="chart" data-percent="">
<a class="percent" data-after="%" style="text-decoration: none; color:black"></a>
</div>
</div>
<p id="feuchtigkeitP">Luftfeuchtigkeit</p>
<p id="teamplim"></p>
</div>
</div>
</div>
</div>
</div>
How can i update all four charts separatly, so i can change every chart value independently.
I want to get the value in a single card selected by the user and post it to the backend
<div class="card-body">
<div class="swiper-container swipercards">
<div class="swiper-wrapper pb-4">
<div class="swiper-slide ">
<div class="card border-0 bg-default text-white">
<div class="card-header">
<div class="row">
<div class="col-auto">
<i class="material-icons vm text-template">credit_card</i>
</div>
<div class="col pl-0">
<h6 class="mb-1">Visa</h6>
</div>
</div>
</div>
<div class="card-body">
<h5 class="mb-0 mt-3">4444 5264 2541 26651</h5>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<p class="mb-0">26/21</p>
<p class="small ">Expiry date</p>
</div>
<div class="col-auto align-self-center text-right">
<p class="mb-0">Agnish Carvan</p>
<p class="small">Card Holder</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide ">
<div class="card border-0 bg-warning text-white">
<div class="card-header">
<div class="row">
<div class="col-auto">
<i class="material-icons vm text-template">credit_card</i>
</div>
<div class="col pl-0">
<h6 class="mb-1">Maestro</h6>
</div>
</div>
</div>
<div class="card-body">
<h5 class="mb-0 mt-3">4444 5264 2541 26651</h5>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<p class="mb-0">26/21</p>
<p class="small ">Expiry date</p>
</div>
<div class="col-auto align-self-center text-right">
<p class="mb-0">Agnish Carvan</p>
<p class="small">Card Holder</p>
</div>
</div>
</div>
</div>
</div>
Welcome AegisFor. It looks like you're using Swiper.js?
According to the docs, under events, here is how you determine the selected item in the carousel:
const swiper = new Swiper('.swiper', {
// ...
});
swiper.on('slideChange', function () {
console.log('slide changed', swiper.activeIndex);
});
https://swiperjs.com/swiper-api#events
You could get the values by referring to the slide's attributes, like this:
....
<div class="swiper-wrapper pb-4" >
<div class="swiper-slide " id="card-1" data-card-number="12345">
....
When you change slides, refer to the div that matches the activeIndex of the carousel:
var activeCard = document.getElementById("card-" + swiper.activeIndex);
Now you can get the card number:
var cardNumber = activeCard.getAttribute("data-card-number")
How you send it to your backend depends on what backed you have. You might do something similar to this:
fetch('http://example.com/card?card-number=' + cardNumber)
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
The documentation at https://swiperjs.com/swiper-api is quite good. Remember to read the docs thoroughly before posting to SO.
I need to do a function that
if class="btn btn-default" exists
click them
this would be problematic bcz there are more btn defaults besides this ones :D
so how do i work with the "Chest unlocked"
<div class="chest_container">
<div class="chest unlocked"></div>
Here's the html
<div id="daily_bonus_content">
<div class="rewards_grid">
<div class="reward day_1">
<div class="center">
<div class="chest_container">
<div class="chest unlocked"></div>
<div class="day">1</div>
<div class="actions">Abrir</div>
</div>
</div>
</div>
<div class="reward day_2">
<div class="center">
<div class="chest_container">
<div class="chest"></div>
<div class="day">2</div>
<div class="actions"></div>
</div>
</div>
</div>
<div class="reward day_3">
<div class="center">
<div class="chest_container">
<div class="chest"></div>
<div class="day">3</div>
<div class="actions"></div>
</div>
</div>
</div>
<div class="reward day_4">
<div class="center">
<div class="chest_container">
<div class="chest"></div>
<div class="day">4</div>
<div class="actions"></div>
</div>
</div>
</div>
In vanillaJS, clicking every btn-default in a chest_container
var buttons = document.querySelector(".chest_container .btn-default");
buttons.forEach(function(button) {
button.click();
});
If you catch the click in an event, you can reach the chest_unlocked by doing the following, where e is the event:
var chestUnlockedDiv = e.target.parentElement.parentElement.querySelector(".chest.unlocked");
I am trying to use a div instead of an image for the item and content but it won't set with the width correctly. I want it to work like the images do.
http://jsfiddle.net/ququat29/ example code
<div class="ContentFlow">
<div class="loadIndicator">
<div class="indicator"></div>
</div>
<div class="flow">
<img class="item" src="http://cdnll.reallygoodstuff.com/images/xl/161170_a.jpg" title="Your_Image_Title" />
<img class="item" src="https://tse1.mm.bing.net/th?id=HN.607994144777177645&pid=1.7" />
<img class="item" src="http://cdnll.reallygoodstuff.com/images/xl/161170_a.jpg" title="Your_Image_Title" />
<!-- Add as many items as you like. -->
</div>
<div class="globalCaption"></div>
<div class="scrollbar">
<div class="slider">
<div class="position"></div>
</div>
</div>
</div>
<div class="ContentFlow">
<div class="flow">
<div class="item more-width">
<div class="center-block club-card content" style="background-color: blue;">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">coffee</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
<div class="item more-width">
<div class="center-block club-card content" style="background-color: red; ">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">car wash</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
<div class="item more-width">
<div class="center-block club-card content" style="background-color: yellow;">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">foutain</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
http://www.jacksasylum.eu/ContentFlow/index.php