The question might not be clear but I can't figure out a better question to elaborate. I am trying to highlight a table row using ng-class and using conditions. Below is my code:
<tr ng-class="{selectSuccess: selectedRows.indexOf(rowData.entity_id) > -1,
danger: rowData.total_received < rowData.total_sold,
info: rowData.total_received > rowData.total_sold}">
In my code as you can see there are three conditions and three classes. danger and info classes are added on page load as they become true but selectSuccess which becomes true when I select a row so I need to know if there is any possibility to add important to this selectSuccess. I have tried adding important via css but that did not work. Or I need to know if I can make the other condition to false when I click on a row.
Note: If you want I can add the whole code but only need to know if I can toggle the class and that is why provided only the main code.
You could add && selectedRows.indexOf(rowData.entity_id) == -1 to the danger and info conditions.
Related
Problem
I only want the commands in the if logic to happen if the 3rd default button is visible, but it throws an error saying its parent has the css class of visibility: hidden. When you need to remove that state the 3rd default button becomes visible so I'm not sure why it isn't passing.
Desired Behaviour
I want it so for each state that is underlined to click on them to unselect them. Then the if statement is to take care of those who need to be actually removed, because they have info filled out for them, and so if the 3rd default button is visible, which is the remove button, then to execute the code inside the if statement which is to make sure the other default buttons are hidden and click the remove button.
Code
it('deletes all selected states', () => {
cy.get('span[class*="css-ddft8r-StateText"]').each($el => {
cy.wrap($el)
.filter(':has(span[class*="css-1qkbmzm-Underline css-1x6iasc4"])')
.click({ multiple: true });
if (cy.get('[data-cy=default-buttons]').eq(3).should('be.visible')) {
cy.get('[data-cy=default-buttons]')
.eq(0)
.should('be.hidden');
cy.get('[data-cy=default-buttons]')
.eq(2)
.should('be.visible');
cy.get('[data-cy=default-buttons]')
.eq(3)
.click();
}
});
});
Cypress commands return Chainer object - it is inner Cypress entity which can't be used with conditionals as object is always recognized as true within if statement.
So please give a chance for jquery:
if(Cypress.$('[data-cy=default-buttons]:contains("remove")').is(':visible')){
// do assertions
cy.get('[data-cy=default-buttons]:contains("remove")').click({force: true})
// as parent is hidden, we can ommit click visibility check by passing force: true
}
*= is checking that attribute contains part of passed string, so your selector could be simplified to:
[class*="StateText"]
Whole test seems as overengineered and not working properly with these each cycle and conditional inside. Maybe you dont even need to check buttons for each element and move assertions out of loop. Example repository would be helpful.
So the solution I ended up using was actually just using .each() instead of the if statement within it. We figured out we could utilize a ternary inside of a data-cy due to those css classes being unstable/unreliable and this took care of not having to write an if statement.
We did roughly this:
cy.get('[data-cy=example_data_cy]').each($el => {
//click on the state if it was selected to unselect it
I am working on one table, where I have created one button which I am using in different rows and tables based on some condition.
I have one scenario where I need to show the button to some specific users, I have implemented the condition however I am not able get the path of the button, I can hide the cell but in that case complete cell is removed from the table which is not looking good, please help me to get the path of the button, so that I can hide it, here is the code I am using:
totalrows = document.getElementById("DEVmyTable").rows.length;
for(i = 0;i<totalrows; i++){
if(actualusernamevalue == currentusernamevalue){
table.rows[i].cells[6].style.display = "";
}
if(actualusernamevalue != currentusernamevalue){
table.rows[i].cells[6].style.display = "none";
}
}
Here in Cells[6] my button is present which I am created dynamically like this:
row = document.getElementById("DEVFirstrow");
var w = row.insertCell(6);
w.innerHTML = '<button onclick="Releaseentry(this)"type="button"
id="release" class="btn btn-primary release">Release</button>';
I have not added the complete code here, but based on the ids I am using this code in different table and rows.
in this code I have hidden the cell, for hiding the button I am not able to get the path, and that is what I am looking for.
You actually style the cell based on table.rows[i].cells[6].style.display and not its content. You choose the 6th cell and style it.Another mistake you make is that you use id in the button while the button is used in multiple rows which makes the id useless as it should be unique.
What I would do is simply use the class of the buttons and then based on the checks you have decide what the button should do using jquery, so:
if(actualusernamevalue == currentusernamevalue){
$('.release').show();
}
if(actualusernamevalue != currentusernamevalue){
$('.release').hide();
}
If I understand well what you are trying to do at least. The simpler solution, the better solution!
EDIT: By the way, you should keep in mind that if someone wants to find the button when you play with the display property in both ways, they can always find it through the source code. If someone inspects the element and changes the CSS manually they will be able to see the button, so it's always important to have back end validation too for cases like this.
I think I have got my solution finally, Thanks #natan for your help.
table.rows[i].cells[6].getElementsByTagName('button')[0].style.display = "none";
table.rows[i].cells[6].getElementsByTagName('button')[0].style.display = "";
I should have used this code.
Good afternoon Stack Overflow,
I'm inexperienced when it comes to coding in general and I've been having a problem that's doing my head in!
If you'll allow me to set the scene...
The section of the project I am currently working on involves a user picking items from a warehouse in order to fulfil a shipment and in some cases they have to pick the same item from various locations, when that needs to be done, the small "!" type icon appears next to the item.
The user then can click on the icon and choose which locations they will be retrieving the stock from, they then press confirm on the modal and when it closes it sets the text back to blue and hides the icon.
The part I am having trouble with is that once all the locations have been established, the order needs to be processed and this requires a button to be clicked on, which I only want to appear once all the "!" icons are hidden.
I know there are alot of questions based on for loops and images checks and believe me when I say I've tried hard to figure this out myself and I've tried different approaches:
ShowProcess = false
for (i = 0; i<Picker; i++) {
if ($('#MultiLocIcon'+i).is(':visible')){
ShowProcess = true
}
if (ShowProcess == true) {
$('#ProcessConfirm').show()
};
};
This obviously wouldn't work because its setting the first variable in the list to "true" and will always read it as true, therefore always showing the image, even if the "!" icon still exists in other rows.
I also tried using .each() to test each rows text color of a specific but also had no luck:
var table = $('#RequestedItemsTable');
table.find('tbody > tr').each(function(){
if $('#Desc').css('color') == '#0000FF'){
//do something
I feel like my experience is letting me down as I still have a lot to learn and have a suspicious feeling that the solution is going to be really easy, but then again, its only easy if you know how.
If anyone could take the time to help me with this problem or offer me any advice, I'd be really grateful.
Here is a section of my code which might be useful:
Modal "Confirm" button:
//CONFIRM Button which will submit final picks.
'Confirm': function() {
//Reset the length loop
length = undefined;
//Remove "Multiple Location" icon from the row.
$('#icon'+id).hide();
//Change text colour back to blue to have visual confirmation that item is ready for picking
$('#Desc'+id).css('color', '#0000FF');
$('#QtyReq'+id).css('color', '#0000FF');
$('#QtyinStock'+id).css('color', '#0000FF');
$(this).dialog('close');
The "!" Icon:
<td id= "MultiLocIcon<?=$i;?>"><?if($row->Count_Location > 1)
{?><img src="<?=base_url();?>public/css/images/error.png" alt="LocPick" title="Multiple Locations" style="cursor: pointer;" id= "icon<?=$i;?>" onClick="$.LocPick(<?=$i;?>);"/><?}?></td>
Basically just need to know how my image can show once the loop checks and knows that the "!" icon is hidden from every possible row.
Thank you for your patience.
You'll need to add a second check in your modal logic, perhaps after your .hide():
//Remove "Multiple Location" icon from the row.
$('#icon'+id).hide();
$('img[id^=icon]:visible').length || $('#ProcessConfirm').show();
What this does is combines the :visible pseudo-selector and a regex selector for all img tags with id starting with "icon". This assumes you won't have any other unrelated image tags with an id like "icon*". If the length is 0, it will go ahead and show the #ProcessConfirm element.
simplest solution I would give is to add a class warning to all the table column which has warning icon & then check for visibility of the same.
if($('.warning:visible').length === 0){
//all warning icons are hidden
}
What I would do is based off your HTML, select all the alert icons, and do a :visible psuedo selector on it. This will return all the visible alert icons, if there are none in the array, you know none of them are visible. You will need to identify them with a class, such as .alert:
if( $(".alert:visible").length === 0 ){
// Do your code in here for no visible alert icons!
}
When user clicks confirm on modal you should run a check on how many icons are still visible, and if the amount is 0 then show the button, like this:
// This searchs for every <td> with an id that contains '#MultiLocIcon'
// Then checks if the amount of those which are visible is 0 and do something
if ( $('td[id*=MultiLocIcon]').not(':visible').length === 0 ) {
$('#ProcessConfirm').show()
}
I'm using jquery to display the line beside the textarea.
from this link:
http://alan.blog-city.com/jquerylinedtextarea.htm
Is there any way to change the selected line, so every time the user goes to the next line the line selected changes to the current line.
$(function()
{
// Target all classed with ".lined"
$(".lined").linedtextarea(
{
//change it from 1 to the current line that the user on.
selectedLine: 1
});
// Target a single one
$("#mytextarea").linedtextarea();
});
yep,
function selectLine(n) {
if (n<1) return false; //If the total number of lines is known it is worth checking you are not above it either
$(".codelines .lineno.lineselect").removeClass("lineselect")
$(".codelines .lineno").eq(n-1).addClass("lineselect");
}
with a lot of jQuery plugins (when they are full on jQuery widgets) you can use the "options" method to do this kind of thing, like $(".lined").linedtextarea("options",{selectedLine: 6}) but it doesn't look like this has been turned into a widget. This solution is kind of reverse engineered from the fact that the mod uses the lineselect class to control which line number is highlighted.
We do some checking to make sure we will use a sane value, remove the highlight class from any lines that have it already, and add it to the n-1th line number div (-1 because eq is Zero based).
This won't work if you have multiple lined text boxes on the one page. If that's the case we need to add another parameter to define which one to target and some logic to handle that.
I am trying to make a "simple" product-configurator thingie ...
Right now I have it working with drop-downs.
you can view it here (I made a shirt example - but actually it should be for other products as well):
http://jsfiddle.net/obmerk99/9t4f4/15/
As you can see, it works with drop downs, and the obvious problem is that it is not ADDING the feature, but REPLACING it (for each option group).
I tried with append() - and you can see it commented out in the code , but in that case, it will not remove (and will append forever - resulting in 50 divs ..
My questions are :
how can I make it work also with radio buttons and checkboxes ?
how to ADD the "option" if it is from another group, and how to "remove" it when it is from the same group ?
How to make the division into "options groups" work automatically ?
(I know that theoretically I could make a div for each option and a function for each - but the configuration will have about 60 of these - so I need some solid logic in ONE function)
EDIT I :
I have just noticed another bug :
If one selects all the options of the same level (e.g. - option #3 from all 3 dropdowns) and then returns to another group dropdown - and select again the same level - it will not work..
The full answer would be here :
http://jsfiddle.net/obmerk99/9t4f4/23/
using checkbox will be appropriate solution for the problem add group them together using some class
<input type="checkbox" class="option" value="9">
now you can write your simple jquery to toggle the src image
$('.option').change(function() {
if(this.checked){
$('#prod-image').attr('src', data[value].img);
}else{
$('#prod-image').attr('src', "");
}