I've made two tables, and I added one checkbox for each.
The checkboxes aren't default checkbox, but it's an image that gets changed on click, here the code:
<button class="btn btn-lg btn-customPrint-md no-print" ng-click="checkBoxPrint2 = !checkBoxPrint2"><i class="fa fa-1x" ng-class="checkBoxPrint2 ? 'fa-square-o' : 'fa-check-square-o'"></i></button>
so onClick it changes the FontAwesome icon.
Then I have a Print Button, which prints the page following the print css rules:
<button class="btn btn-lg btn-custom-md pull-right" ng-click="vm.$window.print()"><i class="fa fa-print fa-2x"></i></button>
Now I would like to know how can I make it print ONLY the tables that have the checkbox checked (meaning with "fa-check-square-o" icon) ?
My initial idea was doing it with ng-class, so when the button is pushed, it gives a "noPrint" class to the element that hides it from print, does it make sense?
You can use ng-show or ng-hide based on your boolean properties to hide/show tables.
I'm not sure that I understand your question perfectly but a simple example would be:
$scope.showElement = false;
<div ng-show="showElement">This only shows if the variable is true</div>
In your case you could use checkBoxPrint2 as an expression for ng-show/hide, on each one of the elements that you would like to hide. You could for example only keep the headers always visible but hide the contents.
Here's more information and examples for you:
https://www.w3schools.com/angular/ng_ng-show.asp
Related
I have a puppeteer implementation I'm working on to fill out a form on a website that (sadly) doesn't offer an API.
Everything goes great until I use this code to click the second button on a list of buttons:
await page.click('#calculateCharge'); // open the set values dialog
Reason being, the #calculateCharge id is used multiple times on the page, like this:
<button id="calculateCharge" type="button" name="amount" class="btn btn--secondary btn--full-mobile btn--full "><span>$ 80.00</span></button>
<button id="calculateCharge" type="button" name="amount" class="btn btn--secondary btn--full-mobile btn--full "><span>$ 35.00</span></button>
<button id="calculateCharge" type="button" name="amount" class="btn btn--secondary btn--full-mobile btn--full "><span>$ 42.00</span></button>
Puppeteer clicks the first button every time because whoever wrote the HTML didn't id the buttons dynamically. The ids are all the same, so I don't know how to access the 2nd or third buttons. I also don't have access to the HTML source (not my page), so I can't fix it from the other side.
Any ideas?
I solved my issue by using xPaths instead of ids.
First, right click on the button in your browser and click inspect. In the inspector's HTML tree, right click on the highlighted HTML and copy the full xPath.
Second, set the element as a variable using the copied xPath. Note the x after the $.
let butt = await page.$x('xPath')
Last, click the button by referencing the first position of the variable's array.
await butt[0].click()
Copy/paste from my production file:
let butt = await page.$x('/html/body/div[1]/div/main/div[1]/div[2]/div[2]/div/div/div/form/div[1]/div[2]/table/tbody/tr[5]/td[2]/div/div/button');
await butt[0].click();
I come across two following code snippets :
function myFunction() {
var x = document.getElementById("demo");
x.style.fontSize = "25px";
x.style.color = "red";
}
<p id="demo">Click the button to change the layout of this paragraph</p>
<button onclick="myFunction()">Click Me!</button>
<h1>My First JavaScript</h1>
<button type="button" onclick="document.getElementById('demo').innerHTML = Date()"> Click me to display Date and Time.</button>
<p id="demo"></p>
I am not able to understand why the different type="button" attribute has been added in second code snippet?
What's the difference between two buttons?
In your examples the addition of the type="button" makes no difference whatsoever (remove it and you'll see).
Typically you would specify the type of your button if it is being used in a form, as the default type of <button> is submit, and clicking it would cause a <form> to be submitted, and typically either reload the current page or load a new page.
By specifying the type as button instead of the default submit, you prevent that behavior.
The <button> tag defines a clickable button.
Inside a <button> element you can put content, like text or images. This is the difference between this element and buttons created with the <input> element.
It has so many Attributes and type is one of them and this type has 3 values:
button (Normal button)
reset (to handle reset action, specially for form)
submit (to handle form submit)
To know other properties you can read:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
https://www.w3schools.com/tags/tag_button.asp
The attribute type decide the style of <Button>. It's default value is button in Internet Explorer.However, in other browser,it's default value is submit even in standard of W3C.
So you need to define the type of button always.
There are three types of buttons:
submit — Submits the current form data. (This is default.)
reset — Resets data in the current form.
button — Just a button. Its effects must be controlled by something else (that is, with JavaScript).
Button attribute is not that big deal, because it changes nothing in your code.
The only difference in your two code versions are writing the whole code after the "onclick" attribute (code2) and writing the function name after the "onlick" attribute (code1).
You can read about the button attributes and differences between input and button with the same attributes on this site http://html.com/attributes/button-type/
I hope it will help you a lot.
Writing <button type="button"> defines the button as a clickable button.
There is no big difference with <button>, but it is more safe to put a type attribute to the button element because some browsers may use different default types for the <button> element, which could lead to bugs.
This is the button that I'm trying to click:
<button class="button-text-like marg-l-0 float-l desktop-only remove-button" data-bind="click: $root.removeCartItem" type="button"> <i class="gicon-cross"></i> Remove </button>
I find and click the button by using the following xpath:
driver.find_element_by_xpath('//*[#id="mini-cart-slider"]/li[1]/div/div/div[2]/button').click()
However I'm getting an exception when I do that. The type of exception is
ElementNotVisibleException
This could happen because the element should be removed when I click that remove button. However if I ignore this exception, the item does not seem to be getting removed from the cart.
I'm using the firefox webdriver. When I do a similar function on another button that has the following markup it works fine:
<button style="display: inline-block;" type="submit" class="add-cart button wgrid-3w6 wgrid-4w4 marg-l-0">Add to cart</button>
The only difference between this button is that it is type "submit" whereas the button that doesn't work is a type "button"
Is there a different method to click each of these types?
My guess is your xpath is too brittle. Your xpath heavily depends on the path being very specific, and any change (even in display ordering) can break it.
Try something less brittle:
driver.find_element_by_css_selector('#mini-cart-slider button')
To find your remove button...
driver.find_element_by_css_selector('#mini-cart-slider button.remove-button')
or your add to cart button...
driver.find_element_by_css_selector('#mini-cart-slider button.add-cart')
This was solved by executing a simulated click using the execute_script. The syntax is as follows:
driver.execute_script('arguments[0].click()',driver.find_element_by_xpath('//*[#id="mini-cart-slider"]/li[1]/div/div/div[2]/button'))
I am trying to make a button on user profile that will allow the user to choose file and after the file has been chosen, it will be uploaded with the same button.
I want the button appearance as that defined by the code below:
<button class="btn btn-primary form-control"><span class='glyphicon glyphicon-camera'></span> Change Photo</button>
I want to change it into:
<input type='Image' onchange="this.form.submit()"/>
But with bootstrap classes and <span class='glyphicon glyphicon-camera'></span> Change Photo instead of 'submit' text on button.
How can I do it?
If you just want to change the text text inside of the button you can use JavaScripts innerHTML function to set the value, but you will have to include the span.
button = getElementsByClassName("btn btn-primary form-control")[0];
button.innerHTML="<span class='glyphicon glyphicon-camera'></span> Change Photo";
This assumes that you only have one object with that exact class on the page. If you have more you will have to add the logic to select the correct button.
If you need to do something with the file that is loaded you will need to have some sort of server side language or scripting language since this can not be done in HTML and CSS alone.
I have a split button construct in our applications that is similar to the following jsbin.
http://jsbin.com/opAtiYEl/8
The first button would do a default action and the second button would give a menu (ul) with more related actions.
When i tab into the first button it reads "action button". That's fine. But when i tab into the arrow down button it reads "button".
What is the correct approach to make this work accessibly? I'm thinking aria-haspopup but that doesn't read on Voice Over.
Ideally this should be correct for VOice Over, NVDA and Jaws (latest minus 2). I'm trying to find a good baseline here or suggestion?
You are some what on the right track with aria-haspopup.
And as #Menelion Elensúle said your arrow button has no content.
Let's say we do something like the iTunes store and have 1 link to a category and a dropdown for sub-categories...
This is the proper markup
Movies
<button type="button" class="action-dropdown hide" aria-haspopup="true" aria-expanded="false" aria-controls="movies-menu">movies dropdown</button>
<ul id="movies-dropdown">
<li>Adventure</li>
...
</ul>
Use the class "hide" to visually hide the text. (Don't use display:none)
And when the arrow is clicked change aria-expanded to true, and remember to switch it back to false when the dropdown is hidden.
My JAWS 15 says "Unlabeled 3 button". You have to label your button. Here:
<button>Action</button>
<button class="arrow"></button>
Please note: the second button has nothing between the tags. If it's impossible to insert something in there (it would corrupt your design), then it would be appropriate to make your arrow as a plain image with an alt attribute.