ng-show on click in AngularJS - javascript

I'm having trouble getting ng-show to work correctly when a user clicks an icon. The behaviour should be as follows: The parent div loads and shows some content. When the user clicks the play icon, the contents of the div become hidden. However, right now it doesn't seem to be working. See code below:
<div class="col-sm-10 col-md-8 center-block" ng-show="showMe = true">
<div class="play">
<span class="icon_play" ng-click="showMe=false"></span>
</div>
</div>

This syntax is incorrect:
ng-show="showMe = true"
When evaluated, it assigns true to the field 'showMe'.
You should put instead:
ng-show="showMe"
This won't fix your problem because the field 'showMe' is not initialized to true.
So you could invert your logic:
<div class="col-sm-10 col-md-8 center-block" ng-show="!dontShowMe">
<div class="play">
<span class="icon_play" ng-click="dontShowMe=true"></span>
</div>
</div>
or initialize showMe in your controller code.

I think you want this:
<div class="col-sm-10 col-md-8 center-block" ng-show="showMe" ng-init="showMe = true">

You're setting showMe to true instead of checking if it's set to true.
<div class="col-sm-10 col-md-8 center-block" ng-show="showMe">
<div class="play">
<span class="icon_play" ng-click="showMe=false"></span>
</div>
</div>

You want an expression for your ng-show, not an assignment. See the doc here:
https://docs.angularjs.org/api/ng/directive/ngShow
you want something like this:
<div class="col-sm-10 col-md-8 center-block" ng-show="showMe">
<div class="play">
<span class="icon_play" ng-click="showMe=false"></span>
</div>
</div>
http://jsfiddle.net/thomporter/tcVhN/

Related

Selenium - cannot click on an element inside a modal

I am using Selenium and java and I cannot click on an element inside a modal.
The scenario is this:
after clicking on an item inside a frame, it opens up a modal and I need to click on an element inside this modal but I cannot get it.
I already tried with:
js.executeScript("document.getElementById('saveexit').scrollIntoView(true);");
I also tried with switchTo() this way:
while (itr.hasNext()) {
String popup = itr.next();
System.out.println("itr: " + popup);
driver.switchTo().window(popup);
}
Here is the html of my modal:
<div class="modal-dialog">
<div class="modal-content modal-custom-content">
<div class="modal-header">
...
</div>
<div class="modal-body">
<form id="formTo" class="form-container">
<div class="row">
...
</div>
<div class="small-space"></div>
<input ...>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
...
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
...
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
...
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
...
</div>
</div>
<div class="small-space"></div>
<div class="row">
...
</div>
</form>
</div>
<div class="small-space"></div>
<div class="modal-footer">
<div class="row text-center">
<div class="col-md-6 col-sm-6 col-xs-12">
<button class="btn modal-button full-btn" id="saveexit" type="button">SAVE AND EXIT</button>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
...
</div>
</div>
</div>
</div>
</div>
this is the CSS Path as taken from firefox dev tool:
html.no-touch body div.remodal-wrapper.remodal-is-opened div.modaliAdesione.remodal.remodal-is-initialized.remodal-is‌​-opened div.modal-dialog div.modal-content.modal-custom-content div.modal-footer div.row.text-center div.col-md-6.col-sm-6.col-xs-12 button#saveexit.btn.modal-button.full-btn
the object is never found.
Question 1: if an element is inside a modal has to be managed
differently?
Question 2: How to finally have the click on the button
saveexit working?
here is shared a code snippet of the html: https://codeshare.io/arLW9q
Here is the java code:
wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//*[#id=\"saveexit\"]")))
I have also tried with:
cssSelector: #saveexit
cssPath: html.no-touch body div.remodal-wrapper.remodal-is-opened div.modaliAdesione.remodal.remodal-is-initialized.remodal-is-opened
div.modal-dialog div.modal-content.modal-custom-content div.modal-footer div.row.text-center div.col-md-6.col-sm-6.col-xs-12
button#saveexit.btn.modal-button.full-btn
xpath: //*[#id="saveexit"]
Please note: if I run document.getElementById('saveexit').click(); from browser's console it works out
As you are using the Selenium-Java clients as per best practices the first and foremost trial must be with invoking the highly efficient and proven click() method. Depending on the errors resulting out of click() method we can work on other alternate solutions.
As I can see from your code trials with JavascriptExecutor and switchTo().window(), you havn't identified the WebElement representing the SAVE AND EXIT button well.
To click on the SAVE AND EXIT button you can use the following code block :
new WebDriverWait(driver, 5).until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//div[#class='modal-dialog']//div[#class='modal-footer']//button[#class='btn modal-button full-btn' and #id='saveexit']"))).click();
I fixed it using jquery inside my script;
here is the linecode:
js.executeScript("$('#saveexit').trigger('click');");
I hope it can help someone in future.
I dont know why plain javascript was not working...

Cannot set .color property in JS

