Hi I am working on a project that use bootstrap. I have edit button and that button sends a get request. What I want to do is send that GET request and get it from the bootstrap off-canvas. My off-canvas opens with data-bs-target. Any help?
edit_album_item is the page where off-canvas included
My main page:
<?php include "includes/edit_album_item.php" ?>
<div class="col-md-4" style="margin-top: 20px;">
<div class="card">
<div class="row" style="position: absolute;">
<div class="col-md-4">
<button class="btn btn-danger delete-card"><i class="fa-solid fa-trash"></i></button>
</div>
<div class="col-md-6">
<button class="btn btn-warning delete-card"><i class="fas fa-edit"></i></button>
</div>
</div>
<img src="includes/images/<?php echo $item_image ?>" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><?php echo $item_title ?></h5>
<p class="card-text"><?php echo $item_description ?></p>
</div>
</div>
</div>
Actually the edit_album_item.php is not well developed yet. I want send a get request and open off-canvas get the information from the get request. Thanks in advance!
Example Image
I understand your question. To do this what you need to do is,
add anchor to your edit button to send get request like this
index.php?yourreq
and try this is on the bottom of your page
if(isset($_GET['your req'])) {
echo '
<script>
$("#offcanvasAlbumItem").modal("show");
</script>
';
}
I think now you are good to go.
Related
I have a display_all_groups.php page that display a bootstrap card of all groups created by user. When users click on "View Group" hyperlink it will direct them to view_group.php
Here are my code
session_start();
require_once $_SERVER["DOCUMENT_ROOT"].'/mindspace/Business Services Layer/ManageGroupsController/GroupsController.php';
$std_id = $_SESSION['std_id'];
$group = new ManageGroupsController();
$data = $group->viewGroups($std_id);
?>
<div class="main-panel">
<div class="content-wrapper">
<div class="row">
<div class="col-12 grid-margin stretch-card">
<form method="post">
<?php
foreach($data as $row){
?>
<div class="card-body">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="../../template/images/banner.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><?=$row['group_name']?></h5>
<p class="card-text"></p>
<a class="btn btn-primary" href="view_group.php?group_id=<?=$row['group_id']?>">View Group</a>
</div>
</div>
</div>
</form>
<?php } ?>
</div>
</div>
</div>
</div>
When I try to click on the View Group button, it did not bring me to other page that I want it to. Please help, Im very new to PHP
It's hard to say exactly what the problem could be. First I would always check that $data is not empty. Then the keys are named correctly. I don't know the data object.
If everything is correct, then it should work. A small note: In the link there is still a simple quotation mark. You should delete that too.
<?= $row['group_id']?> >>>>**'**<<<< "
<?php session_start();
require_once $_SERVER["DOCUMENT_ROOT"] . '/mindspace/Business Services Layer/ManageGroupsController/GroupsController.php';
$std_id = $_SESSION['std_id'];
$group = new ManageGroupsController();
$data = $group->viewGroups($std_id);
?>
<div class="main-panel">
<div class="content-wrapper">
<div class="row">
<div class="col-12 grid-margin stretch-card">
<form method="post">
<?php
foreach ($data as $row) {
?>
<div class="card-body">
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="../../template/images/banner.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title"><? echo $row['group_name']; ?></h5> <!-- Used echo -->
<p class="card-text"></p>
<a class="btn btn-primary" href="view_group.php?group_id=<? echo $row['group_id']; ?>">View Group</a> <!-- used echo, removed extra single quote -->
</div>
</div>
</div>
</form>
<?php } ?>
</div>
</div>
</div>
</div>
I had done a few changes in the code,
Used echo
Removed an additional single quote
I have a page where i listed a posts from a database and I want to do that when i clicked a specific post it redirect me to another page with blank area where is more details with ID of this post. I don't know how to do that the blank area will which post were clicked. (Sorry for my english)
<div class="row">
<?php
foreach ($viewmodel as $item) : ?>
<div class="col-sm-4">
<div class="card shadow">
<div class="card-header border-dark shadow"><?php echo $item['TITLE']; ?></div>
<div class="card-body">
<p class="card-text"><?php echo $item['DESCRITIONS']; ?></p>
<a class="btn badge-secondary btn-sm" type="submit"
href="<?php echo ROOT_PATH; ?>shares/zobaczZadanie">More</a>
</div>
<div class="card-footer">
<small class="text-muted"><?php echo $item['DATE']; ?></small>
</div>
</div>
</div>
<?php endforeach; ?>
But I don't have acces to specific post
All the PHP code is in the post loop so when adding a new post it gets also the buttons and when pressing one button it opens all buttons and containers
<div class="col-sm-1 ">
<span class="btn btn-sm album-song">
<a class="btn btn-sm show-album-song">⋁</a>
<a class="btn btn-sm hide-album-song">⋀</a>
</span>
</div>
<div class="container album-songs-show-hide">
<div class="row">
<div class="col-sm-4 name"><?php _e('Song Name', 'koband');?></div>
<div class="col-sm-4"><?php _e('Song Length', 'koband');?></div>
<div class="col-sm-4"><?php _e('Song Details', 'koband');?></div>
</div>
<div class="row" style="background-color: #d6d6d6; border-bottom: 1px solid #000;">
<?php foreach ($album_song_details[0] as $value_song_details) { ?>
<div class="col-sm-4"><?php echo $value_song_details['name-details']; ?></div>
<div class="col-sm-4"><?php echo $value_song_details['length']; ?></div>
<div class="col-sm-4"><?php echo $value_song_details['detail']; ?></div>
<?php } ?>
</div>
</div>
and the jQuery code goes here
$(".album-songs-show-hide").hide();
$(".hide-album-song").hide();
$(".show-album-song").click(function(){
$(this).find(".album-songs-show-hide").slideDown(1000);// show container elements
$(".show-album-song").hide(); // button down hide
$(".hide-album-song").show(); // button up show
});
Thanks to all for commenting solutions but for me this was the working solution for you
$(".album-songs-show-hide").hide();
$(".hide-album-song").hide();
$(".show-album-song").click(function(){
$(this).closest("div.container").find(".album-songs-show-hide").slideDown(1000);// hide container elemnts
$(".show-album-song").hide(); // button down hide
$(".hide-album-song").show(); // button up show
});
I am working on a music web app.On one page I have audios and I want to store it in a playlist. I click on add button so a modal with all the available playlists show up. On this modal I have the ids of playlist, I want to move the id of that audio here but something messy show up. Here is the code
<div id="owl-demo" class="owl-carousel owl-theme">
<?php
$audio=Audio::view_all();
foreach ($audio as $audios) {
$artist=Artist::find_by_id($audios->id);
?>
<div id="playlist" class="audio-cover">
<img src="admin/uploads/images/<?php echo $audios->audio_img_name; ?>">
<h5><?php echo $audios->audio_title; ?></h5><h5><?php echo "artist"; ?></h5>
<h6><?php echo $audios->audio_plays_count; ?> views </h6>
<div class="clear-fix"></div>
<h6><?php echo $audios->audio_likes_count; ?>likes</h6>
<a style="display:none;"track="<?php echo $audios->audio_link_name; ?>"></a>
<i class="fa fa-plus-square add"></i>
<i class="fa fa fa-heart like"></i>
<!--<div class="audio-cover-overlay"><li track="<?php echo $audios->audio_link_name; ?>" cover="<?php echo $audios->audio_img_name; ?>.jpg" artist="<?php echo $audios->audio_title ."-". $artist->name; ?>"><i id="play" class="fa fa-play-circle fa-2x play"></i></li></div>
!-->
</div>
<?php } ?>
</div>
<div class="modal" id="modal_playlists">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Add To Playlist</h3>
</div>
<div class="modal-body">
<?php
$playlist=Playlist::view_all();
foreach ($playlist as $playlists) {
?>
<img src="./admin/uploads/playlist_images/<?php echo $playlists->img_link;?>" height="100px" width="100px">
<?php echo $playlists->title;?><br>
<?php }?>
</div>
</div>
</div>
</div>
Modal shows up for a second but then, this messy thing
Messy Thing after one second appearance of modal
ANy kind of help will be appreciated. Thank you
You can Carry audio id to model by bellow steps
First you have prevent open model automatically.
Create function which call on click of audio div or any element
on that function set audio id in var.
now trigger model, progamicaly. and stores audio id at any where in model by using element.html() or element.val()
I'm trying to make a page that gets entries from a database and displays them in a <div> called "gallery-item". However the lightbox works, it only shows the first entry of the database. I hope someone can make sense of this code and may be able to help me with my problem.
My html/php/sql
<?php if (isset($_POST["Website"])) {
$query=$db->prepare("SELECT * FROM `portfoliodb`.`website`");
$query->execute();
while ( $row = $query->fetch()){
$website_id = $row['website_id'];
$website_name = $row ['website_name'];
$website_desc_en = $row ['website_desc_en'];
$website_tags = $row ['website_tags'];
$website_image = $row ['website_image'];
$website_type = $row['website_type'];
echo'
<div class="background hidden" id="background"></div>
<a>
<div class="lightbox hidden" id="lightbox">
<div class="box-title hidden" id="box-title">
<h4 class="hidden" id="box-title-h">' . htmlspecialchars($website_name) . '</h4>
<h4 class="close hidden" id="close">X</h4>
</div>
<div class="box-img hidden" id="box-img">
</div>
<div class="box-foot hidden" id="box-foot">
<div class="box-space hidden" id="box-space"></div>
<div class="box-desc hidden" id="box-desc">
<p class="desc-text hidden" id="box-text">'. htmlspecialchars($website_desc_en) .' </p>
</div>
<div class="tag-space-box hidden" id="box-tags-space"></div>
<div class="tag-box hidden" id="box-tags">
<small id="box-small" class="hidden">'. htmlspecialchars($website_tags) .'</small>
</div>
</div>
</div>
</a>
<a>
<div class="gallery-item-web button" id="button">
<p class="gallary-item-text">';
echo htmlspecialchars($website_name);
echo'</p>';
echo '<i class="fa fa-desktop fa-3x position-icon"></i>
</div></a>
';
}}
The gallery shows all entries in the database so that works fine, the only problem is that the lightbox shows the first entry, so if I were to have a database with the entries "Apples, Pears, Oranges", the gallery would display "Apples, Pears, Oranges". But the lightbox would display "Apples" on every single entry.
My Jquery
$(document).ready(function(){
$(".button").click(function(){
$("#background").toggleClass("hidden");
$("#lightbox").toggleClass("hidden");
$("#box-title").toggleClass("hidden");
$("#box-title-h").toggleClass("hidden");
$(".close").toggleClass("hidden");
$("#box-img").toggleClass("hidden");
$("#box-foot").toggleClass("hidden");
$("#box-space").toggleClass("hidden");
$("#box-desc").toggleClass("hidden");
$("#box-text").toggleClass("hidden");
$("#box-tags-space").toggleClass("hidden");
$("#box-tags").toggleClass("hidden");
$("#box-small").toggleClass("hidden");
});
$(".close").click(function(){
$("#background").toggleClass("hidden");
$("#lightbox").toggleClass("hidden");
$("#box-title").toggleClass("hidden");
$("#box-title-h").toggleClass("hidden");
$(".close").toggleClass("hidden");
$("#box-img").toggleClass("hidden");
$("#box-foot").toggleClass("hidden");
$("#box-space").toggleClass("hidden");
$("#box-desc").toggleClass("hidden");
$("#box-text").toggleClass("hidden");
$("#box-tags-space").toggleClass("hidden");
$("#box-tags").toggleClass("hidden");
$("#box-small").toggleClass("hidden");
});
$(".background").click(function(){
$("#background").toggleClass("hidden");
$("#lightbox").toggleClass("hidden");
$("#box-title").toggleClass("hidden");
$("#box-title-h").toggleClass("hidden");
$(".close").toggleClass("hidden");
$("#box-img").toggleClass("hidden");
$("#box-foot").toggleClass("hidden");
$("#box-space").toggleClass("hidden");
$("#box-desc").toggleClass("hidden");
$("#box-text").toggleClass("hidden");
$("#box-tags-space").toggleClass("hidden");
$("#box-tags").toggleClass("hidden");
$("#box-small").toggleClass("hidden");
});
});
(It's pretty bad I know, this is my first time using Jquery)
This is the Jquery for the lightbox, it toggles the class on every item of the lightbox to "hidden". Whih basically makes every item with that class invisible, great for a lightbox.
First off, you don't need to add class of "hidden" to every element. You can just add it to the container element and then all tags inside would also be hidden.
Your main mistake was to have the same ids and classes for all images, you will need to ensure that each image has an unique identifier.
Try my solution: https://jsfiddle.net/3vhv90ce/2/
HTML:
<div class="container1">
<div class="background" id="background"></div>
<a>
<div class="lightbox" id="lightbox">
<div class="box-title" id="box-title">
<h4 class="" id="box-title-h">name</h4>
<h4 class="close" id="close">X</h4>
</div>
<div class="box-img" id="box-img">
</div>
<div class="box-foot" id="box-foot">
<div class="box-space" id="box-space"></div>
<div class="box-desc" id="box-desc">
<p class="desc-text" id="box-text">description</p>
</div>
<div class="tag-space-box" id="box-tags-space"></div>
<div class="tag-box" id="box-tags">
<small id="box-small" class="">tags</small>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="gallery-item-web button" data-id="1">
<p class="gallary-item-text">Click me</p>
<i class="fa fa-desktop fa-3x position-icon"></i>
</div>
<div class="container2">
<div class="background" id="background"></div>
<a>
<div class="lightbox" id="lightbox">
<div class="box-title" id="box-title">
<h4 class="" id="box-title-h">name</h4>
<h4 class="close" id="close">X</h4>
</div>
<div class="box-img" id="box-img">
</div>
<div class="box-foot" id="box-foot">
<div class="box-space" id="box-space"></div>
<div class="box-desc" id="box-desc">
<p class="desc-text" id="box-text">description</p>
</div>
<div class="tag-space-box" id="box-tags-space"></div>
<div class="tag-box" id="box-tags">
<small id="box-small" class="">tags</small>
</div>
</div>
</div>
</a>
</div>
</div>
<div class="gallery-item-web button" data-id="2">
<p class="gallary-item-text">Click me</p>
<i class="fa fa-desktop fa-3x position-icon"></i>
</div>
JS:
$(document).ready(function(){
$(".button").click(function(){
$('.container'+$(this).data('id')).toggleClass("hidden");
});
});
CSS:
.hidden {
display: none;
}
.gallery-item-web {
cursor: pointer;
}
I suppose your problem came from those lines:
<div class="background hidden" id="background"></div>
<div class="gallery-item-web button" id="button">
you have many controls with the same id, And this is ambiguous for jQuery.