I've got a problem when working with VueJS which is kinda getting on my nerfs since I know that it probably relies on something very small but still I'm here trying to get it running for hours.
I'm using a template which should represent a searchbar with the solutions under it. To show the solutions, I'm looping over an object (I'm not done including the filtering of the solutions to that point - wanted to finish this one first). The thing I was trying to do now was filling in the searchbar value with the value I select in the solutions (passing it with a click event). But somehow my click event doesn't trigger.
I've got the following code-snippet:
<template>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">🔍</div>
</div>
<input
type="text"
class="form-control"
#focus="searchFocus = true"
#blur="searchFocus = false"
v-model="searchQuery"
placeholder="Search for vehicles..">
<div class="container p-0">
<div class="dropdown-menu search" v-show="searchFocus">
<a class="dropdown-item bus" href="#"
v-for="vehicle in vehicleObjects"
:key="vehicle.id.key"
v-on:click="setSelectedToQuery(vehicle)">
<span class="ml-4">Bus {{ vehicle.id.name }}
<span class="badge badge-secondary"> {{ vehicle.licenseNumber }}</span>
<span>
</a>
</div>
</div>
</div>
</template>
Am I missing something quite obvious? How can I get the click-event running/triggering?
Thanks in advance
Best Regards
There are few things "off" I'll list them by level of impact
#blur fires before click, essentially invalidating #click
anchors <a ...> need to prevent redirect. You can use #click.prevent="... to prevent event propagation, or use another element, since you don't have href defined anyway.
one of your span elements is not closed (<span> instead of </span at the end)
To handle #blur blocking #click, you could use #mousedown instead of #click, since it executes first.
Maybe it's the solution: close your last span
Click work for me: https://codesandbox.io/s/morning-browser-fgftf
Related
Right now I have a relatively simple template in my angular controller,
<div class="dropdown-menu" [attr.aria-labelledby]="item.name" *ngIf="item.children">
<button class="dropdown-item" *ngFor="let child of item.children; let last = last" (click)="child.action">{{child.name}} <hr *ngIf="!last"></button>
</div>
However my (click) event binding disappears from the DOM when everything is compiled. If I change the button to a link element and change (click) to [href] it works so.
Appreciate any help, just getting to grips with Angular2 :)
Edit:
I apologise, I had a moment of madness (stupidity)...
You probably mean
(click)="child.action()"
or
(click)="child.action($event)"
otherwise it won't be called.
I have a weird quirk that appears to only be happening in ie9 with AngularJS.
I have a repeated button with ng-repeat and a function with ng-click. When the button is clicked the function appears to run multiple times and goes between the buttons. I've tried to remove as much conflicting code as possible and whittled it down to these parts.
I have come to the conclusion that it only happens on the add remove class if else statement, when this is removed it appears to work ok.
Here is my code:
<div class="row multiple-question">
<button
data-num="{{item.QuestionNo}}"
class="ansbtn" data-ans="{{ answer.AnswerValue }}"
ng-click="triggerNext(item.QuestionNo, answer.AnswerValue)"
ng-repeat="answer in item.Answers">
<span class="letter num{{ $index + 1 }}"></span>
<h3>
<span class="circle right">
<span class="icon-checkmark"></span>
</span>
</h3>
<p>{{ answer.Answer }}</p>
<span class="arrow-right-button"></span>
</button>
</div>
And the function code is here:
$scope.triggerNext = function(QuestionNo, AnswerValue) {
console.log('function run');
console.log(QuestionNo);
console.log(AnswerValue);
if($('.ansbtn[data-ans="'+AnswerValue+'"]').hasClass('active')) {
$('.ansbtn[data-ans="'+AnswerValue+'"]').removeClass('active');
} else {
$('.ansbtn[data-num="'+QuestionNo+'"]').removeClass('active');
$('.ansbtn[data-ans="'+AnswerValue+'"]').addClass('active');
}
};
One possible solution might be to enclose the button with a div or span element, and having that serve the ng-repeat, keeping your ng-click on each button.
Hey just posting my solution, although the issue still remained if I stuck to using ng-click, the issue went away if I binded the button click to the document, this is NOT the right way to do it as I understand. But it worked.
<div class="base-view app-loaded" data-ng-class="cssClass.appState">
<div class="ng-scope" data-ng-view="">
<div class="ng-scope" data-ng-include="'partial/navigation/navigation.tpl.html'">
<div class="feedback-ball feedback-ball-show feedback-ball-big" data-ng-class="feedback.cls" data-ng-click="outside($event)" data-feedback-ball="">
<span class="close-button"></span>
<h2 class="ng-binding">Welcome to Garbo</h2>
<div class="ng-scope ng-binding" data-ng-bind-html="feedback.html" data-ng-if="feedback.html">
<p>Here you can play in style in a safe and secure environment.</p>
<p>
<a class="btn" href="/account">My Account</a>
<a class="btn" href="/deposit">Deposit</a>
</p>
</div>
</div>
</div>
I want to find and click /account button inside data-ng-bind-html="feedback.html", I can find data-ng-bind-html="feedback.html" but I could not find account button inside it. when I try to find account button, it gives me error that page has multiple account button so be more specific.
I tried element.().element() but it didnt work, please help
The problem is that webDriver is finding more than one element that matches. You have element for finding just one, and element.all for taking an array of elements, then you can use .get() and the index of the element, or first() or last(). You can do,
element(by.css('[data-ng-bind-html="feedback.html"]')
.element(by.cssContainingText('.btn', 'My account'));
If it doesn't work then you might have more than one, if so, you can use,
element(by.css('[data-ng-bind-html="feedback.html"]')
.all(by.cssContainingText('.btn', 'My account')).first();
But there you will have more than one button in your HTML, webDriver will get only one,
another thing, is to use the count() that gives you the length of the array of elements, and you can know how much you have.
element calls can be chained to find elements inside other elements, so your element().element() solution should work.
Alternatively, you can construct an xpath expression to reach the link inside the appropriate div:
element(by.xpath('//div[#data-ng-bind-html = "feedback.html"]//a[#href = "/account"]'))
First of all, I want to say that I have seen some topics already with similar question. I have tried withe the responses of these topics, but I have not been able to find a solution for my problem. Maybe the difference is that I am using AngularJS
(HTML)
<li class="article-list_item" ng-repeat="noticia in news" >
<article class="article_news" id="newsBlock{{noticia.id}}" >
<header>
<h1 class="article_newsTitle">
<a href="http://www.google.es" rel="tooltip" title="{{noticia.title}}"
data-toggle="modal" ng-bind-html-unsafe="noticia.shortTitle"></a>
</h1>
</header>
</article>
(JS)
$(document).ready(function () {
$(".article_news").click(function (event) {
$(this).addClass("approved");
});
});
What I am trying to do is to add the class "Approved" to the object I am clicking.
But when I click the link inside the <article> , I dont want to add the Class. Instead, I want the browser to open the URL.
How can I do this? Must I use stopPropagation(), preventDefault() or similar? How should I use them?
Thanks in advance
Well, Angular automatic filter link action if you implement it in angular way. For implementing it in angular way you should create directive to bind click event which handles your issue. Still you can solve it like this.
ng-click="$event.stopPropagation()"
Your HTML
<article class="article_news" id="newsBlock{{noticia.id}}" >
<header>
<h1 class="article_newsTitle">
<a ng-click="$event.stopPropagation()" href="http://www.google.es" rel="tooltip" title="{{noticia.title}}"
data-toggle="modal" ng-bind-html-unsafe="noticia.shortTitle"></a>
</h1>
</header>
</article>
I'm trying to expand a DIV element on my angular layout. I'm using angular-masonry to give a mason-style to my layout, but now I need to expand those boxes on click. I've tried a lot of stuff, but it kept overlapping my others elements. Soon figured out that I'll have to write it the "angular way" so I don't run into DOM manipulation conflicts.
Here's my code:
<div class="row" masonry>
<div
class="masonry-brick item-component col-sm-4 col-md-4"
ng-repeat="component in components.components | filter : components.filterByFilter | filter : searchText"
ng-click=" // expand #expandable // "
>
<div class="component-wrapper">
<div class="component">
<img ng-src="#{{ component.thumb }}"/>
</div>
<div class="component">
#{{ component.name_en }}
</div>
</div>
<div id="expandable" class="expand-me codes-wrapper">
<p>XXX</p>
<p>YYY</p>
<p>ZZZ</p>
</div>
</div>
</div>
Here's what I want to accomplish in the "angular way": http://codepen.io/desandro/pen/daKBo
In your example (http://codepen.io/desandro/pen/daKBo) if you click on an element there are two things that will be done:
(1) the style of the clicked item is changed
(2) the function masonry is called on the container element that keeps the divs.
I can't see such a function in angular-masonry pre builded. So i'll guess you have to do this by your self. Here are some hints how to solve this (i havn't try it in real)
Bind a function to ng-click. In this function set a state to the current component. This state shoud be used to toggle the css-class of the element. you can use ng-class for this.
The second part is little bit more complex. I would suggest write a direcive 'masonry-change-listener' and bind it to the element that is bound to the same element with the directive masonry. If you click on a component $emit an event, that something has changed. In the directive 'masonry-change-listener' listen to this event. if this event fires you have to call $element.masonry.apply($element) in the link function.