I am very new to jquery and ajax. Trying to implement selectize plugin that would query the database and return the values as dropdown. In order to do that, here is my php code that brings back data from the table. If I type the url for this php page and pass parameters, it brings back data in json format. {"movies":"value1"}{"movies":"value2"} .....
$q = $_GET['query'];
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = "SELECT column_name from table where segment_name like '%$q%'";
$result = $conn->query($sql);
error_reporting(0);
$name->movies = "";
if ($result->num_rows > 0) {
// output data of each row
while($segment_name = $result->fetch_assoc()) {
$name->movies = $segment_name["segment_name"];
$movies = json_encode($name);
echo $movies;
}
} else {
echo "0 results";
}
$conn->close();
And, here is the jQuery code from the selectize plugin.
<!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>Selectize.js Demo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/stylesheet.css">
<!--[if IE 8]><script src="js/es5.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="../dist/js/standalone/selectize.js"></script>
<script src="js/index.js"></script>
<style type="text/css">
.selectize-control.movies .selectize-dropdown [data-selectable] {
border-bottom: 1px solid rgba(0,0,0,0.05);
height: 60px;
position: relative;
-webkit-box-sizing: content-box;
box-sizing: content-box;
padding: 10px 10px 10px 60px;
}
.selectize-control.movies .selectize-dropdown [data-selectable]:last-child {
border-bottom: 0 none;
}
.selectize-control.movies .selectize-dropdown .by {
font-size: 11px;
opacity: 0.8;
}
.selectize-control.movies .selectize-dropdown .by::before {
content: 'by ';
}
.selectize-control.movies .selectize-dropdown .name {
font-weight: bold;
margin-right: 5px;
}
.selectize-control.movies .selectize-dropdown .description {
font-size: 12px;
color: #a0a0a0;
}
.selectize-control.movies .selectize-dropdown .actors,
.selectize-control.movies .selectize-dropdown .description,
.selectize-control.movies .selectize-dropdown .movies {
display: block;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.selectize-control.movies .selectize-dropdown .actors {
font-size: 10px;
color: #a0a0a0;
}
.selectize-control.movies .selectize-dropdown .actors span {
color: #606060;
}
.selectize-control.movies .selectize-dropdown img {
height: 60px;
left: 10px;
position: absolute;
border-radius: 3px;
background: rgba(0,0,0,0.04);
}
.selectize-control.movies .selectize-dropdown .meta {
list-style: none;
margin: 0;
padding: 0;
font-size: 10px;
}
.selectize-control.movies .selectize-dropdown .meta li {
margin: 0;
padding: 0;
display: inline;
margin-right: 10px;
}
.selectize-control.movies .selectize-dropdown .meta li span {
font-weight: bold;
}
.selectize-control.movies::before {
-moz-transition: opacity 0.2s;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
content: ' ';
z-index: 2;
position: absolute;
display: block;
top: 12px;
right: 34px;
width: 16px;
height: 16px;
background: url(images/spinner.gif);
background-size: 16px 16px;
opacity: 0;
}
.selectize-control.movies.loading::before {
opacity: 0.4;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Selectize.js</h1>
<div class="demo">
<h2>Loading from API</h2>
<p>This demo shows how to integrate third-party data, loaded asynchronously.</p>
<div class="control-group">
<label for="select-movie">Movie:</label>
<select id="select-movie" class="movies" placeholder="Find a movie..."></select>
</div>
<script>
// <select id="select-movie"></select>
$('#select-movie').selectize({
valueField: 'movies',
labelField: 'movies',
searchField: 'movies',
options: [],
create: false,
render: {
option: function(item, escape) {
return '<div>' +
'<span class="movies">' +
'<span class="name">' + escape(item.movies) + '</span>' +
'</span>' +
'</div>';
}
},
load: function(query, callback) {
if (!query.length) return callback();
$.ajax({
//url: 'http://api.rottentomatoes.com/api/public/v1.0/movies.json',
url:'http://localhost/selectize/examples/myphp.php?query='+ encodeURIComponent(query),
type: 'GET',
dataType: 'jsonp',
data: {
q: query,
//page_limit: 10,
//apikey: '3qqmdwbuswut94jv4eua3j85'
},
error: function() {
callback();
},
success: function(res) {
console.log(res);
callback(res);
alert(res);
}
});
}
});
</script>
</div>
</div>
</body>
</html>
But, now I am lost as to how to make this work. I know I am a newbie so, asking for help.
Related
I copied the navigation bar from one Youtube video. I wanted to try Bootstrap and when I added it to my project, the text changed the font and the links went up in the bar.
So how do I make the text look the same as it did before Bootstrap?
Before Bootstrap:
After Bootstrap:
etusivu.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vuosisata | Etusivu</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/navigation.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="js/navigation.js"></script>
</head>
<body>
</body>
</html>
navigation.html:
<nav>
<div class="logo">
<h4>Test</h4>
</div>
<ul class="nav-links">
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
navigation.css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #4a495d;
}
.logo {
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(226, 226, 226);
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
vertical-align: middle;
}
.burger {
display: none;
}
.burger div {
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: fixed;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #4a495d;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 1;
}
.burger {
display: block;
cursor: pointer;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
index.php:
<?php
if (isset($_GET['p'])){
$pageId = preg_replace('/[^A-Za-z0-9\-\_]/', '', $_GET['p']);
if (file_exists('pages/' . $pageId . '.html')) {
readfile('pages/' . $pageId . '.html');
} else {
readfile('pages/404.html');
}
} else {
readfile('pages/etusivu.html');
}
include 'navigation.html';
?>
P.S. I'm sorry for the bad English :D
I have tested the override works. please open in full page and see if this the result you are looking for?
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #4a495d;
}
.logo {
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex !important;
justify-content: space-around !important;
width: 30% !important;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(226, 226, 226);
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
vertical-align: middle;
}
.burger {
display: none;
}
.burger div {
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: fixed;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #4a495d;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 1;
}
.burger {
display: block;
cursor: pointer;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vuosisata | Etusivu</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/navigation.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="js/navigation.js"></script>
</head>
<body>
<nav>
<div class="logo">
<h4>Test</h4>
</div>
<ul class="nav-links">
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
<li>asdf</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<?php
if (isset($_GET['p'])){
$pageId = preg_replace('/[^A-Za-z0-9\-\_]/', '', $_GET['p']);
if (file_exists('pages/' . $pageId . '.html')) {
readfile('pages/' . $pageId . '.html');
} else {
readfile('pages/404.html');
}
} else {
readfile('pages/etusivu.html');
}
include 'navigation.html';
?>
</body>
</html>
This question already has answers here:
PHP's white screen of death [duplicate]
Can I mix MySQL APIs in PHP?
(4 answers)
Closed 5 years ago.
I have a problem. When I open my page I get a white page, it does not appear that the page is loading,
I tried php and html without css,
but that did not work either. Hopefully you can help me!
Thanks in advance!
INDEX.PHP
<?php
ini_set('display_errors',1); error_reporting(E_ALL);
file_get_contents("http://d*********/includes/class.database.php");
session_start();
if( !isset($_SESSION['username']) ){
header("location:inloggen.php?login=again");
}
?>
<?php
$conn = mysqli_connect("localhost", "dutchair_bvh", "password") or die("Kon niet verbinden met de server, meld dit aan Job!");
$output = '';
// lucht
if(isset($_POST['search'])) {
$searchq = $_POST['search'];
$searchg = preg_replace("#[^0-9a-z]#i","",$searchq);
$query = mysql_query("SELECT * FROM dutchair_bvh.burgers WHERE voornaam LIKE '%$searchq%' OR achternaam LIKE '%$searchq%'") or die("Zoeken mislukt");
$count = mysql_num_rows($query);
if($count == 0){
$output = 'Niks gevonden in de politie database!';
} else {
while($row = mysql_fetch_array($query)) {
$voornaam = $row['voornaam'];
$achternaam = $row['achternaam'];
$dob = $row['geboortedatum'];
$id = $row['id'];
}
}
$output .= '<div>'.$voornaam.' '.$achternaam.' '.$dob.'</div>';
?>
<link rel="shortcut icon" type="image/png" href="/favicon.png">
<title>Basisvoorziening Handhaving</title>
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="<?php echo $site; ?>styles/bvh.css">
<link rel="stylesheet" type="text/css" href="<?php echo $site; ?>styles/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://**************6/styles/global.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale: 1.0, user-scaleable=0">
<!-- Insert this line above script imports -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>
<body>
<div id="background"></div>
<div id="header">
<div class="logo">Politie <span>Nederland</span></div> <img src="https://i.gyazo.com/92a8831641f752f13707a4e967f2d8c0.png" height="45" width="55">
<div class="logor">Unit Administration <span>System</span></div>
</div>
<form action="" method="post">
<input type="text" name="search" placeholder="Zoek burger">
<input type="submit" class="btn btn2" value="zoek" />
</form>
<?php print("$output");?>
<?php
}
?>
STYLE.CSS
body {
background: #EDEBED
}
input[type=text] {
width: 190px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.6s ease-in-out;
}
input[type=text]:focus {
width: 30%;
}
.btn{
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.btn2 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.btn2:hover {
background-color: #008CBA;
color: white;
}
GLOBAL.CSS
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300italic,300,400italic,600,600italic,700,700italic,800,800italic);
#import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);
.login-block {
width: 400px;
padding: 20px;
background: #fff;
border-radius: 5px;
border-top: 5px solid #264d73;
margin: 0 auto;
}
.login-block h1 {
text-align: center;
color: #000;
font-size: 18px;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 20px;
}
.login-block input {
width: 100%;
height: 42px;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 20px;
font-size: 14px;
font-family: 'Open Sans';
padding: 0 20px 0 50px;
outline: none;
}
.login-block select {
width: 100%;
height: 42px;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 20px;
font-size: 14px;
font-family: 'Open Sans';
padding: 0 20px 0 50px;
outline: none;
}
.login-block input#username {
background: #fff url('http://i.imgur.com/u0XmBmv.png') 20px top no-repeat;
background-size: 16px 80px;
}
.login-block input#password {
background: #fff url('http://i.imgur.com/Qf83FTt.png') 20px top no-repeat;
background-size: 16px 80px;
}
.login-block input:active, .login-block input:focus {
border: 1px solid #264d73;
}
.login-block button {
width: 100%;
height: 40px;
background: #264d73;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid #264d73;
color: #fff;
font-weight: bold;
text-transform: uppercase;
font-size: 14px;
font-family: 'Open Sans';
outline: none;
cursor: pointer;
}
.login-block button:hover {
background: #afcee9;
}
/*
.credits {
/*margin-left: 1100px;
margin-top: 470px;
margin-left: -650px;
font-size:20px;
}
*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Open Sans';
}
a {
text-decoration: none;
}
/*Start of making table*/
/*End of making table*/
div#header{
width: 100%;
height: 50px;
background-color: #264d73;
margin: 0 auto;
}
.logo {
float: left;
margin-top: 4px;
margin-left: 10px;
text-decoration: none;
}
.logor {
float: right;
margin-top: 4px;
margin-right: 10px;
text-decoration: none;
}
.logor a span {
font-weight: 300;
text-decoration: none;
}
.logor a {
font-size: 1.6em;
color: #fff;
text-decoration: none;
}
.logoE {
float: left;
margin-top: 4px;
margin-left: calc(100% - 320px);
}
.logoE a {
font-size: 1.5em;
color: #fff;
text-decoration: none;
}
.logoE a span {
font-weight: 300;
text-decoration: none;
}
.logo a {
font-size: 1.6em;
color: #fff;
}
.logo a span {
font-weight: 300;
}
input[type=submit]{
padding:5px 20px;
background:#ccc;
border:0 none;
cursor:pointer;
-webkit-border-radius: 5px;
border-radius: 5px;
margin-top: 10px;
margin-right:auto;
margin-left:auto;
}
div#login{
width:600px;
margin: 0% auto auto auto;
font-weight: 300;
}
div#txt{
margin-top:10%;
font-family: 'Open Sans';
font-size: 100px;
color: white;
}
div#login1{
width:600px;
margin: 100px auto auto auto;
font-weight: 300;
}
.content {
width: auto;
height: calc(100% - 86px);
/*height: 100%;*/
margin-left: 250px;
background-color: #F0F0F0;
padding: 15px;
}
a.mobile {
display: block;
color: #fff;
background-color: #000;
text-align: centre;
padding: 7px;
}
a.mobile:active {
background-color: #4A4A4A;
}
#media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {
.sidebar {
width: calc(100% + 280px);
display: none;
height: calc(100% + 115px);
}
div#txt{
font-family: 'Open Sans';
font-size: 100px;
color: white;
margin-left: 30%;
}
.content {
margin-left: 0px;
width: calc(100% + 280px);
height: calc(100% + 320px);
/*height: 100%;*/
background-color: #F0F0F0;
padding: 15px;
}
div#header{
width: calc(100% + 280px);
height: 50px;
background-color: #264d73;
margin: 0 auto;
}
a.mobile {
/*display: none;*/
width: calc(100% + 280px);
}
div#login{
margin-bottom: 390px;
}
}
#media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
.sidebar {
width: calc(100% + 900px);
display: none;
height: calc(100% + 255px);
}
.content {
margin-left: 0px;
height: calc(100% + 500px);
width: calc(100% + 900px);
}
div#txt{
margin-top:1%;
font-family: 'Open Sans';
font-size: 100px;
color: white;
margin-left: 92%;
}
div#header{
width: 100%;
height: 50px;
margin: 0 auto;
}
.content {
width: calc(100% + 900px);
height: calc(100% + 500px);
background-color: #F0F0F0;
padding: 15px;
}
.table-fill {
background: white;
border-radius:3px;
border-collapse: collapse;
height: auto;
margin: auto;
padding:5px;
width: auto;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
animation: float 5s infinite;
}
.search {
margin-left: 0;
margin-top: -30px;
}
.searchBar {
margin-left: 70;
margin-top: 20px;
}
.logoE {
float: left;
margin-top: 4px;
margin-left: calc(100% - 300px);
}
div#header{
width: calc(100% + 900px);
height: 50px;
background-color: #264d73;
margin: 0 auto;
}
.kick {
margin-left: 100px;
margin-top: -30px;
}
.note {
margin-left: 200px;
margin-top: -30px;
}
a.mobile {
width: calc(100% + 900px);
/*display: none;*/
}
div#login{
margin-left: 75%;
margin-top: 20%;
margin-bottom: 40px;
}
}
Hope you guys know what is wrong!
(There are no errors)
Greetings, Job
I am new to this and still learning. So its more of question than answer. I got rid of the last french brace after the print output statment and moved it up to the main php after the you define your $ouput variable. I left he print $output where it was.
I got a search box on the screen. I am not sure why that brace was there at all.
good luck
Here is code:
(i had to comment out lines that were giving me errors for obvious reasons)
<?php ini_set('display_errors',1); error_reporting(E_ALL);
//file_get_contents("http://d*********/includes/class.database.php");
session_start();
if( !isset($_SESSION['username']) ){
// header("location:inloggen.php?login=again");
}
?>
<?php
//$conn = mysqli_connect("localhost", "dutchair_bvh", "password") or die("Kon niet verbinden met de server, meld dit aan Job!");
$output = '';
// lucht
if(isset($_POST['search'])) {
$searchq = $_POST['search'];
$searchg = preg_replace("#[^0-9a-z]#i","",$searchq);
$query = mysql_query("SELECT * FROM dutchair_bvh.burgers WHERE voornaam LIKE '%$searchq%' OR achternaam LIKE '%$searchq%'") or die("Zoeken mislukt");
$count = mysql_num_rows($query);
if($count == 0){
$output = 'Niks gevonden in de politie database!';
} else {
while($row = mysql_fetch_array($query)) {
$voornaam = $row['voornaam'];
$achternaam = $row['achternaam'];
$dob = $row['geboortedatum'];
$id = $row['id'];
}
}
$output .= '<div>'.$voornaam.' '.$achternaam.' '.$dob.'</div>';
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" type="image/png" href="/favicon.png">
<title>Basisvoorziening Handhaving</title>
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="<?php echo $site; ?>styles/bvh.css">
<link rel="stylesheet" type="text/css" href="<?php echo $site; ?>styles/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://**************6/styles/global.css">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale: 1.0, user-scaleable=0">
<!-- Insert this line above script imports -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>
<body>
<div id="background"></div>
<div id="header">
<div class="logo">Politie <span>Nederland</span></div> <img src="https://i.gyazo.com/92a8831641f752f13707a4e967f2d8c0.png" height="45" width="55">
<div class="logor">Unit Administration <span>System</span></div>
</div>
<form action="" method="post">
<input type="text" name="search" placeholder="Zoek burger">
<input type="submit" class="btn btn2" value="zoek" />
</form>
<?php print("$output");?>
</body>
</html>
Index function works fine, any other does not show bootstrap effects. I think I have seen all the topics about it here and i cant find any solution.
Controller:
<?php
class Certyfikat extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->load->view('/templates/header');
}
function index()
{
}
function nowy()
{
$this->load->view('/certyfikat/dodaj_nowy');
}
}
View header:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin 0;
padding: 0;
overflow: show;
background-color: #333333;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
padding: 20px;
text-decoration: none;
}
.main {
margin-top: 50px;
background-color: #cccccc;
}
a.button {
background-color: black;
border: none;
color: white;
padding: 5px 70px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0,4s;
}
a.button:hover {
color: white;
background-color: red;
font-size: 20px;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
</style>
<link rel="stylesheet" href="<?php echo base_url("assets/css/bootstrap.css"); ?>" />
</head>
<body class="main">
<ul>
<li><a class="button" href="/home">Home</a></li>
<li><a class="button" href="/certyfikat">Certyfikaty</a></li>
<li><a class="button" href="/category_create">cr</a></li>
</ul>
<?php $this->load->view('/templates/alrets'); ?>
<script type="text/javascript" src="<?php echo base_url("assets/js/jquery-3.1.1.js"); ?>"></script>
<script type="text/javascript" src="<?php echo base_url("assets/js/bootstrap.js"); ?>"></script>
</body>
</html>
View dodaj_nowy:
<!DOCTYPE html>
<html>
<head>
<title>My Blog</title>
</head>
<body>
<h1>Welcome to my Blog!</h1>
</body>
</html>
My blade view shows a empty page, but if I press CTRL + U to show the source code, then I get this:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='http://localhost/portal_testing/public/css/style.css'/>
<script src='http://localhost/portal_testing/public/js/main.js'/>
</head>
<body>
<div>
<div class='infoBox'>
<h4 class='infoBoxTitle'>Log:</h4>
<div class='infoBoxContent'>
<p>test</p>
</div>
</div>
<div class='errorBox'>
<h4 class='errorBoxTitle'>Error Log:</h4>
<div class='errorBoxContent'>
<p>test</p>
</div>
</div>
</div>
</body>
</html>
Why is it not rendering even though there is valid code?
UPDATE:
Javascript:
//Accordion:
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
}
}
CSS
.infoBox {
font-family: arial;
padding:2px;
background-color: #DADADA;
min-width: 300px;
min-height: 100px;
margin:2px;
border:1px solid black;
}
.infoBoxTitle {
padding:4px;
font-size: 13px;
color: red;
margin: 1px;
text-decoration: underline;
}
.infoBoxContent {
font-size: 10px;
padding-left:5px;
margin-left:10px;
border: 1px solid gray;
}
.errorBox {
font-family: arial;
padding:2px;
background-color: #838383;
min-width: 300px;
min-height: 100px;
margin:2px;
border:1px solid black;
}
.errorBoxTitle {
padding:4px;
font-family: calibry;
font-size: 13px;
color: white;
margin: 1px;
text-decoration: underline;
}
.errorBoxContent {
color: white;
font-size: 11px;
padding-left:5px;
margin-left:10px;
border: 4px solid white;
}
I found the problem...
I noticed that all the content was rendered inside of the script tag:
The reason is, becaues the script element was missing it's closing tag.
Fix:
<script type="text/javascript" src='{{ URL::asset("js/main.js") }}'></script>
I have the following html/php code. On clicking any of the tabs link the content of the file is not getting loaded in the specific <div> tag.
PHP code :
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul.tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
ul.tabs li { display: inline; }
ul.tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.4em 2.5em 0.3em 2.5em; border-radius : 5px 5px 0 0; }
ul.tabs li a:hover { background-color: #f1f0ee; }
ul.tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
div.tabContent {border: 1px solid #c9c3ba; border-top : none; padding: 0.5em; background-color: #f1f0ee; border-radius: 0 0 5px 5px}
div.tabContent.hide { display: none; }
.tabs a {
padding:5px 10px;
background:#D8D8D8;
color:#fff;
text-decoration:none;
}
.tabs a.active {
background:#f1f0ee ;
color:black ;
font-weight:bold;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<ul class='tabs'>
<li><a href="#desktop" >Desktop</a></li>
<li>Laptop</li>
</ul>
<div class="tabContent" id="desktop">
</div>
<div class="tabContent" id="laptop">
</div>
</body>
</html>
jQuery code : Through this external jQuery file I want that whenever I click a link the required file gets loaded in the specific <div> tag.
$(document).ready(function() {
var hideid = "#laptop";
var showid = "#desktop";
$(hideid).hide();
$('a[href="' + showid + '"]').addClass("active");
$('a[href="#laptop').click(function() {
$(this).addClass('active');
$('#laptop').show('slow');
$('#desktop').hide('slow');
$('a[href="#desktop"]').removeClass("active");
$("#laptop").load("laptop.html");
});
$('a[href="#desktop').click(function() {
$("#desktop").load("/test.html");
$(this).addClass('active');
$('#desktop').show('slow');
$('#laptop').hide('slow');
$('a[href="#laptop"]').removeClass("active");
$("#desktop").load("desktop.html");
});
});
What is wrong in the code?
$('a[href="#desktop').click(function () {
Quotation mark is wrong.
Looks like the issue is with this line,
$("#desktop").load("/test.html");
if test.html is in same directory, try removing the /.