Develop Reference

how to toggle a button in jquery?

the code is working but it has a bug that if you first add a item and go to the modal it will show first the disabled button before the enable if you go back to the item
<script>
$(document).ready(function(){
$("div.container1").click(function(){
$('#show_cart').load('temp_user_cart.php');
if ($("table#dataTable tbody").length) {
$("#deleteButton").attr("disabled", false);
console.log(true);
}
})
});
</script>

Thank for your suggestion and insight, I already solve the problem by using php
<div class="" style="text-align: center; ">
<div class="pl-2 pr-2 pt-3 pb-0" style="display:inline-block;border: 2px solid black; border-radius:5px; ">
<?php
$sqlbd = "SELECT SUM(item_total) AS SUB_TOTAL FROM temp_cart WHERE temp_id = '".$_SESSION['temp_id']."' ";
$resultbd = $conn->query($sqlbd);
while($rowbd = $resultbd->fetch_assoc()){
if ($rowbd['SUB_TOTAL'] == 0) {
?><p style="color: green; ">EMPTY CART</p>
<?php
}else{
?><p style="color: green; "> ₱ <?php echo $rowbd['SUB_TOTAL']; ?>.00</p>
<?php
}
?>
</div>
</div>
<?php
if($rowbd['SUB_TOTAL'] == 0){
?>
<div style="text-align:right;">
<div style="display: inline-block;">
<a href="check-out.php">
<button type="button" id="deleteButton" class="btn btn-primary" disabled="disabled">Go to cart</button>
</a>
</div>
</div>
<?php
}else{
?>
<div style="text-align:right;">
<div style="display: inline-block;">
<a href="check-out.php">
<button type="button" id="deleteButton" class="btn btn-primary">Go to cart</button>
</a>
</div>
</div><?php
}
}
?>

Collapse column only on mobile view and collapse row only on desktop view

