I am trying to change my button icon, thext and want to disable onClick().
Unfortunateley it changes the text when I first click and when I click again it changes the icon but does not disbale it.
In the stack the varaibles are set correctly after the click event.
I really dont know why it does not work and why it changes when I click twice.
Here is my html:
<ion-view title="Who-U">
<ion-content class="padding">
<a class="item item-thumbnail-left" href="#">
<img src="img/cover.png">
<h2>{{username}}</h2>
<p>Points: {{points}}</p>
</a>
<button ng-click="click()" class="button button-full button-positive" ng-disabled="{{buttonDisable}}">
<i class='{{buttonType}}'></i>{{text}}
</button>
</ion-content>
</ion-view>
Thats my controller:
angular.module('home', ['services'])
.controller('homeCtrl',
function ($scope, $location, $state, localStorageService, serverAPI, $ionicPopup) {
$scope.buttonType = "icon ion-search",
$scope.buttonDisable = false,
$scope.text = 'Search',
$scope.click = function () {
$scope.buttonDisable = true
$scope.text = 'Searching'
$scope.buttonType = "icon ion-loading-a"
};
})
You forget to put ';' in your code :p
Try this :
$scope.buttonType = "icon ion-search";
$scope.buttonDisable = false;
$scope.text = 'Search';
$scope.click = function () {
$scope.buttonDisable = true;
$scope.text = 'Searching';
$scope.buttonType = "icon ion-loading-a";
}
Related
How can i make my HTML Elements in Gutenberg binded to an Array/Object?
Hi,
i am programming an Gutenberg Block now and just wanted to bind an Object to my Block but it does not update.
Currently i have an list of 's and wanted to be added automatically if i push the "Click me!" Button.
What it does is... If i push on that button, it pushes the new Element into the Array but the Elements are not added. If i click away (if the block loses focus), the elements are added.
What did i do wrong?
edit: props => {
const { setAttributes, attributes } = props;
let slides = props.attributes.slides;
const addSlide = function(event){
slides.push({ title : 'new' });
setAttributes({ slides: slides });
}
return [
<InspectorControls key="inspector">
<PanelBody
title={'Slides'}
initialOpen={true}
>
{slides.map((slide, i) =>
<li key={i}>
{slide.title}
</li>
)}
<Button isPrimary onClick={addSlide}>
Click me!
</Button>
</PanelBody>
</InspectorControls>,
<div className={ props.className } key='richtext'>
{slides.map((slide, i) =>
<li key={i}>
{slide.title}
</li>
)}
<Button isPrimary onClick={addSlide}>
Click me!
</Button>
</div>
];
}
I'm expecting the list elements to add dynamically while foxused.
I am struggling on adding and removing a style class on a anchor tag. I want to add a active class when I clicked on that tag and remove active from last active one. By default Home page would be active. I have tried many things but no success on that!
I have added few code but it is not working. Below is the code:
angularjs code:
$scope.isActive = false;
$scope.getCSSClass = function () {
return 'active';
}
<div id="mySidenav" class="sidenav">
<span class="whitelogo"><img src="styles/images/logo-small.png" alt="logo"></span>
<div class='clearfix'></div>
×
<a ng-link="['/Home/']" title="Home" class="active"><i class="fas fa-home"></i>Home</a>
<a ng-link="['/TestForm/']" ng-class="getCSSClass()" title="Application Form"><i class="fas fa-user-edit"></i> test Form</a>
</div>
Any help will be appreciated. Thanks in advance!
On Angularjs file, I have added this code:
$scope.getStyleClass = function (path) {
var cur_path = $location.path().substr(0, path.length);
if (cur_path == path) {
if ($location.path().substr(0).length > 1 && path.length == 1)
return "";
else
return "active";
} else {
return "";
}
}
And on Html side:
ng-class="getStyleClass('/TestForm')"
I'm trying to get a hold of meteor still so there might be an easy answer to this and i'm hoping that is the case. I have this function which works and returns the correct id when my button is clicked.
$(document).ready(function(){
$("button").click(function(){
var selection = (this.id);
boardSpecs[0] = selection;
return boardSpecs;
});
});
I want to make this into a meteor click event, something like this.
Template.selectBoard.events({
'click button' : function (event) {
event.preventDefault();
var boardType = event.target.id;
Session.set('boardType', boardType);
alert(boardType);
}
});
This is the template where the button exists.
<template name = "selectBoard">
<div class = "container">
<div class = "boardCarousel">
{{#each boardList}}
<div class = "span1">
<div class = "thumbnail">
<img data-src = "{{source}}" alt = "placeholder" class = "img-rounded">
<div class = "something">
<h2>{{name}}</h2>
<p>{{description}}</p>
<button type = "button" id = "{{id}}" class = "btn btn-primary">Select</button>
</div>
</div>
</div>
{{/each}}
</div>
</div>
Assuming that the button is part of your template, you're code is nearly right. The only different is that this won't point to your button, so you'll need to get it from the event:
Template.selectBoard.events({
'click button' : function (event) {
event.preventDefault();
var boardType = event.target.id;
Session.set('boardType', boardType);
alert(boardType);
}
});
Let's make this easier. Your button is defined as:
<button type = "button" id = "{{id}}" class = "btn btn-primary">Select</button>
And your event handler is trying to get at the id of the button which is {{id}}.
If you use nested templates as follows:
<template name = "selectBoard">
<div class = "container">
<div class = "boardCarousel">
{{#each boardList}}
{{> board}}
{{/each}}
</div>
</div>
</template>
<template name="board">
<div class = "span1">
<div class = "thumbnail">
<img data-src = "{{source}}" alt = "placeholder" class = "img-rounded">
<div class = "something">
<h2>{{name}}</h2>
<p>{{description}}</p>
<button type = "button" class = "btn btn-primary">Select</button>
</div>
</div>
</div>
</template>
Then this in your event handler will be the data context of the individual board and you can simply write:
Template.selectBoard.events({
'click button' : function (event) {
event.preventDefault();
var boardType = this.id;
Session.set('boardType', boardType);
alert(boardType);
}
});
I'd argue that this is more Meteoric (to borrow an adjective from Python).
I'd also avoid using the variable name id because of the potential confusion with the natural MongoDB document identifier _id.
I ended up using a body event and it worked right away. Not sure why but it did.
Template.body.events({
'click #selected' : function(event){
event.preventDefault();
Session.set('board',event.target.id);
}
});
Sorry for maybe uncorrect question, but I feel really confused. I need to set the css class of an item in a foreach loop based on the value of an item's property.
self.CssBind = ko.computed(function (task) {
var CssBind = '';
if (getComplexity(task) === 'Easy') {
CssBind = "green";
} else if (getComplexity(task) === 'Intermediate') {
CssBind = 'yellow';}
else if (getComplexity(task) === 'Difficult') {
CssBind = 'red';
}
return CssBind;
});
I tried to get complexity in such way but have undefined.... (in controller there is method that accepts task and returns complexity)
self.complexity = ko.observable();
function getComplexity (task) {
ajaxHelper(taskItem, 'GET').done(function (data) { self.complexity(data); });
};
In html
<div class="panel panel-default" data-bind="foreach:{data:tasks, as: 'task'}">
<div class="panel-heading">
<a data-toggle="collapse" data-parent="#accordion" data-bind="text: Name, attr: { href : '#collapse' + task.Id}, css: {color: CssBind}">
</a>
</div>
<div data-bind="attr: { id : 'collapse' + task.Id}" class="panel-collapse collapse">
<div class="panel-body">
<span data-bind="text: Name"></span>
</div>
</div>
</div>
What to change to make it work?
Your computed is probably defined on the root view-model and when you're calling it you're already in a foreach: tasks scope. You need to use the $root keyword to point to CssBind.
Also, no need for a computed, regular function will do easier (especially with argument passing):
self.CssBind = function (task) {
var CssBind = '';
if (ko.unwrap(task.getComplexity) === 'Easy') {
CssBind = "green";
} else if (self.getComplexity() === 'Intermediate') {
CssBind = 'yellow';}
else if (self.getComplexity() === 'Difficult') {
CssBind = 'red';
}
return CssBind;
});
And in your HTML:
<a data-toggle="collapse"
data-parent="#accordion"
data-bind="text: Name, attr: { href : '#collapse' + task.Id}, style: {color: $root.CssBind.bind(null, task)}">
Please notice that I change the binding handler from css to style (the former is used to apply CSS classes while the latter applies explicit CSS rules).
I have implemented this to my wordpress theme, and I'm trying to figure out, how to implement the hashchange, when I click a link inside a folder. I've tried to use this tutorial to trigger the hashchange. The hashchange works, when i comment out the "Load permalink to .itemContent" , but then the item slides down and up instantly. When its not commented out, the hashchange doesn't trigger.
Also, if someone copys the http://www.pathtomydomain.com/#/item-name-1 to the address bar (or bookmarks it), how to open the folder according to the url? Something to to with .trigger(click)?
HTML
<div id="container">
<div class="item">
<a href="http://pathtomydomain.com/item-name-1">
<img src="an-image-1.jpg" />
</a>
</div>
<div class="item">
<a href="http://pathtomydomain.com/item-name-2">
<img src="an-image-2.jpg" />
</a>
</div>
<div class="item">
<a href="http://pathtomydomain.com/item-name-3">
<img src="an-image-3.jpg" />
</a>
</div>
</div>
<div class="itemContent"></div>
JQUERY
$.ajaxSetup({cache:false});
$('.item').click(function(){
if($('.itemContent').is(":visible")){
$('.itemContent').slideUp("fast", function(){
});
} else if ($('.itemContent').is(":hidden")) {
$('.itemContent').empty();
$('.itemContent').html('<img class="loading" src="ajax-loader.gif"/>');
$('.itemContent').slideDown("fast", function(){
var $dock = $('#navigation'),
dockHeight = $dock.height();
$("html, body").animate({
scrollTop: $('.itemContent').offset().top - ( $(window).height() - dockHeight - $(this).outerHeight(true) ) / 2
});
});
/*
Load permalink to .itemContent .
*/
var post_link = $(this).children("a").attr("href");
$(".itemContent").load(post_link);
return false;
}
});
var $mainContent = $(".itemContent"),
siteUrl = "http://" + top.location.host.toString(),
url = '';
$(document).delegate("a[href^='"+siteUrl+"']:not([href*=/wp-admin/]):not([href*=/wp-login.php]):not([href$=/feed/])", "click", function() {
location.hash = this.pathname;
return false;
});
$(window).bind('hashchange', function(){
url = window.location.hash.substring(1);
});
$(window).trigger('hashchange');