Develop Reference

How do I do an IF statement in my functions.php to determine if I am on the singles product page? (woocommerce)

Hi have made a php function that uploads script to pages with "cart" is_cart() and it all seems to be working properly. But when I try to use is_product() it doesn't register it on the single product page. How do I get my php to render script on the single product page?
I call this function in my functions.php
function refresh_update_qty() {
if (is_cart() || is_product()):
?>
<script type="text/javascript">
jQuery('div.woocommerce').on('click', ' button.plus, button.minus', function(e){
var math_method = '';
if(jQuery(this).hasClass('plus')) {
math_method = "1";
}else if(jQuery(this).hasClass('plus')) {
math_method = "-1";
} else {
// Do nothing
}
var this_input = this.parentNode.querySelector('input[type=number]');
var current_val = this_input.value;
var new_val = parseInt(current_val) + parseInt(math_method);
this_input.value = new_val;
document.getElementById('update_cart_button').disabled = false;
<?php
if(is_cart()):
?>
jQuery("[name='update_cart']").trigger("click");
<?php
endif;
?>
e.preventDefault();
});
</script>
<?php
endif;
}
add_action( 'wp_footer', 'refresh_update_qty' );
Based on woocommerce documentation the is_product() should work, but it doesn't. https://woocommerce.wp-a2z.org/oik_api/is_product/

I figured out the problem. It seems like my products page had the woocommerce class inside the body and my cart has it inside a div. so once I changed jQuery('div.woocommerce') to jQuery('.woocommerce') it worked.
Final code below
function refresh_update_qty() {
if (is_cart() || is_product()):
?>
<script type="text/javascript">
(function($) {
$('.woocommerce').on('click', ' button.plus, button.minus', function(e){
var math_method = '';
if($(this).hasClass('plus')) {
math_method = "1";
}else if($(this).hasClass('minus')) {
math_method = "-1";
} else {
// Do nothing
}
var this_input = this.parentNode.querySelector('input[type=number]');
var current_val = this_input.value;
var new_val = parseInt(current_val) + parseInt(math_method);
this_input.value = new_val;
<?php
if(is_cart()):
?>
// IF CART PAGE UPDATE CART
document.getElementById('update_cart_button').disabled = false;
$("[name='update_cart']").trigger("click");
<?php
endif;
?>
e.preventDefault();
});
})( jQuery );
</script>
<?php
endif;
}
add_action( 'wp_footer', 'refresh_update_qty' );

HTML Select styled by jQuery with infinite loop