I am working on my web application in Yii2. Here is the html layout:
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<div class="caption">
<h3><?php echo $value['strategy_title']; ?></h3>
<p><?php echo $value['strategy_description']; ?></p>
<p><button class="btn btn-info btn-holder"
type="button"
data-toggle="collapse"
data-target="#<?php echo $value['strategy_title']; ?>"
aria-expanded="false"
aria-controls="<?php echo $value['strategy_title']; ?>">
Know more
</button></p>
<div class="collapse" id="<?php echo $value['strategy_title']; ?>">
<p>
<!-- Here is the column chart -->
</p>
</div>
</div>
</div>
</div>
</div>
<div class="row collapse" id="<?php echo $value['strategy_title']; ?>">
<p>
<!-- Here is the row chart -->
</p>
</div>
</div>
This is only a part of the whole page. So what i am actually working with is thumbnails gallery with collapse button, which toggle Highchar.js hidden inside Collapse block. So when the page is in mobile view state i want to make the collapse button toggle chart`s block below it self, like on the picture.
Otherwise when page is in desktop view state i want to make the collapse button toggle row, here is the example on the picture.

I made it, but i guess my solution may be not correct. So i made 2 buttons with defferent classes
<p><button class="btn btn-info btn-holder-xs"
type="button"
data-toggle="collapse"
data-target="#<?php echo $value['strategy_title'] . "-xs"; ?>"
aria-expanded="false"
aria-controls="<?php echo $value['strategy_title'] . "-xs"; ?>">
Узнать больше
</button></p>
<p><button class="btn btn-info btn-holder-md"
type="button"
data-toggle="collapse"
data-target="#<?php echo $value['strategy_title']; ?>"
aria-expanded="false"
aria-controls="<?php echo $value['strategy_title']; ?>">
Узнать больше
</button></p>
Then i wrote some css #media
#media only screen and (max-width : 768px) {
.btn-holder-xs {
display: block;
}
.btn-holder-md {
display: none;
}
}
#media only screen and (min-width : 768px) {
.btn-holder-xs {
display: none;
}
.btn-holder-md {
display: block;
}
}

Modal inside a loop wordpress

I've been reading about this and trying different things without success. I have a loop with different posts and I have a button that when I press on it there is a modal opened to share the post.
I was trying to add a unique ID to each modal so when I click on it open the correct modal with the correct share links. However is not working.
This is the code I am using inside my modal:
<a id="myBtn-<?php echo $post_id; ?>" href="#"><span class="share-text">Compartir</span></a>
<!-- The Modal -->
<div id="myModal-<?php echo $post_id; ?>" class="modal-share">
<!-- Modal content -->
<div class="modal-share-content">
<div class="wrapper">
<div class="modal-share-header">
<span class="close-share">×</span>
<h2>¿Dónde quieres compartirlo?</h2>
<h3><?php the_title(); ?></h3>
<div class="date"><?php
$dateformatstring = "D d M";
$unixtimestamp = strtotime(get_field('fecha'));
echo date_i18n($dateformatstring, $unixtimestamp);
?></div>
</div>
<div class="modal-body">
<ul>
<li class="mobile-only"><a class="share-whatsapp" target="_blank" href="whatsapp://send?text=<?php the_permalink(); ?>" data-action="share/whatsapp/share"><i class="fa fa-whatsapp" aria-hidden="true"></i></a></li>
<li class="mobile-only"><a class="share-messenger" target="_blank" href="fb-messenger://share?link=<?php the_permalink(); ?>"><i class="fa fa-comment" aria-hidden="true"></i></a></li>
<li class="desktop-only"><a class="share-messenger" target="_blank" href="https://www.facebook.com/dialog/send?app_id=1385443625036469&redirect_uri=http://www.fanonfire.com/gracias-por-compartir/&display=popup&link=<?php the_permalink(); ?>"><i class="fa fa-comment" aria-hidden="true"></i></a></li>
<li class="fb"><a class="share-facebook" target="_blank" href="http://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li class="tw"><a class="share-twitter" target="_blank" href="https://twitter.com/share?url=<?php the_permalink(); ?>&lang=es&text=Vente a <?php the_title(); ?> en Madrid via #fanonfire"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
And the script:
<script>
var modal = document.getElementById('myModal-<?php echo $post_id; ?>');
var btn = document.getElementById("myBtn-<?php echo $post_id; ?>");
var span = document.getElementsByClassName("close-share")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
So as I understand when I click on the for example myBtn-1 I must get the modal myModal-1. However I get always the last modal of all my available posts and looking at my code is "working fine".
Any idea?
Thank you!

You would have to add the $post_id to your vars.
Right now you're overwriting btn in every subsequent script (assuming you are echoing thatz script inside your post_id loop).
However this entire approach is bad. Use jQuery to assign the same code to all your links. In the link code, find the elements by going up to the container <div>, then back to the classes.
(function($) {
$(document).ready(function() {
$(".showModal").click(function(e) {
e.preventDefault();
e.stopPropagation();
$parent = $(this).parent();
$(".modal-share").hide();
$parent.find(".modal-share").show();
});
$(".close-share").click(function(e) {
$(this).parent().hide();
});
$(document).click(function(e) {
if (!$(e.target).hasClass("modal-share"))
$(".modal-share").hide();
});
});
})(jQuery);
.post {
background-color: grey;
margin: 1rem;
position: relative
}
.modal-share {
position: absolute;
left: 0;
bottom: 0;
width: 200px;
background-color: green;
border: 2px solid red;
display: none
}
.close-share {
position: absolute;
right: 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">
<p>
Post One
</p>
<a class="showModal" href=""><span class="share-text">Compartir</span></a>
<div class="modal-share">Modal One<span class="close-share">X</span></div>
</div>
<div class="post">
<p>
Post Two
</p>
<a class="showModal" href=""><span class="share-text">Compartir</span></a>
<div class="modal-share">Modal Two<span class="close-share">X</span></div>
</div>
<div class="post">
<p>
Post Three
</p>
<a class="showModal" href=""><span class="share-text">Compartir</span></a>
<div class="modal-share">Modal Three<span class="close-share">X</span></div>
</div>

The solution is very simple:
add the ID to your button as data-target="#ViewDevice-<?php the_ID(); ?>
then add the same id to your modal like id="ViewDevice-<?php the_ID(); ?>
The full code example is below
<button type="button" class="defaultbtn" data-toggle="modal" data-target="#ViewDevice-<?php the_ID(); ?>" >open my unique modal thanks to #jerryurenaa</button>
<div class="modal fade" id="ViewDevice-<?php the_ID(); ?>">
<div class="modal-dialog modal-dialog-centered modal-lg ">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">title goes here or make it dynamic :D </h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p>make content dynamic as needed</p>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button href="/" class="btn btn-primary"> website</button>
</div>
</div>
</div>
</div>

javascript displaying error function is not defined.

Javascript code:
<script>
$(document).ready(function(){
$("#verify").click(function(){
if ($("#cval").val()==$("#captcha").text()){
$("#pop").modal("hide");
var id=$("#captcha").attr("data-id");
if (_ths.hasClass("red")){
$.post(base_url+"index.php/myad/removethumbs",{uniqueid:id},function(){
_ths.removeClass("red");
});
}
else{
$.post(base_url+"index.php/myad/addthumbs",{uniqueid:id},function(){
_ths.addClass("red");
});
}
$("#captcha").val("");
}
else{
$("#cval").val("");
$("#cval").attr("placeholder","invalid captcha");
}
});
function thumb(id,ths){
if (<?=$loggedin?>){
$.post(base_url+"index.php/myad/addthumbs",{uniqueid:id});
$(ths).addClass("red");
}
else{
_ths=$(ths);
var number = Math.floor(Math.random()*90000) + 10000;
$("#captcha").attr("data-id",id);
$("#captcha").text(number);
$("#pop").modal("show");
}
};
function staticthumb(id,ths){
if (<?=$loggedin?>){
if ($(ths).hasClass("red")){
$.post(base_url+"index.php/myad/removethumbs",{uniqueid:id},function(){
$(ths).removeClass("red");
});
}
else{
$.post(base_url+"index.php/myad/addthumbs",{uniqueid:id},function(){
$(ths).addClass("red");
});
}
}
else{
_ths=$(ths);
var number = Math.floor(Math.random()*90000) + 10000;
$("#captcha").attr("data-id",id);
$("#captcha").text(number);
$("#pop").modal("show");
}
};
});
</script>
HTML code:
<div class="col-sm-8" id="lists">
<?php if(isset($products)):?>
<?php foreach($products as $p):?>
<div class="col-md-12">
<div class="product-view row" style="border-bottom:1px solid #eee;margin-bottom:20px;padding:20px 0px 20px 0px;background:#f1f1f1">
<div class="col-sm-3 col-md-3 col-lg-3">
<?php $j = 0;?>
<?php foreach($p['checkbox'] as $checkbox):?>
<?php if($j == 0):?>
<div class="large-image">
<img alt="#" src="<?php echo base_url();?>/uploads/<?php echo $checkbox['Image']?>" />
<div class="image-title"><span class="icon-thumbs-up" onclick="staticthumb(<?php echo $checkbox['UniqueID']?>,this);" id="thumb<?php echo $checkbox['UniqueID']?>" style="font-size:24px;"></span></div>
</div>
<?php endif;?>
<?php $j++;?>
<?php endforeach;?>
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<div class="product-label">
<h4><?php echo $p["FullName"];?>, <?php echo $p["Area"];?></h4>
<h5 style="font-size:14px"><span class="icon-calendar"></span> <?php echo $p["SaleDate"];?></h5>
<h5 style="font-size:14px"><span class="icon-clock"></span>
<?php for($i = 0; $i < count($p['StartTime']); $i++):?>
<?php echo $p['StartTime'][$i].'-'.$p['EndTime'][$i]?>
<?php endfor;?>
</h5>
<div data-balloon-length="fit" data-balloon=" <?php echo $p["Address1"].'-'.$p["Postal"];?>" data-balloon-pos="up" ><h5 style="font-size:14px;width: 100%;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;"><span class="icon-home"></span> <?php echo $p["Address1"].'-'.$p["Postal"];?></h5></div>
<div data-balloon-length="fit" data-balloon=" <?php echo $p["description"];?>" data-balloon-pos="up" ><h5 style="font-size:14px;width: 100%;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;"><span class="icon-file"></span> <?php echo $p["description"];?></h5></div>
<!--<div class="panel-group accordion-simple" id="product-accordion">
<div class="panel" style="background:#f1f1f1;">
<div class="panel-heading"> <a data-toggle="collapse" data-parent="#product-accordion" href="#product-address" class="collapsed"> <span class="arrow-down icon-arrow-down-4"></span> <span class="arrow-up icon-arrow-up-4"></span> Address </a> </div>
<div id="product-address" class="panel-collapse collapse">
<div class="panel-body"><h5 style="font-size:14px"><?php echo $p["Address1"];?></h5></div>
</div>
</div>
<div class="panel" style="background:#f1f1f1;">
<div class="panel-heading"> <a data-toggle="collapse" data-parent="#product-accordion" href="#product-size" class="collapsed"> <span class="arrow-down icon-arrow-down-4"></span> <span class="arrow-up icon-arrow-up-4"></span> Description </a> </div>
<div id="product-size" class="panel-collapse collapse">
<div class="panel-body"><h5 style="font-size:14px"><?php echo $p["description"];?></h5></div>
</div>
</div>
</div>-->
</div>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<div class="product-label">
<h4>CATEGORY</h4>
<?php foreach($p['checkbox'] as $checkbox):?>
<h5 style="font-size:14px"><?php echo $checkbox['Product']?></h5>
<?php endforeach;?>
</div>
</div>
</div>
</div>
<?php endforeach;?>
<?php else:?>
<h3 style="text-align:center">SORRY THERE IS NO ANY DATA IS AVAILABLE.</h3>
<?php endif;?>
HTML code for captcha validation:
<div class="modal fade bs-example-modal-sm" id="pop" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Please verify captcha</h4>
</div>
<div class="modal-body">
<h4 id="captcha" class="text-center"></h4>
<hr>
<div class="form-group">
<input type="text" class="form-control" name="captcha" id="cval" placeholder="enter captcha">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="verify">Verify</button>
</div>
</div>
</div>
</div>
when I am a clicking on thumb it displaying me function staticthumb is not defined. but in reality you can see that I wrote function staticthumb I declared staticthumb function but still it displaying error so please help me. right now I am helpless so please help me and try to resolve my issue and thanks in advance.

A Function declaration in JavaScript has Functional Scope, meaning it is only accessible from within the function in which it is declared. If it is not declared in a function, it is in global scope.
You are declaring your staticthumb function within an anonymous function so it will only be available within that scope. The easiest fix is to move the function declaration out of the anonymous function, which will pollute your global variable space ( which you would want to generally avoid, but that is a topic on its own)
TL;DR; Move your staticthumb function to the first line right after your <script> tag before your $(document).ready.

Boostrap modal update with ajax

I have a page where a generate buttons that have data-id in them. When i click on the button a send the data-id through ajax to my php code, open modal window and generate content with recieved id. But the problem is that i need to refresh the page first to even get some value inside $_POST variable, and after i open and close my modal, i need to refresh page again so my variables update and doesnt open same window.
$(document).ready(function(){
// Otevre modal
$('.show-modal').click(function(){
var product_id = $(this).attr('data-id');
$.ajax({
type: 'POST',
cache: false,
data: {modalID : product_id},
url: 'includes/getID.php', // tomuto souboru predas idecko produktu, zapises do kosiku atd.
success: function(data) {
$("#itemBox").modal('show');
// treba nejaka hlaska, ze byl pridan do kosiku
}
});
// kod co otevre modal, mkrni na bootstrap manual jak je otevira nebo si otevreni nadefinuj sa
//$('.product_id').val(productID);
});
});
Here is JS code,
<?php
if(!isset($_SESSION)){
session_start();
}
if(isset($_REQUEST['modalID'])){
$_SESSION['modalBoxID'] = $_REQUEST['modalID'];
}
?>
Here is how i am saving the requested ID from ajax.
and here is how i generate my modal boxes, the problem is that without refreshing page, every box that i open have same content in it.
<?php
if(!isset($_SESSION)){
session_start();
}
if(!isset($_SESSION['sessName'])){
$_SESSION['sessName'] = 'visitor';
}
if(!empty($_SESSION['modalBoxID'])){
$sql = "SELECT * FROM vehicle WHERE vehicle.id='{$_SESSION['modalBoxID']}'";
$sqlquery = $db->query($sql);
$_SESSION['modalBoxID'] = NULL;
}
?>
<div class="container">
<!-- Modal -->
<div class="modal fade" id="itemBox" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body display-content">
<div class="container-fluid">
<?php while($details = mysqli_fetch_assoc($sqlquery)) : ?>
<div class="col-md-4"><img src=<?php echo $details['image'];?> class="image-responsive">
<div class="col-sm-6">
<form action="add_cart.php" method="post">
<div class="form-group">
<label for="quantity">Quantity:</label>
<input type="text" class="form-control" id="quantity" name="quantity">
</div>
</form>
</div>
<div class="col-sm-6">
<br/>
<button type="button" class="add-to-basket btn btn-success" >ADD TO CART</button>
</div>
</div>
<div class="col-md-1"></div>
<div class="col-md-7" id="desc">
<p><b>Model:</b> <?php echo $details['model'];?></p>
<p><b>Engine:</b> <?php echo $details['engine'];?></p>
<h4>Description</h4>
<p><?php echo $details['description'];?></p>
<hr>
<hr>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
Is this even possible with solution that i have ? I dont even get any content on first page load, i need to refresh it so my ID saves to variable and then it will show some content.

Add below to your javascript. It removes the previous data from modal body. You might experience few some delay before the new content is loaded.
$(document.body).on('hidden.bs.modal', function () {
$("#itemBox").removeData('bs.modal');
});