Develop Reference

How show checkbox checked data-img on list

I have this field
<input class="red-heart-checkbox " name="photo[]" type="checkbox" value="<?php echo $id; ?>" id="<?php echo $id; ?>" data-img="<?php echo $imageURL; ?>"/>
And I would like to make a list of image with url image from the data-img checked but I only have values with this code :
<script>
$(function() {
var masterCheck = $("#masterCheck");
var listCheckItems = $("#devel-generate-content-form :checkbox");
masterCheck.on("click", function() {
var isMasterChecked = $(this).is(":checked");
listCheckItems.prop("checked", isMasterChecked);
getSelectedItems();
});
listCheckItems.on("change", function() {
var totalItems = listCheckItems.length;
var checkedItems = listCheckItems.filter(":checked").length;
if (totalItems == checkedItems) {
masterCheck.prop("indeterminate", false);
masterCheck.prop("checked", true);
}
else if (checkedItems > 0 && checkedItems < totalItems) {
masterCheck.prop("indeterminate", true);
}
else {
masterCheck.prop("indeterminate", false);
masterCheck.prop("checked", false);
}
getSelectedItems();
});
function getSelectedItems() {
var getCheckedValues = [];
getCheckedValues = [];
listCheckItems.filter(":checked").each(function() {
getCheckedValues.push($(this).val());
});
$("#selected-values").html(JSON.stringify(getCheckedValues));
}
});
</script>
My result is on :
<li class="list-group-item" id="selected-values"></li>
And looks like this :
Is it possible to have url image instead of the value , or use the result with de database to have url image ?
Thanks a lot !

Two solutions in my opinion,
The one you already suggested, i.e. use a db call
try passing imageURL in value

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' );

Disable right click not working

<head>
<script>
$("body").on("contextmenu", "img", function(e) {
return false;
});
</script>
</head>
<?php
session_start();
include 'connection.php';
include 'sessions.php';
$image_id = $_GET['id'];
$query = "SELECT * FROM medical_data WHERE md_id = '$image_id'";
$result = mysqli_query($con,$query) or die(mysqli_error($con));
if (mysqli_num_rows($result) > 0)
{
while($row = mysqli_fetch_assoc($result))
{
$image = $row['md_pt_image'];
}
}
echo '<img src="data:image/jpeg;base64,'.base64_encode($image).'" height="auto" width="auto"/><br>';
?>
This is my code, I want display an image from database and disable right click on it.
But the JS is not working, i still can right click on the image.
Is it because I am using < img > in echo ? or my JS is wrong!?

As #haxxxton already said that you need to wrap your code in document.ready to make it work.
<script type="text/javascript">
$(document).ready(function(){
$('img').on('contextmenu', function(e) {
return false;
});
});
</script>
Another way of doing it with pure javascript is
<script type='text/javascript'>
function nocontext(e) {
var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName;
if (clickedTag == "IMG") {
return false;
}
}
document.oncontextmenu = nocontext;
</script>

Neel had a perfectly good answer and in fact I upvoted it.
Consider this a second implementation: You can use preventDefault();
function nocontext(e) {
var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName;
if (clickedTag == "IMG") {
e.preventDefault();
}
}
document.oncontextmenu = nocontext;

Just Use Like:
<div id="disabled"></div>
$(document).ready(function() {
$("#disabled").on("contextmenu",function(e){
return false;
});
});
Working JS FIDDLE LINK

Generic function to update DIV