I have styled my select items using JQuery, which outputs the items in an unordered list. This is working. I've used some javascript to create in infinite scroll effect on the unordered list. The infinite scroll basically repeats the entire list resulting in two identical sets of list items. However, the cloned set list items are not clickable and thus the form does not render any results when clicking the cloned list items.
Link to the select in question (try the Emotional Quality Select) - http://dev.chrislamdesign.com/shortwave/sample-page/
Link to codepen infinite scroll - https://codepen.io/doctorlam/pen/oKgRvO
Here's my PHP
<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
<div class="container d-flex justify-content-between">
<div class="row" style="width: 100%">
<?php
if( $terms = get_terms( array('hide_empty' => false,'taxonomy' => 'emotional_quality', 'orderby' => 'name' ) ) ) : ?>
<div id="emotional" class="col-md-4">
<?php
echo '<select class="form-submit" name="categoryfilter2"><option value="">Emotional Quality</option>';
foreach ( $terms as $term ) :
echo '<option value="' . $term->term_id . '">' . $term->name . '</option>'; // ID of the category as the value of an option
endforeach;
echo '</select>'; ?>
</div>
<?php endif;
if( $terms = get_terms( array( 'hide_empty' => false,'taxonomy' => 'genre', 'orderby' => 'name' ) ) ) : ?>
<div id="genre" class="col-md-4">
<?php echo '<select class= "form-submit" name="categoryfilter"><option value="">Select genre...</option>';
foreach ( $terms as $term ) :
echo '<option value="' . $term->term_id . '">' . $term->name . '</option>'; // ID of the category as the value of an option
endforeach;
echo '</select>'; ?>
</div>
<?php endif;
if( $terms = get_terms( array( 'hide_empty' => false,'taxonomy' => 'cinematic_style', 'orderby' => 'name' ) ) ) : ?>
<div id="cinematic" class="col-md-4">
<?php echo '<select class="form-submit" name="categoryfilter3"><option value="">Cinematic Style</option>';
foreach ( $terms as $term ) :
echo '<option value="' . $term->term_id . '">' . $term->name . '</option>'; // ID of the category as the value of an option
endforeach;
echo '</select>'; ?>
</div>
<?php endif;
?>
<!-- <button>Apply filter</button> -->
<input type="hidden" name="action" value="myfilter">
</div><!-- row -->
</div>
</form>
Here's the Javascript to style the select
<script>
jQuery(document).ready(function($){
$('select').each(function(){
var $this = $(this), numberOfOptions = $(this).children('option').length;
$this.addClass('select-hidden');
$this.wrap('<div class="select"></div>');
$this.after('<div class="select-styled"></div>');
var $styledSelect = $this.next('div.select-styled');
$styledSelect.text($this.children('option').eq(0).text());
var $list = $('<ul />', {
'class': 'select-options'
}).insertAfter($styledSelect);
$list.wrap('<div class="scroll-container"><div class="wrap-container"></div></div>');
for (var i = 0; i < numberOfOptions; i++) {
$('<li />', {
text: $this.children('option').eq(i).text(),
rel: $this.children('option').eq(i).val()
}).appendTo($list);
}
var $listItems = $list.children('li');
$styledSelect.click(function(e) {
e.stopPropagation();
$('div.select-styled.active').not(this).each(function(){
$(this).removeClass('active').next('.scroll-container').hide();
});
$(this).toggleClass('active').next('.scroll-container').toggle();
});
$listItems.click(function(e) {
e.stopPropagation();
$styledSelect.text($(this).text()).removeClass('active');
$this.val($(this).attr('rel'));
$('.scroll-container').hide();
//console.log($this.val());
});
$(document).click(function() {
$styledSelect.removeClass('active');
$('.scroll-container').hide();
});
});
});
</script>
Here's the Javascript for the infinite scroll
<script>
jQuery(function($){
$('#emotional .wrap-container').attr('id', 'wrap-scroll-1');
$('#emotional .wrap-container ul').attr('id', 'ul-scroll-1');
$('#genre .wrap-container').attr('id', 'wrap-scroll-2');
$('#genre .wrap-container ul').attr('id', 'ul-scroll-2');
$('#cinematic .wrap-container').attr('id', 'wrap-scroll-3');
$('#cinematic .wrap-container ul').attr('id', 'ul-scroll-3');
});
</script>
<!-- Infiinite scroll for emotional quality-->
<script>
var scrollW = document.getElementById("wrap-scroll-1");
var scrollUl = document.getElementById("ul-scroll-1");
var itemsScrolled,
itemsMax,
cloned = false;
var listOpts = {
itemCount: null,
itemHeight: null,
items: []
};
function scrollWrap() {
var scrollW = document.getElementById("wrap-scroll-1");
var scrollUl = document.getElementById("ul-scroll-1");
itemsScrolled = Math.ceil(
(this.scrollTop + listOpts.itemHeight / 2) / listOpts.itemHeight
);
if (this.scrollTop < 1) {
itemsScrolled = 0;
}
listOpts.items.forEach(function(ele) {
ele.classList.remove("active");
});
if (itemsScrolled < listOpts.items.length) {
listOpts.items[itemsScrolled].classList.add("active");
}
if (itemsScrolled > listOpts.items.length - 3) {
var node;
for (_x = 0; _x <= itemsMax - 1; _x++) {
node = listOpts.items[_x];
if (!cloned) {
node = listOpts.items[_x].cloneNode(true);
}
scrollUl.appendChild(node);
}
initItems(cloned);
cloned = true;
itemsScrolled = 0;
}
}
function initItems(scrollSmooth) {
var scrollUl = document.getElementById("ul-scroll-1");
var scrollW = document.getElementById("wrap-scroll-1");
listOpts.items = [].slice.call(scrollUl.querySelectorAll("li"));
listOpts.itemHeight = listOpts.items[0].clientHeight;
listOpts.itemCount = listOpts.items.length;
if (!itemsMax) {
itemsMax = listOpts.itemCount;
}
if (scrollSmooth) {
var scrollW = document.getElementById("wrap-scroll-1");
var seamLessScrollPoint = (itemsMax - 3) * listOpts.itemHeight;
scrollW.scrollTop = seamLessScrollPoint;
}
}
document.addEventListener("DOMContentLoaded", function(event) {
var scrollW = document.getElementById("wrap-scroll-1");
initItems();
scrollW.onscroll = scrollWrap;
});
</script>
AJAX CALL
<script>
jQuery(function($){
jQuery('.select-options li').click(function() {
var filter = $('#filter');
$.ajax({
url:filter.attr('action'),
data:filter.serialize(), // form data
type:filter.attr('method'), // POST
beforeSend:function(xhr){
filter.find('button').text('Processing...'); // changing the button label
},
success:function(data){
filter.find('button').text('Apply filter'); // changing the button label back
$('#response').html(data); // insert data
}
});
return false;
});
});
</script>
The original list items trigger the form and return the correct results. The cloned list items don't. I think it has to do with the identical rel values but am not sure.

