Develop Reference

How to make a div refresh?

So this is my button div inside a PHP function called getDetails().
<div class='detail_cart'>
<a href='detail.php?add_cart=$prod_id'>
<button id='detail_button_add'>Add to cart</button>
</a>
</div>
Based on ip address, it counts how many products you've added in the cart and display them to my shop cart icon.
Every time the button is pressed it adds the product into a database but i need refresh page in order to see the updated count.
echo "<div id ='total_cart'>";
echo $count_cart =mysqli_num_rows($run_cart);
echo "</div>";
I tried to fix but no chance..
<script type= "text/javascript">
$(document).ready(function(){
$("#detail_button_add").bind("click",function(){
$("#total_cart").load("header.php");
});
});
</script>
"header.php" is the header section of my PHP.

You need to add an clear div with an span inside. You will get the data from an API in this case your header.php that returns 1,2 or any number and that will be displayed.
Your header.php
echo mysqli_num_rows($run_cart);
http_response_code(200);
exit;
<div id="total_cart">
<span id="total_cart_num"></span>
</div>
<div>
<a href="detail.php?add_cart=<?=$prod_id ?>">
<button id="detail_button_add">Add to cart</button>
</a>
</div>
<script>
document.querySelector("#detail_button_add").addEventListener("click", function(){
refreshCart();
});
function refreshCart(){
const xhr = new XMLHttpRequest();
// Add link to your Site that returns the count
xhr.open("GET", "header.php"); // Header returns Like 1,2,3 or any Number
xhr.addEventListener("load", function(){
if(this.status == 200){
document.querySelector("#total_cart_num").innerHTML = this.responseText;
} else {
alert("An error as been triggered!");
}
});
xhr.send();
}
</script>

If you mean that this is header.php:
echo "<div id ='total_cart'>";
echo $count_cart =mysqli_num_rows($run_cart);
echo "</div>";
and you do this:
$("#total_cart").load("header.php");
the result would be:
<div id ='total_cart'>
{content from header.php}
</div>
e.g.
<div id ='total_cart'>
<div id ='total_cart'>
{count of cart}
</div>
</div>
The solution is to skip the creation of div in the header.php:
(create that div elsewhere)
//remove echo "<div id ='total_cart'>";
echo $count_cart =mysqli_num_rows($run_cart);
//remove echo "</div>";
If you don't get your click event to work, you might need to use on("click"... instead of bind("click"...
(on also works on dynamically created html elements (with content))
$(document).ready(function(){
$("#detail_button_add").on("click",function(){
//This header.php should NOT include the actual html-element (div) jsut the
//content you want INSIDE the htm-element with id #total_cart
$("#total_cart").load("header.php");
});
});
Another thing with your first code-snippet is that your link won't work:
<a href='detail.php?add_cart=$prod_id'>
It should be (taking for granted you have the code in a php-file)
<a href='detail.php?add_cart=<?php echo $prod_id;?>'>

window.onclick return Cannot read property 'style' of null

Need Help. When I execute window.onclick, it return Cannot read property 'style' of null on browser consol log. did i missed something?
This's HTML Code.
<div id="toolIcon" onclick='document.getElementById("toolCont").style.display = "block";'>
Show Menu
</div>
<div class="msgTextTop" id="streamHead">
<!-- Respond AJAX here -->
</div>
This's PHP Code that will send via AJAX.
echo " <div class='msgTopTool_cont' id='toolCont'>";
echo " <div class='toolContGroup'>";
echo " <ul class='tolContUL'>";
echo " <li class='tolContLI'><a href='profile.php?uid=" . $qFC['ID'] . "'>View Profile</a></li>";
echo " <li class='tolContLI'><a href='javascript:void(0)'>Second Link</a></li>";
echo " </ul>";
echo " </div>";
echo " <div class='toolContGroup'>";
echo " <ul class='tolContUL'>";
echo " <li class='tolContLI'><a href='javascript:void(0)'>Third Link</a></li>";
echo " </ul>";
echo " </div>";
echo " </div>";
Thi's AJAX respond.
function clickbutton() {
//AJAX Code status
document.getElementById('streamHead').innerHTML = this.responseText;
//AJAX Code send
}
This's Javascript Code.
window.onclick = function(event) {
if (!event.target.matches('#toolIcon')) { //toolIcon is a button to show 'toolCont'
document.getElementById('toolCont').style.display = 'none';
}
}

