Link to home
Start Free TrialLog in
Avatar of Jazzy 1012
Jazzy 1012

asked on

Increase counter and attr inside a while loop

<div class= "flex rowWrap foodDiv">
<?php while($row11 = mysqli_fetch_assoc($result11)) {
$name1=$row11['name'];
$subtitle1=$row11['subtitle'];
$image1=$row11['image_url'];
$thumbnail1=$row11['thumb_url'];
$meal_id1 = $row11['id'];
$query12= "select * from meal LEFT JOIN mains ON meal.id = mains.meal_id where meal.meal_id = '$meal_id1'";
$result12=mysqli_query($conn,$query12);
$labels1=array();
$prices1 =array();
$filter = array();
$counter = 1;
while($row12 = mysqli_fetch_assoc($result12))
{
$filter_id = $row12['id'];
$label1= $row12['label'];
$labels1[]= $label1;
$price1= $row12['price'];
$price1 = number_format($price1/100, 2);
$price1 = "$" . $price1;
$prices1[]= $price1;
$vegan= $row12['vegan']; 
$vegetarian = $row12['vegetarian'];
    $pescetarian = $row12['pescatarian'];
    $dairy= $row12['dairy-free'];
    $egg = $row12['egg-free'];
    $fish = $row12['fish-free'];
    $shellfish = $row12['shellfish-free'];
    $tree = $row12['tree nut-free'];
    $peanut = $row12['peanut-free'];
    $soy = $row12['soybean-free'];
    $total = $row12['low-total-fat'];
    $saturated = $row12['low-saturated-fat'];
    $cholesterol = $row12['low-cholesterol'];
    $sodium = $row12['low-sodium'];
    $protein = $row12['protein(25g)'];
    $calories = $row12['calories(450)'];
    
    $filter[] = $vegan;
    $filter[] = $vegetarian;
    $filter[] = $pescetarian;
    $filter[] = $dairy;
    $filter[] = $egg;
    $filter[] = $fish;
    $filter[] = $shellfish;
    $filter[] = $tree;
    $filter[] = $peanut;
    $filter[] = $soy;
    $filter[] = $total;
    $filter[] = $saturated;
    $filter[] = $cholesterol;
    $filter[] = $sodium;
    $filter[] = $protein;
    $filter[] = $calories;
    
}
$labels1=implode(" | ",$labels1);
$firstEle = $prices1[0];
$lastEle = $prices1[count($prices1) - 1];

?>
<span class="deliveryItem satin pointer vertical-top textCenter
<?php if($filter[0] == 'Y'){echo "vegan ";}
if($filter[1] == 'Y'){echo "vegetarian ";}
if($filter[2] == 'Y'){echo "pescetarian ";}
if($filter[3] == 'Y'){echo "dairy-free ";}
if($filter[4] == 'Y'){echo "egg-free ";}
if($filter[5] == 'Y'){echo "fish-free ";}
if($filter[6] == 'Y'){echo "shellfish ";}
if($filter[7] == 'Y'){echo "tree ";}
if($filter[8] == 'Y'){echo "peanut ";}
if($filter[9] == 'Y'){echo "soy ";}
if($filter[10] == 'Y'){echo "total-fat ";}
if($filter[11] == 'Y'){echo "saturated-fat ";}
if($filter[12] == 'Y'){echo "cholesterol ";}
if($filter[13] == 'Y'){echo "sodium ";}
if($filter[14] == 'Y'){echo "protein ";}
if($filter[15] == 'Y'){echo "calories ";}
?>">
<img src="<?php echo $image1; ?>" width="250px" height= "200px;" class="foodImage">
<div class="menuDelivery">
<h3 class= "textCenter OldStandard dark-orange font1"> <?php echo $name1;?> </h3>
<p class= "OldStandardItalic text-black font2"> <?php echo $subtitle1;?> </p>
<hr>
<span class="open_sansbold text-black">
<?php if(count($prices1) > 1){print_r($firstEle ."-". $lastEle);}
else{ print_r($price1);}
?>
<br>
</span>
<span class="text-black font2">
<?php if(mysqli_num_rows($result12) >= 1){echo @$labels1;}  ?>
<br>
</span>
<button  class="view white cbtn1 open_sansbold check_menu" menuid="1">View/Add</button>
</div>
</span>
 
  <div class="openthis<?php echo $counter++?>" style="display:none">
  ihi
  </div>
<?php
}?>
</div