Changing your ajax call to the below suggested way should make the click work for you:
<script>
jQuery(function($){
jQuery('body').on('click', '.select-options li', function() {
var filter = $('#filter');
$.ajax({
url:filter.attr('action'),
data:filter.serialize(), // form data
type:filter.attr('method'), // POST
beforeSend:function(xhr){
filter.find('button').text('Processing...'); // changing the button label
},
success:function(data){
filter.find('button').text('Apply filter'); // changing the button label back
$('#response').html(data); // insert data
}
});
return false;
});
});
</script>
The reason as to why this should work is because now the click event is bound on the class irrespective of whether the element with that class was loaded in DOM loading or after the DOM was loaded completely.
The direct call to .click or in the format jQuery('.select-options li').on('click', function(){}); only binds event to elements loaded before the DOM was ready.

button radio wont stay checked after update Wordpress

I m trying to implement query with custom fields on my local wordpress website.
All works like a charm except when I check the radio button, this one want to be checked...
Can you help me please ? thanks for your reply.
<div id="archive-filters">
<?php foreach( $GLOBALS['my_query_filters'] as $key => $name ):
$field = get_field_object($key);
if( isset($_GET[ $name ]) ) {
$field['value'] = explode(',', $_GET[ $name ]);
}
// create filter
?>
<div class="filter" data-filter="<?php echo $name; ?>">
<?php create_field( $field ); ?>
</div>
<?php endforeach; ?>
</div>
<script type="text/javascript">
(function($) {
// change
$('#archive-filters').on('change', 'input[type="radio"]', function(){
var url = '';
args = {};
$('#archive-filters .filter').each(function(){
var filter = $(this).data('filter'),
vals = [];
$(this).find('input:checked').each(function(){
vals.push( $(this).val() );
});
// append to args
args[ filter ] = vals.join(',');
});
// update url
url += '?';
// loop over args
$.each(args, function( name, value ){
url += name + '=' + value + '&';
});
// remove last &
url = url.slice(0, -1);
// reload page
window.location.replace( url );
});
})(jQuery);
</script>

Autocomplete Multiple Values in Codeigniter

I have problem with autocomplete in Codeigninter and Jquery
I have a controller
<?php
public function search() {
$user = $_GET['term'];
$query = $this
->db
->select('nama_kota')
->like('nama_kota', $user)
->get('kota');
if ($query->num_rows() > 0) {
foreach ($query->result_array() as $row) {
$row_set[] = htmlentities(stripslashes($row['nama_kota']));
}
echo json_encode($row_set);
}
}
?>
I have a view
<script>
$(function () {
var availableTags = "<?php echo base_url('admin/kota/search'); ?>";
$("#user-input").autocomplete({
source: availableTags
});
});
</script>
<input id="user-input" type="text" name="nama_kota" placeholder="Search User" autocomplete="on">
everything its okay
but I'm trying multiple values
<script>
$(function () {
var availableTags = "<?php echo base_url('admin/kota/search'); ?>";
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
$("#user-input").autocomplete({
minLength: 0,
source: function (request, response) {
// delegate back to autocomplete, but extract the last term
response($.ui.autocomplete.filter(
availableTags, extractLast(request.term)));
},
focus: function () {
// prevent value inserted on focus
return false;
},
select: function (event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
return false;
}
});
});
</script>
<input id="user-input" type="text" name="nama_kota" placeholder="Search User" autocomplete="on">
no work and availableTags only read addres url no function in controller
whats wrong guys please help me, Thanks

which type off output you need If you need like this
eg.
name,
address,
blood_group.
with output of Autocomplete call