In my display page I have a script that updates a div from another php page.
How do I re-write the below script to:
Be a function I can call with updateadiv(divid,content) in my display page (in php) where content is a php variable. (the script will then not call the php page but take the input variable).
<!DOCTYPE html>
<html>
<body>
function updatediv(divId, content)
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
(function($)
{
$(document).ready(function()
{
$.ajaxSetup(
{
cache: false,
beforeSend: function() {
$('#content').hide();
$('#loading').show();
},
complete: function() {
$('#loading').hide();
$('#content').show();
},
success: function() {
$('#loading').hide();
$('#content').show();
}
});
var $container = $("#content");
$container.load("http://192.168.1.90/json_output.php");
var refreshId = setInterval(function()
{
$container.load('http://192.168.1.90/json_output.php');
}, 9000);
});
})(jQuery);
</script>
<?php
function createarray() {
global $reindexed_devices_a ;
$feed_url = "http://192.168.1.90/JSON?request=getstatus&ref=all&location1=all&location2=all";
//$feed_url = "demoxml.xml";
$json = file_get_contents($feed_url);
$devices_a = json_decode($json, true);
//echo $devices_a[Devices][2][name] ;
//echo "<BR> ReIndexed:";
$reindexed_devices_a = array(Devices => array());
foreach ($devices_a[Devices] as $value) {
$reindexed_devices_a[Devices][$value[ref]] = $value;
}
//echo $reindexed_devices_a[Devices][59][name] ;
//need to do some conditional formatting before updating to DIV's
if ($reindexed_devices_a[Devices][59][name] == 'Coffee maker') {
$reindexed_devices_a[Devices][59][name] = "overwritten";
}
echo time();
//echo $reindexed_devices_a[Devices][59][name] ;
}
createarray();
$name59=$reindexed_devices_a[Devices][59][name];
//check if $name59 has changed - if yes update div
updatediv('59');
echo "This is a test <div id = 'name59'>.....</div>";
?>
</body>
</html>

function updateadiv(DivID , Url){
$('#loading').hide();
$('#' + DivID ).html('');
$.ajax({
url:url,
success:function(rData){
$('#' + DivID ).html(rData);
}
});
}

Jquery .span refresh onclick

Am I correct in thinking this should work?
I have this jquery:
<script>
$(function() {
$(".wpsc_buy_button").click(function(evt) {
$(".counter").load("index.php")
evt.preventDefault();
})
})
</script>
This .span:
<span class="counter">
<?php
$i = 0;
while(wpsc_have_cart_items()): wpsc_the_cart_item();
?>
<?php $i += wpsc_cart_item_quantity(); ?>
<?php endwhile; ?>
<?php print $i ?>
</span>
And this button:
<input type="submit" value="Add To Cart" name="Buy" class="wpsc_buy_button" id="product_16_submit_button"/>

You can change the code to work this way:
<script>
$(function() {
$(".wpsc_buy_button").click(function(evt) {
$.get("index.php", function(){
var current = parseInt($.trim($(".counter").text()));
$(".counter").text(current+1);
});
evt.preventDefault();
})
})
</script>
UPDATED
You're doing it the hard way. Here is the way you should do it:
Locate the file http://tobyclothing.com/wp-content/plugins/wp-e-commerce/wpsc-core/js/wp-e-commerce.js?ver=3.8.7.6.2.494864 and find these lines: (line 248 - 257)
jQuery.post( 'index.php?ajax=true', form_values, function(returned_data) {
eval(returned_data);
jQuery('div.wpsc_loading_animation').css('visibility', 'hidden');
if(jQuery('#fancy_notification') != null) {
jQuery('#loading_animation').css("display", 'none');
//jQuery('#fancy_notificationimage').css("display", 'none');
}
// add your NEW_CODE here
});
your NEW_CODE will be:
var current = parseInt($.trim($(".counter").text()));
$(".counter").text(current+1);
which will then result in:
jQuery.post( 'index.php?ajax=true', form_values, function(returned_data) {
eval(returned_data);
jQuery('div.wpsc_loading_animation').css('visibility', 'hidden');
if(jQuery('#fancy_notification') != null) {
jQuery('#loading_animation').css("display", 'none');
//jQuery('#fancy_notificationimage').css("display", 'none');
}
var current = parseInt($.trim($(".counter").text()));
$(".counter").text(current+1);
});
UPDATE 2
If the user enters any number of quatity
var qty = parseInt(jQuery("input[name='wpsc_quantity_update']").val());
jQuery.post( 'index.php?ajax=true', form_values, function(returned_data) {
eval(returned_data);
jQuery('div.wpsc_loading_animation').css('visibility', 'hidden');
if(jQuery('#fancy_notification') != null) {
jQuery('#loading_animation').css("display", 'none');
//jQuery('#fancy_notificationimage').css("display", 'none');
}
var current = parseInt(jQuery.trim(jQuery(".counter").text()));
jQuery(".counter").text(current+qty);
});