Open in new window

>

JS:
$(document).ready(function(){
$(".check_menu").click(function(){
    var identifier = $(this).attr("menuid");
        $(".openthis"+identifier).show();
        $('body').css('overflow', 'hidden');
    });

Open in new window


As you can see I have many divs(each contains a meal), I want each div  to have an own menuid that keeps increase as well as the "openthis" counter so each div would have its own separate div that I can click to open. Right now it doesn't work because on all the "check-menu" divs the menuid never changes since it is in a while loop and the counter always stays one for every meal? How can I make these increase so each div has its own hidden div and it could work?
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Jasmine, I wish you would show us the data here instead of showing us code that we already know does not do what you want.  If you show us the data, you can ask us how to do things like structure queries, web pages, etc, and we can show you the code that manipulates the data.  The information we would need to see are these:

1. The CREATE TABLE statements for the tables
2. The rows of test data that you're using to verify that your app works

That's it.  And then we can post complete, tested and working examples!
Avatar of Jazzy 1012
Jazzy 1012

ASKER

This is the outcome of the code above:
User generated image
I want that each time I click on "View/Add" a popup (div) appears and a different div for each. So what I tried doing was giving all of them a menuid so it would work something like if I click menuid1 , show openthis1 , if I click menuid2, show openthis2. But the problem is since they are all together in one while loop, all three blocks a "menuid1" and all 3 hidden divs are "openthis1", how can I fix this and allow each to show its separate div?
Did you seem my earlier post - did that not work?
Yes it worked but the problem is that they all open together when I just click "View/Add" for one of them, How can I just make it that the div I click on opens not all of them? This is my output now:
[embed=file 1155043]
see.png
I would need to see your rendered HTML to be able to give an answer
ok here it is:
<div class= "flex rowWrap foodDiv">
			
			
				<span class="deliveryItem satin pointer vertical-top textCenter
				vegan vegetarian pescetarian dairy-free fish-free shellfish tree peanut soy saturated-fat cholesterol protein calories ">
				 <img src="https:/" class="foodImage">
				<div class="menuDelivery">
				<h3 class= "textCenter OldStandard dark-orange font1"> Moroccan Tajine </h3>
				<p class= "OldStandardItalic text-black font2"> with Herbed Quinoa </p>
				<hr>
				<span class="open_sansbold text-black">
				$18.00-$23.00				<br>
				</span>
				<span class="text-black font2">
				Veggie | Chicken | Lamb				
				<br>
				</span>
				<button  class="view white cbtn1 open_sansbold check_menu" data-menuid="1">View/Add</button>
				</div>
				</span>
  	
  			<div class="openthis1" style="display:none">
  			Moroccan Tajine  			</div>
				
							
				<span class="deliveryItem satin pointer vertical-top textCenter
				">
				 <img src="http" width="250px" height= "200px;" class="foodImage">
				<div class="menuDelivery">
				<h3 class= "textCenter OldStandard dark-orange font1"> Chicken & Rice Soup </h3>
				<p class= "OldStandardItalic text-black font2"> with a Dinner Roll, Mixed Greens & Proven�al Vinaigrette </p>
				<hr>
				<span class="open_sansbold text-black">
				$10.00				<br>
				</span>
				<span class="text-black font2">
				Chicken				
				<br>
				</span>
				<button  class="view white cbtn1 open_sansbold check_menu" data-menuid="1">View/Add</button>
				</div>
				</span>
  	
  			<div class="openthis1" style="display:none">
  			Chicken & Rice Soup  			</div>
				
							
				<span class="deliveryItem satin pointer vertical-top textCenter
				">
				 <img src="h" width="250px" height= "200px;" class="foodImage">
				<div class="menuDelivery">
				<h3 class= "textCenter OldStandard dark-orange font1"> Carrot Ginger Soup </h3>
				<p class= "OldStandardItalic text-black font2"> with a Dinner Roll, Mixed Greens & Proven�al Vinaigrette </p>
				<hr>
				<span class="open_sansbold text-black">
				$10.00				<br>
				</span>
				<span class="text-black font2">
				Veggie				
				<br>
				</span>
				<button  class="view white cbtn1 open_sansbold check_menu" data-menuid="1">View/Add</button>
				</div>
				</span>
  	
  			<div class="openthis1" style="display:none">
  			Carrot Ginger Soup  			</div>
				
						</div>	

Open in new window

As you can see they all have the same data-menu, therefore that might be the reason they are opening all together
That is not all the code - I need to see HTML and JavaScript together so I can follow what the page looks like.
oh okay here is it all:
<div class="row rowing">
  <div class="col-6 col-md-3 checkbox-rounds" id="filter-checks">
  <p class="orange OldStandard"> Menu Filters</p>
  <a type="button" class="check orange pointer OldStandard">Select All </a>
  <br>
  <a type="button" class="uncheck orange pointer OldStandard"> Unselect All</a>
  <br>
        <input type="checkbox" class="checkbox-round" value="vegan" id="vegan" checked/><label for="vegan" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Vegan</label>
        <br/>
        <input type="checkbox" class="checkbox-round" value="vegetarian" id="vegetarian" checked/> <label for="vegetarian" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Vegetarian</label>
        <br/>
        <input type="checkbox" class="checkbox-round" value="pescetarian" id="pescetarian" checked/> <label for="pescetarian" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Pescetarian</label>
         <br/>
        <input type="checkbox" class="checkbox-round" value="dairy-free" id="dairy-free" checked/> <label for="dairy-free" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Dairy-free</label>
         <br/>
        <input type="checkbox" class="checkbox-round" value="egg-free" id="egg-free" checked/> <label for="egg-free" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Egg-free</label>
         <br/>
        <input type="checkbox" class="checkbox-round" value="fish-free" id="fish-free" checked/> <label for="fish-free" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Fish-free</label>
         <br/>
        <input type="checkbox" class="checkbox-round" value="shellfish" id="shellfish" checked/> <label for="shellfish" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span> Shellfish-free</label>
          <br/>
        <input type="checkbox" class="checkbox-round" value="tree" id="tree" checked/> <label for="tree" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Tree nut-free</label>
          <br/>
        <input type="checkbox" class="checkbox-round" value="peanut" id="peanut" checked/> <label for="peanut" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Peanut-free</label>
          <br/>
        <input type="checkbox" class="checkbox-round" value="soy" id="soy" checked/> <label for="soy" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span> Soy-free</label>
          <br/>
        <input type="checkbox" class="checkbox-round" value="total-fat" id="total-fat" checked/> <label for="total-fat" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span> Low Total Fat</label>
          <br/>
        <input type="checkbox" class="checkbox-round" value="saturated-fat" id="saturated-fat" checked/> <label for="saturated-fat" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Low Saturated Fat</label>
          <br/>
        <input type="checkbox" class="checkbox-round" value="cholesterol" id="cholesterol" checked/> <label for="cholesterol" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Low Cholesterol</label>
          <br/>
        <input type="checkbox" class="checkbox-round" value="sodium" id="sodium" checked/> <label for="sodium" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Low Sodium</label>
          <br/>
        <input type="checkbox" class="checkbox-round" value="protein" id="protein" checked/> <label for="protein" class="OldStandard"> <span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Protein &#62;25g</label>
          <br/>
        <input type="checkbox" class="checkbox-round" value="calories" id="calories" checked/> <label for="calories" class="OldStandard"><span><i class="fa fa-circle"></i><i class="fa fa-check" ></i></span>Calories  &#60;450 calories</label>
  		<br>
  
  </div>


	<div class="col col-md-9" id="display_menu" style="margin-left:-80px;">
  	<p class="orange OldStandard pull-left title_menu">Soups </p>  
  	  	<button  class="disabled1 white cbtn1 pull-right" type="submit" id="submit" >Checkout  <i class="fa fa-long-arrow-right"></i></button>
  
		
		  	
		<div class= "flex rowWrap foodDiv">
			
			
				<span class="deliveryItem satin pointer vertical-top textCenter
				vegan vegetarian pescetarian dairy-free fish-free shellfish tree peanut soy saturated-fat cholesterol protein calories ">
				 <img src="h;" class="foodImage">
				<div class="menuDelivery">
				<h3 class= "textCenter OldStandard dark-orange font1"> Moroccan Tajine </h3>
				<p class= "OldStandardItalic text-black font2"> with Herbed Quinoa </p>
				<hr>
				<span class="open_sansbold text-black">
				$18.00-$23.00				<br>
				</span>
				<span class="text-black font2">
				Veggie | Chicken | Lamb				
				<br>
				</span>
				<button  class="view white cbtn1 open_sansbold check_menu" data-menuid="1">View/Add</button>
				</div>
				</span>
  	
  			<div class="openthis1" style="display:none">
  			
  					<div class="selectionOverlay fixed flex">
					<div class="cont-cont">
					<article class="relative infoBox OpenSansLight satin">
					<span class="hairline"></span>
					<h1 class="OldStandard textCenter darkRed">	Moroccan Tajine</h1>
					<hr>
		  			</article>
		  			<span class="pointer desktop x-btn" style="position:absolute;top:0px;right:5px;z-index:10;margin:10px;">
<span><img src="../assets/images/close.png" height="50px"></span>
</span>
<article class="picBox" style="background-image:url('http"></article>
		  			</div>
		  			</div>

  			</div>
				
							
				<span class="deliveryItem satin pointer vertical-top textCenter
				">
				 <img src="http" width="250px" height= "200px;" class="foodImage">
				<div class="menuDelivery">
				<h3 class= "textCenter OldStandard dark-orange font1"> Chicken & Rice Soup </h3>
				<p class= "OldStandardItalic text-black font2"> with a Dinner Roll, Mixed Greens & Proven�al Vinaigrette </p>
				<hr>
				<span class="open_sansbold text-black">
				$10.00				<br>
				</span>
				<span class="text-black font2">
				Chicken				
				<br>
				</span>
				<button  class="view white cbtn1 open_sansbold check_menu" data-menuid="1">View/Add</button>
				</div>
				</span>
  	
  			<div class="openthis1" style="display:none">
  			
  					<div class="selectionOverlay fixed flex">
					<div class="cont-cont">
					<article class="relative infoBox OpenSansLight satin">
					<span class="hairline"></span>
					<h1 class="OldStandard textCenter darkRed">	Chicken & Rice Soup</h1>
					<hr>
		  			</article>
		  			<span class="pointer desktop x-btn" style="position:absolute;top:0px;right:5px;z-index:10;margin:10px;">
<span><img src="../assets/images/close.png" height="50px"></span>
</span>
<article class="picBox" style="background-image:url('ht');"></article>
		  			</div>
		  			</div>

  			</div>
				
							
				<span class="deliveryItem satin pointer vertical-top textCenter
				">
				 <img src="ht" width="250px" height= "200px;" class="foodImage">
				<div class="menuDelivery">
				<h3 class= "textCenter OldStandard dark-orange font1"> Carrot Ginger Soup </h3>
				<p class= "OldStandardItalic text-black font2"> with a Dinner Roll, Mixed Greens & Proven�al Vinaigrette </p>
				<hr>
				<span class="open_sansbold text-black">
				$10.00				<br>
				</span>
				<span class="text-black font2">
				Veggie				
				<br>
				</span>
				<button  class="view white cbtn1 open_sansbold check_menu" data-menuid="1">View/Add</button>
				</div>
				</span>
  	
  			<div class="openthis1" style="display:none">
  			
  					<div class="selectionOverlay fixed flex">
					<div class="cont-cont">
					<article class="relative infoBox OpenSansLight satin">
					<span class="hairline"></span>
					<h1 class="OldStandard textCenter darkRed">	Carrot Ginger Soup</h1>
					<hr>
		  			</article>
		  			<span class="pointer desktop x-btn" style="position:absolute;top:0px;right:5px;z-index:10;margin:10px;">
<span><img src="../assets/images/close.png" height="50px"></span>
</span>
<article class="picBox" style="background-image:url('http:');"></article>
		  			</div>
		  			</div>

  			</div>
				
						</div>	
		
	

Open in new window


JS:
<script src="http://code.jquery.com/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script>
$(document).ready(function() {
	$('.check').click(function() {
		  $('input[type="checkbox"]').prop("checked", true);
		  $(".deliveryItem").show();
		});

		$('.uncheck').click(function() {
		  $('input:checkbox').prop("checked", false);
		  $(".chk-btn").hide();
		  $(".deliveryItem").hide();
		  
		  
		});

$("#filter-checks :checkbox").click(function() {
	$(".deliveryItem").hide();
		 $("#filter-checks :checkbox:checked").each(function() {
		      $("." + $(this).val()).show();
		  });
});

	$(".check_menu").click(function(){
	    var identifier = $(this).data("menuid");
	        $(".openthis"+identifier).show();
	        //$('body').css('overflow', 'hidden');
	    });

		
		
});




</script>

Open in new window

Take a look at the html code
Line 71
                    <div class="openthis1" style="display:none">
Line 108
                    <div class="openthis1" style="display:none">
Line 145
                    <div class="openthis1" style="display:none">

You did not implement the modification to include openthis in the counter

Refer line 11 of this post https://www.experts-exchange.com/questions/29014272/Increase-counter-and-attr-inside-a-while-loop.html?anchorAnswerId=42080917#a42080917
 <div class="openthis<?php echo $counter++?>" style="display:none">

Open in new window

I did implement it my code is now:
                    
<div class="openthis<?php echo $counter++?>" style="display:none">

Open in new window

It's the same you have?
It is always staying 1 because they are all in the same loop, that was my issue.
This is how the code is through php before implementation:
              
		<div class= "flex rowWrap foodDiv">
			
<?php while($row11 = mysqli_fetch_assoc($result11)) {
	$name1=$row11['name'];
	$subtitle1=$row11['subtitle'];
	$image1=$row11['image_url'];
	$thumbnail1=$row11['thumb_url'];
	$meal_id1 = $row11['id'];
	
$query12= "select * from meal LEFT JOIN mains ON meal.id = mains.meal_id where meal.meal_id = '$meal_id1'";

	$result12=mysqli_query($conn,$query12);

	
	$labels1=array();
	$prices1 =array();
	$filter = array();
	$counter = 1;
	while($row12 = mysqli_fetch_assoc($result12))
	{
		$filter_id = $row12['id'];
		$label1= $row12['label'];
		$labels1[]= $label1;
		
		$price1= $row12['price'];
		$price1 = number_format($price1/100, 2);
		$price1 = "$" . $price1;
		$prices1[]= $price1;
		
	$vegan= $row12['vegan']; 
	$vegetarian = $row12['vegetarian'];
    $pescetarian = $row12['pescatarian'];
    $dairy= $row12['dairy-free'];
    $egg = $row12['egg-free'];
    $fish = $row12['fish-free'];
    $shellfish = $row12['shellfish-free'];
    $tree = $row12['tree nut-free'];
    $peanut = $row12['peanut-free'];
    $soy = $row12['soybean-free'];
    $total = $row12['low-total-fat'];
    $saturated = $row12['low-saturated-fat'];
    $cholesterol = $row12['low-cholesterol'];
    $sodium = $row12['low-sodium'];
    $protein = $row12['protein(25g)'];
    $calories = $row12['calories(450)'];
    
    $filter[] = $vegan;
    $filter[] = $vegetarian;
    $filter[] = $pescetarian;
    $filter[] = $dairy;
    $filter[] = $egg;
    $filter[] = $fish;
    $filter[] = $shellfish;
    $filter[] = $tree;
    $filter[] = $peanut;
    $filter[] = $soy;
    $filter[] = $total;
    $filter[] = $saturated;
    $filter[] = $cholesterol;
    $filter[] = $sodium;
    $filter[] = $protein;
    $filter[] = $calories;
    
	}
	
	$labels1=implode(" | ",$labels1);
	$firstEle = $prices1[0];
	$lastEle = $prices1[count($prices1) - 1];

	
	
?>
			
				<span class="deliveryItem satin pointer vertical-top textCenter
				<?php if($filter[0] == 'Y'){echo "vegan ";}
				if($filter[1] == 'Y'){echo "vegetarian ";}
				if($filter[2] == 'Y'){echo "pescetarian ";}
				if($filter[3] == 'Y'){echo "dairy-free ";}
				if($filter[4] == 'Y'){echo "egg-free ";}
				if($filter[5] == 'Y'){echo "fish-free ";}
				if($filter[6] == 'Y'){echo "shellfish ";}
				if($filter[7] == 'Y'){echo "tree ";}
				if($filter[8] == 'Y'){echo "peanut ";}
				if($filter[9] == 'Y'){echo "soy ";}
				if($filter[10] == 'Y'){echo "total-fat ";}
				if($filter[11] == 'Y'){echo "saturated-fat ";}
				if($filter[12] == 'Y'){echo "cholesterol ";}
				if($filter[13] == 'Y'){echo "sodium ";}
				if($filter[14] == 'Y'){echo "protein ";}
				if($filter[15] == 'Y'){echo "calories ";}
				?>">
				 <img src="<?php echo $image1; ?>" width="250px" height= "200px;" class="foodImage">
				<div class="menuDelivery">
				<h3 class= "textCenter OldStandard dark-orange font1"> <?php echo $name1;?> </h3>
				<p class= "OldStandardItalic text-black font2"> <?php echo $subtitle1;?> </p>
				<hr>
				<span class="open_sansbold text-black">
				<?php	if(count($prices1) > 1){print_r($firstEle ."-". $lastEle);}
				else{ print_r($price1);}
				?>
				<br>
				</span>
				<span class="text-black font2">
				<?php if(mysqli_num_rows($result12) >= 1){echo @$labels1;}  ?>
				
				<br>
				</span>
				<button  class="view white cbtn1 open_sansbold check_menu" data-menuid="<?php echo $counter;?>">View/Add</button>
				</div>
				</span>
  			<div class="openthis<?php echo $counter++?>" style="display:none">
  			
  					<div class="selectionOverlay1 fixed flex">
					<div class="cont-cont">
					<article class="relative infoBox OpenSansLight satin">
					<span class="hairline"></span>
					<h1 class="OldStandard textCenter darkRed">	<?php echo $name1;?></h1>
					<hr>
		  			</article>
		  			<span class="pointer desktop x-btn" style="position:absolute;top:0px;right:5px;z-index:10;margin:10px;">
<span><img src="../assets/images/close.png" height="50px"></span>
</span>
<article class="picBox" style="background-image:url('<?php echo $image1 ?>');"></article>
		  			</div>
		  			</div>

  			</div>

Open in new window

It is always staying 1 because they are all in the same loop, that was my issue.
No it is always staying the same because you are not updating the counter properly. If you implement the changes I suggested (as you appear to have in your last post)
data-menuid will then be linked to openthis - they will share the same id.

Please confirm.