Hide div if value inside is set to 0 - javascript

I have code like below:
<div class="col-md-6 col-xs-6 StockNumber">
In Stock:
<span class="NumberOfStock">
<?php echo $this->product->product_in_stock ?>
</span>
</div>
Here is example how it works: http://www.avanti-studio.pl/index.php/kolekcje/kardigany/sweter-pudrowy-5-detail ("W magazynie: 0").
What I want to do is to hide all "StockNumber" div if value in "NumberOfStock" span is "0". How it can be done?
Thx for any help.

Try This Code it will work
$(".StockNumber span:contains('0')").parent('div').hide();

This only outputs the div if there is stock.
<?php if($this->product->product_in_stock>0){ ?>
<div class="col-md-6 col-xs-6 StockNumber">
In Stock:
<span class="NumberOfStock">
<?php echo $this->product->product_in_stock ?>
</span>
</div>
<?php } ?>

Related

Is there a way to get all fetched ids from a PHP while loop?

I want to know if I can get all fetched ids from a PHP while loop to use them in a jQuery for a flip effect?
while ($fetch_locomotion = mysqli_fetch_assoc($result_locomotion))
{
$id = $fetch_locomotion['id'];
echo
'<a href="index.php?price='.$hash.'" style="text-decoration: none;" id="object_a_jquery">
<div id="'.$id.'" style="perspective:1000px;height:100%;width:13%;display:inline-table;">
<div class="front">
<div id="object_list_price_bg" style="background-image:url(images/bg_price_f.png);"></div>
</div>
<div class="back">
<div id="object_list_price_bg_b" style="background-image:url(images/bg_price.png);"></div>
</div>
</div>
</a>';
}
<script>$(<?php echo $id;?>).flip();</script>
You can dump them into an array and use them at a later time.
// do this before entering the loop so it isn't overwritten
$ids = [];
// Do this part inside of the while loop
$ids[] = $fetch_locomotion ['id'];
?>
/* do this part in the html section you wish to execute the javascript code */
<script>
jQuery(function ($) {
<?php foreach ($ids as $id): ?>
<?php echo "$('#". $id . "').flip();\n"; ?>
<?php endforeach; ?>
});
</script>
Edited for your exact code:
$ids = [];
while ($fetch_locomotion = mysqli_fetch_assoc($result_locomotion))
{
$ids[] = $fetch_locomotion['id'];
echo
'<a href="index.php?price='.$hash.'" style="text-decoration: none;" id="object_a_jquery">
<div id="'. $fetch_locomotion ['id'] .'" style="perspective:1000px;height:100%;width:13%;display:inline-table;">
<div class="front">
<div id="object_list_price_bg" style="background-image:url(images/bg_price_f.png);"></div>
</div>
<div class="back">
<div id="object_list_price_bg_b" style="background-image:url(images/bg_price.png);"></div>
</div>
</div>
</a>';
}
<script>
jQuery(function ($) {
<?php foreach ($ids as $id): ?>
<?php echo "$('#". $id . "').flip();\n"; ?>
<?php endforeach; ?>
});
</script>
I would suggest adding a class attribute and querying on it (instead of each ID separately).
Also, using the alternative PHP syntax would be cleaner in this context.
This becomes:
<?php while ($fetch_locomotion = mysqli_fetch_assoc($result_locomotion)): ?>
<a href="index.php?price=<?= $hash ?>" style="text-decoration: none;" id="object_a_jquery_<?= $id ?>">
<div id="<?= $fetch_locomotion['id'] ?>" class="js-flipMe" style="perspective:1000px;height:100%;width:13%;display:inline-table;">
<div class="front">
<div id="object_list_price_bg" style="background-image:url(images/bg_price_f.png);"></div>
</div>
<div class="back">
<div id="object_list_price_bg_b" style="background-image:url(images/bg_price.png);"></div>
</div>
</div>
</a>
<?php endwhile ?>
<script>
jQuery(function ($) {
$('.js-flipMe').flip();
});
</script>
Note that I also changed your <a>'s id attribute to be unique, as it should be.

