I have a WordPress loop where I list the data. I create a button dynamically and set their ids.
When I set that id into a textbox I can see that all buttons have different ID because I increment the number each time. Until here everything is okay and working fine.
but need to use javascript for setting the textbox value with value of button ID.
I use this following code:
<script>
jQuery(document).ready(function($){
$('.p-name-x').click(function(){
$('#dynamic-field').val($(".the-prod-counter").val());
});
alert($(".the-prod-counter").val());
});
</script>
on my $('.p-name-x').click(function() x should be changed with the number if ID i get from the loop.
on my alert it always gives the first ID. For example if I have 3 buttons the alert gives 3 times the first id!
How can get the alert to show the other numbers as well?
------------- EDIT --------------
Here is part of my code
<?php
$type = 'stiel_privatkunden';
$args=array('stiel_privatkunden_cat' => $post_slug, 'post_type' => $type, 'posts_per_page'=>-1, 'order'=>'ASC');
$my_query = new WP_Query($args);
$i=1;
$idh=1;
while ($my_query->have_posts()) : $my_query->the_post();
if($i%2==0) {
?>
<div class="row" style="background:#f3f3f3" id="<?php the_field('prod_slug'); ?>">
<div class="col-xs-12 col-sm-6">
<figure class="pro-innerpage-img">
<?php the_post_thumbnail(); ?>
</figure>
</div>
<div class="col-xs-12 col-sm-6" style="padding:20px;">
<div class="title_content">
<div class="the-title"><?php the_title();?></div>
<div class="the-desc"><?php the_field('description'); ?></div>
<?php if( get_field('passende_Produkte') ): ?>
<div class="vc_toggle vc_toggle_square vc_toggle_color_black vc_toggle_color_inverted vc_toggle_size_md">
<div class="vc_toggle_title" tabindex="0"><h4>passende Produkte</h4><i class="vc_toggle_icon"></i></div>
<div class="vc_toggle_content" style="display: none;">
<p><?php the_field('passende_Produkte'); ?></p>
</div>
</div>
<?php endif; ?>
<?php if( get_field('link_mehr_erfahren') ): ?>
<span class="theme-button-inner">mehr erfahren</span>
<?php endif; ?>
<?php if( get_field('link_jetz_anfragen') ): ?>
<span class="theme-button-inner">jetzt anfragen</span>
<?php endif; ?>
</div>
<!--<input type="text" name="the-prod-name" class="the-prod-name-<?php echo $idh; ?>" value="<?php the_field('prod_slug');?>">-->
<input type="hidden" name="the-prod-counter" class="the-prod-counter" value="<?php echo the_field('prod_slug') . '-'. $idh; ?>">
<!--<input type="text" name="the-prod-idk" class="the-prod-idk" value="<?php //echo $idh; ?>"> -->
<script>
jQuery(document).ready(function($){
$('.p-name').click(function(){
$('#dynamic-field').val($(".the-prod-counter").val());
});
//alert($(".the-prod-counter").val());
});
</script>
</div>
</div>
<br/>
<?php } else { ?>
Related
I am trying to use a button to sort a sort a dynamic data-set that was invoked by PHP. Right now I am just trying to put a button in that arranges them by highest item.
in catalog.view.php
<div class="pricing-buttons">
<button type="button" class="highest btn btn-outline-
primary">highest price</button> <button type="button" class="lowest
btn btn-outline-info">lowest price</button>
</div>
<section class="container-fluid">
<div class="row">
<?php if (isset($items)) { ?>
<?php foreach ( $items as $item) : ?>
<div class="col-12 col-sm-6 col-md-4">
<div class="container-fluid">
<article class="cards">
<div class="col-12">
<section class="card-holder" id="<?php echo $item['code']; ?>">
<section class="card code">
<ul>
<h2 class="cat-order-code bottom-drop center"
data-code="<?php echo $item['code']; ?>">Code: <?php echo $item['code']; ?></h2>
<h3 class="cat-order-name center"><?php echo $item['name']; ?></h3>
<img class="cat-order-image thumbnail box-image-width"
src="<?php echo IMAGES . $item['image']; ?>"
alt="<?php echo $item['description']; ?>">
<!-- part I am working on here the data-value ['price'] -->
<li class="cat-order-price" data-value="<?php echo $item['price']; ?>">Price:
<?php echo $price = ($item['price'] == 0 ? 'Make offer' : '$' . $item['price']);
?></li>
<h4 class="cat-order-sold sale" data-sold="<?php echo $item['sold']; ?>">
<?php echo $sold = ($item['sold'] == 0 ? 'For Sale' : 'sold'); ?></h4>
<a class="cat-order-btn btn btn-lg btn-outline-danger btn-width
center-block" href='details.php?id=<?php echo $item['id']?>'>
<?php echo $item['id']; ?></a>
</ul>
</section>
</section>
</div>
</article>
</div>
</div>
<?php endforeach; ?>
<?php } ?>
</div>
</section>
I am working in chuncks, since I am still new to JAvaScript and Es6.
so far in my javascript file I have
const highest = document.querySelector('.highest');
const priceValue =
Array.from(document.querySelectorAll('[data-value]');
const price = priceValue;
price.map(price => price.dataset.value);
console.log(price);
My question is why is the map not working out? I know i have a long ways to go to get where I want, but I am trying to understand why my map function is coming back with the same value as the Array.from function?
any help would be thankful.
You should assign the result of the map operation to a variable, like so
const result = price.map(price => price.dataset.value);
console.log(result);
If you want to sort the values array you can now sort it with sort method
result.sort();
Also, having an element variable with the same name as the array may get confusing. This would be a more readable alternative
const result = price.map(p => p.dataset.value);
I'm having cards and inside of them are data from a database. These cards are enclosed in a div called search. I'm trying to filter the cards with the data inside them and output the cards with the same data used to filter. For example each card has different names and I want the card having the same address, I want those cards to be displayed per keypress. This is the code I currently have
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#search card").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
<div id = "search">
<?php foreach($query as $row): ?>
<div class="card-deck" >
<div class="col-xs-6 col-sm-6 col-lg-4">
<div class="card"><center>
<img src = "https://admin.orangesuites.ph/static/uploads/<?php echo $row->profile_pic; ?>" width="209" height="180" >
<div class="card-body">
<h3 class="card-title"><?php echo $row->firstName . ' ' . $row->lastName; ?></h3>
<p class="card-text">Room Number: <?php echo $row->bldg_num . '-' . $row->room_num; ?><br>
Price: <?php echo $row->price; ?><br>
Move In Date: <?php
$move_in = new DateTime($row->move_in_date);
echo $move_in->format('F j, Y');
?><br>
Move Out Date: <?php
$move_out = new DateTime($row->move_out_date);
echo $move_out->format('F j, Y');
?><br>
Pending Amount: <?php echo $pending_total[$row->merge_id]; ?><br>
Contact Number: <?php echo $row->phone; ?><br><br><br>
</p>
</div>
<div class="card-footer">
</div>
</center></div>
</div>
</div>
<?php endforeach; ?>
</div>
http://hespv.ca/solar-resources/solar-installer-tools/fr-component-generator
In This tool on step 2 i want to do like, if i check ULTRA-FLASH in Anchor types which is Page "A.php" then Select foot should disappear. Select foot coulmn is coming from Page "B.php"
Code of B.php is mostly same as A.php
**# Header 1 #
Code of Page "A.php"------**
<?php
function radialAnchors($roof_id){
require_once("conn.php");
require_once('query.php');
$anchors = sqlQuery("SELECT anchors.anchor_id, anchors.code, anchors.href, anchors.image_src, anchors.description
FROM roof_types INNER JOIN anchors
ON roof_types.roof_id = anchors.roof_type_fk
WHERE roof_types.roof_id = $roof_id
ORDER BY anchors.priority ASC", $conn);
$checked = 0;
foreach ($anchors as $anchor) {
?>
<div class="row anchor-row">
<div class="col-2-12 center">
<div class="img-box">
<a href="<?php echo $anchor['href']; ?>" target="_blank">
<img src="<?php echo $anchor['image_src']; ?>"alt="<?php echo $anchor['code']; ?>">
</a>
</div>
</div>
<div class="col- md-1-12 md-show sm-hide"> </div>
<div class="col-8-12 md-10-12 center">
<h2><?php echo $anchor['code']; ?></h2>
<p><?php echo $anchor['description']; ?></p>
<p>Find out more</p>
</div>
<div class="col-1-12 center">
<br><br><input type="radio" name="anchorRadios" id="anchor<?php echo $anchor['anchor_id']; ?>" value="<?php echo $anchor['anchor_id']; ?>" <?php if(!$checked++) echo 'checked'; ?>>
<label for="anchor<?php echo $anchor['anchor_id']; ?>"></label>
</div>
</div>
<?php
}
}
?>
As per my understandings you need to hide select foot when you select ULTRA-FLASH. This you can do using jquery. write change listener for your ULTRA-FLASH on change you can hide select foot div completely.
$(document).on('change', '#ultra-flash-id', function(){
this.checked ? $("#select-foot-id").hide() : $("#select-foot-id").show();
});
I want to show product details in pop-up on click product name in product page. Here is my code:
<?php
if (count($data['product']) > 0) {
foreach ($data['product'] as $product) {
$product_id = $product->getId();
$product_name = $product->getName();
$isporductImage = $product->getImage();
$product_image = Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB, true) . "media/catalog/product" . $product->getImage();
$isproductthumbnail = $product->getThumbnail();
$product_thumbnail = Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB, true) . "media/catalog/product" . $product->getThumbnail();
$collectionimage = Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB, true) . "media/catalog/category/thumb/" . $data['collection']['image'];
$productplaceholderImage = $this->getSkinUrl() . "whi/assets/images/whi_placeholder.png";
?>
<div class="celeb-post" id="products-listing" style="text-align: center; width: 228px;">
<?php if ($isproductthumbnail != "") { ?>
<div class="image-div" style="background: url('<?php echo $product_thumbnail;?>');">
<img src="<?php echo $product_thumbnail; ?>" alt="celeb" />
</div>
<?php }elseif ($isporductImage != "") { ?>
<div class="image-div" style="background: url('<?php echo $product_image;?>');">
<img src="<?php echo $product_image; ?>" alt="celeb" />
</div>
<?php } else { ?>
<div class="image-div" style="background: url('<?php echo $productplaceholderImage;?>');">
<img src="<?php echo $productplaceholderImage ?>" alt="celeb" />
</div>
<?php } ?>
<div class="hover-image-bg" style="width: 86.9%; height: 69.3%;">
<img style="padding-left: 38px;" src="<?php echo $this->getSkinUrl() ?>whi/assets/images/heart.png">
<img src="<?php echo $this->getSkinUrl() ?>whi/assets/images/bag.png">
<img src="<?php echo $this->getSkinUrl() ?>whi/assets/images/move.png">
<img src="<?php echo $this->getSkinUrl() ?>whi/assets/images/assign.png">
</div>
<div style="clear:both; height:10px;"></div>
<div class="celeb-name-title ucase clearfix" style="text-align:center;"><?php echo $product_name; ?></div>
</div>
<?php
}
}else{ ?>
<table style="width:100%;">
<tr><td style="text-align: center; height: 100px; font-weight: bold;">No Product found in Collection, you can add by clicking on +New button at the top right.</td></tr>
</table>
<?php
}
?>
And login-box5 code is:
<div id="login-box5" class="login-popup login-popup5">
<img src="<?php echo $this->getSkinUrl() ?>whi/assets/images/close_pop.png" class="btn_close" style="width:100%;" />
<img src="<?php echo $this->getSkinUrl() ?>whi/assets/images/new-collection.png">
<div class="brand-position-outfite" id="celeb-position-outfite">
<img src="<?php echo $this->getSkinUrl() ?>whi/assets/images/celeb.png">
<h5>Brand Name</h5>
<div style="clear:both;"></div>
<h5>Product Name</h5>
<BR><BR>
<textarea rows="10" class="add-txtarea-cmt">Description....</textarea>
</div>
</div>
So, simply if I click on Product Name, then popup will appear and show details of that product, like product name and product description. Can anyone help me to sort out this problem. I think this can be done through AJAX, JavaScript but don't know how can I embed script in my code.
Waiting of your kind response thanks in advance.
Yes you need to create ajax function to load the data. Also you can create ajax request handle so that particular template will be used to show the data. You can get better idea about the functionality using the below Quick view extension:
https://github.com/czettnersandor/magento-quick-view-ajax
I would suggest you output your "popup"-information in your existing product-listing/view template in a special div-block which is connected to your product.
A simple example for product listing:
you list your productnames and popupdata in the template/catalog/product/list.phtml:
<?php foreach ($_productCollection as $_product): ?>
<h3 class="productpreview" data-sku="<?php echo $_product->getSku(); ?>"><?php echo $_product->getName(); ?></h3>
<div class="popup" id="pop_<?php echo $_product->getSku(); ?>">
/*insert your other productdata here*/
<?php echo $_product->getShortDescription(); ?>
</div>
<?php endforeach;?>
The class popup should be display: none; in css
I would suggest that you then use something like fancybox to display that content. If you have access to jquery, you could also write this to show the content and with added css you could easily make a cool looking popup:
jQuery(document).ready(function(){
$('.productpreview').click(function(){
var sku = $(this).data('sku');
$('#pop_'+sku).toggle();
});
});
if you want the functionality in the product view page you modifiy template/catalog/product/view.phtml
<h3 class="productpreview" data-sku="<?php echo $_product->getSku(); ?>"><?php echo $_product->getName(); ?></h3>
<div class="popup" id="pop_<?php echo $_product->getSku(); ?>">
/*insert your other productdata here*/
<?php echo $_product->getShortDescription(); ?>
</div>
It is the same CSS/Jquery code, you only need to remove the foreach-loop.
I am building an interface in which when the user clicks on a target they display a new menu, this interface, has multiple instances of this target and each target shows the same menu, however I only want to show the menu under that target that has been clicked, at the moment, whatever target I click all the menus become visible.
$('.statuses').hide();
$('.employer .status').click(function(e){
alert('clicked');
$('.employer .status').next('.statuses').show();
});
And my HTML
<div id="left-column">
<?php foreach($jobs as $j): ?>
<p><strong><?php echo $j['jobtitle']; ?></strong> £<?php echo $j['salary']; ?>, <?php echo $j['job_summary']?> </p>
<ul>
<?php foreach($applications as $a): ?>
<?php if ($j['jobtitle'] == $a['jobtitle']): ?>
<li>
<img src="/media/uploads/candidates/<?php echo preg_replace('/(.gif|.jpg|.png)/', '_thumb$1', $a['profile_image']);?>" width="90" height="60" alt="Hello"/>
<p><?php echo $a['name']; ?></p>
<p class="<?php echo $a['status'];?> status"><?php echo ucfirst($a['status']);?></p>
<div class="statuses">
<p class="status pending">Pending</p>
<p class="status unsuccessful">Unsuccessful</p>
<p class="status successful">Successful</p>
</div>
<p class="date"><?php echo date("d.m.Y", $a['created_at']);?></p>
</li>
<?php endif; ?>
<?php endforeach; ?>
</ul>
<?php endforeach; ?>
$('.statuses').hide();
$('.employer .status').click(function(e){
$(this).next('.statuses').show();
});