In you Javascript code ')' is missing after ('#toolCont')
Please find the below code and try it.
window.onclick = function(event) {
if (!event.target.matches('#toolCont')) {
document.getElementById('toolCont').style.display = 'none';
}
}

<div onclick='document.getElementById("toolCont").style.display = "block";
it will not respond because u have just changed the div display property to 'none' which means its no longer clickable, u first need to make its diplay back to 'block' by using javascript, not by any event listener , then it will work.

You can check that element is set or not before using it. change your window.onclick as below
window.onclick = function(event) {
if(document.body.contains(document.getElementById('toolCont')))
{
if (!event.target.matches('#toolIcon')) {
document.getElementById('toolCont').style.display = 'none';
}
}
}

In your code a element having id "toolCont" is not defined.
<div id="toolIcon" onclick='document.getElementById("toolIcon").style.color = "red";'>
Change color
</div>
<div class="msgTextTop" id="streamHead">
<!-- Respond AJAX here -->
</div>
<div id="toolIcon" onclick='document.getElementById("toolIcon1").style.display = "block";'>
Show Menu
</div>
<div class="msgTextTop" id="streamHead">
<!-- Respond AJAX here -->
</div>

How to move button after upload image?

My html code is like this :
<input type='file' multiple style="display: none;" id="upload-file" />
<div class="img-container">
<button type="submit" class="btn btn-primary" id="upload-add-product">
<i class="glyphicon glyphicon-plus"></i>
</button>
</div>
<?php
for($i=0;$i<4; $i++) {
?>
<div class="img-container" id="box<?php echo $i ?>">
</div>
<?php
}
?>
My javascript code is like this :
$("#upload-add-product").click(function(){
$("#upload-file").click();
});
$(function () {
$(":file").change(function () {
var noOfFiles = this.files.length;
for(var i=0; i < noOfFiles; i++) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[i]);
}
});
});
function imageIsLoaded(e) {
var imgTmpl = '<img height="142" width="162" src='+e.target.result+'>';
var IsImgAdded=false;
$('.img-container').each(function(){
if($(this).find('img').length==0 && IsImgAdded==false){
$(this).append(imgTmpl);
IsImgAdded=true;
}
});
};
Demo and full code is like this : http://phpfiddle.org/main/code/q47z-p15c
I want to make like this :
When user select 2 image, plus icon will move to box number 3
When user selects 5 image, plus icon will disappear
I had try to move the plus icon, but I can't do it
How can I solve this problem?

You can add buttons to each container only the first button will be visible initially.
display the next button only after the image is added to the container
Update your Html as given below :
<?php for($i=0;$i<5; $i++) { ?>
<div class="img-container" id="box<?php echo $i ?>" data-status="0">
<button type="submit" class="btn btn-primary upload-add-product"<?php
if($i!=0) echo' style="display:none;"'; ?> >
<i class="glyphicon glyphicon-plus"></i>
</button>
</div>
<?php } ?>
Update the JS Function imageIsLoaded() after you set the IsImgAdded flag
$(this).attr('data-status',1)
$(this).find('button').hide()
$('.img-container').each(function(){
if( $(this).attr('data-status') != 1){
$(this).find('button').show();
return false;
}
})
PS : i changed the id : upload-add-product to class upload-add-product
You might need to tweak the code..

