I am trying to create a collapsible div (using the jQuery Mobile feature) using the data from a MYSQL database. The collapsible styles are not being applied and i cant figure out what the problem is?
possible the php script?
here's what i have
page.html
<html>
<head>
<title>My App</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes">
<!-- css files -->
<!--BoilerPlate-->
<link href="css/normalize.css" rel="stylesheet" type="text/css" />
<!--<link href="css/main.css" rel="stylesheet" type="text/css" />-->
<!--end boilerplate styles-->
<!--my custom css-->
<link href="css/mainstyles.css" rel="stylesheet" type="text/css" />
<link href="css/buttons.css" rel="stylesheet" type="text/css" />
<!-- jQuery mobile js/css -->
<script src="js/jquery-3.1.1.js" type="text/javascript"></script>
<link href="js/jquery.mobile-1.4.5.css" rel="stylesheet" type="text/css" />
<!-- end of custom styles -->
<!-- END css declaration -->
</head>
<body>
<div id="canvasArea"></div>
<canvas id="cnvChart"></canvas>
<!-- JAVASCRIPT Libraries -->
<script src="chart.js/Chart.js" type="text/javascript"></script>
<script src="js/lineGraph.js" type="text/javascript"></script>
<script src="js/jquery-3.1.1.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.4.5.js" type="text/javascript"></script>
<script>
// Listen for orientation changes
window.addEventListener("orientationchange", function () {
location.reload(true);
// Announce the new orientation number
}, false);
var canvasAreaDiv = document.getElementById(
'canvasArea');
if(window.innerHeight > window.innerWidth) {
//portrait mode, so show the php script!
$(canvasAreaDiv).load("php/reflective-notes.php");
}
else {
//show the graph
showGraph();
}
</script>
</body>
script.php
$username = $_SESSION['username'];
$reflectiveMessageQuery = "SELECT date, notes FROM table WHERE
userName = '$username'";
$result = mysqli_query($conn, $reflectiveMessageQuery) or die(mysqli_error());
$count = mysqli_num_rows($result);
$rowCount = 0;
while ($row = mysqli_fetch_array($result)) {
$date = $row['date'];
$note = $row['notes'];
if($note === NULL){
$note = "no notes...";
}
echo'<div data-role="collapsible"><h1>'. $date . '</h1> <p>'.$note.'</p>'
.'</div>';
}
?>
Related
When I hit http://127.0.0.1:8000/welcome everything renders fine.
But with http://127.0.0.1:8000/hh/welcome the page looks like it has no CSS references or anything at all.
Any idea why it is like this and how to solve it?
Thanks a lot!
routes > web.php
Route::get('/hh/welcome', [BikeController::class, 'show']);
Route::get('welcome', [BikeController::class, 'show']);
app > Http > Controllers > BikeController.php
public function show(Bike $bike)
{
return view('bikes.show', [
'bike' => $bike
]);
}
resources > views > bikes > show.blade.php
<x-layout>
<h1>Hello World!</h1>
</x-layout>
resources > views > components > layout.blade.php
<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>BM | Dashboard & Web App Template</title>
<link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicons/favicon-16x16.png" />
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicons/favicon.ico" />
<link rel="manifest" href="assets/img/favicons/manifest.json" />
<meta name="msapplication-TileImage" content="assets/img/favicons/mstile-150x150.png" />
<meta name="theme-color" content="#ffffff" />
<script src="assets/js/config.js"></script>
<script src="vendors/overlayscrollbars/OverlayScrollbars.min.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700%7cPoppins:300,400,500,600,700,800,900&display=swap" rel="stylesheet" />
<link href="vendors/overlayscrollbars/OverlayScrollbars.min.css" rel="stylesheet" />
<link href="assets/css/theme-rtl.min.css" rel="stylesheet" id="style-rtl" />
<link href="assets/css/theme.min.css" rel="stylesheet" id="style-default" />
<link href="assets/css/user-rtl.min.css" rel="stylesheet" id="user-style-rtl" />
<link href="assets/css/user.min.css" rel="stylesheet" id="user-style-default" />
<script>
var isRTL = JSON.parse(localStorage.getItem("isRTL"));
if (isRTL) {
var linkDefault = document.getElementById("style-default");
var userLinkDefault = document.getElementById("user-style-default");
linkDefault.setAttribute("disabled", true);
userLinkDefault.setAttribute("disabled", true);
document.querySelector("html").setAttribute("dir", "rtl");
} else {
var linkRTL = document.getElementById("style-rtl");
var userLinkRTL = document.getElementById("user-style-rtl");
linkRTL.setAttribute("disabled", true);
userLinkRTL.setAttribute("disabled", true);
}
</script>
</head>
<body>
<main class="main" id="top">
<div class="container" data-layout="container">
<script>
var isFluid = JSON.parse(localStorage.getItem("isFluid"));
if (isFluid) {
var container = document.querySelector("[data-layout]");
container.classList.remove("container");
container.classList.add("container-fluid");
}
</script>
#include('_nav-vertical')
<div class="content">
#include('_nav-top')
{{ $slot }}
#include('_footer')
</div>
{{-- #include('_modal') --}}
</div>
</main>
<script src="vendors/popper/popper.min.js"></script>
<script src="vendors/bootstrap/bootstrap.min.js"></script>
<script src="vendors/anchorjs/anchor.min.js"></script>
<script src="vendors/is/is.min.js"></script>
<script src="vendors/echarts/echarts.min.js"></script>
<script src="vendors/fontawesome/all.min.js"></script>
<script src="vendors/lodash/lodash.min.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=window.scroll"></script>
<script src="vendors/list.js/list.min.js"></script>
<script src="assets/js/theme.js"></script>
</body>
</html>
Because you are currently loading your CSS relative to your URL
Try the following:
<link href="{{asset('assets/css/example.css')}}" rel="stylesheet"/>
or take a look at: https://laravel.com/docs/9.x/helpers#method-asset
You are loading assets in the wrong way actually in your layout.blade.php made these modifications. Then it will work fine. Apply this to your all assets like Images, CSS, and JS files. Apply asset function with every asset like this in curly braces.
<link href="{{ asset('assets/css/theme-rtl.min.css') }}" rel="stylesheet" id="style-rtl" />
Apply this on all CSS also on JS like this
<script src="{{ asset('vendors/popper/popper.min.js') }}"></script>
Also make sure all files are aviable on disk.
I'm working on a Laravel project which uses Webflow's CSS framework rather than the default bootstrap framework. It works great for most pages, but I do have a 'profile' page where the CSS does not work at all. I found out it's because the route for the page uses a variable, it looks like this:
Route::get('/chum/{id}', 'App\Http\Controllers\ProfilesController#display');
The function:
public function display($id){
$users = User::findOrFail($id);
$following = $users->followings->count();
$followers = $users->followers->count();
return view('profile', [
'users' => $users,
'following' => $following,
'followers' => $followers
]);
As you can see you go to the URL along with the id of the user's profile and it should bring you there. But for some reason the fact that you're adding that variable to the end of the URL causes the CSS to not work at all. If it helps at all these are the stylesheets and javascript files I'm using in the boilerplate.
<!DOCTYPE html><!-- This site was created in Webflow. http://www.webflow.com -->
<!-- Last Published: Sun Nov 29 2020 00:43:15 GMT+0000 (Coordinated Universal Time) -->
<html data-wf-page="5fc2087d6594016e2f088aed" data-wf-site="5fc06e9787e537386fa53575">
<head>
<meta charset="utf-8">
<title>Profile</title>
<meta content="Profile" property="og:title">
<meta content="Profile" property="twitter:title">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Webflow" name="generator">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/cascade-ui.webflow.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
<script type="text/javascript">
WebFont.load({
google: {
families: ["Courier Prime:regular,italic,700,700italic"]
}
});
</script>
<!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
<script type="text/javascript">
! function(o, c) {
var n = c.documentElement,
t = " w-mod-";
n.className += t + "js", ("ontouchstart" in o || o.DocumentTouch && c instanceof DocumentTouch) && (n.className += t + "touch")
}(window, document);
</script>
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="images/webclip.png" rel="apple-touch-icon">
</head>
<body>
(Content would go here.)
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=5fc06e9787e537386fa53575" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="js/webflow.js" type="text/javascript"></script>
<!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
</body>
</html>
You should change the path/url of your asset to root folder of your site. Maybe just need / at beginning. change
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/cascade-ui.webflow.css" rel="stylesheet" type="text/css">
to
<link href="/css/normalize.css" rel="stylesheet" type="text/css">
<link href="/css/webflow.css" rel="stylesheet" type="text/css">
<link href="/css/cascade-ui.webflow.css" rel="stylesheet" type="text/css">
or you can also change with asset helper function of laravel to add your full URL of the current host. like
<link href="{{asset('css/normalize.css')}}" rel="stylesheet" type="text/css">
{{asset('css/normalize.css')}} will be https://yourhost.com/css/normalize.css
I am having some problem with the ajax . I want to get image name only using ajax but I am getting header and footer content instead of image name..
here is my code.
controller file
public function deleteimageAction() {
$id = (int) $this->params()->fromRoute('id', 0);
$image = $_POST['image'];
return $image;
}
and my ajax-
$('.delete').click(function(e){
var imageName=$(this).attr('data');
var id=$(this).attr('id');
$.ajax({
url:'/test/zend/public/business/deleteimage/'+id,
type: 'POST',
data:{id:id,image:imageName,},
success: function (data) {
alert('Success : please check console')
console.log(data);
},
error:function(data) {
alert('Error : please check console')
console.log(data);
}
});
});
and getting the following result in the console -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ZF2 Skeleton Application</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Le styles -->
<link href="/test/zend/public/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css">
<link href="/test/zend/public/css/style.css" media="screen" rel="stylesheet" type="text/css">
<link href="/test/zend/public/css/bootstrap-responsive.min.css" media="screen" rel="stylesheet" type="text/css">
<link href="/test/zend/public/images/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
<!-- Scripts -->
<script type="text/javascript" src="/test/zend/public/js/jquery.min.js"></script>
<script type="text/javascript" src="/test/zend/public/js/bootstrap.min.js"></script>
<!--[if lt IE 9]><script type="text/javascript" src="/test/zend/public/js/html5.js"></script><![endif]-->
</head>
<body>
</body>
</html>
public function deleteimageAction() {
$id = (int) $this->params()->fromRoute('id', 0);
$image = $_POST['image'];
echo $image;
exit();
}
This code work before this. after i format my laptop, i cant use this code anymore. please help me to solve this. this is my final year project. Fatal error: Cannot redeclare class data in D:\xampp\htdocs\Test1\tedboy\include\home\header.php on line 11
?php include('db.php'); ?>
<?php session_start(); ?>
<?php //print_r($_SESSION['cart']); ?>
<?php date_default_timezone_set('Asia/Kuala_Lumpur'); ?>
<?php
$jim = new data();
$countproduct = $jim->countproduct();
$cat = $jim->getcategory();
class data {
function countproduct(){
$count = 0;
$cart = isset($_SESSION['cart']) ? $_SESSION['cart']:array();
foreach($cart as $row):
if($row['qty']!=0){
$count = $count + 1;
}
endforeach;
return $count;
}
function getcategory(){
$result = mysql_query("SELECT * FROM category");
return $result;
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Tedboy Bakery</title>
<link rel="icon" href="images/home/Tedboy.png" type="image" />
<link href="css/bootstrap1.min.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/main1.css" rel="stylesheet">
<link href="css/responsive1.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head><!--/head-->
<body>
<header id="header"><!--header-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tedboy Bakery</title>
<link rel="icon" href="images/home/damailers_logo.png" type="image" />
<link href="styles/style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<header>
<nav>
<ul id="nav">
<li>Home</li>
<li>Menu</li>
<li>Cart <span class="badge"></span></li>
<li>Gallery</li>
<li><a href="contact.php" >Contact</a></li>
<li>About Us</li>
</ul>
</nav>
</header>
<div class="wrapper">
<div class="border"></div>
</div>
</body>
</html>
</header><!--/header-->
that's because you are using the class before defining it!
Move the Definition of the data class before this line:
$jim = new data();
First, you should declare your data class before using it.
class data { ...
$jim = new data();
Then, double check that your included files don't have the data class declaration already.
I have a little template and in this template I have a query from database.
The name of the page is test.php and the code is:
This is the main page where i echo the content is named test.php
<?php include "components/header.php"; ?>
<div class="container">
<!-- Jumbotron -->
<?php
if (isset($_GET['user']))
{
$user = $_GET['user'];
}
else
{
die("Not found");
}
$result = mysqli_query($con, "SET NAMES utf8");
$query = "SELECT * FROM users WHERE fk_music=".$user;
$res = mysqli_query($con, $query);
$row = mysqli_fetch_assoc($res);
echo $row['text'];?>
</div>
<?php include "components/footer.php"; ?>
Now with the echo $row['text'] I have to echo all the content from the page, and in header.php are the data like <html><header><title></title></header> etc. How can I put a title foreach data from database dynamic?
There is the code from header.php
<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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>???</title>
<!-- Bootstrap core CSS -->
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="http://getbootstrap.com/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<link rel="stylesheet" href="/css/media-queries.css">
<link rel="stylesheet" href="/style.css">
<!--Hover categorii -->
<script src="/js/hover.js"></script>
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="/../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
Now in database i have two rows id of the post and the row named text where is stored the HTML of all the page
Here is an example with content existing in row['text']
<p class='style-title'>HERE IS THE THE TEXT I WANT TO PUT IT IN <title> </p>
<div class='jumbotron'>
<img class='img-responsive' src='/img/img.png'/>
</div>
<div class='row'>
<div class="col-lg-10 ">
<img class='img-responsive' src='/img/50.png' align='left' />
<p class='some-class'>Lorm ipsum</p>