Window on load function is not firing until i refresh page manually?

I'm showing a loading bar before the content loads successfully. And after load I am displaying the content by jQuery but when i visit the page first time the loader is showing forever and the on load event isn't firing. It fires when i manually refresh the page. What's wrong with my code?
Event call code:
$(window).on('load', function(){
$("#slider-pre-loader").fadeOut("slow");
$("#video-blog-slider").fadeIn();
});
Dynamic HTML:
<div id="slider-pre-loader"></div>
<div id="video-blog-slider" style="display: none">
<div class="blog-category-items blog-page" id="blogIndex">
<div class="container">
<?php
$hpos = 0;
foreach ($categories as $category):
$categoryhref = fakeUrl::genSlugFromText($category['name']);
$listVideos = $category['videos'];
if (in_array($category['name'], $categoryDisplay)) :
?>
<div class="blog-groups">
<div class="group-heading">
<h3>
Test title
</h3>
</div>
<?php if ($category['desc'] != '') :?>
<p class="group-desc"><?php echo $category['desc'];?></p>
<?php endif;?>
<?php
$slideClass = '';
if (!$detect->isMobile() && !$detect->isTablet() ) {
$slideClass = 'blog-slider';
}
?>
<div class="<?php echo $slideClass;?> owl-lg-dot mb-none owl-theme owl-loaded" id="videoList">
<?php
$v = 0;
foreach ($listVideos as $video) :
$v++;
$itemClass = '';
if (($detect->isMobile() || $detect->isTablet()) && $v > 5) {
$itemClass = 'item-disable';
}
$videoSlug = fakeUrl::genSlugFromText($video['title']);
?>
<div class="blog-item <?php echo $itemClass;?>">
<div class="blog-image">
<a href="/blog/<?php echo $videoSlug; ?>" title="<?php echo $video['title'];?>">
</a>
</div>
<div class="caption">
<a class="blog-list-video-title" href="/blog/<?php echo $videoSlug; ?>" title="<?php echo $video['title'];?>">
</a>
</div>
<div class="blog-metas">
<small class="blog-views"><?php echo number_format($video['views']); ?> views</small>
</div>
</div>
<?php
endforeach;
?>
</div>
</div>
<?php
endif;
endforeach;
?>
</div>
</div>
</div>
jQuery placed before event call:
<script src="//code.jquery.com/jquery-1.11.3.min.js" async></script>
Don't place async attribute on your script tags unless you really need your script file to be loaded asynchronously. Right now, your 'jQuery' code is being loaded asynchronously, i.e. jQuery is most probably not loaded when you are trying to attach your event.
The only explanation for it working the second time upon manual refresh is that the browser is 'synchronously' loading the cached resource. Different browsers do this differently, so you can expect inconsistent behaviour there.
Just remove the async attribute, and you should see your event firing every time.
The $(window) selector is for selecting the viewport whereas the $(document) selector is for the entire document (that is, what's inside the <html> tag).
Try using the following:
$(document).on('load', function(){
$("#slider-pre-loader").fadeOut("slow");
$("#video-blog-slider").fadeIn();
});
I hope this working with you, I have created example you will be woking with document.ready it means JQuery see and focus on all elements in your web page, here is fiddle
Simple for test
<div id="slider-pre-loader">no</div>
<div id="video-blog-slider" style="display: none">
hi
</div>
OR your code
<div id="slider-pre-loader">no</div>
<div id="video-blog-slider" style="display: none">
<div class="blog-category-items blog-page" id="blogIndex">
<div class="container">
<?php
$hpos = 0;
foreach ($categories as $category):
$categoryhref = fakeUrl::genSlugFromText($category['name']);
$listVideos = $category['videos'];
if (in_array($category['name'], $categoryDisplay)) :
?>
<div class="blog-groups">
<div class="group-heading">
<h3>
Test title
</h3>
</div>
<?php if ($category['desc'] != '') :?>
<p class="group-desc"><?php echo $category['desc'];?></p>
<?php endif;?>
<?php
$slideClass = '';
if (!$detect->isMobile() && !$detect->isTablet() ) {
$slideClass = 'blog-slider';
}
?>
<div class="<?php echo $slideClass;?> owl-lg-dot mb-none owl-theme owl-loaded" id="videoList">
<?php
$v = 0;
foreach ($listVideos as $video) :
$v++;
$itemClass = '';
if (($detect->isMobile() || $detect->isTablet()) && $v > 5) {
$itemClass = 'item-disable';
}
$videoSlug = fakeUrl::genSlugFromText($video['title']);
?>
<div class="blog-item <?php echo $itemClass;?>">
<div class="blog-image">
<a href="/blog/<?php echo $videoSlug; ?>" title="<?php echo $video['title'];?>">
</a>
</div>
<div class="caption">
<a class="blog-list-video-title" href="/blog/<?php echo $videoSlug; ?>" title="<?php echo $video['title'];?>">
</a>
</div>
<div class="blog-metas">
<small class="blog-views"><?php echo number_format($video['views']); ?> views</small>
</div>
</div>
<?php
endforeach;
?>
</div>
</div>
<?php
endif;
endforeach;
?>
</div>
</div>
</div>
Javascript:
$(document).ready(function() {
$("#slider-pre-loader").fadeOut('slow');
$("#video-blog-slider").fadeIn('slow');
});

Remove a single row in table created using div's

I'v table which I create using PHP and I used divs to create the table, below is the table code.
<div class="limiter">
<div class="container-table100">
<div class="wrap-table100">
<div class="table">
<div class="row header">
<div class="cell topLeft">
Customer Name
</div>
<div class="cell">
Target
</div>
<div class="cell">
File Type
</div>
<div class="cell">
Job Comment
</div>
<div class="cell">
Cust. ID
</div>
<div class="cell topRight">
Select Job
</div>
</div>
<?php while ($getJobsRow = $getJobs -> fetch(PDO::FETCH_ASSOC)){ ?>
<?php $loopCount++; //Count the loop run through time ?>
<div class="row">
<div class="cell left <?php if ($numOfRows == $loopCount){ ?>bottomLeft<?php } //Set the CSS class if the loop is at the last row ?> " data-title="Full Name">
<?php echo $getJobsRow['customer_name']; ?>
</div>
<div class="cell" data-title="Age">
<?php echo $getJobsRow['Mal_Name']; ?>
</div>
<div class="cell" data-title="Job Title">
<?php echo $getJobsRow['FileExt']; ?>
</div>
<div class="cell" data-title="Location">
<?php echo $getJobsRow['Job_Comment']; ?>
</div>
<div class="cell" data-title="Location">
<?php echo $getJobsRow['customer_id']; ?>
</div>
<div class="cell right <?php if ($numOfRows == $loopCount){ ?>bottomRight<?php } ?> " data-title="Location">
<button class="selJobBtn w3-btn w3-blue-dark w3-round-medium w3-ripple" data-jid="<?php echo $getJobsRow['jId']; ?>">Select</button>
</div>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
I've select button for each data row. I want to hide or remove each row after data get successfully submitted to table. I use jquery to send the data and to disable the button.
My Jquery code,
$(document).ready(function () {
$('.selJobBtn').on('click', function () {
var selBtn = this;
$.ajax({
url: '../Functions/OpenjobLister_Function.php',
type: 'get',
data: {
'jid':$(this).data('jid'),
'uid':$('#uId').val()
},
dataType:'text',
complete:function(data){
if(data.responseText !== "1"){
alert("Data not added");
}else{
$(selBtn).prop('disabled', true);
$('.row').parent('div').first().remove();
}
}
});
});
});
I tried to remove a single line using many other methods mentioned in SO but none of them worked. Current code just removed the entire table I'm just stuck not knowing how to remove a single line.
That is because you find the parent div of any .row in your document, which is the entire table. Try to find the closest div.row from the button clicked and remove that one:
selBtn.closest('div.row').remove();
Use the HTML DOM elements to remove the row:
This is how you use the function where (0) is the index of the table row.
document.getElementById("myTable").deleteRow(0);

Is there is any way to remove the filter on clicking the button

<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12 space-top-left">
<?php
$appliedFilters = Mage::getSingleton('catalog/layer')->getState()->getFilters();
if ($appliedFilters) {
foreach ($appliedFilters as $item) {
$b=$item->getLabel(); // Currently selected value
?>
<button type="button" class="btn btn-default"><?php echo($b); ?></button>
<?php
}
}
?>
</div>
This is code through which I have made buttons of applied filters within my product page.
Is there a way to put a cross sign for every button made (on which after clicking, the applied filter from the page will be removed)?
All suggestions welcome.
Thanks in Advance.
Image of the issue
May this code will help you.
<?php if ($this->getLayer()->getState()->getFilters()): ?>
<div class="actions"><?php echo $this->__('Clear All') ?></div>
<?php endif; ?>

Dynamic jQuery with same ID

Im trying to make a dynamic jQuery function with some help from Advanced Custom Fields in Wordpress. This may not have something to do with the question, but I work in Wordpress with this plugin, anyway.
My code is like this:
<div id="restaurangmeny">
<h2>Vår meny</h2>
<? if( get_field('meny_for_restaurangen') ): ?>
<?php while( has_sub_field('meny_for_restaurangen') ): ?>
<div class="kategori">
<div class="kategorinamn" id="<?php the_sub_field('namn_for_kategorin'); ?>"><?php the_sub_field('namn_for_kategorin'); ?></div>
<div class="matratter" id="<?php the_sub_field('namn_for_kategorin'); ?>">
<? if( get_sub_field('matratter') ): ?>
<?php while( has_sub_field('matratter') ): ?>
<div class="matratt">
<div class="left">
<div class="namn"><?php the_sub_field('namn_pa_matratt'); ?></div>
<div class="beskrivning"><?php the_sub_field('beskrivning_av_matratten'); ?></div>
</div>
<div class="pris"><?php the_sub_field('pris_pa_matratten'); ?>:-</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div><!--#restaurangmeny-->
So what I want is when I click on the div called "kategorinamn" I want to div called "matratter" be shown or hidden. That's why I use same id for "kategorinamn" and "matratter" just because these 2 belong together.
Simply, if I click on 1 I want everything that got the same id (1) be shown. If I click on 2 I want everything that got the same id (2) be shown.
I don't know what dynamic jQuery like this is called, but I'm far away from being good with jQuery so that's why I'm asking.
Something like this http://jsfiddle.net/gwK6d/18/, but with jQuery only and that fit's my code above.
1) Import jquery
2) Make sure you are not using the same id for multiple elements
3) Change this bit:
<div class="kategorinamn" id="<?php the_sub_field('namn_for_kategorin'); ?>"><?php the_sub_field('namn_for_kategorin'); ?></div>
<div class="matratter" id="<?php the_sub_field('namn_for_kategorin'); ?>">
To this:
<div class="kategorinamn" id="<?php the_sub_field('namn_for_kategorin'); ?>">
<?php the_sub_field('namn_for_kategorin'); ?>
<div class="matratter" id="<?php the_sub_field('namn_for_kategorin'); ?>">
</div>
4) Declare this function after load:
$(".kategorinamn").click(function(){
$(this).children('.matratter').toggle();
});
JSFIDDLE: http://jsfiddle.net/uRpc8/

Categories