Put the plus icon in each and every one of picture frames. Create a function that has an input. That input would be sent from the html such as;
function change(input) {
var a = input;
if (a == 1)
{
document.getElementById(second picture's plus icon).style.display = "block";
document.getElementById(first picture's plus icon).style.display = "none";
}
}
and have if statements for every picture frame. If you up to 5 you disable all the plus icons.
Everytime you finish selecting a picture use function change(frame's index);

Javascript gets only the first id from a foreach loop. Why?

I use a foreach loop to get some tabs with different id's. This way I get tabs with ids tab1, tab2, tab3, etc. Than, when I want to get the id of each tab using javascript, it returns only the id of the first tab and uses this for all tabs. It does not loop as php do. Why?
<?php
foreach ($DB_con->query($foos) as $foo) {
?>
<div id='tab<?php echo $counter_foo; ?>'>
<div id="divid" style="visibility: hidden"><?php echo $counter_foo; ?></div>
<script>
$(document).ready(function() {
var dividvalue = document.getElementById('divid').innerHTML;
alert(dividvalue);
});
</script>
<?php
}
?>

Change the id in your HTML to class, and use getElementsByClassName instead of getElementById your in JavaScript.
Your div:
<div class="divid"> <!-- etc -->
and your JS..
var dividvalue = document.getElementsByClassName('divid')[0].innerHTML;
Also consider changing divid to divclass for consistency's sake.
Full edited code:
<script>
var i = 0;
</script>
<?php
foreach ($DB_con->query($foos) as $foo) {
?>
<div id='tab<?php echo $counter_foo; ?>'>
<div class="divclass" style="visibility: hidden"><?php echo $counter_foo; ?></div>
<script>
$(document).ready(function() {
var divclassvalue = document.getElementsByClassName('divclass')[i].innerHTML;
alert(divclassvalue);
i++;
});
</script>
<?php
}
?>

jquery popup not correct work in php foreach

I am using this jquery popup
$(document).ready(function() {
// Here we will write a function when link click under class popup
$('a.popup').click(function() {
// Here we will describe a variable popupid which gets the
// rel attribute from the clicked link
var popupid = $(this).attr('rel');
// Now we need to popup the marked which belongs to the rel attribute
// Suppose the rel attribute of click link is popuprel then here in below code
// #popuprel will fadein
$('#' + popupid).fadeIn();
// append div with id fade into the bottom of body tag
// and we allready styled it in our step 2 : CSS
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
// Now here we need to have our popup box in center of
// webpage when its fadein. so we add 10px to height and width
var popuptopmargin = ($('#' + popupid).height() + 10) / 2;
var popupleftmargin = ($('#' + popupid).width() + 10) / 2;
// Then using .css function style our popup box for center allignment
$('#' + popupid).css({
'margin-top' : -popuptopmargin,
'margin-left' : -popupleftmargin
});
});
// Now define one more function which is used to fadeout the
// fade layer and popup window as soon as we click on fade layer
$('#fade').click(function() {
// Add markup ids of all custom popup box here
$('#fade , #popuprel , #popuprel2 , #popuprel3').fadeOut()
return false;
});
});
and it's my php and html code in my foreach loop:
<?php foreach($items as $item){ ?>
<a rel="popuprel" class="popup">click hier</a>
<div class="popupbox" id="popuprel">
<div id="intabdiv">
<?php echo $item->description; ?>
</div>
</div>
<div id="fade"></div>
<?php } ?>
now when click and show popup only echo one item description for all items but I want echo each item description for each item.

The Javascript:
<script>
function show_description(id)
{
$('desc').fadeOut();
$('#description_' + id).fadeIn();
}
</script>
The PHP/HTML:
<?php foreach($items as $item){ ?>
<a rel="popuprel" onclick="show_description(<?=$this->id; ?>);">click hier</a>
<div class="popupbox" id="popuprel">
<div class="desc" id="description_<?=$this->id;?>">
<?php echo $item->description; ?>
</div>
</div>
<div id="fade"></div>
<?php } ?>
I assume you can fetch the ID of your item with "$this->id", that's why I used it in the code.

I found how can do it
i replace all popuprel with this code:
$item->id
it's now work