Sorry For late reply I am very very busy in my work
this is JS call to Controller
<script>
jQuery("#h_student_name").autocomplete({
minLength: 0,
source: "DropdownController/hostel_students/" + $("#h_student_name").val(),
autoFocus: true,
scroll: true,
dataType: 'jsonp',
select: function (event, ui) {
jQuery("#h_student_name").val(ui.item.contactPerson);
jQuery("#h_student_id").val(ui.item.code);
}
}).focus(function () {
jQuery(this).autocomplete("search", "");
});
</script>
and this is controller for call
<?php
//Hostel Student Auto compelete
public function hostel_students(){
$term = trim(strip_tags($this->input->get('term')));
if( $term == ''){
$like = $term;
$result_set = $this->DropdownModel->hostel_students(array('hostel_status_id' => 1));
$labels = array();
foreach ($result_set as $row_set) {
$labels[] = array(
'label' => $row_set->student_name.' S/D '.$row_set->father_name.' ,Form# '.$row_set->form_no.' ',
'code' => $row_set->hostel_id,
'value' => $row_set->student_name,
);
}
$matches = array();
foreach($labels as $label){
$label['value'] = $label['value'];
$label['code'] = $label['code'];
$label['label'] = $label['label'];
$matches[] = $label;
}
$matches = array_slice($matches, 0, 10);
echo json_encode($matches);
} else if($term != ''){
$like = $term;
$result_set = $this->DropdownModel->hostel_students(array('hostel_status_id' => 1), $like);
$labels = array();
foreach ($result_set as $row_set) {
$labels[] = array(
'label' => $row_set->student_name.' S/D '.$row_set->father_name.' ,Form# '.$row_set->form_no.' ',
'code' => $row_set->hostel_id,
'value' => $row_set->student_name,
);
}
$matches = array();
foreach($labels as $label){
$label['value'] = $label['value'];
$label['code'] = $label['code'];
$label['label'] = $label['label'];
$matches[] = $label;
}
$matches = array_slice($matches, 0, 10);
echo json_encode($matches);
}
}
?>
and this is model for call
<?php
// Hostel student autocomplete
public function hostel_students($where, $like = NULL){
if($like):
$this->db->like('student_name', $like);
$this->db->or_like('form_no', $like);
$this->db->or_like('college_no', $like);
endif;
$this->db->join('student_record', 'student_record.student_id=hostel_student_record.student_id');
return $this->db->where($where)->get('hostel_student_record')->result();
}
}
?>
have any issue comment me I will online today

Autocomplete multiple value from database

I've completed the question before. However I got another issue. I want to make multiple autocomplete like https://jqueryui.com/autocomplete/#multiple .
I've include function into my script but still doesn't work.
This is html email form code
<div class="input_container">
<input type="text" id="contact_id" name="sender" onkeyup="autocomplet()" size="95">
<input type="hidden" id="client_id" value="<?php echo $id_client; ?>">
<ul id="contact_list"></ul>
This javascript script
function autocomplet() {
var min_length = 1; // min caracters to display the autocomplete
var keyword = $('#contact_id').val();
var cid = $('#client_id').val();
if (keyword.length >= min_length) {
$.ajax({
url: 'ajax_email_refresh.php',
type: 'POST',
data: "keyword="+keyword+"&cid="+cid+"",
success:function(data){
$('#contact_list').show();
$('#contact_list').html(data);
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( ", " );
return false;
}
}
});
} else {
$('#contact_list').hide();
}
}
// set_item : this function will be executed when we select an item
function set_item(item) {
// change input value
$('#contact_id').val(item);
// hide proposition list
$('#contact_list').hide();
}
ajax_email_refresh code
$keyword = '%'.$_POST['keyword'].'%';
$cid = $_POST['keyword2'];
$sql = "SELECT * FROM contact WHERE contact_name LIKE (:keyword) AND id_client = (:cid) ORDER BY contact_id ASC LIMIT 0, 10";
$query = $pdo->prepare($sql);
$query->bindParam(':keyword', $keyword, PDO::PARAM_STR);
$query->execute();
$list = $query->fetchAll();
foreach ($list as $rs) {
// put in bold the written text
$contact_name = str_replace($_POST['keyword'], '<b>'.$_POST['keyword'].'</b>', $rs['contact_email']);
// add new option
echo '<li onclick="set_item(\''.str_replace("'", "\'", $rs['contact_email']).'\')">'.$contact_name.'</li>';
}

I am not sure if I understood correctly what you are looking for. I have included an example that will help you get started. The timer I have included is to minimize the amount of ajax request you will be doing. Instead of making a request on after every single key stroke, it actually waits 250 milliseconds after the last stroke has been made to run your ajax.
var object = [{'key': 'value1'}, {'key': 'value2'}];
var timer;
function autocompletion(element){
clearTimeout(timer);
timer = setTimeout(function(){
var options = element.nextElementSibling;
options.innerHTML = '';
for(var i = 0; i < object.length; ++i){
var li = document.createElement('li');
li.innerHTML = object[i]['key'];
options.appendChild(li);
}
options.style.display = 'block';
}, 250);
}
<div class="input_container">
<input type="hidden" id="id_client" name="id_client" value="<?php echo $id_client; ?>">
<input type="text" id="contact_id" name="sender" onkeyup="autocompletion(this)" size="95">
<ul id="contact_list" style='display: none'></ul>