I am attempting to 'check' the the 'AC:Front' box from a button click on the below website. I tried changing the checkbox to 'checked' and I also tried changing the encompassing to class="checked".
The goal is to eventually collect the inputted VIN, run it through a decoder and use the data to fill the page.
Here is the website
HTML
<div class="stm-single-feature">
<div class="heading-font">Comfort</div>
<div class="feature-single">
<label>
<input type="checkbox" value="A/C: Front" name="stm_car_features_labels[]"/>
<span>A/C: Front</span>
</label>
</div>
CSS
div.checker span.checked {
background-position: -16px 0; }
PHP
<?php
if ($items) {
if (!empty($id)) {
$features_car = get_post_meta($id, 'additional_features', true);
$features_car = explode(',', $features_car);
} else {
$features_car = array();
}
foreach ($items as $item) { ?>
<?php if(isset($item['tab_title_single'])): ?>
<div class="stm-single-feature">
<div class="heading-font"><?php echo $item['tab_title_single']; ?></div>
<?php $features = explode(',', $item['tab_title_labels']); ?>
<?php if (!empty($features)): ?>
<?php foreach ($features as $feature): ?>
<?php
$checked = '';
if (in_array($feature, $features_car)) {
$checked = 'checked';
};
?>
<div class="feature-single">
<label>
<input type="checkbox" value="<?php echo esc_attr($feature); ?>"
name="stm_car_features_labels[]" <?php echo $checked; ?>/>
<span><?php echo esc_attr($feature); ?></span>
</label>
</div>
<?php endforeach; ?>
<?php endif; ?>
</div>
<?php endif; ?>
<?php }
}?>
JavaScript
<script type="text/javascript">
jQuery(function($) {
$("#generateVin").on("click", function() {
var $checkbox = $("input[type=checkbox]").eq(1);
$checkbox.prop("checked", true);
$checkbox.parent().addClass("checked");
});
});
</script>
Related
JQuery connected, AJAX probably works correctly, because when I change select in the console the values are correct. But the query to the database doesn't change. Checking var_dump($_POST['filter']) shows that there value from previous request.
If I wrap select in a form and send it via POST using submit button, the requests are sent.
Where can there be an error here?
And how to add a condition, so that when selecting "All" the query will just be to all items "SELECT * FROM orders, without the condition "WHERE?
<script>
$('#filter').change(function() {
$.ajax({
method: "POST",
url: "thispage.php",
data: {
filter: $("#filter").val()
},
success: function(response) {
console.log($("#filter").val())
}
});
});
</script>
<?php
require_once __DIR__ . "/database/database.php";
$item1 = $_POST['item1'];
$worker_name = $_POST['worker_name'];
$worker_company = $_POST['worker_company'];
$errors = [];
if (empty($item1)) {
$errors['item1'] = true;
}
if (empty($errors)) {
$sql = "INSERT INTO `orders`(`order_dish1`, `order_name_worker`, `order_company`) VALUES (:order1, :order_name_worker, :worker_company)";
$params = [
"order1" => $item1,
"order_name_worker" => $worker_name,
"worker_company" => $worker_company
];
$dbh->prepare($sql)->execute($params);
}
$order_dishes1 = [];
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<select type="text" name="filter" id="filter">
<option value="*">All</option>
<?php
$sql = "SELECT * FROM `companies`";
$rows = $dbh->query($sql);
foreach ($rows as $row) {
?>
<option value="<?php echo $row['name'] ?>">
<?php echo $row['name'] ?>
</option>
<?php } ?>
</select>
// In this form it works
<form action="thispage.php" method="POST">
<select type="text" name="filter" id="filter">
<option value="*">All</option>
<?php
$sql = "SELECT * FROM `companies`";
$rows = $dbh->query($sql);
foreach ($rows as $row) {
?>
<option value="<?php echo $row['name'] ?>">
<?php echo $row['name'] ?>
</option>
<?php } ?>
</select>
<button type="submit">submit</button>
</form>
<div class="orders__wrapper" id="result">
<?php
$company = $_POST['filter'];
var_dump($_POST['filter']);
$sql = "SELECT * FROM `orders` WHERE `order_company` = '$company'";
$rows = $dbh->query($sql);
foreach ($rows as $row) {
?>
<div class="order-items">
<div class="order-items__header">
<div class="order-items__wrapper">
<div class="order-items__number">
Order №: <?php echo $row['order_id'] ?> </div>
</div>
<div class="order-items__wrapper">
<div class="order-items__name">
<?php echo $row['order_name_worker'] ?> </div>
<div class="order-items__company">
Company:
<span>
<?php echo $row['order_company'] ?>
</span>
</div>
</div>
</div>
<div class="order-items__orders">
<div class="orders-item orders-item-1">
Order №1:
<span class="order1">
<?php echo $row['order_dish1'] ?>
</span>
</div>
</div>
</div>
<?php
$order_dishes1[] = $row['order_dish1'];
}
$content = ob_get_contents();
ob_end_clean();
?>
<div class="result__all" id="result__all">
<div class="result__all-company">
<?php echo $row['order_company'] ?>
</div><br>
<div class="result__all__wrapper">
<div class="result__all-view">
<div class="result__all-title">
Soups:
</div>
<?php
$count_dishes1 = array_count_values($order_dishes1);
foreach ($count_dishes1 as $key => $val) echo '<div class="result__all-item">' . $key . ' - ' . $val . ' шт.,</div>';
?>
</div><br>
</div>
</div>
<?= $content ?>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</body>
</html>
I am trying to download specific div as a PDF but it is not showing complete part of the div.it is only showing first two columns and not showing complete height and width of the div. How can i export complete div with HTML output of the div?. it will be better if page is directly mail to receiver in PDF format.
my div is look like this
[1]: [https://i.stack.imgur.com/9t012.png][1]
after export it in pdf it looking like this
[2]: [https://i.stack.imgur.com/eReu9.png][1]
my code is,
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script type="text/javascript" src="jspdf.min.js"></script>
<script type="text/javascript">
function genPDF()
{
html2canvas(document.body,{
onrendered:function(canvas){
var img=canvas.toDataURL("image/png");
var doc = new jsPDF();
doc.addImage(img,'JPEG',20,20);
doc.save('test.pdf');
}
});
}
</script>
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<div class="my-wishlist">
<div class="page-title title-buttons">
<?php if ($this->helper('wishlist')->isRssAllow() && $this->hasWishlistItems()): ?>
<?php echo $this->__('RSS Feed') ?>
<?php endif; ?>
<h1><?php echo $this->getTitle(); ?></h1>
</div>
<?php echo $this->getMessagesBlock()->toHtml() ?>
<form id="wishlist-view-form" action="<?php echo $this->getUrl('*/*/update', array('wishlist_id' => $this->getWishlistInstance()->getId())) ?>" method="post">
<?php echo $this->getChildHtml('top'); ?>
<div class="fieldset">
<?php if ($this->hasWishlistItems()): ?>
<?php echo $this->getBlockHtml('formkey');?>
<?php $this->getChild('items')->setItems($this->getWishlistItems()); ?>
<?php echo $this->getChildHtml('items');?>
<script type="text/javascript">decorateTable('wishlist-table')</script>
<?php else: ?>
<p class="wishlist-empty"><?php echo $this->__('You have no items in your quote.') ?></p>
<?php endif ?>
<div class="buttons-set buttons-set2">
<?php echo $this->getChildHtml('control_buttons');?>
</div>
</div>
</form>
<form id="wishlist-allcart-form" action="<?php echo $this->getUrl('*/*/allcart') ?>" method="post">
<?php echo $this->getBlockHtml('formkey') ?>
<div class="no-display">
<input type="hidden" name="wishlist_id" id="wishlist_id" value="<?php echo $this->getWishlistInstance()->getId() ?>" />
<input type="hidden" name="qty" id="qty" value="" />
</div>
</form>
<script type="text/javascript">
//<![CDATA[
var wishlistForm = new Validation($('wishlist-view-form'));
var wishlistAllCartForm = new Validation($('wishlist-allcart-form'));
function calculateQty() {
var itemQtys = new Array();
$$('#wishlist-view-form .qty').each(
function (input, index) {
var idxStr = input.name;
var idx = idxStr.replace( /[^\d.]/g, '' );
itemQtys[idx] = input.value;
}
);
$$('#qty')[0].value = JSON.stringify(itemQtys);
}
function addAllWItemsToCart() {
calculateQty();
wishlistAllCartForm.form.submit();
}
//]]>
</script>
</div>
Download PDF
<?php echo $this->getChildHtml('bottom'); ?>
<div class="buttons-set">
<p class="back-link"><small>« </small><?php echo $this->__('Back') ?></p>
</div>
<?php endif ?>
Thanks in advance
This is exact div which i am trying to export
<div class="my-wishlist">
<div class="page-title title-buttons">
<?php if ($this->helper('wishlist')->isRssAllow() && $this->hasWishlistItems()): ?>
<?php echo $this->__('RSS Feed') ?>
<?php endif; ?>
<h1><?php echo $this->getTitle(); ?></h1>
</div>
<?php echo $this->getMessagesBlock()->toHtml() ?>
<form id="wishlist-view-form" action="<?php echo $this->getUrl('*/*/update', array('wishlist_id' => $this->getWishlistInstance()->getId())) ?>" method="post">
<?php echo $this->getChildHtml('top'); ?>
<div class="fieldset">
<?php if ($this->hasWishlistItems()): ?>
<?php echo $this->getBlockHtml('formkey');?>
<?php $this->getChild('items')->setItems($this->getWishlistItems()); ?>
<?php echo $this->getChildHtml('items');?>
<script type="text/javascript">decorateTable('wishlist-table')</script>
<?php else: ?>
<p class="wishlist-empty"><?php echo $this->__('You have no items in your quote.') ?></p>
<?php endif ?>
<div class="buttons-set buttons-set2">
<?php echo $this->getChildHtml('control_buttons');?>
</div>
</div>
</form>
<form id="wishlist-allcart-form" action="<?php echo $this->getUrl('*/*/allcart') ?>" method="post">
<?php echo $this->getBlockHtml('formkey') ?>
<div class="no-display">
<input type="hidden" name="wishlist_id" id="wishlist_id" value="<?php echo $this->getWishlistInstance()->getId() ?>" />
<input type="hidden" name="qty" id="qty" value="" />
</div>
</form>
<script type="text/javascript">
//<![CDATA[
var wishlistForm = new Validation($('wishlist-view-form'));
var wishlistAllCartForm = new Validation($('wishlist-allcart-form'));
function calculateQty() {
var itemQtys = new Array();
$$('#wishlist-view-form .qty').each(
function (input, index) {
var idxStr = input.name;
var idx = idxStr.replace( /[^\d.]/g, '' );
itemQtys[idx] = input.value;
}
);
$$('#qty')[0].value = JSON.stringify(itemQtys);
}
function addAllWItemsToCart() {
calculateQty();
wishlistAllCartForm.form.submit();
}
//]]>
</script>
</div>
I have a "read more about supplier" displayed on each productarticle. When you click it, it's supposed to pop-up a small box with information about the supplier.
The code is working, but when you click the text it only toggles the productarticle on the top of the page. It looks like it can't seperate them and give them each a unique ID. I have no idea how to do this as I'm an amateur. Any help please?
HTML:
<div class="popup" onclick="myFunction1()" style="position:relative; left:
70px;">Read more about <?php echo $supplier ?> here
<span class="popuptext" id="myPopup">
<b><?php $a = strtolower($supplier); if (strpos($a, 'supplier1') !== false) { echo 'Supplier 1 description'; } ?></b>
<b><?php $a = strtolower($supplier); if (strpos($a, 'supplier2') !== false) { echo 'Supplier 2 description'; } ?></b>
<b><?php $a = strtolower($supplier); if (strpos($a, 'supplier3') !== false) { echo 'Supplier 3 description'; } ?></b>
</span>
</div>
js:
function myFunction1() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
the loop including all products:
<?php $hr='';?>
<div class="row">
<ul class="listProductItems clearfix">
<?php for ($art=0; $art<count($articles); $art++){ ?>
<?php $imagine =$this->site_model->show_thumbs($articles[$art]['LA_ART_ID']); ?>
<?php $supplier =(($articles[$art]['producer']!==NULL) ? $articles[$art]['producer'] : $articles[$art]['SUP_BRAND']); ?>
<?php //$criteria =$this->site_model->article_criteria($articles[$art]['LA_ART_ID'],$articles[$art]['ga_id']); ?>
<?php $criteria =$this->site_model->article_criteria_filter($articles[$art]['la_id']); ?>
<?php $criteria .=$this->site_model->article_criteria($articles[$art]['LA_ART_ID'],$articles[$art]['ga_id']); ?>
<?php if ($hr !== $articles[$art]['generic_name'].' PRODUCED BY '.$supplier){ ?>
<div class="clearfix"></div>
<?php $hr = $articles[$art]['generic_name'].' PRODUCED BY '.$supplier; ?>
<?php } ?>
<li class="clearfix">
<div class="span4" style="max-height:50px">
<?php if (isset($imagine)){ ?>
<div class="thumbnail"><?php echo $imagine; ?></div>
<?php } else { ?>
<div class="thumbnail"><a href="<?php echo site_url('type/'.$versiune.'/category/'.$tree.'/article/'.$articles[$art]['la_id']); ?>">
I would like to display multiple slideshow on one page from my website.
I'm using a repeater ACF to enter my images.
I'm not able to know in advance how many slideshows are going to be displayed
when one slideshow is displayed, everything works perfectly, but when 2 are displayed, It doesn't work anymore.
does anyone knows how I can fix it ?
here is a basic code without the repeater and with 2 slideshows :
http://jsfiddle.net/XRpeA/13/
<div id="slideframe">
<img class="image_news" src="http://s1.lemde.fr/image/2007/07/09/534x0/933544_5_aa6d_polynesie-bora-bora_0608bcead896ce3f59fc0e2fb3cc7435.jpg" />
<img class="image_news" src="http://production.slashmedias.com/main_images/images/000/005/357/IMAGE-PENSEE-HD-1_original_original_large.jpg?1372235419" />
<img class="image_news" src="http://images.telerama.fr/medias/2013/03/media_94814/une-image-un-film-l-auberge-de-dracula-1931,M106823.jpg" />
</div>
<br>
<div id="counter">image <span id="current">1</span> / <span id="total"></span></div>
<br><br>
<div id="slideframe">
<img class="image_news" src="http://s1.lemde.fr/image/2007/07/09/534x0/933544_5_aa6d_polynesie-bora-bora_0608bcead896ce3f59fc0e2fb3cc7435.jpg" />
<img class="image_news" src="http://production.slashmedias.com/main_images/images/000/005/357/IMAGE-PENSEE-HD-1_original_original_large.jpg?1372235419" />
<img class="image_news" src="http://images.telerama.fr/medias/2013/03/media_94814/une-image-un-film-l-auberge-de-dracula-1931,M106823.jpg" />
</div>
<br>
<div id="counter">image <span id="current">1</span> / <span id="total"></span></div>
and here is my code with the repeater :
http://jsfiddle.net/XRpeA/14/
<?php if(get_field('images')): ?>
<div id="counter_2"><span id="current">1</span> / <span id="total"></span></div>
<div id="slideframe">
<?php while(has_sub_field('images')): ?>
<?php if(get_sub_field('image') != ''){ ?>
<img class="image_news" src="<?php the_sub_field('image'); ?>"/>
<?php } ?>
<?php endwhile; ?>
</div>
<?php endif; ?>
thanks a lot
Ok, so I did it just for you as I promiced, thought I thought it will be faster :)
Result
http://skyloveagency.com/new/
(will remove tomorrow)
Fields:
photo_repeater - repeater
---photo_slider - repeater
------photo_block - image with URL output
Full script, not optimized but works perfectly
<?php
/**
* Template Name: Profiles2
*/
get_header(); ?>
<?php
// query
$args = array(
'post_type' => 'profiles',
'show' => 1
);
$wp_query = new WP_Query($args);
?>
<?php $random = 0;
if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<?php if(get_field('photo_repeater')): ?>
<?php while(has_sub_field('photo_repeater')): ?>
<?php $random++; ?>
<div id="slideframe<?php echo $random; ?>">
<?php if(get_sub_field('photo_slider')): ?>
<?php while( has_sub_field('photo_slider') ): ?>
<?php
$img_url = get_sub_field('photo_block');
$image = aq_resize( $img_url, 200, 200, true );
?>
<img class="image_news" src="<?php echo $image; ?>" alt="111" />
<?php endwhile; ?>
<?php endif; ?>
</div>
<br>
<div id="counter<?php echo $random; ?>">image <span id="current<?php echo $random; ?>">1</span> / <span id="total<?php echo $random; ?>"></span></div>
<script>
var count<?php echo $random; ?> = $('#slideframe<?php echo $random; ?> .image_news').length;
$("#total<?php echo $random; ?>").text(count<?php echo $random; ?>);
// set display:none for all members of ".pic" class except the first
$('#slideframe<?php echo $random; ?> .image_news:gt(0)').hide();
// stores all matches for class="pic"
var $slides<?php echo $random; ?> = $('#slideframe<?php echo $random; ?> .image_news');
$slides<?php echo $random; ?>.click(function () {
// stores the currently-visible slide
var $current<?php echo $random; ?> = $(this);
if ($current<?php echo $random; ?>.is($slides<?php echo $random; ?>.last())) {
$("#current<?php echo $random; ?>").text("1");
$current<?php echo $random; ?>.hide();
$slides<?php echo $random; ?>.first().show();
}
// else, hide current slide and show the next one
else {
$("#current<?php echo $random; ?>").text($current<?php echo $random; ?>.next().index()+1);
$current<?php echo $random; ?>.hide().next().show();
}
});
</script>
<br><br>
<?php endwhile; ?>
<?php endif; ?>
<?php endwhile; ?>
<?php get_footer(); ?>
I have a number of :checkbox elements that are initialized by a wordpress.
Now i set .buttonset() function to #format but this is not work...
like this sample:http://jqueryui.com/button/#checkbox
HTML:
<div id="format">
<?php
$categories = get_categories();
foreach ($categories as $category) { ?>
<input type="checkbox" name="check" value="<?php echo $category->cat_ID; ?>">
<label><?php echo $category->cat_name;?></label><?php } ?>
</div>
JS:
$('#format').buttonset();
$('input[type=checkbox]').removeClass('ui-helper-hidden-accessible');
$(':checkbox[name=check]').each(function( i ){
var nameID = 'check'+ (i+1);
this.id = nameID;
$(this).next('label').prop('for', nameID);
});
All your checkboxes has the same name "check".
Try to do this:
<div id="format">
<?php
$i = 0;
$categories = get_categories();
foreach ($categories as $category) { ?>
<input type="checkbox" name="check<?php echo $i ?>" value="<?php echo $category->cat_ID; ?>">
<label><?php echo $category->cat_name;?></label>
<?php
$i++;
}
?>
</div>
Then in your js:
$(':checkbox[name^=check]').each(function( i ){
var nameID = 'check'+ (i+1);
this.id = nameID;
$(this).next('label').prop('for', nameID);
});
Then jQuery will find all checkboxes that start with name check, like "check1", "checkblabla", etc...
And the "$('#format').buttonset();" needs to come after the "for" change.
Fonts:
http://api.jquery.com/attribute-starts-with-selector/
Edited:
I think you dont really need to change the for with js, you can do that only with php, then:
<div id="format">
<?php
$i = 0;
$categories = get_categories();
foreach ($categories as $category) { ?>
<input type="checkbox" name="check<?php echo $i ?>" value="<?php echo $category->cat_ID; ?>">
<label for="check<?php echo $i ?>"><?php echo $category->cat_name;?></label>
<?php
$i++;
}
?>
</div>
Then in your js:
$( "#format" ).buttonset();