This picture shows the list of instructors from my database. Whenever the user clicks on the instructor's images.
A modal will appear and will display the broad details about the instructor.The modal displays the name, bio, descriptions and playlist. I'm having a problem when fetching the details about their favorite playlist.
In my database i have the table of playlist(tb: ch_music) where all of the registered favorite playlist of the instructor will be save there.
My conclusion in here is to get the unique id of the instructor and do the query for playlist inside the modal but i dont know how to do that.
Here's my code for fetching the instructor's list(instructor.php)
Whole codes not shown just the important part only
<?php
$instructor_fetch = mysqli_query($link,"SELECT * FROM ch_users AS U LEFT JOIN ch_socialmedia as SM ON U.userId = SM.userId LEFT JOIN ch_music as M ON M.userIdM = U.userId GROUP BY U.userId ORDER BY COUNT(U.userId) DESC");
while($instructor_row=mysqli_fetch_array($instructor_fetch)){
?>
<span id="desc<?php echo $instructor_row['userId']; ?>"><?php echo $instructor_row['description']; ?></span>
<span id="bio<?php echo $instructor_row['userId']; ?>"><?php echo $instructor_row['bio']; ?></span>
<img class="instructorpic" id="imageresource<?php echo $instructor_row['userId']; ?>" src="img/instructor/<?php echo $instructor_row['profile']; ?>">
<?php
}
?>
and here's my modalcustom.js(this js performs the passing of data into modal)
$(document).ready(function(){
$(document).on('click', '.edit', function(){
var id=$(this).val();
var insModal = $('#instructorname'+id).html();
var descModal = $('#desc'+id).html();
var bioModal = $('#bio'+id).html();
$('#imagepreview').attr('src', $('#imageresource'+id).attr('src'));
$('#eIns').html(insModal);
$('#eDesc').html(descModal);
$('#eBio').html(bioModal);
$('#edit').modal('show');
});
});
and here's my codes for the modal(shown the whole codes)
i'm not using data-id this code is from (modal.php) i used include script to my instructor.php
<div class="modal fade bd-example-modal-lg" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<br>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="containermodal flex-direction">
<div class="col-md-5">
<img src="" id="imagepreview" class="instructorpic imageModal">
</div>
<div class="col-md-6">
<h1 id="eIns"></h1>
<span style="color:#ffde03;">CYCLEHOUSE HEAD COACH</span><BR>
"<span id="eBio"></span>"
<BR><BR>
<p id="eDesc"></p>
<BR>
<button class="cycle-button">BOOK NOW</button>
<br><br>
<span style="color:#ffde03;">LISTEN TO MY SPOTIFY PLAYLIST:</span><BR><BR>
<?php
$instructor_music = mysqli_query($link,"SELECT * FROM ch_music WHERE userIdM = '$idkhowtodo'");
while($music_row=mysqli_fetch_array($instructor_music)){
?>
<div class="col-xs-6 col-sm-4">
<img src="img/playlist/<?php echo $music_row['music_img']; ?>" style="height:100px; width:100px;">
</div>
<?php
}
?>
<!--</div>-->
</div>
</div>
</div>
</div>
<div class="modal-footer">
<br>
</div>
</div>
</div>
</div>
What i am trying to do is to allocate the unique id of the instructors to the modal($idkhowtodo) so that the query statement will run properly.
Related
I want to fill a JavaScript array with results from my PHP query to database. I have initially filled it with variables but i wanna get those from database . I am putting the query result the 'liste' variable, I don't know if I can use foreach to fill it, any help would be appreciated thanks.
PHP code:
<?php
$sql="SELECT * FROM produits WHERE cat='Interieur'";
$req=$db->prepare($sql);
$req->execute();
$liste=$req->fetchAll(PDO::FETCH_OBJ);
?>
<?php foreach ($liste as $product): ?> ````
Javascript code:
var arrayTitle = ["Chaise Skandinave", "Chaise2", "Chaise3","Table1","Table2","Table3","Fauteuil1","Fauteuil2","Fauteuil3"];
var arrayImage = ["images/ChaiseSkandinave.jpg", "images/Chaise2.jpg", "images/Chaise3.jpg","images/Table1.jpg","images/Table2.jpg","images/Table3.jpg","images/Fauteuil1.jpg","images/Fauteuil2.jpg","images/Fauteuil3.jpg"];
var arrayDesc = ["a", "b", "c","d","e","f","g","h","i"];
var modal = document.getElementById('myModal');
function openModal(i)
{
modal.style.display = "block";
$(document).ready(function()
{
document.getElementsByClassName("modalimg")[0].src = arrayImage[i];
document.getElementsByClassName("modaltitle")[0].innerHTML = arrayTitle[i];
document.getElementsByClassName("modaldesc")[0].innerHTML = arrayDesc[i];
});
}
HTML CODE:
<div class="container">
<div class="row animate-box">
<div class="col-md-8 col-md-offset-2 text-center fh5co-heading">
<span>Meubles Interieurs</span>
<h2>Produits</h2>
<p></p>
</div>
</div>
<div class="row" id="row1">
</div>
<?php
$sql="SELECT * FROM produits WHERE cat='Interieur'";
$req=$db->prepare($sql);
$req->execute();
$liste=$req->fetchAll(PDO::FETCH_OBJ);
?>
<?php foreach ($liste as $product): ?>
<div class="col-md-4 text-center animate-box">
<div class="product">
<div class="product-grid" style="background-image:url(images/<?php echo $product->num; ?>.jpg)">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3><?php echo $product->nom; ?> </h3>
<span class="price"><?php echo number_format($product->prix,2,',',''); ?> TND</span>
</div>
</div>
</div>
<?php endforeach ?>
</div>
</div>
I'm using this code snippet from Bootstrap:
https://bootsnipp.com/snippets/featured/material-card-reveal-with-image-effect
I then created an Advanced Custom Fields repeater field to show multiple cards. The problem is, once i trigger one card, they all get triggered. Is there a way to separate the action?
Here is my code with the repeater field integrated, the CSS and JS is the same as the Bootstrap demo.
<div class="container">
<div class="row">
<?php if( have_rows('team') ): ?>
<?php while( have_rows('team') ): the_row();
$image = get_sub_field('image');
$position = get_sub_field('position');
$name = get_sub_field('name');
$bio = get_sub_field('bio');
?>
<div class="small-12 medium-4 large-3 columns">
<div class="card">
<div class="card-image"><img class="img-responsive" src="<?php echo $image; ?>"></div>
<button id="show">
<div class="card-content light-grey-bg center text-center">
<span class="card-title hind bold dark-grey text-center caps pt1"><?php echo $position; ?></span>
</div>
<div class="card-action blue-bg center text-center valign">
<p class="hind bold white caps"><?php echo $name; ?></p>
</div>
</button>
<div class="card-reveal">
<span class="card-title"><?php echo $name; ?></span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p><?php echo $bio; ?></p>
</div>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
The best way to handle this would be to put a unique ID on the modal and accompanying trigger. They are all firing at the same time, because they all have the same trigger. You can use a count to generate the unique ID. Your javascript would also have to be in the loop (or you repeat the loop just for the JS).
<div class="container">
<div class="row">
<?php if( have_rows('team') ): ?>
<?php $count = 1;?>
<?php while( have_rows('team') ): the_row();
$image = get_sub_field('image');
$position = get_sub_field('position');
$name = get_sub_field('name');
$bio = get_sub_field('bio');
?>
<div class="small-12 medium-4 large-3 columns">
<div class="card">
<div class="card-image"><img class="img-responsive" src="<?php echo $image; ?>"></div>
<button id="show<?php echo $count; ?>">
<div class="card-content light-grey-bg center text-center">
<span class="card-title hind bold dark-grey text-center caps pt1"><?php echo $position; ?></span>
</div>
<div class="card-action blue-bg center text-center valign">
<p class="hind bold white caps"><?php echo $name; ?></p>
</div>
</button>
<div class="card-reveal panel<?php echo $count; ?>">
<span class="card-title"><?php echo $name; ?></span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p><?php echo $bio; ?></p>
</div>
</div>
</div>
<script>
$(function(){
$('#show<?php echo $count; ?>').on('click',function(){
$('.card-reveal panel<?php echo $count; ?>').slideToggle('slow');
});
$('.card-reveal panel<?php echo $count; ?> .close').on('click',function(){
$('.card-reveal panel<?php echo $count; ?>').slideToggle('slow');
});
});
</script>
<?php $count++; ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
First thing's first: You are repeating this markup, so that ID of show is no longer unique - remove it or make it unique for each repeated item.
Now, I've added a 'show' class to your button:
<button type="button" class="show btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-v"></i>
</button>
And, in the JavaScript, selected that instead. I've used closest() and next() in order to slideToggle the cardReveal in the current context:
$(function(){
$('.show').on('click',function(){
$(this).closest('.card-content').nextAll('.card-reveal').slideToggle('slow');
});
$('.card-reveal .close').on('click',function(){
$(this).closest('.card-reveal').slideToggle('slow');
});
});
See it working here
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.
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');
});
Below is my code, basically it pulls information from the database and displays the stock associated, from here I have a details button which I want to use to send data to another html page to display more information on the product, add to cart etc.
My question is what is considered "Best practice" to send this information, should I simply make a form that gets the ID from the array and sends it on click? Or is there a more efficient way say using jquery?
I assume best practice would be to have a function which the value is passed to from the button form?
<section>
<div class="row">
<div class="col-md-12">
<div class="heading">
<h1>New Mag Wheel Arrivals</h1>
</div>
</div>
</div>
<div class="row products">
<?php while ($product = mysqli_fetch_assoc($wheelResult)) : ?>
<div class="col-md-3 col-sm-6">
<div class="product border">
<div class="image">
<a href="#"><img src=" <?= "images/wheels/wheelphotos/" . $product["bigpic"]; ?>"
alt="<?= $product["manufacturer"]; ?>" class="img-responsive img-demo"></a>
</div>
<div class="ribbon ribbon-quick-view sale">
<div class="theribbon">NEW</div>
<div class="ribbon-background"></div>
</div>
<div class="ribbon ribbon-quick-view logo">
<div class="theribbon"><img src="images/wheels/logos_small/Vs2.png"></div>
<div class="ribbon-background"></div>
</div>
<div class="text text-background">
<h4><?= $product["diam"] . "\" " . $product['manufacturer'] ?></h4>
<p class="brand"><?= "Model " . $product["part_no"]; ?></p>
<button class="btn btn-default btn-sm btn-primary" href="detail.php">Details</button>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
</section>
Sudo code form example
EG
<form action=details.php method="GET">
<button class="btn btn-default btn-sm btn-primary" href="detail.php">Details</button>
hidden-value = $product["recid"]
</form>
As you need to load an entirely new page, so Ajax isn't going to bring any big improvements in terms of user friendliness. I'd suggest you to do this simply like below:
On product listing page (in while loop), place your button like this:
<button class="btn btn-default btn-sm btn-primary" >Details</button>
On detail.php page, simply take the id from $_GET request and then fetch detail for the product from database:
i.e. "SELECT * FROM `products` WHERE `product_id` = ?"
Hint: Use $_GET['id'] for ? as it will contain id of product passed from previous page.