I am trying to make a gallery, which has multiple thumbs that should popup the original image when someone clicks on them, like in the first example in the instructions page on fancybox2 page.
After multiple failed attempts, some of which where even the thumbs were not showing up. I have been suggested to use the CakePHP-Fancybox to fix this, which solved half problem. When someone clicks on the thumbs, that user is being redirected to another page that show the original image, instead of making it float on the gallery itself.
Now I get an Uncaught TypeError: Object [object Object] has no method 'fancybox' in the $(".fancybox3").fancybox({. How can this issue be fixed?
Controller:
public function ShowImages(){
$this->layout = 'default';
$this->loadModel('GalleryImage');
$gallery_images = $this->GalleryImage->find('all');
$this->set('gallery_images', $gallery_images);
//$image_display = $gallery_image['path']
}
View:
<h2>Galeria</h2>
<br>
<table width="100%">
<tr>
<?php
$i=0;
foreach( $gallery_images as $gallery_image ):?>
<td align="center" class="thumbnail" style="display:inline-block;">
<?php
$src3 =$this->webroot. 'img/gallery/' .$gallery_image['GalleryImage']['path'];
//$src3 = 'img/gallery/' .$gallery_image['GalleryImage']['path'];
$this->Fancybox->setProperties( array(
'class' => 'fancybox3',
'className' => 'fancybox.image',
'title'=>'Single Image',
'rel' => 'gallery1'
)
);
$this->Fancybox->setPreviewContent($this->Timthumb->image('/img/gallery/' . $gallery_image['GalleryImage']['path'] , array('width' => 267, 'height' => 189)));
$this->Fancybox->setMainContent($src3);
echo $this->Fancybox->output();
?>
</td>
<?php $i++;
if($i==4){
echo "</tr><tr>";
$i=0;
}
?>
<?php endforeach ?>
</tr>
</table>
Layout (head):
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><?php echo $title_for_layout;//titulo dinamico da página?></title>
<?php
echo $this->Html->meta('icon');
//echo $this->Html->css('cake.generic');
echo $this->fetch('meta');
//echo $this->fetch('css');
echo $this->Html->script('jquery-1.11.0.min');
echo $this->Html->script('jquery.fancybox.pack.js?v=2.1.5');
echo $this->Html->script('main');
echo $this->Html->css('main');
echo $this->Html->script('modernizr-2.6.2-respond-1.1.0.min');
echo $this->Html->css('bootstrap-theme.min');
echo $this->Html->css('bootstrap.min');
echo $this->Html->css('bootstrap');
echo $this->Html->script('bootstrap.min');
echo $this->Html->script('bootstrap');
echo $this->Html->script('dropdown');
echo $this->Html->script('collapse');
?>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<script type="text/javascript">
$(function(){
$(".dropdown-toggle").click(function(){
$(this).dropdown('toggle');
});
});
</script>
<!-- src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"-->
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.</p>
<![endif]-->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<?php
$home_link_image= $this->webroot."img/PushUp.png";
if(!$this->Session->check('Admin')){
$home_link = "/html/PushUp_app/";
}
else{
$home_link = "/html/PushUp_app/admins/admin_index";
}
echo "<a class=\"pushup_logo\" href=\"".$home_link."\">";
//echo" <img src=\"".$home_link_image."\" name=\"logo\" id=\"logo\"/>";
?>
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<?php
//if(!$this->Session->check('User')){
echo $this->Html->link('Home', array('controller'=>'home', 'action'=>'index'));
//}
/*else{
echo $this->Html->link('Administrador', array('controller'=>'admins','action' =>'admin_index'));
}*/
?>
</li>
<li class="dropdown">
Serviços <b class="caret"></b>
<ul class="dropdown-menu">
<li><?php echo $this->Html->link('Música', array('controller'=>'services', 'action'=>'Musica'))?></li>
<li><?php echo $this->Html->link('Animação Temática', array('controller'=>'services', 'action'=>'AnimacaoTematica'))?></li>
<li><?php echo $this->Html->link('Promoção', array('controller'=>'services', 'action'=>'Promocao'))?></li>
<li><?php echo $this->Html->link('Staff', array('controller'=>'services', 'action'=>'Staff'))?></li>
<li><?php echo $this->Html->link('Aluguer', array('controller'=>'services', 'action'=>'Aluguer'))?></li>
</ul>
</li>
<li class="dropdown">
Galeria<b class="caret"></b>
<ul class="dropdown-menu">
<li><?php echo $this->Html->link('Fotografias', array('controller'=>'galleries', 'action'=>'ShowImages'))?></li>
<li><?php echo $this->Html->link('Videos', array('controller'=>'galleries', 'action'=>'ShowVideos'))?></li>
</ul>
</li>
<li><?php echo $this->Html->link('Cartaz', array('controller'=>'showbills', 'action'=>'ShowShowbill'))?></li>
<li><?php echo $this->Html->link('Contactos', array('controller'=>'contacts', 'action'=>'ShowContactUs'))?></li>
<li><?php
/* if(!$this->Session->check('User')){
echo $this->Html->link('Log-in', array('controller'=>'users','action' =>'login'));
}
else{
echo $this->Html->link('Log-out', array('controller'=>'users','action' =>'logout'));
}*/
?>
</li>
</ul>
</li>
</ul>
<!--<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>-->
</div><!--/.navbar-collapse -->
</div>
</div>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container">
</div>
</div>
<div class="container">
<?php echo $this->Session->flash();?>
<!-- Example row of columns --><?php echo $this->fetch('content');?><!--carrega o conteudo para a página-->
<div class="row">
<div class="col-lg-4">
</div>
</div>
<hr>
<footer>
<p>© Company 2013</p>
</footer>
</div> <!-- /container -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
<!--<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>-->
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src='//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
<script type="text/javascript" >
$(document).ready(function() {
$(".fancybox3").fancybox({
openEffect : 'none',
closeEffect : 'none',
helpers : {
title : {
type : 'image'
}
}
});
});
</script>
<?php echo $this->Js->writeBuffer(); ?>
</body>
</html>
If you follow CakePHP-Convention you will put your Fancybox-Mediacontent into your "App/webroot/img/fancybox-media/" - Directory. If so, you're able to access the Media like:
http://www.my-app.com/img/fancybox-media/
The nice way building casual DOM-Elements in your View is using Cake's Form-Helper:
In your AppController:
class AppController extends Controller {
public $helpers = array('Form', 'Session', 'Html');
// Rest of your Code here
}
After that you'll be possible to replace the following line with the one below in your View:
Replace:
echo "<a href=\"gallery/" . $gallery_image['GalleryImage']['path'] . "\"class=\"fancybox_img\">";
echo $this->Html->image('gallery/' . $gallery_image['GalleryImage']['path'] . '', array('width' => '189px', 'height' => '267px', 'alt' => $gallery_image['GalleryImage']['path'] ));
echo "</a>";
With:
$this->Html->link(
$this->Html->image('gallery/' . $gallery_image['GalleryImage']['path'], array('width' => '189px', 'height' => '267px', 'alt' => $gallery_image['GalleryImage']['path'] )
);
And please be sure that your $gallery_image['GalleryImage']['path'] - Variable stores the name of the Image-File. Also ensure the existance of the Image (Case-Sensitive) in "App/webroot/gallery/myImage.jpeg"
Additionally post eventual thrown JS-Errors in your Browsers Dev-Console if you have one. (Try F12)
Related
I've been testing and playing around as part of personal practice, however, I got stuck in the below point where I want to add a list of items via javascript and upon submission, I want to verify and then store the added list. However, once I submit I get an error Unidentified index as if the value is not submitted as checked by isset function and it's always returning empty. After further looking in StackOverflow, I noticed some are referring to the HTML structure; hence, I minimized the HTML to look like the below :
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.min.css">
<link href="assets/vendor/fonts/circular-std/style.css" rel="stylesheet">
<link rel="stylesheet" href="assets/libs/css/customeStyle.css">
<link rel="stylesheet" href="assets/libs/css/style.css">
<link rel="stylesheet" href="assets/vendor/fonts/fontawesome/css/fontawesome-all.css">
<title>Concept - Bootstrap 4 Admin Dashboard Template</title>
</head>
<body>
<!-- ============================================================== -->
<!-- main wrapper -->
<!-- ============================================================== -->
<?php //include("navBar.php"); ?>
<!-- ============================================================== -->
<!-- left sidebar -->
<!-- ============================================================== -->
<?php //include("SlideBar.php"); ?>
<!-- ============================================================== -->
<!-- end left sidebar -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<?php
if(isset($_POST["submit"])){
//$test = $_POST["patName"];
if(isset($_POST["medAdded0"])){
//echo $value;
$listName= $_POST["medAdded0"];
echo '<script language="javascript">';
echo 'alert("'.$listName.'")';
echo '</script>';
echo $listName;
}else {
//echo $value;
echo '<script language="javascript">';
echo 'alert("still empty")';
echo '</script>';
echo $_POST["medAdded0"];
}
}
?>
<form action="#" method="POST">
<div class="row">
<div class="col-xl-8 col-lg-8 col-md-8 col-sm-12 col-12">
<div id="medListContainer" class="form-group">
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<h5 class="card-header">List of Medication</h5>
<div class="card-body">
<div class="list-group" id="pillsList">
<button class="list-group-item list-group-item-action" value="noor">Dapibus ac facilisis in</button>
<button class="list-group-item list-group-item-action" value="btn2">Morbi leo risus</button>
<button class="list-group-item list-group-item-action" value="btn3">Porta ac consectetur ac</button>
</div>
</div>
</div>
</div>
<input class="btn btn-success" type="submit" name="submit" value="Save">
</form>
<!-- Optional JavaScript -->
<!-- jquery 3.3.1 -->
<script src="assets/vendor/jquery/jquery-3.3.1.min.js"></script>
<!-- bootstap bundle js -->
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.js"></script>
<!-- slimscroll js -->
<script src="assets/vendor/slimscroll/jquery.slimscroll.js"></script>
<!-- main js -->
<script src="assets/libs/js/main-js.js"></script>
<script>
var indexCounter=0;
$('#pillsList').on('click', function (e) {
e.preventDefault();
var targetList = document.getElementById("medListContainer");
var medValue= e.target.value;
if (indexCounter==10) {
//code
alert("you've exceeded your limit, please generate new ");
}else{
addMedList(medValue,targetList);
}
});
function addMedList(BtnValue,targetList) {
//function to place the list of selected medicaition
var btn = document.createElement("INPUT");
btn.innerHTML= BtnValue;
btn.className = "list-group-item list-group-item-action";
btn.setAttribute("value", BtnValue);
btn.setAttribute("id", 'medAdded' + indexCounter);
btn.setAttribute("name", 'medAdded' + indexCounter);
indexCounter++;
btn.setAttribute("type", "button");
targetList.appendChild(btn);
}
</script>
</body>
</html>
You've written:
if(isset($_POST["medAdded0"])){
//echo $value;
$listName= $_POST["medAdded0"];
echo '<script language="javascript">';
echo 'alert("'.$listName.'")';
echo '</script>';
echo $listName;
}else {
//echo $value;
echo '<script language="javascript">';
echo 'alert("still empty")';
echo '</script>';
echo $_POST["medAdded0"];
}
The else block is executed when $_POST["medAdded0"] is not set. So it makes no sense to try to echo it there. Get rid of the line
echo $_POST["medAdded0"];
SCRIPT1002: Syntax error
index.php, line 4 character 37
I got this error in IE11 and my .click() handlers are not working on the page where the error occurs (only in IE11). On lines 1 to 10 I got some standart meta tags so that shouldn't be the problem (I removed them and still received the error).
Because I got a lot of code and I don't know where exactly this error occurs. What's the best way to find the responsible code for this error?
Here is the index.php file referenced in the error:
<!DOCTYPE html>
<html lang="en">
<?php
include("database/connect.php");
include("modul/session/session.php");
$sql = "SELECT * FROM `tb_appinfo`;";
$result = $mysqli->query($sql);
if (isset($result) && $result->num_rows == 1) {
$appinfo = $result->fetch_assoc();
}
$sql = "SELECT * FROM `tb_ind_design` WHERE tb_user_ID = $session_userid;";
$result = $mysqli->query($sql);
if (isset($result) && $result->num_rows == 1) {
$row = $result->fetch_assoc();
}
?>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="<?php echo $appinfo["description"];?>">
<meta name="author" content="A.Person">
<title><?php echo $appinfo["title"];?></title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Custom styles for this template -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<?php
if (preg_match("/(Trident\/(\d{2,}|7|8|9)(.*)rv:(\d{2,}))|(MSIE\ (\d{2,}|8|9)(.*)Tablet\ PC)|(Trident\/(\d{2,}|7|8|9))/", $_SERVER["HTTP_USER_AGENT"], $match) != 0) {
echo '<link href="css/evaStyles_ie.css" rel="stylesheet">';
} else {
if(isset($row)){
echo '
<meta name="theme-color" content="'.$row["akzentfarbe"].'"/>
<style>
:root {
--hintergrund: '.$row["hintergrund"].';
--akzentfarbe: '.$row["akzentfarbe"].';
--schrift: '.$row["schrift"].';
--link: '.$row["link"].';
}
html {
--hintergrund: '.$row["hintergrund"].';
--akzentfarbe: '.$row["akzentfarbe"].';
--schrift: '.$row["schrift"].';
--link: '.$row["link"].';
}
</style>
<link href="css/evaStyles.css" rel="stylesheet">
';
} else {
echo '
<meta name="theme-color" content="'.$appinfo["akzentfarbe"].'"/>
<style>
:root {
--hintergrund: '.$appinfo["hintergrund"].';
--akzentfarbe: '.$appinfo["akzentfarbe"].';
--schrift: '.$appinfo["schrift"].';
--link: '.$appinfo["link"].';
}
html {
--hintergrund: '.$appinfo["hintergrund"].';
--akzentfarbe: '.$appinfo["akzentfarbe"].';
--schrift: '.$appinfo["schrift"].';
--link: '.$appinfo["link"].';
}
</style>
<link href="css/evaStyles.css" rel="stylesheet">
';
}
}
?>
</head>
<body>
<div class="loadScreen">
<span class="helper"></span><img class="img-responsive" id="loadingImg" src="img/loading.svg"/>
</div>
<div id="pageContents" style="opacity: 0;">
<!-- Navigation -->
<div id="naviLink">
<nav class="navbar navbar-expand-lg navbar-inverse bg-color fixed-top" id="slideMe" style="display: none;">
<div class="container">
<a class="navbar-brand" href="modul/dashboard/dashboard.php">
<img src="<?php echo $appinfo["logo_path"];?>" width="<?php echo $appinfo["logo_width"];?>" alt="Logo">
<span style="margin-left:20px;"><?php echo $appinfo["title"];?></span>
</a>
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<?php
$userID = ($mysqli->query("SELECT ID FROM tb_user WHERE bKey = '$session_username'")->fetch_assoc());
$sql1 = "SELECT mg.ID, mm.file_path, mm.title FROM tb_ind_nav AS mg INNER JOIN tb_modul AS mm ON mm.ID = mg.tb_modul_ID WHERE mg.tb_user_ID = " . $userID['ID'] . " ORDER BY mg.position";
$result = $mysqli->query($sql1);
if (isset($result) && $result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$link = '
<li class="nav-item">
<a class="nav-link" navLinkId="'. $row["ID"].'" href="'. $row["file_path"].'">'. $translate[$row["title"]].'</a>
</li>
';
echo $link;
}
} else {
$link = '
<li class="nav-item" id="editNavLink">
<a class="nav-link" href="modul/settings/settings.php">'. $translate[15].'</a>
</li>
';
echo $link;
}
?>
</ul>
</div>
</div>
</nav>
</div>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-10 offset-md-1">
<div page="<?php if(isset($_SESSION["user"]["currentPath"])){ echo $_SESSION["user"]["currentPath"]; } else { echo "modul/dashboard/dashboard.php";} ?>" id="pageContent">
</div>
</div>
</div>
</div>
<!-- /.container -->
<footer class="footer" id="slideMeFoot" style="display: none;">
<div class="container">
<a class="foot-link" href="modul/settings/settings.php"><?php echo $translate[16] ?></a><i class="text-muted"> | <?php echo $_SESSION["user"]['username']; ?></i><span class="text-muted">© HTML Link | 2018 | <?php echo $appinfo["title"];?> v.1.0</span>
</div>
</footer>
</div>
<!-- Bootstrap core JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<!-- Own JS -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<script type="text/javascript">
var translate = {};
<?php
foreach ($translate as $key => $value) {
echo ("translate['".$key."'] = '".$value."';");
};
?>;
</script>
<script src="js/index.js"></script>
</body>
</html>
If you are using arrow syntax like value.foreach(param => {}); It can also cause this error in IE 11 since it does not understand shorthand functions. Need to change the function to be: value.foreach(function(param){});
The problem probably resides in your dashboard.js file. On line 4 you have a setInterval():
var id = setInterval(frame, speed, );
There is either a parameter missing or you accidentally added an extra comma.
To reproduce this you can include the dashboard.js file on any page and the syntax error will be displayed.
I have this PHP and jQuery code which works in coalition with my database. This is the only page. The code runs and gives me a row of data, but when I click the collapse button it only works for the first row. Even if I click any other row, that action affects only the first row and all the other rows collapse, which is useless.
How do I make it so that all rows work? It's like the button is doubled and only works for the first row.
<script>
$(function() {
$('div#dl_box').on('show', function(e) {
console.log('show', $(e.target).attr('class'), $(e.target).attr('id'));
$(e.target).prev('.accordion-heading').addClass('active');
});
$('div#dl_box').on('hidden', function(e) {
console.log('hidden', $(e.target).attr('class'), $(e.target).attr('id'));
$(e.target).prev('.accordion-heading').removeClass('active');
});
});
$(document).ready(function() {});
</script>
<?php
$connection = ($GLOBALS["___mysqli_ston"] = mysqli_connect('localhost', 'root', ''));
((bool)mysqli_query($GLOBALS["___mysqli_ston"], "USE " . 'db'));
$query = "SELECT * FROM AS_Questions";
$result = mysqli_query($GLOBALS["___mysqli_ston"], $query);
if (!$result) {
printf("Errormessage: %s\n", $mysqli->error);
}
echo "<table>";
while($row = mysqli_fetch_array($result)){
echo "
<section class='section swatch-white editable-swatch'>
<div class='container'>
<div class='panel panel-primary panel-ws-download'>
<div class='panel-heading'>
<a href='#group_accordion_stable' class='accordion-toggle collapsed' data-parent='#accordion_download' data-toggle='collapse'>
" . $row['Question'] . "
</a>
</div>
<div id='group_accordion_stable' class='panel-collapse collapse' style='height: 0px;'>
<div class='panel-body'>
<!-- first -->
<ul class='list-unstyled list-ws-download'>
<li>" . $row['Answer'] . "</li>
</ul>
</div>
</div>
</div>
</div>
</section>
"; //$row['index'] the index here is a field name
}
echo "</table>"; //Close the table in HTML
((is_null($___mysqli_res = mysqli_close($GLOBALS["___mysqli_ston"]))) ? false : $___mysqli_res); //Make sure to close out the database connection
?>
sample for u.
<!DOCTYPE html>
<html>
<head>
<style>
.default {
display: block;
background: pink;
height: 3em;
width: 10em;
transition: height 5s, background 3s; /*collaspe speed*/
margin-top: 1em;
}
.expanded {
height: 10em;
background: yellow;
transition: height 1s, background 2s; /*expand speed*/
/*display: none;*/
}
</style>
</head>
<body>
<?php
$i = 0;
while ($i <5) {
$i++;
echo '<div class="default" id="ChangeThisId_'.$i.'">';
echo '
<a href="#"
name="ChangeThisId_'.$i.'"
onclick="changeHeight(this.name)">
Click me '. $i .'
</a>
';
echo '</div>';
}
// above return in html.
// <div class="default" id="ChangeThisId_1">
// CLick me 1
// </div>
// <div class="default" id="ChangeThisId_2">
// Click me 2
// and so on till ...5
?>
</body>
<script>
function changeHeight(x){
//alert(x); //x return name of clicked <a> tag.
document.getElementById(x).classList.toggle("expanded");
}
</script>
</html>
This is using css, html(+php to create row), and native javascript.
The idea is to assign an unique for each row.
others are quite self explanatory, hope this helps.
to anyone coming in here in search of sql data display with accordian collapse. here Qid is my tables auto incremented value. AS_Questions is my table name. db is my database name.
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<?php
$connection = ($GLOBALS["___mysqli_ston"] = mysqli_connect('localhost', 'root', 'password')); //The Blank string is the password
((bool)mysqli_query($GLOBALS["___mysqli_ston"], "USE " . 'db'));
$query = "SELECT * FROM AS_Questions";
$result = mysqli_query($GLOBALS["___mysqli_ston"], $query);
if (!$result) {
printf("Errormessage: %s\n", $mysqli->error);
}
echo "<table>";
while($row = mysqli_fetch_array($result)){
echo "
<div class='panel-group' id='accordion'> <!-- accordion 1 -->
<div class='panel panel-primary'>
<div class='panel-heading'> <!-- panel-heading -->
<h4 class='panel-title'> <!-- title 1 -->
<a data-toggle='collapse' data-parent='#accordion' href='#accordion" . $row['Qid'] . "'>
" . $row['Question'] . " <i class='fa fa-eye' style='float: right;'></i>
</a>
</h4>
</div>
<!-- panel body -->
<div id='accordion" . $row['Qid'] . "' class='panel-collapse collapse'>
<div class='panel-body'>
" . $row['Answer'] . "
</div>
</div>
</div>
"; //$row['index'] the index here is a field name
}
echo "</table>"; //Close the table in HTML
((is_null($___mysqli_res = mysqli_close($GLOBALS["___mysqli_ston"]))) ? false : $___mysqli_res); //Make sure to close out the database connection
?>
<?php
$con = mysqli_connect("localhost", "root", "", "student_data")
?>
<!doctype html>
<html lang="en">
<head>
<title>Colapse</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<?php
$count = 0;
$fetch = mysqli_query($con, "SELECT * FROM student_cs");
if (mysqli_num_rows($fetch) > 0) {
while ($record = mysqli_fetch_assoc($fetch)) {
$count++;
?>
<div class="col-4">
<p>
<button <?php $count; ?> class="btn btn-primary mt-3" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<h5> <?php echo $record['s_name']; ?> </h5>
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
<h3> <?php echo $record['id']; ?> </h3>
<h4> <?php echo $record['s_name']; ?> </h4>
<h5> <?php echo $record['rollnumber']; ?> </h5>
<h6> <?php echo $record['class']; ?> </h6>
</div>
</div>
</div>
<?php }
}
?>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I'm building a simple booking system for a friend's holiday house and I'm really struggling to implement it. Only one group can stay in the cottage at one time. First let me run through what the booking system must be able to do (things I've already completed are in brackets).
Receive emails from guests with the dates they want to stay
(completed but haven't included as not relevant).
Admin can then choose those dates in Jquery UI datepicker and
store the fromDate and toDate in the database (completed but not
sure if correct).
The fromDate and toDate are then retrieved from the database and then
disabled in the Jquery UI datepicker (Don't know how to do this).
When the fromDate and toDate are disabled all the dates in between
those dates should be disabled, with the fromDate and toDate in a
slightly different colour to indicate the check in and check out
times (No idea how to do this).
The admin should be able to edit and delete dates stored in the
database. No need for taking payment as this will be handled
offline.
Ok, I'm going to paste in all the code that I have completed so far. I used includes in my file but I will post each file separately here in the order they appear. The most important ones, where all the action is happening are calendar.php and datepicker-admin.js but I've posted everything for context. I really am gazzumped here so if someone could walk me through a solution and help me understand what's going on I would really appreciate it. I took on this project because I thought it would be a good way to learn PHP but I'm a little over my head.
config.php
<?php
define("DB_HOST", "localhost");
define("DB_NAME", "calendar");
define("DB_PORT", "XXXX"); // Not going to display my port online
define("DB_USER", "db_user");
define("DB_PASS", "db_password");
database.php
<?php
require('config.php');
try {
$db = new PDO("mysql:host=" . DB_HOST . ";dbname=" . DB_NAME . ";port=" . DB_PORT,DB_USER,DB_PASS);
$db->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
$db->exec("SET NAMES 'utf8'");
} catch (Exception $e) {
echo "Could not connect to the database";
exit;
}
header.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<title>Sticky Footer Navbar Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/sticky-footer-navbar.css" rel="stylesheet">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="css/style.css">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Wrap all page content here -->
<div id="wrap">
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Muscheltraum</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--container-->
</div><!--navbar-->
calendar.php
<?php
require('inc/header.php');
require('database.php');
// a request method of post indicates that
// we are receiving a form submission
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$fromDate = trim($_POST["fromDate"]);
$toDate = trim($_POST["toDate"]);
if ($fromDate == "") {
$error_message = "You must select a from date";
}
if ($toDate == "") {
$error_message = "You must select a to date";
}
else {
try {
$results = $db->prepare("INSERT INTO availability (fromDate, toDate) VALUES (?, ?)");
$results->bindParam(1, $fromDate);
$results->bindParam(2, $toDate);
$results->execute();
} catch (Exception $e) {
echo "Data could not be inserted.";
exit;
}
header("Location: " . "calendar.php/?status=thanks");
}
}
try {
$results = $db->prepare("SELECT fromDate, toDate FROM availability");
$results->execute();
} catch (Exception $e) {
echo "Data could not be retrieved.";
exit;
}
$disablethese = $results->fetch(PDO::FETCH_ASSOC);
?>
<div class="container">
<div class="row">
<div class="col-md-12">
<?php if (isset($_GET["status"]) AND $_GET["status"] == "thanks") { ?>
<p class="alert alert-success">Successful!</p>
<?php } else { ?>
<?php
if (isset($error_message)) {
echo '<p class="alert alert-danger">' . $error_message . '</p>';
}
} ?>
<form action="calendar.php" method="post">
<div class="form-group">
<label for="fromDate">From</label>
<input type="text" id="fromDate" name="fromDate" data-disablethese="<?=json_encode($disablethese)?>">
<?php echo '<pre>';
var_dump($disablethese);
?>
</div>
<div class="form-group">
<label for="toDate">To</label>
<input type="text" id="toDate" name="toDate"></input>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
<?php require('inc/footer.php');?>
footer.php
</div><!--endwrap-->
<div id="footer">
<div class="container">
<p class="text-muted credit">Place sticky footer content here.</p>
</div>
</div>
<!-- Bootstrap core Javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="js/jquery.ui.datepicker-de.js"></script>
<script src="js/datepicker.js"></script>
<script src="js/datepicker-admin.js"></script>
</body>
</html>
datepicker-admin.js
var disablethese = $("#fromDate").data("disablethese");
console.log(disablethese);
$('#fromDate').datepicker({
beforeShowDay: function (date) {
var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
return [disablethese.indexOf(string) == -1];
}
});
This is what my table looks like at the moment. It only has one row at the moment. id: 10 fromDate: 2014-02-28 toDate: 2014-02-23
I've been trying for two days to figure out what I am doing wrong. I really think that this code should work, but it doesn't. If I swap out the variable on line 57 it will bring up a file onClick. So logically the problem is the variable. But when I trace the variable on line 60, the variable is returning the correct value. So why won't the image load correctly? When I click on the button, simply nothing happens.
++EDIT++
I've tried a bunch of things, and the problem is absolutely with the variable $file. No matter how I test it, $file corresponds to the id number of the item on the list. But when I hit the button, it always pulls item 1. I even went back and edited the code to read:
<img id="loadingImage" src="../maps/<?php echo $name['id']?>.gif" style="visibility:hidden"/>
There is no reason on earth that I can find that this isn't working. 'id' is iterating properly. So why does it think 'id'=1 only after I hit the button?
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="en">
<head>
<meta charset="utf-8">
<title>List of Parks</title>
<link href="guide.css" rel="stylesheet" type="text/css">
<style type="text/css"></style>
<script type="text/javascript" src="../jQuery/jQuery.js"></script>
<script type="text/javascript">
<!--
function showImage() {
document.getElementById('loadingImage').style.visibility = 'visible';
}
-->
</script>
</head>
<body>
<div id="container">
<div id="state"></div>
<div id="list">
<?php foreach ($datas as $name):
{
if ($name['state'] == 'PA')
{
?>
<input type="hidden" name="id" value="<?php echo $name['id']; ?>">
<h2><?php echo htmlspecialchars($name['name'], ENT_QUOTES, 'UTF-8');?></h2>
<?php htmlspecialchars($name['site'], ENT_QUOTES, 'UTF-8');?>
<?php $link = $name['site']; ?>
<ul id="link">
<li class="l1"><?php echo "<a href=$link>$link</a>" ?></li>
</ul>
<br>
<?php echo htmlspecialchars($name['description'], ENT_QUOTES, 'UTF-8');?>
<?php echo htmlspecialchars($name['street'], ENT_QUOTES, 'UTF-8');?>
<br>
<?php echo htmlspecialchars($name['city'], ENT_QUOTES, 'UTF-8');?> ,
<?php echo htmlspecialchars($name['state'], ENT_QUOTES, 'UTF-8');?>
<?php echo htmlspecialchars($name['zip'], ENT_QUOTES, 'UTF-8');?>
<?php $file = $name['id'];
$image = '../maps/'.$file.'.gif';?>
<input type="button" value="click for map" onclick="showImage();" />
<div id="trailmap">
**<img id="loadingImage" src="<?php $image ?>" style="visibility:hidden" />**
</div>
<?php echo $image?>
<hr width="100%" size="3" black />
<?php
}
}
endforeach; ?>
</div>
</div>
<div class="fixbox">
<div id="statemap"></div>
<div id="home"></div>
<div id="guide"></div>
</div>
</body>
</html>