We Keep Coding

Get Portion of Class Name, in order, on Web Page Using JavaScript?

Is there a way using Javascript, to pull a portion of a class name in order (top to bottom) on a web app? I have an issue where I need to get information on a 3rd party web app we are integrating into our site. I can't change their code. What I want to do is take the class name (e.g. class="index solid-shape-large-rating-fair AnalysisCategory" or class="index solid-shape-large-rating-poor AnalysisCategory" etc.) and grab the value after "rating-" in the class name (class="index solid-shape-large-rating-[want this value] AnalysisCategory"). So in the example I have, I would get back, in this order, top to bottom, "fair", "poor" and "excellent". Is this possible? If so how? Please be aware there will be more mark-up between elements in my example, if that impacts the answer? I just cleaned up the non-related code for presentation purposes. They aren't stacked directly on top of each other as in my example.
///////Top Element//////////
<div class="stack-item">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 text-center index-area">
<label tabindex="0">YOUR INDUSTRY BORROWING HISTORY</label>
<div class="index solid-shape-large-rating-fair AnalysisCategory">
MODERATE RISK
</div>
</div>
</div>
</div>
//////////////Middle Element////////////////////
<div class="stack-item">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 text-center index-area">
<label tabindex="0">TENURE OF YOUR BUSINESS</label>
<div class="index solid-shape-large-rating-poor AnalysisCategory">
POTENTIAL CONCERN
</div>
</div>
</div>
</div>
////////////Bottom Element/////////////
<div class="stack-item" style="">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 text-center index-area">
<label tabindex="0">YOUR BUSINESS PROFITABILITY</label>
<div class="index solid-shape-large-rating-excellent AnalysisCategory">
EXCELLENT
</div>
</div>
</div>
</div>
Thank you!

I found this answer on another site.
$(function() {
$('[class*="solid-shape-large-rating-"]').each(function(i, e) {
var result = this.className.match(/solid-shape-large-rating-(.*?)\s+/);
console.log(result[1]);
});
});

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...

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>

Same Height DIV's using NG-Repeat

I'm having an issue trying to get two divs that are side by side the same height when the content for each of the divs are generated using an ng-repeat.
Flex box stops the site being responsive and i can't work out when would be a suitable time to call a Jquery function as the views are nested and the page doesn't actually load when the new html is displayed. I have tried ng-repeat-start and end to no avail.
Ideally once the content has loaded i would the div on the right to be the same height as the div on the left.
Would really appreciate any help with the problem.
Cheers
EDIT - Code Included
<div class="row">
<div class="noSpacing col-xs-6">
<div class="col-xs-12 noSpacing rottnestGreen">
<div ng-repeat="bh in bikeHire" class="row">
<p class="col-xs-6">{{bh.type}}</p>
<select class="inline col-xs-3 noSpacing np" ng-model="bikeHire[$index].quantity" ng-options="ddl for ddl in ddlNumbers" ng-change="addOps(bh.type, bikeHire[$index].quantity, bh.price)"></select>
<p class="col-xs-3 blueText">{{bh.price | currency}}</p>
</div>
</div>
</div>
<div class="noSpacing col-xs-6">
<div class="col-xs-12 noSpacing np rottnestGreen">
<div ng-repeat="sf in sAndF" class="row">
<p class="col-xs-6">{{sf.type}}</p>
<select class="inline col-xs-3 noSpacing np" ng-model="sf.quantity" ng-options="ddl for ddl in ddlNumbers" ng-change="addOps(sf.type, sf.quantity, sf.price)"></select>
<p class="blueText col-xs-3">{{sf.price | currency}}</p>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>

Is it something like this you are looking for? https://jsfiddle.net/yczgaLgm/2/
Wrapping everything in a container:
<div class="row container">
And then styling the container to use flexing is the way I usually do this
.container {
display: flex;
flex-wrap: wrap;
}
The biggest downside though is IE support, I dont hope you are supporting below IE10?

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">