<button id="change_button" class="btn btn-primary" onclick="ColorMe()">CLICK ME</button>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="grid_element">
<div class="title">
COLOR IS:
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="grid_element">
<div class="title">
COLOR IS:
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="grid_element">
<div class="title">
COLOR IS:
</div>
</div>
</div>
</div>
Clicking a button is supposed to color all the elements of class "grid_element" into red but in never happens.
function ColorMe() {
document.getElementsByClassName("grid_element").style.color = ("red");
}
The problem is said to be Cannot set property 'color' of undefined
at ColorMe (js.js:2) but I know it worked in the same way many times before.
The problem is that you are attempting to use the .style property on the collection of elements found by .getElementsByClassName() instead of on each of the elements within the collection.
Also (FYI), .getElementsByClassName() returns a "live" node list, which causes the entire DOM to be re-scanned every time you access the node list variable and that can impact performance quite a bit. There are limited use cases for that, so you probably want a "static" node list more often than not. For that, use .querySelectorAll().
function ColorMe() {
// Get all the matching elements into a JavaScript Array
var elements = Array.prototype.slice.call(document.querySelectorAll(".grid_element"));
// Loop over each element....
elements.forEach(function(el){
el.style.color = "red"; // Adjust the element's style
});
}
<button id="change_button" class="btn btn-primary" onclick="ColorMe()">CLICK ME</button>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="grid_element">
<div class="title">
COLOR IS:
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="grid_element">
<div class="title">
COLOR IS:
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="grid_element">
<div class="title">
COLOR IS:
</div>
</div>
</div>
</div>

Angular-vs-repeat - Scope value is empty when col-md class is used

Scope value becomes empty when used inside any section which has col-md class. Please refer the plunker in comment. The scope value becomes empty when
<div style="visibility:hidden">{{item.text}}</div>
line is removed.
I'm not sure this is bug or correct fix, but you can definitely set height to vs-render to 20, does fixed the issue. Just say vs-repeat="20"
<div class="repeater-container" vs-repeat="20"
style="overflow:auto;overflow-anchor: none;">
<div ng-repeat="item in items">
<div class="col-md-12 col-xs-12 bby-padding-top-10">
<label>{{item.text}}</label>
</div>
</div>
</div>
Plunker Here
col-md-12 col-xs-12 should be child of element with class row
<div class="repeater-container row" vs-repeat style="overflow:auto;overflow-anchor: none;">
<div ng-repeat="item in items" class="col-md-12 col-xs-12 bby-padding-top-10">
<label>{{item.text}}</label>
</div>
</div>

Buttons inside bootstrap well don't work

So I have the following code:
https://jsfiddle.net/8rhscamn/
<div class="well">
<div class="row text-center">
<div class="col-sm-1"> </div>
<div class="col-sm-5 col-xs-12">
<button type="button" class="btn btn-success" id="butt1" onclick="alert('Hola')">Button <br />One</button>
</div>
<div class="col-sm-5 col-xs-12">
<button type="button" class="btn btn-default" id="butt2" onclick="alert('Hello')">Button <br />Two</button>
</div>
<div class="col-sm-1"> </div>
</div>
</div>
It is a simple bootstrap well with columns inside that contains buttons that should execute a simple alert command. Problem is, when resized to the xs size column (like in the fiddle I am including), the buttons don't work. The buttons don't even are recognized as such (this is, the mouse indicator does not switch to the hand indicator when the pointer is over the button).
Any clue what I am doing wrong? Any help will be appreciated, thanks!
Your last div
<div class="col-sm-1"> </div>
Do you need it? If you delete this div you can click on button, because this div cover your button so you can't click on it.
Simply remove the col-xs-12 classes. By default, the col-sm-* classes become full-width on small screen widths anyway. The floats in col-xs-* were causing the issue.
JSFiddle
If you were using the col-sm-1 elements as horizontal padding, I suggest you use the col-sm-offset-* classes, eg
<div class="row">
<div class="col-sm-5 col-sm-offset-1">
<button>...</button>
</div>
<div class="col-sm-5">
<button>...</button>
</div>
</div>
JSFiddle
<!-- Their are 2 ways. either make a function or can go through the second way -->
function f(thetext)
{
alert(thetext);
}
<button type="button" class="btn btn-success" id="butt1" onclick="f('text1')">Button <br />One</button>
<button type="button" class="btn btn-default" id="butt2" onclick="f('text2')">Button <br />Two</button>
<!--Or you can go the following way by deleting the following line in your code.-->
<div class="col-sm-1"> </div>

Angularjs - auto submit the first item

I want to select the first item in my ng-repeat as soon the list is loaded to the user, is there an easy way to do that?
Right now im using the ng-click, but i dont know how to automatic click that first item.
This is my ng-repeat
<div ng-hide="hideMembershipSection" ng-repeat="membership in memberships" class="row">
<div class="membership-box col-lg-9 col-md-9 col-sm-9 col-xs-8">
<img class="img-responsive" ng-src="/images/onlinesalg_ny/{{ membership.image }}">
<h1 class="text-uppercase">{{ membership.titel_onlinesalg }}</h1>
<p>{{ membership.onlinesalg_produktbeskrivelse }}</p>
</div><!-- col-lg-9 -->
<div class="membership-box__price col-lg-3 col-md-3 col-sm-3 col-xs-4 text-center">
<h1>
<small>Kr.</small>
{{ membership.pris }},-
</h1>
<button ng-click="selectMembership(membership)" type="button" ng-class='{"btn-success": membership.pid == success}' class="text-uppercase btn btn-primary" ng-disabled="membership.pid == success">{{ membership.pid === success ? "valgt" : "vælg"}}</button>
</div><!-- col-lg-9 -->
In the controller, after the code where you load the list into $scope.memberships, what about using the line:
selectMembership($scope.memberships[0]);
This is essentially doing what ng-click is doing, but after the list is loaded. It depends on what your selectMembership function does though.
you can use ng-init to select first element by default as in ng-init="ngModelFieldName=memberships[0]
i dont know the name of the ng-model hence gave the name ngModelFieldName
<div ng-hide="hideMembershipSection" ng-repeat="membership in memberships" ng-init="ngModelFieldName=memberships[0]" class="row">

Categories