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();
});
Related
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 { ?>
Hi im basically creating a help page, where there is a dynamic list created using the repeater field.
Each list item there is a line of text, that when clicked on should show some more content (and hide it when clicked on again).
Now i can get it to work for the first item in the list… but every new item only shows/hides the first item.
Im assuming i need to do some for each for the id or something i just don't know how to.
Thx for any help, here is the code:
<?php if (have_rows('video_felt')): ?>
<ul>
<?php while (have_rows ('video_felt')): the_row();
//vars
$afsnitOverskrift = get_sub_field('afsnit_titel');
?>
<li>
<?php if($afsnitOverskrift): ?>
<?php echo $afsnitOverskrift; ?>
<?php endif;?>
</li>
<?php if (have_rows('video_liste')): ?>
<ul>
<?php while (have_rows ('video_liste')): the_row();
//vars
$videListe = get_sub_field('video_navn');
$videoLinker = get_sub_field('vide_link');?>
<li onclick="myFunction()">
<?php if($videListe): ?>
<a ><?php echo $videListe; ?></a>
<div id="myDIV" style="display:none;">
<div class="youtube-player" data-id="<?php echo $videoLinker;?>"></div>
</div>
<?php endif;?>
</li>
<?php endwhile;?>
</ul>
<?php endif;?>
<?php endwhile; ?>
</ul>
<?php endif;?>
<script>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
I just edit your code with jquery kindly check below working code.
<?php if (have_rows('video_felt')): ?>
<ul class="videoul">
<?php while (have_rows ('video_felt')): the_row();
//vars
$afsnitOverskrift = get_sub_field('afsnit_titel');
?>
<li>
<?php if($afsnitOverskrift): ?>
<?php echo $afsnitOverskrift; ?>
<?php endif;?>
</li>
<?php if (have_rows('video_liste')): ?>
<ul>
<?php while (have_rows ('video_liste')): the_row();
//vars
$videListe = get_sub_field('video_navn');
$videoLinker = get_sub_field('vide_link');?>
<li >
<?php if($videListe): ?>
<a ><?php echo $videListe; ?></a>
<div class="myDIV" style="display:none;">
<div class="youtube-player" data-id="<?php echo $videoLinker;?>"></div>
</div>
<?php endif;?>
</li>
<?php endwhile;?>
</ul>
<?php endif;?>
<?php endwhile; ?>
</ul>
<?php endif;?>
jQuery
<script>
jQuery(document).ready(function(){
jQuery('body').on('click', 'ul.videoul li', function() {
jQuery("div.myDIV").hide();
jQuery(this).find("div.myDIV").toggle();
});
});
</script>
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();
});
Ok, if this question has already been answered, I apologize, I have searched and not found a satisfactory answer that fits my situation.
Here is the situation:
I have a custom template file for displaying the products in a category, part of that list is the ability to add products directly to the cart with a specified quantity from the category page. In order to accomplish this I wrote a function that re-writes the target line of the "Add to Cart" button, submits the request, then re-writes the button again back to it's original version (see code below). The problem I'm running into is that every time the button is clicked right now I get an error in the debug panel stating that customAddToCart is not defined. But if you look at the code for the product list template below you can see that the function is defined even before the list is generated (btw, I had it at the bottom of the page and was getting the same error).
If anyone can shed some light on why the javascript function would be undefined when it's being included on the same page as the list...I could sure use some help.
<?php
/**
* Product list template
*
* #see Mage_Catalog_Block_Product_List
*/
?>
<?php
$_productCollection=$this->getLoadedProductCollection();
$_helper = $this->helper('catalog/output');
?>
<script type="text/javascript">
function customAddToCart( product_id, url ){
var qty = document.getElementById('qty_input_'+product_id).value;
document.getElementById('addtocartbutton_'+product_id).setAttribute('onclick', "setLocation(" + url + "/qty/" + qty ")");
document.getElementById('addtocartbutton_'+product_id).click(); return false;
document.getElementById('addtocartbutton_'+product_id).setAttribute('onclick', "customAddToCart(" + product_id + ", " + url + ")");
}
</script>
<?php if(!$_productCollection->count()): ?>
<p class="note-msg"><?php echo $this->__('There are no products matching the selection.') ?></p>
<?php else: ?>
<div class="category-products">
<?php // List mode ?>
<?php if($this->getMode()!='grid'): ?>
<ol class="products-list" id="products-list">
<?php foreach ($_productCollection as $_product): ?>
<li class="item">
<?php // Product Image ?>
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(230, null); ?>" width="230" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
<?php // Product description ?>
<div class="product-shop">
<div class="f-fix">
<?php $_productNameStripped = $this->stripTags($_product->getName(), null, true); ?>
<h2 class="product-name"><?php echo $_helper->productAttribute($_product, $_product->getName() , 'name'); ?></h2>
<?php if($_product->getRatingSummary()): ?>
<?php echo $this->getReviewsSummaryHtml($_product) ?>
<?php endif; ?>
<?php echo $this->getPriceHtml($_product, true) ?>
<div class="desc std">
<?php echo $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?>
<?php echo $this->__('Learn More') ?>
</div>
<ul class="add-to-links">
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<li><?php echo $this->__('Add to Wishlist') ?></li>
<?php endif; ?>
<?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
<li><span class="separator">|</span> <?php echo $this->__('Add to Compare') ?></li>
<?php endif; ?>
</ul>
<div class="add-to-cart-options">
<?php if($_product->isSaleable()): ?>
<?php if( !($_product->getTypeInstance(true)->hasRequiredOptions($_product) || $_product->isGrouped() )){ ?>
<label for="qty_input">Quantity: </label>
<input type="text" class="spinner qty-input" name="qty_input" id="qty_input_<?php echo $_product->getId(); ?>" />
<?php /*<p><button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button></p> */ ?>
<button type="button" class="button" onclick="javascript:customAddToCart(<?php echo $_product->getId(); ?>, '<?php echo $this->getAddToCartUrl($_product); ?>')"><span><span><?php echo $this->__('Add to Cart'); ?></span></span></button>
<?php } else { ?>
<button type="button" class="button" id="addtocartbutton_<?php echo $_product->getId(); ?>" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart'); ?></span></span></button>
<?php } ?>
<?php else: ?>
<p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
<?php endif; ?>
</div>
</div>
</div>
</li>
<?php endforeach; ?>
</ol>
<script type="text/javascript">decorateList('products-list', 'none-recursive')</script>
<?php else: ?>
As you can see, the function is clearly defined at the top of the page, so why this button
<button type="button" class="button" onclick="javascript:customAddToCart(<?php echo $_product->getId(); ?>, '<?php echo $this->getAddToCartUrl($_product); ?>')"><span><span><?php echo $this->__('Add to Cart'); ?></span></span></button>
results in a message in the console saying that customAddToCart is not defined I'm not sure.
Is there an error about an "Unexpected string"? The concatenation in the second line of your function is missing its last plus sign.
Update
"/qty/" + qty ")"
to
"/qty/" + qty + ")"
and refresh.
I have list of categories, some have sub-category and some have sub-sub-category which are in such a way:
Main menu
sub menu
sub menu
I used ddaccordian.init to watch for open close events. All works fine, But now what I want is that current selected URL category must remain open.
I have tried the following code:
<script type="text/javascript">
ddaccordion.init({
headerclass: "question", //Shared CSS class name of headers group
contentclass: "theanswer", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: false, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: false, //persist state of opened contents within browser session?
toggleclass: ["closedanswer", "openanswer"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
//togglehtml: ["prefix", "<img src='images/plus.gif' /> ", "<img src='images/minus.gif' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
</script>
and to get the current category activated i.e. must remain open I did this:
<a <?php if($_category->hasChildren()): ?>class="question"<?php endif; ?><?php if ($currentUrl == $this->getCategoryUrl($_category)): ?> class="current"<?php endif; ?> href="<?php echo $this->getCategoryUrl($_category) ?>">
<?php echo $_category['name']; ?>
</a>
<?php $potential1 = $_category->hasChildren(); ?>
<?php if($_category->hasChildren()): ?>
<?php $_category = Mage::getModel('catalog/category')->load($_category->getId()) ?>
<?php $_subcategories = $_category->getChildrenCategories() ?>
<ul <?php if($_subcategories): ?>class="theanswer"<?php endif; ?>>
<?php foreach($_subcategories as $subcat): ?>
<li>
<a <?php if($subcat->hasChildren()): ?>class="question"<?php endif; ?><?php if ($currentUrl == $this->getCategoryUrl($subcat)): ?> class="current"<?php endif; ?> href="<?php echo $this->getCategoryUrl($subcat); ?>">
<?php echo $subcat->getName(); ?>
</a>
<?php if($subcat->hasChildren()): ?>
<?php
$_subcat = Mage::getModel('catalog/category')->load($subcat->getId());
$childrens = $_subcat->getChildrenCategories();
?>
<ul <?php if($childrens): ?>class="theanswer"<?php endif; ?>>
<?php foreach($childrens as $_childrens): ?>
<li>
<a <?php if ($currentUrl == $this->getCategoryUrl($_childrens)): ?> class="current"<?php endif; ?>href="<?php echo $this->getCategoryUrl($_childrens); ?>">
<?php echo $_childrens->getName(); ?>
</a>
</li>
<?php endforeach; ?>
</ul>
<?php endif ?>
</li>
<?php endforeach ?>
</ul>
<?php endif ?>
</li>
But I am getting no response on frontend :( Never mind if you think I am missing a foreach loop etc.
I have just pasted a portion of the code so tell me where I am wrong :(
Although i am getting the current URL correctly.
The accordion plugin you've chosen doesn't appear to have an option for keeping a section open so you would have to intercept that yourself and stop it. The only possible event it provides is onopenclose but that is called after slideUp has finished, which is useless.
You should pick another plugin which satisfies your needs.
Luckily Magento already comes with Prototype and it's own accordion class, you can replace or wrap it's sectionClicked method and stop the event there.
Accordion.prototype.sectionClicked = function(event) {
var element = $(Event.element(event)).up('.section');
if (!element.hasClassName('current')) {
this.openSection(element);
}
Event.stop(event);
};
This solved my problem, what i did was added this
<?php if ($this->isCategoryActive($_category)): ?>
instead of
if($currentUrl == $this->getCategoryUrl($_category)): ?> and added Css class at the bottom.
<div class="content-links">
<ul>
<?php $i=0; foreach ($catlist as $_category): ?>
<?php if($_category->getIsActive()): ?>
<li>
<a <?php if($_category->hasChildren()): ?>class="question"<?php endif; ?> href="<?php echo $this->getCategoryUrl($_category) ?>">
<?php echo $_category['name']; ?>
</a>
<?php $potential1 = $_category->hasChildren(); ?>
<?php if($_category->hasChildren()): ?>
<?php $_category = Mage::getModel('catalog/category')->load($_category->getId()) ?>
<?php $_subcategories = $_category->getChildrenCategories() ?>
<ul class="<?php if($_subcategories): ?>theanswer<?php endif; ?><?php //if($currentUrl == $this->getCategoryUrl($_category)): ?><?php if ($this->isCategoryActive($_category)): ?> opened<?php endif; ?>">
<?php foreach($_subcategories as $subcat): ?>
<li>
<a <?php if($subcat->hasChildren()): ?>class="question"<?php endif; ?> href="<?php echo $this->getCategoryUrl($subcat); ?>">
<?php echo $subcat->getName(); ?>
</a>
<?php if($subcat->hasChildren()): ?>
<?php
$_subcat = Mage::getModel('catalog/category')->load($subcat->getId());
$childrens = $_subcat->getChildrenCategories();
?>
<ul class="<?php if($childrens): ?>theanswer<?php endif; ?><?php if ($this->isCategoryActive($_subcat)): ?> opened<?php endif; ?>">
<?php foreach($childrens as $_childrens):
?>
<li>
<a <?php if ($currentUrl == $this->getCategoryUrl($_childrens)): ?>class="current"<?php endif; ?>href="<?php echo $this->getCategoryUrl($_childrens); ?>">
<?php echo $_childrens->getName(); ?>
</a>
</li>
<?php
endforeach;
echo "</ul>";
?>
<?php endif ?>
</li>
<?php endforeach ?>
</ul>
<?php endif ?>
</li>
<?php endif ?>
<?php endforeach ?>
</ul>
</div>
</div>
<div class="clear" style="height:218px;"></div>
</div>
</div>
<div class="event-bot"></div>
</div>
</div> <!--inner right end here-->
<style type="text/css">
.opened { display:block !important;}
</style>