Why show hide option does not work?
The idea is to be able to use class name with space like class="BXXX 01"
where XXX 01 is dynamic data
Here is not working jsfidle: https://jsfiddle.net/master1991/fq32Lhe9/36/
$(document).on('keyup', ".BenterInput", function() {
var item = $(this).attr('data-item');
var num = $(this).val();
if ($.isNumeric(num)) {
$("a[class='B" + item + "']").show();
} else {
$("a[class='B" + item + "']").hide();
}
console.log(item + ' ' + num);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="qInDocBXXX"></div>
<input type="text" name="valueToAdd" data-item="XXX" class="BenterInput">
<a class="btn btn-default btn-xs add_row BXXX" data-but="B" style="display: none;">XXX</a>
The idea is to be able to use class name with space like class="BXXX 01"
That's not a class name with a space in it; that's two classes.
Matching against the entire classNames list is fragile, because you're having to include a whole bunch of irrelevant classnames, and if any of them differ or are missing the match will fail. It will also break if the classnames are correct but happen to come in a different order:
div[class="a b c"] {
background-color: green
}
<div class="a b c">One</div>
<div class="b c a">two</div>
I would strongly recommend against that approach.
Instead you can just match the two specific classes you're interested in:
a.BXXX.AB {...}
...or in your case (assuming item contains the string "XXX AB")
$("a.B"+item.replace(/ /g,"."))
The reason your code does not work is that the actual className is btn btn-default btn-xs add_row BXXX AB so you cannot use
$("a[class='BXXX AB']")
to make your code work, you would have to do
$("a[class='btn btn-default btn-xs add_row B" + item + "']").show();
but that would assume the order of your classes stayed the same.
I suggest you instead toggle the element on and off using the isNumeric instead of show/hide
NOTE: If you have data-item="XXX.AB" then it works without the split
$(document).on('keyup', ".BenterInput", function() {
var item = $(this).attr('data-item');
var num = $(this).val();
$(`a.B${item.split(" ").join(".")}`).toggle($.isNumeric(num));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="qInDocBXXX"></div>
<input type="text" name="valueToAdd" data-item="XXX AB" class="BenterInput">
<a class="btn btn-default btn-xs add_row BXXX AB" data-but="B" hidden>XXX</a>
Related
my html is structured like so:
<div class='quiz-question'>
<div name='qc-1' class='btn quiz-choice ' >3</div>
<div name='qc-2' class='btn quiz-choice correct' >4</div>
<div name='qc-3' class='btn quiz-choice ' >5</div>
</div>
i want to use jquery to select the name attribute from the correct div when you click on ANY of the quiz-choice divs.
so no matter which one i click on i'd like to get the value of the name from whichever one has the correct class
i think it should be something like this but it keeps coming back as undefined.
jQuery('.quiz-choice').click(function(){
var correctChoice = $(this).parent('.quiz-question').children('.quiz-choice').hasClass('correct').attr('name');
});
I am having some problem with my code. Iam trying to delete a "joke" from a list but it always takes out the joke that i typed in before the joke i am deleting. I don't quite get what i am doing wrong here.
delJoke(index) {
this.setList.splice(index,1);
this.viewJoke = {};
console.log(this.setList.splice);
},
<div class="col list-group-item" v-for="(view, index) in viewJoke" :key="index">
<div class="col">Joke: {{view.joke}} </div>
<div class="col"> Punchline: {{view.punchline}}</div>
<div class="col">Category: {{view.category}}</div>
</div>
<button type="button" class="btn btn-dark" active href="#" v-for="joke in viewJoke"
#click="delJoke(index)"></button>
try to pass joke object into function, and find index
delJoke(joke) {
var index = this.setList.indexOf(joke)
... your code
}
your delete button must be inside the v-for.
and the delete function should look like this
delJoke(index) {
this.viewJoke = this.viewJoke.splice(index,1);
}
Here is the html source code of page that loads array of products:
<div class="container" *ngFor="let product of products">
<div class="product">
<div class="img-container">
<img
//image url
</div>
<div class="product-info">
<div class="product-content">
<h1>{{product.name}}</h1>
<p>{{product.description}}</p>
<p>Price: {{product.price}} $</p>
<p>Quantity:
<button type="button" class="btn btn-danger" (click)="minusQuantity(product)">-</button>
<input type="number" class="input-quantity" [(ngModel)]="product.count"/>
<button type="button" class="btn btn-success" (click)="plusQuantity(product)">+</button>
<div class="buttons">
<a class="button add" (click)="addToCart(product)">Add to Cart</a>
</div>
</div>
</div>
</div>
</div>
When page is loaded, numeric input is empty (there is no value visible inside). Hence clicking on - and + buttons to invoke minusQuantity() and plusQuantity() have no effect on the product.count and displaying it on the page.
I've tried to set default value, but it is overridden by ngModel. If i use only value without ngModel, then input does not react to any changes caused by -/+ buttons (since it's just hardcoded "1").
But if I input e.g. "1" manually on the input, then + and - buttons do work, since there is a value provided, and it works OK.
Question is:
How avoid this issue? Is there any way to initialize input type with some value and then pass it to the product.count correctly? Or the approach should be totally different?
Fragments of components that handle +/- methods:
product.component.ts
plusQuantity(product: ProductModel) {
if (product.count < 99) {
this.cartService.increaseQuantity(product);
}
}
minusQuantity(product: ProductModel) {
if (product.count > 1) {
this.cartService.decreaseQuantity(product);
}
}
cartService.ts
increaseQuantity(product: ProductModel) {
product.count = product.count + 1;
this.orderElement.quantity = product.count + 1;
return product.count;
}
decreaseQuantity(product: ProductModel) {
product.count = product.count - 1;
this.orderElement.quantity = product.count - 1;
return product.count;
}
Use a javascript file with the code:
var cartService = {}
cartService.plusQuantity = function(product) {
product = ProductModel;
if (product.count < 99) {
this.cartService.increaseQuantity(product);
}
};
cartService.minusQuantity = function(product) {
product = ProductModel;
if (product.count > 1) {
this.cartService.decreaseQuantity(product);
}
};
Then it might work!
Line:
<div class="btn btn-second-in-pair-not-desired btn-tall">Clear search</div>
<div class="btn btn-second-in-pair-not-desired btn-tall">Raw Search</div>
<div class="btn btn-second-in-pair-not-desired btn-tall">Basic Search</div>
<div class="btn btn-primary-stand-alone btn-tall search-btn">Search</div>
Here is what i have tried so far -
".btn:contains('Clear search')" but selenium is not able to catch it
CSS Selector doesn't support :contains() anymore. You have to use XPath "//div[text()='Clear search']".
I don't think css supports searching by content of the html element.
Why not try:
<div class="btn btn-second-in-pair-not-desired btn-tall clear">Clear search</div>
<div class="btn btn-second-in-pair-not-desired btn-tall raw">Raw Search</div>
<div class="btn btn-second-in-pair-not-desired btn-tall basic">Basic Search</div>
<div class="btn btn-primary-stand-alone btn-tall search-btn">Search</div>
And then selecting via:
.btn{
color:red;
}
.clear, .raw, .basic, .search-btn{
color:blue;
}
Or you could always try using ids
<div id="search">Search</div>
select:
#search{
...
}
If your using Selenium, it also accepts XPATH strings, which can sometimes be more flexible than CSS Selectors in some instances. Because I'm super lazy as well, I find it quite handy that you can right click a tag in the Elements view of DevTools and "Copy > Copy XPath"
webDriver.findElement(
By.xpath(
"//div[text()='Clear search']"
)
).click();
you cannot change the class depending on the content ?
<?php
$content = $your_content_from_database;
$arr_content = explode(" ", $content);
$first = $arr_content[0];
echo '<div class="btn btn-second-in-pair-not-desired btn-tall clear" data-content="'.$first.'">'. $content. '</div>' ; ?>
and the CSS
[data-content="Clear"]{
color:red;
}
Hi on the basis of the source provided by you in the question you can use css selector as below to identify the elements
// take everything inside the list for div with same class
List<WebElement> mycsselements = driver.findElements(By.cssSelector(".btn.btn-second-in-pair-not-desired.btn-tall"));
System.out.println("Size of the div elements with same class name : " + mycsselements.size());
// printing value one by one
System.out.println("First value is " + mycsselements.get(0).getText());
System.out.println("Second value is " + mycsselements.get(1).getText());
System.out.println("Third value is " + mycsselements.get(2).getText());
// and for the last one do it like below
System.out.println("Last value is " + driver.findElement(By.cssSelector(".btn.btn-primary-stand-alone.btn-tall.search-btn")).getText());
and the output is :
Size of the div elements with same class name : 3
First value is Clear search
Second value is Raw Search
Third value is Basic Search
Last value is Search
Hope this helps you
User below css code:
css=div:contains('Clear search')
More details click on link: SauceLab
I have list of posts that gets displayed using ng-repeat. In this I have one question and multiple answers. Answers are displayed in span tag which behaves as option button. Here is the problem, if I select one answer (option button) from one question then similar numbered answer get selected in another question.
my code for html:
<div ng-repeat="post in posts" >
<form id="pollForm" ng-submit="submitPoll()">
<span class="quest"> <strong>Poll:</strong>{{post.question}}</span><br>
<div class="post-container">
<br>
<span ng-style="{'background-image':'url('+ img1 +')'}" ng-click="chgImg(1)"
class="Pollchoice--radio">
</span>
<span class="Pollchoice--text">{{post.choice1}}</span><br><br>
<span ng-style="{'background-image':'url('+ img2 +')'}" ng-click="chgImg(2)"
class="Pollchoice--radio"></span>
<span class="Pollchoice--text">{{post.choice2}}</span><br><br>
<span ng-style="{'background-image':'url('+ img3 +')'}" ng-click="chgImg(3)"
ng-show="post.choice3" class="Pollchoice--radio"></span>
<span ng-show="post.choice3" class="Pollchoice--text">{{post.choice3}}</span><br><br>
<span ng-style="{'background-image':'url('+ img4 +')'}" ng-click="chgImg(4)"
ng-show="post.choice4" class="Pollchoice--radio"></span>
<span ng-show="post.choice4" class="Pollchoice--text">{{post.choice4}}</span><br><br>
<hr/>
<div>
<button id="btn" type="submit" class="btn btn-default">Vote</button>
<span style="margin:0 0 0 20px"> 50,000 votes</span> <span> 23 hours left</span>
</div>
<br>
</div>
<br><br><br>
</form>
</div>
javascript:
$scope.chgImg = function(varParam){
//alert(varParam);
if(varParam === 1){
$scope.img1 = "/images/chk.svg";$scope.img2 = undefined;
$scope.img3 = undefined;$scope.img4 = undefined;
}
if(varParam === 2){
$scope.img2 = "/images/chk.svg";$scope.img1 = undefined;
$scope.img3 = undefined;$scope.img4 = undefined;
}
if(varParam === 3){
$scope.img3 = "/images/chk.svg";$scope.img1 = undefined;
$scope.img2 = undefined;$scope.img4 = undefined;
}
if(varParam === 4){
$scope.img4 = "/images/chk.svg";$scope.img1 = undefined;
$scope.img2 = undefined;$scope.img3 = undefined;
}
};
Thanks in advance.
This problem happens due to there are many HTML tags that have the same id.
so you need to differentiate between every id.
for example you will add question id & answer id in order to make it unique.
OR
in your JSON data add a new property called ImageURL and set is undefiend
and in your binding
ng-style="{'background-image':'url('+{post.ImageURL}+')'}"
and in ng-click pass the object
ng-click="chkimg(post)"
and in chkimg function set the ImageURL with the value
post.ImageURL="/images/chk.svg";
IMO there are some problems with the code, you are iterating over posts array but not using post object in the param of chgImg also your ngrepeat would print as many img1, img2 img3 as many time it would iterate and hence when you set it in scope this would be ambiguous for the scope to reflect the change in any one div, solution to this would be through some index to be associated with the img1+postID something like this and then modify the method accordingly as well.
You can index each element using some index and keep incrementing that in ngrepeat, that way would make the elements unique and allow to keep and index.