I'm having a hard time on passing my variable to my modal.
I can't simply pass my informant id to my modal and I really would want to use it for my query as my base to search for or compare it.
I don't know how to pass it like the URL passing of variable using GET function and I'm really new to this and just wanted to try modal unlike creating a new page for a summary.
Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=deviceADMIN | Missing Person Tracking System-width, initial-scale=1.0" />
<title>ADMIN | Missing Person Tracking System </title>
<!-- Bootstrap Styles-->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- FontAwesome Styles-->
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<!-- Morris Chart Styles-->
<link href="assets/js/morris/morris-0.4.3.min.css" rel="stylesheet" />
<!-- Custom Styles-->
<link href="assets/css/custom-styles.css" rel="stylesheet" />
<!-- Google Fonts-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
</head>
<body>
<div id="wrapper">
<nav class="navbar navbar-default top-navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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="index.php"><i class="fa fa-shield"></i> <strong>POLICE ADMIN </strong></a>
</div>
<ul class="nav navbar-top-links navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
<i class="fa fa-bell fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-alerts">
<li>
<a href="#">
<div>
<i class="fa fa-comment fa-fw"></i> New Comment
<span class="pull-right text-muted small">4 min</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-twitter fa-fw"></i> 3 New Followers
<span class="pull-right text-muted small">12 min</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-envelope fa-fw"></i> Message Sent
<span class="pull-right text-muted small">4 min</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-tasks fa-fw"></i> New Task
<span class="pull-right text-muted small">4 min</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a href="#">
<div>
<i class="fa fa-upload fa-fw"></i> Server Rebooted
<span class="pull-right text-muted small">4 min</span>
</div>
</a>
</li>
<li class="divider"></li>
<li>
<a class="text-center" href="#">
<strong>See All Alerts</strong>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
<!-- /.dropdown-alerts -->
</li>
<!-- /.dropdown -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><i class="fa fa-sign-out fa-fw"></i> Logout
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
</nav>
<!--/. NAV TOP -->
<nav class="navbar-default navbar-side" role="navigation">
<div id="sideNav" href=""><i class="fa fa-caret-right"></i></div>
<div class="sidebar-collapse">
<ul class="nav" id="main-menu">
<li>
<i class="fa fa-dashboard"></i> Dashboard
</li>
<li>
<i class="fa fa-user"></i> Missing Person Management
</li>
<li>
<i class="fa fa-plus"></i> Create Account</span>
</li>
<li>
<i class="fa fa-sitemap"></i> Manage Services <span class="fa arrow"></span>
<ul class="nav nav-second-level">
<li>
News
</li>
<li>
Contacts
</li>
</ul>
</li>
<li>
<a class="active-menu" href="#"><i class="fa fa-sitemap"></i> Transactions <span class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li>
<<a class="active-menu" href="transac_pending.php"> Pending</a>
</li>
<li>
Verified
</li>
<li>
Rejected
</li>
</ul>
</li>
<li>
<i class="fa fa-file"></i> Reports
</li>
<li>
<i class="fa fa-history"></i> Audit Trail
</li>
</ul>
</div>
</nav>
<!-- /. NAV SIDE -->
<div id="page-wrapper" >
<div id="page-inner">
<div class="row">
<div class="col-md-12">
<h1 class="page-header">
Transaction Requests
</h1>
</div>
</div>
<!-- /. ROW -->
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<ol class="breadcrumb">
<li class="active">
<i class="fa fa-user"></i> List of Transaction Requests
</li>
</ol>
</div>
<div class="panel-body">
<div class="column" >
<tr>
<td>
<table class="table table-hover" border="2">
<col width="5%"></col>
<col width="15%"></col>
<col width="10%"></col>
<col width="10%"></col>
<col width="10%"></col>
<col width="15%"></col>
<col width="15%"></col>
<col width="10%"></col>
<thead>
<tr>
<center>
<th><center>Informant Name</th>
<th><center>Informant Address</th>
<th><center>Informant Contact</th>
<th><center>Informant Email</th>
<th><center>Sighted Person</th>
<th><center>Action</th>
</center>
</tr>
</thead>
<?php
include('mysql_connect.php');
$query="SELECT * from tbl_informant,tbl_missing_person where informant_status='Pending' and reported_id=mp_id";
$result=mysql_query($query);
while($row=mysql_fetch_array($result)){
?>
<tr>
<td><center><?php echo $row['informant_fname'].' '.$row['informant_lname'];?></center></td>
<td><center>
<?php echo $row['informant_address'];?></center></td>
<td><?php echo $row['informant_contact']?></td>
<td><?php echo $row['informant_email']?></td>
<td>
<img src="<?php echo $row['mp_image_location'].$row['mp_image']?>" height=100 width=100><br>
<?php echo $row['mp_fname'].' '.$row['mp_lname']?>
</td>
<td>
<?php
$id=$row['informant_id'];
$_SESSION['id']=$id;
echo "<center>
<button type='button'class='btn btn-primary btn-sm?id=".$id."' data-toggle='modal' title='Confirm'data-target='#ModalConfirm'>
Confirm</button>
<button type='button'class='btn btn-danger btn-sm?id=".$id."' data-toggle='modal' title='Confirm'data-target='#ModalReject'>
Reject</button>
</center>"
?>
</td>
</tr>
<?php
}
?>
<!-- Modal for REJECT-->
<div class="modal fade" id="ModalReject" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><b>Rejecting Request:</h4></b>
</div>
<div class="modal-body">
<p>Reason/s: </p>
<textarea cols="75" rows="5" placeholder="Enter reason here.." name="transac_reason"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Submit</button>
</div>
</div>
</div>
</div>
<!-- Modal for CONFIRM-->
<div class="modal fade" id="ModalConfirm" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<p>Are you sure you want to confirm request? </p>
<?php
$modalquery="select * from tbl_informant,tbl_missing_person,tbl_contact_person
where concat(reported_id=mp_id && mp_id=cp_id)";
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" >Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /. PAGE INNER -->
</div>
<!-- /. PAGE WRAPPER -->
</div>
<!-- /. WRAPPER -->
<!-- JS Scripts-->
<!-- jQuery Js -->
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Metis Menu Js -->
<script src="assets/js/jquery.metisMenu.js"></script>
<!-- Morris Chart Js -->
<script src="assets/js/morris/raphael-2.1.0.min.js"></script>
<script src="assets/js/morris/morris.js"></script>
<!-- Custom Js -->
<script src="assets/js/custom-scripts.js"></script>
</body>
</html>
You can't execute a live mysql query like this to modify the table.
The best way for this is with ajax, you can catch the id if is on the table and use ajax to execute the mysql query.
I suggest you put the informant id in the value of a button in the table with a class:
<button class="id" data-target="modal" value="<?= $row['informant_id'] ?>"/>
and you can get the value of the button with a jquery event with this:
$(document).on("click", "id", function(){
var id = $(this).val();
console.log(id);
// and handle the value
});
this is one of many ways to pass the variable, if you just want to print it on the modal, create a tag with an id "example" <h1 id="example"></h1> inside the modal and execute this:
$(document).on("click", "id", function(){
var id = $(this).val();
console.log(id);
// and handle the value
$(".modal #example").text(id);
});
Regards.
Related
** I know i need to add
<?php echo site_url ('path.css');?>">
**For css file and **
<?php echo site_url ('path.js');?">
**For js file, but actually dont know where in my code i need to add them and do i need to install jquery , If yes , how? can someone please help me how to complete this process? here is my html file **
<html>
<head runat="server">
<title>ASGB Ticketing Tool</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="assets/image/favicon.png"/>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/bootstrap.min.css.map">
<link rel="stylesheet" href="assets/css/mystyle.css">
<link rel="stylesheet" type="text/css" href="assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap-multiselect.css"/>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-cus navbar-light bg-faded">
<a class="navbar-brand waves-light" href="#">
<img src="assets/image/logo.png" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-mob-bar" id="navbarNav">
<ul class="nav navbar-nav ml-auto nav-head-font">
<li class="nav-item active"><a class="nav-link" href="#"><i class="fa fa-cog" aria-hidden="true"></i></a></li>
<li class="nav-item active"><a class="nav-link" href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i></a></li>
<li class="nav-item dropdown dropdown-mob" id="dropdown-mob-hide">
<i class="fa fa-user" aria-hidden="true"></i>
<div class="dropdown-menu dropdown-menu-right">
<i class="fa fa-address-book-o" aria-hidden="true"></i>My Profile
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>Edit Profile
<i class="fa fa-key" aria-hidden="true"></i>Change Password
<i class="fa fa-handshake-o" aria-hidden="true"></i>Account Ledger
<div class="dropdown-divider"></div>
<i class="fa fa-sign-out" aria-hidden="true"></i>Sign Out
</div>
</li>
</ul>
</div>
</nav>
<div class="container-fluid container-fluid-cus">
<div class="fixed-nav">
<div class="fixed-nav-inner open-nav">
<ul class="text-center">
<a href="home.html" id="menu-toggle" class="waves-light menu-toggle" data-toggle="offcanvas">
<li>
<i class="fa fa-dashboard"></i></li>
<li>Menu</li>
</a>
<a href="company.html" class="waves-light">
<li><i class="fa fa-briefcase"></i></li>
<li>Company</li>
</a>
<a href="staff.html" class="waves-light">
<li><i class="fa fa-user-circle"></i></li>
<li>Staff</li>
</a>
<a href="projects.html" class="waves-light">
<li><i class="fa fa-product-hunt"></i></li>
<li>Projects</li>
</a>
<a href="#" class="waves-light">
<li><i class="fa fa-ticket"></i></li>
<li>Incidents</li>
</a>
<a href="settings.html" class="waves-light">
<li><i class="fa fa-cogs"></i></li>
<li>Settings</li>
</a>
</ul>
</div>
</div>
</div>
<div class="main-sec">
<div class="">
<div class="row">
<div class="col-md-3">
<div class="card-block">
<div class="media">
<div class="mr-3 card-icon-1">
<i class="fa fa-newspaper-o font-l-1"></i>
</div>
<div class="media-body ml-3">
<h3 class="font-l-1 mb-1">06</h3>
<span>Projects</span>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card-block">
<div class="media">
<div class="card-icon-2 mr-3 card-icon-1">
<i class="fa fa-users font-l-1"></i>
</div>
<div class="media-body ml-3">
<h3 class="font-l-1 mb-1">72</h3>
<span>Staff</span>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card-block">
<div class="media">
<div class="card-icon-3 mr-3 card-icon-1">
<i class="fa fa-universal-access font-l-1"></i>
</div>
<div class="media-body ml-3">
<h3 class="font-l-1 mb-1">10</h3>
<span>Teams</span>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card-block">
<div class="media">
<div class="card-icon-4 mr-3 card-icon-1">
<i class="fa fa-user-circle font-l-1"></i>
</div>
<div class="media-body ml-3">
<h3 class="font-l-1 mb-1">5</h3>
<span>Clients</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/datatables.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap-multiselect.js"></script>
<script src="assets/js/jquery.steps.js"></script>
<script src="assets/js/jquery.validate.js"></script>
<script src="assets/js/myscript.js"></script>
</body>
</html>
**And here is my bootstrap path in my project, I am beginner in codeigniter and php , would appreciate if you can help me **
change to this href="<?= base_url('assets/css/yourCSS.css') ?>">
Don't forget to change the configuration in application/config/config.php straight to the $config['base_url'] = 'http://localhost/yourFolder/';
I am trying to query the database and get user information.
I use the adminlte System but when I run the view it returns a variable error.
HomeController.php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
use App\Http\Controllers\Controller;
class HomeController extends Controller
{
/**
* Create a new controller instance.
*
* #return void
*/
public function __construct()
{
$this->middleware('auth');
}
/**
* Show the application dashboard.
*
* #return \Illuminate\Http\Response
*/
public function index()
{
$users = DB::select('select * from users');
return view('vendor.adminlte.page', ['users' => $users]);
}
}
Page.blade.php
#extends('adminlte::master')
#section('adminlte_css')
<link rel="stylesheet"
href="{{ asset('vendor/adminlte/dist/css/skins/skin-' . config('adminlte.skin', 'blue') . '.min.css')}} ">
#stack('css')
#yield('css')
#stop
#section('body_class', 'skin-' . config('adminlte.skin', 'blue') . ' sidebar-mini ' . (config('adminlte.layout') ? [
'boxed' => 'layout-boxed',
'fixed' => 'fixed',
'top-nav' => 'layout-top-nav'
][config('adminlte.layout')] : '') . (config('adminlte.collapse_sidebar') ? ' sidebar-collapse ' : ''))
#section('body')
<div class="wrapper">
<div class="wrapper" style="height: auto; min-height: 100%;">
<header class="main-header">
<!-- Logo -->
<a href="/home" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>U</b></span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>UNIDAS</b></span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<li class="dropdown messages-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope-o"></i>
<span class="label label-success">4</span>
</a>
<ul class="dropdown-menu">
<li class="header">Você tem 4 mensagens</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li><!-- start message -->
<a href="#">
<div class="pull-left">
<img src="images/usuarios/richardnicson.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Informática
<small><i class="fa fa-clock-o"></i> 5 minutos</small>
</h4>
<p>Está conseguindo concluir?</p>
</a>
</li>
<!-- end message -->
<li>
<a href="#">
<div class="pull-left">
<img src="images/usuarios/richardnicson.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Financeiro
<small><i class="fa fa-clock-o"></i> 2 horas</small>
</h4>
<p>Está conseguindo concluir?</p>
</a>
</li>
<li>
<a href="#">
<div class="pull-left">
<img src="images/usuarios/richardnicson.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Contabilidade
<small><i class="fa fa-clock-o"></i> Hoje</small>
</h4>
<p>Está conseguindo concluir?</p>
</a>
</li>
<li>
<a href="#">
<div class="pull-left">
<img src="images/usuarios/richardnicson.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Institucional
<small><i class="fa fa-clock-o"></i> Ontem</small>
</h4>
<p>Está conseguindo concluir?</p>
</a>
</li>
<li>
<a href="#">
<div class="pull-left">
<img src="images/usuarios/richardnicson.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Gerência
<small><i class="fa fa-clock-o"></i> 2 Dias</small>
</h4>
<p>Está conseguindo concluir?</p>
</a>
</li>
</ul>
</li>
<li class="footer">Ler todas Mensagens</li>
</ul>
</li>
<!-- Notifications: style can be found in dropdown.less -->
<li class="dropdown notifications-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell-o"></i>
<span class="label label-warning">10</span>
</a>
<ul class="dropdown-menu">
<li class="header">Você tem 10 notificações</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li>
<a href="#">
<i class="fa fa-users text-aqua"></i>Não Imprimir Colorido
</a>
</li>
<li>
<a href="#">
<i class="fa fa-warning text-yellow"></i>Nova Reunião Redir
</a>
</li>
<li>
<a href="#">
<i class="fa fa-users text-red"></i>Aviso Copa
</a>
</li>
<li>
<a href="#">
<i class="fa fa-shopping-cart text-green"></i>Data Congresso Internacional
</a>
</li>
<li>
<a href="#">
<i class="fa fa-user text-red"></i> Banco de Horas
</a>
</li>
</ul>
</li>
<li class="footer">Ver todas Notificações</li>
</ul>
</li>
<!-- Tasks: style can be found in dropdown.less -->
<li class="dropdown tasks-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-flag-o"></i>
<span class="label label-danger">9</span>
</a>
<ul class="dropdown-menu">
<li class="header">Você tem 9 tarefas</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li><!-- Task item -->
<a href="#">
<h3>
Desenvolver Intranet
<small class="pull-right">20%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">20% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
<li><!-- Task item -->
<a href="#">
<h3>
Desenvolver novo layout
<small class="pull-right">40%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">40% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
<li><!-- Task item -->
<a href="#">
<h3>
Desenvolver novo Administrador
<small class="pull-right">60%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">60% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
<li><!-- Task item -->
<a href="#">
<h3>
Unificar superitêndencias
<small class="pull-right">80%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">80% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
</ul>
</li>
<li class="footer">
Ver todas Tarefas
</li>
</ul>
</li>
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<img src="images/usuarios/richardnicson.jpg" class="user-image" alt="User Image">
<span class="hidden-xs">Richard Nicson</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img src="images/usuarios/richardnicson.jpg" class="img-circle" alt="User Image">
<p>
Richard Nicson Costa de Lima - Desenvolvedor Web
<small>Membro desde Agosto. 2018</small>
</p>
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
Perfil
</div>
<div class="pull-right">
<a href="#" class="btn btn-default btn-flat" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
<i class="fa fa-fw fa-power-off"></i> Sair
</a>
<form id="logout-form" action="http://intranet.unidas.org.br/logout" method="POST" style="display: none;">
<input type="hidden" name="_token" value="jmubQRfJenzcLKmbpvyjeMCVeafWedS5IPC36tmk">
</form>
</div>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
#if(config('adminlte.layout') != 'top-nav')
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="images/usuarios/richardnicson.jpg" class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>Richard Nicson</p>
<i class="fa fa-circle text-success"></i> Online
</div>
</div>
<!-- search form -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Pesquisar...">
<span class="input-group-btn">
<button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
<!-- /.search form -->
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu tree" data-widget="tree">
#each('adminlte::partials.menu-item', $adminlte->menu(), 'item')
</ul>
</section>
<!-- /.sidebar -->
</aside>
#endif
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper" style="min-height: 1265px;">
#if(config('adminlte.layout') == 'top-nav')
<div class="container">
#endif
<!-- Content Header (Page header) -->
<section class="content-header">
#yield('content_header')
</section>
<!-- Main content -->
<section class="content">
#yield('content')
</section>
<!-- /.content -->
#if(config('adminlte.layout') == 'top-nav')
</div>
<!-- /.container -->
#endif
</div>
<!-- /.content-wrapper -->
</div>
<!-- ./wrapper -->
#stop
#section('adminlte_js')
<script src="{{ asset('vendor/adminlte/dist/js/adminlte.min.js') }}"></script>
#stack('js')
#yield('js')
#stop
Error:
ErrorException (E_ERROR) Undefined variable: adminlte (View:
/home/unidas/intranet/resources/views/vendor/adminlte/page.blade.php)
header.php code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html lang="EN">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="images/logo.jpg" type="image/x-icon" />
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="styles/bootstrap.min.css" />
<link rel="stylesheet" href="styles/mystyles.css" />
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
<script src="js/bootstrap.min.js" ></script>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
nav.php
<div class="navbar navbar-default" id="navbar">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand home" href="#">
<img src="images/ico.JPG" class="hidden-xs" style="height:50px;">
<img src="images/icosmall.png" class="visible-xs" height="50px" width="auto">
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation">
<span class="sr-only">Toggle Navigation</span>
<i class="fa fa-align-justify"></i>
</button>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#search">
<span class="sr-only">Toggle Navigation</span>
<i class="fa fa-search"></i>
</button>
</div> <!----end of navbar header--->
<div class="navbar-collapse collapse" id="navigation">
<div class="padding-nav">
<ul class="nav navbar-nav navbar-left">
<li>Colors</li>
<li>How-To</li>
<li>Inspiration</li>
<li>Shop</li>
<li>Contact Us</li>
</ul> <!----end of navbar-left--->
</div> <!----end of padding nav--->
<a class="btn btn-primary navbar-btn right" href="#" >
<i class="fa fa-shopping-cart"></i>
<span>Cart 0</span>
</a>
<div class="navbar-collapse collapse right">
<button class="btn navbar-btn btn-primary" type="button" data-toggle="collapse" data-target="#search">
<span class="sr-only">Toggle Search</span>
<i class="fa fa-search"></i>
</button>
</div> <!----navbar-collapse collapse right ends here--->
<div class="collapse clearfix" id="search">
<form class="navbar-form" method="get" action="results.php">
<div class="input-group">
<input class="form-control" type="text" placeholder="Search......" name="user_query" required />
<span>
<button type="submit" value="Search" name="search" class="btn btn-primary">
<i class="fa fa-search"></i>
</button>
</span>
</div> <!----input-group ends here--->
</form> <!----navbar-form ends here--->
</div> <!----collapse clearfix ends here--->
</div> <!----navbar-collapse ends here--->
</div> <!----end of container--->
</div> <!----end of navbar-navbar--->
index.php
<?php
include_once 'header.php';
?>
<?php
include_once 'nav.php';
?>
<div class="container" id="slider">
<div class="col-md-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol> <!---carousel-indicators ends here ---->
<div class="carousel-inner">
<div class="item active">
<img src="admin_area/slide_images/1.jpg">
</div>
<div class="item">
<img src="admin_area/slide_images/2.jpg">
</div>
<div class="item">
<img src="admin_area/slide_images/3.jpg">
</div>
<div class="item">
<img src="admin_area/slide_images/4.jpg">
</div>
<div class="item">
<img src="admin_area/slide_images/5.jpg">
</div>
</div> <!---carousel-inner ends here ---->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a> <!---left carousel-control ends here ---->
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a> <!---right carousel-control ends here ---->
</div> <!---carousel slide ends here ---->
</div> <!---col-md-12 ends here ---->
</div> <!---container ends here ---->
<div class="advantages">
<div class="container">
<div class="same-height-row">
<div calss="col-sm-4">
<div class="box same-height">
<div class="icon">
<i class="fa fa-globe" aria-hidden="true"></i>
</div>
<h3>FAST GLOBAL SERVICE</h3>
<p>We are know to provide best possible service ever</p>
</div> <!---box same-height ends here ---->
</div> <!---col-sm-4 ends here ---->
<div calss="col-sm-4">
<div class="box same-height">
<div class="icon">
<i class="fa fa-cc-paypal" aria-hidden="true"></i>
</div>
<h3>EASY AND SAFE TRANSACTION</h3>
<p>Encrypted payment gateway through PayPal</p>
</div> <!---box same-height ends here ---->
<div calss="col-sm-4">
<div class="box same-height">
<div class="icon">
<i class="fa fa-credit-card-alt" aria-hidden="true"></i>
</div>
<h3>NO INTERMEDIARIES</h3>
<p>Avoid any business with middlemen</p>
</div> <!---box same-height ends here ---->
</div> <!---col-sm-4 ends here ---->
</div> <!---same-height-row ends here ---->
</div> <!---container ends here ---->
</div> <!---advantages ends here ---->
<?php include_once 'footer.php'; ?>
this is my complete code.
This is screenshot of my browser
ScreenShot
When i click on the search button i am supposed to get a dropdown division which has a search box. But i dont get it!! I need someone who can look into the code and help me with my problem. I am currently working on project thats due on wednesday.
this is my footer.php . I edited my header.php and removed the jquery and bootstrap.js and then placed it to the footer
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js" ></script>
</body>
</html>
Thanks for helping i fixed my issue. Now it works perfectly.
I'm working on a site with php header & footer in the html version works like a charmin but in the php the navbar don't return.
Here is my code header:
<div class="container">
<div class="row">
<div class="col-sm-3">
<div id="logo" class="float-xs-left">
<a class="navbar-brand" href="xxxxxxx/"><img src="img/logo-white.png" /></a>
</div>
</div>
<!--div class="col-sm-6" -->
<div class="float-xs-right">
<!--/div> -->
<!--cols:12 -->
<!--cols:12 -->
<div class="offcanvas">
<div class="navbar yamm col-lg-8 col-md-8 col-sm-6 ">
<div class="navbar-header">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".offcanvas.menu">
<i class="fa fa-bars"></i>
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</button>
</div>
<!-- outside -->
<div class="offcanvas menu right">
<div class="navbar-collapse collapse">
<button data-target=".offcanvas.menu" data-toggle="collapse" class="navbar-toggle" type="button">
</button>
<div class="nav navbar-nav">
<div class="list-group">
<!-- li><span class="home">⌂</span></li -->
<img class="logo-img" src="img/logo-full.png" class="img-responsive" />
INICIO
home <b class="fa fa-chevron-down"></b>
<div class="collapse" id="p5">
<a href="page-1.php" class="list-group-item">
Espresso </a>
<a href="page-2.php" class="list-group-item">
Clásico </a>
<a href="page-3.php" class="list-group-item">
Orgánico </a>
<a href="page-4.php" class="list-group-item">
Descafeinado </a>
<a href="page-5.php" class="list-group-item">
Toscana </a>
</div>
<b class="fa fa-chevron-down"></b>
<div class="collapse" id="p6">
<a href="page-11.php" class="list-group-item">
</a>
</div>
<b class="fa fa-chevron-down"></b>
<div class="collapse" id="p4">
<a href="page-13.php" class="list-group-item">
item </a>
<a href="#c1" class="list-group-item" data-toggle="collapse">
another one<b class="fa fa-chevron-down"></b> <span class="cat_url" onclick="location.href='other.php'"><i class="fa fa-mail-forward"></i></span> </a>
<div class="collapse" id="c1">
name
name
name
name
name
</div>
<a href="#" class="list-group-item">
other page </a>
<a href="#" class="list-group-item">
other page </a>
<a href="#" class="list-group-item">
other page </a>
<a href="page-15.php" class="list-group-item">
other name </a>
<a href="page.php" class="list-group-item">
name </a>
<a href="page.php" class="list-group-item">
name </a>
<a href="#" class="list-group-item">
name </a>
</div>
page title <b class="fa fa-chevron-down"></b>
<div class="collapse" id="p7">
<a href="page-16.php" class="list-group-item">
Name </a>
<a href="page-17.php" class="list-group-item">
name </a>
</div>
page
</div>
<br/>
</div>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<div class="pusher"></div>
<!-- end outside -->
</div>
</div>
</div>
<!--cols:12 -->
<div class="navbar yamm ">
<div class="navbar-header hidden-lg-up">
<button type="button" class="navbar-toggler" 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>
</div>
<div class="navbar-toggleable-md collapse">
<ul class="nav navbar-nav">
<!-- li><span class="home">⌂</span></li -->
<li class="nav-item ">
<a href="contacto.php" >Contáctanos</a>
</li>
<li class="nav-item ">
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</div>
</div>
</div>
</header>
In the console get this error:
document.querySelector( "#nav-toggle" )
.addEventListener( "click", function() {
this.classList.toggle( "active" );
});
Does anybody know what the problem is and how I can fix it?
Solved
The issue was in the footer header and pages calling the same file so when the function is called the state doesn't return because repeat the action 3 times
Finally resolve the issue, there was a triple script sentence in the header, footer and index, was erased in the header and the footer and that's it.
Im using include 'header.php' so i'll not repeat my header code all over again but I noticed it that the links inside the header.php are not working except the parent file the dashboard.php.
ALl the anchor tags inside the dashboard.php are working but not inside the header.php
This is my dashboard.php code
<?php require_once 'includes/header.php'; ?>
<!-- Setting the treeview active -->
<script type="text/javascript">
document.getElementById("treeview1").className = "active menu-open"
</script>
<!-- End Setting the treeview active -->
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Dashboard
<small>Version 2.0</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Home</li>
<li><i class="fa fa-dashboard"></i> Question</li>
<li class="active">Dashboard</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<?php require_once 'includes/footer.php'; ?>
Heres the header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SOG Evaluation System</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="../assets/bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="../assets/bower_components/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="../assets/bower_components/Ionicons/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../assets/dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="../assets/dist/css/skins/skin-green.css">
<!-- CLOCK rico -->
<script src="../assets/plugins/clock/ricoClock.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="hold-transition sidebar-mini skin-green"> <!-- set dito yung name ng theme -->
<div class="wrapper">
<header class="main-header">
<!-- Logo -->
<a href="dashboard.php" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>SOG</b></span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg">SOG Evaluation System</span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<!-- Navbar Right Menu -->
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<li class="dropdown messages-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope-o"></i>
<span class="label label-success">4</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 4 messages</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li><!-- start message -->
<a href="#">
<div class="pull-left">
<img src="../assets/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Support Team
<small><i class="fa fa-clock-o"></i> 5 mins</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<!-- end message -->
<li>
<a href="#">
<div class="pull-left">
<img src="../assets/dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
AdminLTE Design Team
<small><i class="fa fa-clock-o"></i> 2 hours</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<li>
<a href="#">
<div class="pull-left">
<img src="../assets/dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Developers
<small><i class="fa fa-clock-o"></i> Today</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<li>
<a href="#">
<div class="pull-left">
<img src="../assets/dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Sales Department
<small><i class="fa fa-clock-o"></i> Yesterday</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<li>
<a href="#">
<div class="pull-left">
<img src="../assets/dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Reviewers
<small><i class="fa fa-clock-o"></i> 2 days</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
</ul>
</li>
<li class="footer">See All Messages</li>
</ul>
</li>
<!-- Notifications: style can be found in dropdown.less -->
<li class="dropdown notifications-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell-o"></i>
<span class="label label-warning">10</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 10 notifications</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li>
<a href="#">
<i class="fa fa-users text-aqua"></i> 5 new members joined today
</a>
</li>
<li>
<a href="#">
<i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the
page and may cause design problems
</a>
</li>
<li>
<a href="#">
<i class="fa fa-users text-red"></i> 5 new members joined
</a>
</li>
<li>
<a href="#">
<i class="fa fa-shopping-cart text-green"></i> 25 sales made
</a>
</li>
<li>
<a href="#">
<i class="fa fa-user text-red"></i> You changed your username
</a>
</li>
</ul>
</li>
<li class="footer">View all</li>
</ul>
</li>
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="../assets/dist/img/avatar.png" class="user-image" alt="User Image">
<span class="hidden-xs">Superadmin</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img src="../assets/dist/img/avatar.png" class="img-circle" alt="User Image">
<p>
Superadmin - Web Developer
<small>Member since Nov. 2012</small>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<div class="row">
<div class="col-xs-4 text-center">
Followers
</div>
<div class="col-xs-4 text-center">
Sales
</div>
<div class="col-xs-4 text-center">
Friends
</div>
</div>
<!-- /.row -->
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
Profile
</div>
<div class="pull-right">
Sign out
</div>
</li>
</ul>
</li>
<!-- Control Sidebar Toggle Button -->
</ul>
</div>
</nav>
</header>
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../assets/dist/img/avatar.png" class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p>Superadmin</p>
<i class="fa fa-circle text-success"></i> Online
</div>
</div>
<!-- search form -->
<!-- <form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button type="submit" name="search" id="search-btn" class="btn btn-flat">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form> -->
<!-- /.search form -->
<div id="clockbox" style="font:12pt ; color:#ffffff;text-align: center;margin-bottom: 7px;padding: 10px"></div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu" data-widget="tree">
<li class="header">MAIN NAVIGATION</li>
<li class="treeview" id="treeview1">
<a href="dashboard.php">
<i class="fa fa-dashboard"></i> <span>Dashboard</span>
</a>
</li>
<li class="treeview" id="treeview2">
<a href="manageUsers.php">
<i class="fa fa-user"></i> <span>User Management</span>
</a>
</li>
<li class="treeview" id="treeview3">
<a href="manageQuestions.php">
<i class="fa fa-list-ul"></i> <span>Questionnaire Management</span>
</a>
</li>
<li class="treeview" id="treeview4">
<a href="manageSchedule.php">
<i class="fa fa-calendar"></i> <span>Evaluation Schedule</span>
</a>
</li>
<li class="treeview" id="treeview5">
<a href="viewResults.php">
<i class="fa fa-bar-chart"></i> <span>Evaluation Results</span>
</a>
</li>
<li class="treeview" id="treeview6">
<a href="generateReports.php">
<i class="fa fa-file-text"></i> <span>Reports</span>
</a>
</li>
<li class="treeview" id="treeview7">
<a href="manageSystemSettings.php">
<i class="fa fa-wrench"></i> <span>System Settings</span>
</a>
</li>
<li class="header">LABELS</li>
<li><i class="fa fa-circle-o text-red"></i> <span>Important</span></li>
<li><i class="fa fa-circle-o text-yellow"></i> <span>Warning</span></li>
<li><i class="fa fa-circle-o text-aqua"></i> <span>Information</span></li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
All your links are empty. They are all <a href="#".
Then above href will make the browser go to top of page.
The way it should be used is <a href="#about".
And that will make the browser go to the about section (if there is an about id)
See this answer for a complete documentation of how it works.
What is href="#" and why is it used?
Guys I already found the error. The conflict is on my class, the treeview class on my sidebar-menu (header.php). I just removed it and it's working now.