CODEWITHSUNDEEP
javascriptjqueryhtmlfor-loop
NewbCoder
NewbCoder

Reputation: 45

jQuery For Loop Image Check and Display

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.

enter image description here

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.

enter image description here

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.

Upvotes: 1

Views: 167

Answers (4)

Aramil Rey
Aramil Rey

Reputation: 3475

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()
}

Upvotes: 1

Dietrich George
Dietrich George

Reputation: 114

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!
}

Upvotes: 1

swornabsent
swornabsent

Reputation: 994

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.

Upvotes: 1

dreamweiver
dreamweiver

Reputation: 6002

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
}

Upvotes: 1

Related Questions