Hello there I am new user of laravel 7. i want to use jquery in a blade file. if i create a blade file and on a top of it i mentioned all the head and body and then give the link of jquery in it then it works fine. but in my case i created a nav.blade.php file where i place all the navigation head and body code.
then i create another file and extend the nav file on the top of that file but in this case jquery does not working
nav.blade.php code
<html>
<head>
<meta charset="utf-8">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- the below i use for jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{'addcategory'}}">Add Catgory <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{'showcategory'}}">show Category</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{'
addproducts'}}">Add Products</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
#yield('content')
</body>
</html>
showcategories.blade.php file
this is the file where I want to use jquery and the upper file extended inside in this file
#extends('layouts.nav')
#section('content')
<table class="table">
<thead>
<tr>
<th scope="col">id</th>
<th scope="col">name</th>
<th scope="col">Delete</th>
<th scope="col">Update</th>
<th scope="col">Get Products</th>
</tr>
</thead>
<tbody>
#foreach($categories as $cat)
<tr>
<td>{{$cat->id}}</td>
<td>{{$cat->name}}</td>
<td><a class="btn btn-danger" href="{{url('delete',$cat->id)}}">Delete</a> </td>
<td><a class="btn btn-danger" href="{{url('update',$cat->id)}}">update</a> </td>
<td><a class="btn btn-danger" href="{{url('getproductjoin',$cat->id)}}">getproducts</a> </td>
</tr>
#endforeach
</tbody>
</table>
<button id="hello" class="btn btn-danger">hello</button>
#endsection
#section('script')
<script >
$(document).ready(function() {
$("#hello").click(function () {
alert("hello there");
})
});
</script>
#endsection
on this file the jquery does not working. please help me
You need to follow Laravel Syntax and standards to do this. You can create a standard layout file for the application. I.e. main.blade.php and in that file you can set the #yield the content which you need according to your requirements. For example your main.blade.php can be like this:
<html>
<head>
<meta charset="utf-8">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- the below i use for jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{'addcategory'}}">Add Catgory <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{'showcategory'}}">show Category</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{'
addproducts'}}">Add Products</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
#yield('content')
</body>
#yield('scripts')
</html>
And Your nav.blade.php can look like this.
#extends('layouts.main')
#section('content')
<table class="table">
<thead>
<tr>
<th scope="col">id</th>
<th scope="col">name</th>
<th scope="col">Delete</th>
<th scope="col">Update</th>
<th scope="col">Get Products</th>
</tr>
</thead>
<tbody>
#foreach($categories as $cat)
<tr>
<td>{{$cat->id}}</td>
<td>{{$cat->name}}</td>
<td><a class="btn btn-danger" href="{{url('delete',$cat->id)}}">Delete</a> </td>
<td><a class="btn btn-danger" href="{{url('update',$cat->id)}}">update</a> </td>
<td><a class="btn btn-danger" href="{{url('getproductjoin',$cat->id)}}">getproducts</a> </td>
</tr>
#endforeach
</tbody>
</table>
<button id="hello" class="btn btn-danger">hello</button>
#endsection
#section('scripts')
<script >
$(document).ready(function() {
$("#hello").click(function () {
alert("hello there");
})
});
</script>
#endsection
Or you can follow up the components standard and can create a component for your scripts to be included where ever you like. You can read more about the Laravel links over here:
https://laravel.com/docs/7.x/blade#components
You only yield the content, you need to yield the script too
</nav>
#yield('content')
</body>
#yield('script')
</html>
Add that in the bottom of your code
Related
Hello everybody i'm new to laravel and php.
today i was able to launch a local laravel website using php artisan serve.
but now i wanted to add a navbar with bootstrap and that worked, but in the navbar i want to add a brand.
unfortunately i have tried many ways to add the path for the image like using ../ and echo path but nothing seems to work. I'm probably doing something wrong :). help is appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YGP</title>
</head>
<style>
h1
{
font-family: 'Geneva', sans-serif;
}
</style>
<body>
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="" width="50" height="50" class="d-inline-block align-top" alt="">
YGP
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="content">
</div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</html>
and this is the folder layout:
the image
located in IMAGES/LOGO.PNG
Move your images folder into public. Then access them by
<img src="{{ asset('images/logo.png') }}" alt="" title="">
Anyways, I recommend you to check with Filesystem. The Laravel Flysystem integration provides simple to use drivers for working with local filesystems and Amazon S3. Even better, it's amazingly simple to switch between these storage options as the API remains the same for each system.
it should help!
For more detail document : https://laravel.com/docs/7.x/filesystem
so i am new to LARAVEL and i am following a tutoriel. he created a navbar with bootstrap and gets this result :
and me i get this :
this is my code :
app.blade.php
<!DOCTYPE html>
<html>
<head>
<title>WebSite</title>
<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
#include('inc.navbar')
#yield('content')
</body>
</html>
navbar.blade.php
<nav class="navbar navbar-expand-md navbar-dark bg-dark ">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Below are the cdn's
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
use thses cdn's as like below.
<!DOCTYPE html>
<html>
<head>
<title>WebSite</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md navbar-dark bg-dark ">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="https://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</body>
</html>
Fiddle
I tried to include the bootstrap and jquery file into my project but when i do it. it gives me error. "Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript. at bootstrap.min.js:6" this is my code:
<!DOCTYPE html>
<html>
<head>
<!-- Scripts -->
<script src="js/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="js/jquery-3.2.1.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="js/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="css/w3.css">
<!-- Scripts -->
<style>
.topd{
background-color: #3498DB;
padding: 14px 16px;
font-family: 'Pacifico', cursive;
color : white;
/* color: rgba(255, 255, 255, 0.6); */
}
.zbody{
width: 90%;
margin-left: 5%;
}
</style>
</head>
<body>
<div class="topd">
<h1>Welcome to HopesV2.0</h1>
</div>
<nav class="navbar navbar-expand-lg navbar-light w3-teal" data-spy="affix" data-offset-top="197">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
HR
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
<BR>
<!-- Start Body -->
<div class="jumbotron zbody">
<h1>Basic Information</h1>
<hr class="my-4">
<p class="lead">
<a class="btn btn-primary " href="#" role="button">Submit</a>
</p>
</div>
<!-- End Body -->
</body>
</html>
i already download the files into my project but it keeps me getting errors
add your external files as follows
you can add js files in header or in footer but maintain this order
Load Jquery first and then add bootstrap js
Reference
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="js/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="css/w3.css">
<body>
<div class="topd">
<h1>Welcome to HopesV2.0</h1>
</div>
<nav class="navbar navbar-expand-lg navbar-light w3-teal" data-spy="affix" data-offset-top="197">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
HR
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#">Disabled</a>
</div>
</div>
</nav>
<BR>
<!-- Start Body -->
<div class="jumbotron zbody">
<h1>Basic Information</h1>
<hr class="my-4">
<p class="lead">
<a class="btn btn-primary " href="#" role="button">Submit</a>
</p>
</div>
</body>
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.
I've created a webpage using php as "everyone.php".
Now i have twitter bootstrap drop down menu buttons, it's working fine as i do check as a different page but I've create a page for this menu drop_down_menu.php. Now i'm calling this page inside everyone.php using:
<div class=ownmenu_container">
<?php
include './drop_down_menu.php';
?>
</div>
But unfortunately after running this whole process, it's not showing list as i do click into the buttons, i did checked the jquery and everything then why i'm unable to open the list, can anyone please help ..?
Help would be appreciated!
Here is my everyone.php source code:
<?php
session_start();
require("conection/connect.php");
$tag="";
if (isset($_GET['tag']))
$tag=$_GET['tag'];
?>
<!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">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Welcome to College Management system</title>
<script type="text/javascript" src="jquery-1.11.0.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css.map"/>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-theme.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-theme.css.map"/>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-theme.min.css"/>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="css/home.css" />
</head>
<body>
<div class="img_home_pos">
<img src="images/img21.jpg" height="90" alt="Rajasthan technical university" /><span class="header_pos">Rajasthan Technical University</span>
<div class="container_language">
<?php
include './select_lang.php';
?>
</div>
</div><br>
<div class=ownmenu_container">
<?php
include './drop_down_menu.php';
?>
</div>
<div class="container_middle">
<div class="container_show_post">
<?php
if($tag=="home" or $tag=="")
include("home.php");
elseif($tag=="student_entry")
include("Students_Entry.php");
elseif($tag=="teachers_entry")
include("Teachers_Entry.php");
elseif($tag=="score_entry")
include("Score_Entry.php");
elseif($tag=="subject_entry")
include("Subject_Entry.php");
elseif($tag=="faculties_entry")
include("Faculties_Entry.php");
elseif($tag=="susers_entry")
include("Users_Entry.php");
elseif($tag=="view_students")
include("View_Students.php");
elseif($tag=="view_teachers")
include("View_Teachers.php");
elseif($tag=="view_subjects")
include("View_Subjects.php");
elseif($tag=="view_scores")
include("View_Scores.php");
elseif($tag=="view_users")
include("View_Users.php");
elseif($tag=="view_faculties")
include("View_Faculties.php");
elseif($tag=="location_entry")
include("Location_Entry.php");
elseif($tag=="artical_entry")
include("Artical_Entry.php");
elseif($tag=="test_score")
include("test_Scores .php");
elseif($tag=="view_location")
include("View_location.php");
elseif($tag="view_artical")
include("View_Articaly.php");
/*$tag= $_REQUEST['tag'];
if(empty($tag)){
include ("Students_Entry.php");
}
else{
include $tag;
}*/
?>
</div>
</div>
</div>
<div class="bottom_pos">
About management
</div>
</body>
</html>
as well here is my drop_down_menu.php:
<!--first button-->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span>
Students <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Students Entry</li>
<li>View Students</li>
</ul>
</div>
<!--second button-->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span>
Teachers <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Teachers Entry</li>
<li>View Teachers</li>
</ul>
</div>
<!--third button-->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-hdd"></span>
Faculties <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Faculties Entry</li>
<li>View Faculties</li>
</ul>
</div>
<!--forth button-->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-th-list"></span>
Subjects <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Subjects Entry</li>
<li>View Subjects</li>
</ul>
</div>
<!--fifth button-->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-star-empty"></span>
Score <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Score Entry</li>
<li>View Score</li>
</ul>
</div>
<!--sixth button-->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-lock"></span>
Users <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Users Entry</li>
<li>View Users</li>
</ul>
</div>
<!--seventh button-->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-globe"></span>
Location <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Location Entry</li>
<li>View Location</li>
</ul>
</div>
<!--eaigth button-->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-align-justify"></span>
Artical <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Artical Entry</li>
<li>View Artical</li>
</ul>
</div>
-->