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
> JS:
$(document).ready(function(){
$(".check_menu").click(function(){
var identifier = $(this).attr("menuid");
$(".openthis"+identifier).show();
$('body').css('overflow', 'hidden');
});
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
This is the outcome of the code above:
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?
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?
ASKER
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
[embed=file 1155043]
see.png
I would need to see your rendered HTML to be able to give an answer
ASKER
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>
ASKER
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.
ASKER
oh okay here is it all:
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>
<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 >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 <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>
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>
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
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">
ASKER
I did implement it my code is now:
<div class="openthis<?php echo $counter++?>" style="display:none">
It's the same you have?
ASKER
It is always staying 1 because they are all in the same loop, that was my issue.
ASKER
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>
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.
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!