I'm using bootstrap and joomla 3 to build a template (http://lucapadovani.com/tese-beta/) and having some issues with 2 responsive navbars: when I click on the toggle buttons the menus simply do not open. I guess there might be some kind of conflict between joomla "bootstrap.framework" and other js related stuff, but all of this is quite new for me, so I'm not sure how to solve the problem. Any help? Thx.
Index.php
<?php
defined('_JEXEC') or die;
// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');
// Load optional Bootstrap bugfixes
JHtmlBootstrap::loadCss($includeMaincss = true);
// Check homepage
$defaultMenu = JFactory::getApplication()->getMenu()->getDefault()->id;
$currentMenu = JFactory::getApplication()->getMenu()->getActive()->id;
if($defaultMenu == $currentMenu){
$bodyId = 'id="home"';
$homePage = true;
}else{
$bodyId = '';
$homePage = false;
}
// Logo file or site title param
if ($this->params->get('logoFile'))
{
$logo = '<img src="'. JURI::root() . $this->params->get('logoFile') .'" alt=" Tese" />';
}
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Include optional regions in the template -->
<?php
$this->_scripts = array();
?>
<jdoc:include type="head" />
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="<?php echo $this->baseurl ?>/media/jui/js/html5.js"></script>
<![endif]-->
<!-- Stylesheets listed below
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />-->
<!-- Bootstrap styling -->
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/custom.css" rel="stylesheet" media="screen">
<?php
// Header color
if ($this->params->get('headerColor'))
{
?>
<style type="text/css">
header{
background:<?php echo $this->params->get('headerColor');?>;
}
</style>
<?php
}
?>
<?php
// Top menu (active-item) color
if ($this->params->get('topColor'))
{
?>
<style type="text/css">
.topheader .navbar-inverse .nav .active>a,
.topheader .navbar-inverse .nav .active>a:hover,
.topheader .navbar-inverse .nav .active>a:focus {
background-color:<?php echo $this->params->get('topColor');?>;
}
</style>
<?php
}
?>
<?php
// Menu color
if ($this->params->get('menuColor'))
{
?>
<style type="text/css">
#mainnav.navbar-inverse .nav .active>a,
#mainnav.navbar-inverse .nav .active>a,
#mainnav.navbar-inverse .nav .active>a {
background-color:<?php echo $this->params->get('menuColor');?>;
}
</style>
<?php
}
?>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/respond.min.js"></script>
</head>
<body>
<div class="container all"><!--Page container-->
<!--===Top===-->
<div class="row topheader">
<div class="col-sm-12">
<nav class="navbar navbar-inverse" role="navigation" id="topnav">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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 visible-xs" href="#">Tese</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<jdoc:include type="modules" name="topmenu" style="html5" />
<ul class="nav navbar-nav navbar-right">
<li><jdoc:include type="modules" name="socialnetworks" style="html5" /></li>
<li><jdoc:include type="modules" name="search" style="html5" /></li>
</ul>
</div>
</nav>
</div>
</div>
<!--===/top===-->
<!--===Header===-->
<header class="row">
<div class="col-sm-3 logo"><?php echo $logo;?></div>
<div class="col-sm-7">
<nav class="navbar navbar-inverse" role="navigation" id="mainnav">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex2-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 visible-xs" href="#">Menu</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex2-collapse">
<jdoc:include type="modules" name="menu" style="html5" />
</div><!-- /.navbar-collapse -->
</nav>
</div>
<div class="col-sm-2">
<jdoc:include type="modules" name="join" style="html5" />
</div>
</header>
<!--===/header===-->
<!--===Home-only layout===-->
<?php if($homePage == true): ?>
<div class="row">
<div class="col-sm-12"><jdoc:include type="modules" name="banner" style="html5" /></div>
</div>
<div class="row" id="areas">
<div class="col-sm-12"><jdoc:include type="modules" name="buttons" style="html5" /></div>
</div>
<div class="row" id="intro">
<div class="col-sm-12"><jdoc:include type="modules" name="about" style="html5" /></div>
</div>
<div class="row" id="news">
<div class="col-sm-12"><jdoc:include type="modules" name="content1" style="html5" /></div>
<div class="col-sm-12"><jdoc:include type="component" /></div>
</div>
<div class="row" id="partners">
<div class="col-sm-12"><jdoc:include type="modules" name="partners" style="html5" /></div>
</div>
<? endif; ?>
<!--===/home-only layout===-->
<!--===Page layout===-->
<?php if($homePage == false): ?>
<div class="col-sm-3 pull-right">
<jdoc:include type="modules" name="breadcrumb" style="html5" />
</div>
<!-- W/ module right: 2 columns layout -->
<?php if ($this->countModules('right')): ?>
<div class="row">
<div class="col-sm-9" id="main">
<jdoc:include type="modules" name="content1" style="html5" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="content2" style="html5" />
</div>
<div class="col-sm-3" id="sidebar">
<jdoc:include type="modules" name="right" style="html5" />
</div>
</div>
<!-- Else: 1 column layout -->
<?php else : ?>
<div class="col-sm-9">
<jdoc:include type="modules" name="content1" style="html5" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="content2" style="html5" />
</div>
<? endif; ?>
<? endif; ?>
<!--===/page layout===-->
<!--===Footer===-->
<footer class="row">
<div class="col-sm-9"><jdoc:include type="modules" name="footer1" style="html5" /></div>
<div class="col-sm-3"><jdoc:include type="modules" name="footer2" style="html5" /></div>
</footer>
<!--===/footer===-->
</div><!--/page container-->
<!--<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/jquery.js"></script>
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/js/bootstrap.js"></script>-->
</body>
</html>
I went through the link provided by you.
There are couple of Javascript errors. That you have needed to fix.
JS Error: window.addEvent - addEvent method is undefined. Here, window.addEvent is mootool Javascript library method. I checked it, in your page, I couldn't able to find the reference of mootool library.
JS Error - autocompleter.js - "Uncaught ReferenceError: Class is not defined". This should be resolved after you will add mootools JS link.
You could find that in "media\system\js\mootools-core.js".
As, working with Jquery and mootools requires jquery-noconflict.js. You also need to take care of "jquery-noconflict.js", which you could find it in "media\jui\js\jquery-noconflict.js".
So, make sure to remove the Javascript errors to make your functionality.
Related
I got a registration form where the user has to pick up one of the possible options or register his own university. For that, I thought It would be a great idea to be using jquery autocomplete functionality because it seemed pretty straight forward but here we go again.
This is the code that I'm using just for testing it out
$(document).ready(function(){
$("#name").autocomplete({
source: [
"Apple",
"Orange",
"bananna"
],
select: function(event, selectedData){
console.log(selectedData);
}
})
})
And here's the one that I am using for the actual page.
The problem that I occur is that the suggestions come at the bottom of the page instead of being weather above or below the actual input. How could I possibly display them as a dropdown below the actual input?
$(document).ready(function(){
$("#name").autocomplete({
source: [
"Apple",
"Orange",
"bananna"
],
select: function(event, selectedData){
console.log(selectedData);
}
})
})
<!--
=========================================================
* Now UI Kit - v1.3.0
=========================================================
* Product Page: https://www.creative-tim.com/product/now-ui-kit
* Copyright 2019 Creative Tim (http://www.creative-tim.com)
* Licensed under MIT (https://github.com/creativetimofficial/now-ui-kit/blob/master/LICENSE.md)
* Designed by www.invisionapp.com Coded by www.creative-tim.com
=========================================================
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="http://bedford-computing.co.uk/hackathon//assets/img/apple-icon.png">
<link rel="icon" type="image/png" href="http://bedford-computing.co.uk/hackathon//assets/img/favicon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>
IUSCH | Register university
</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
<!-- Fonts and icons -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<!-- CSS Files -->
<link href="http://bedford-computing.co.uk/hackathon//assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://bedford-computing.co.uk/hackathon//assets/css/now-ui-kit.css?v=1.3.0" rel="stylesheet" />
<link href="http://bedford-computing.co.uk/hackathon/assets/css/animate.css" rel="stylesheet" />
<!-- CSS Just for demo purpose, don't include it in your project -->
<link href="http://bedford-computing.co.uk/hackathon//assets/demo/demo.css" rel="stylesheet" />
</head>
<body class="login-page sidebar-collapse">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg bg-primary fixed-top navbar-transparent " color-on-scroll="400">
<div class="container">
<div class="navbar-translate">
<a class="navbar-brand" href="<?php echo base_url() . 'welcome'?>">
HOME
</a>
<a class="navbar-brand" href="<?php echo base_url() . 'scenarious'?>">
SCENARIOS
</a>
<a class="navbar-brand" href="<?php echo base_url() . 'user/contact_us'?>">
CONTACT US
</a>
<button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-bar top-bar"></span>
<span class="navbar-toggler-bar middle-bar"></span>
<span class="navbar-toggler-bar bottom-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse justify-content-end" id="navigation" data-nav-image="<?php echo base_url(); ?>assets/img/blurred-image-1.jpg">
<?php if ($this->session->userdata('email') != ''): ?>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url() . 'user/my_account'?>">My profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url() . 'user/logout'?>">Logout</a>
</li>
</ul>
<?php else: ?>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url() . 'user'; ?>">Login</a>
</li>
<li class="nav-item">
<div class="dropdown">
<a class="nav-link" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Register
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="<?php echo base_url() . 'register_user'?>">Student</a>
<a class="dropdown-item" href="<?php echo base_url() . 'register_uni'?>">University</a>
</div>
</div>
</li>
</ul>
<?php endif; ?>
</div>
</div>
</nav>
<!-- End Navbar -->
<div class="page-header clear-filter" >
<div class="page-header-image" style="background-image:url(http://bedford-computing.co.uk/hackathon/assets/img/uni/UoB_JimStephenson-23-WebRes.jpg)"></div>
<div class="content">
<div class="container">
<div class="col-md-4 ml-auto mr-auto">
<div class="card card-signup animated shake" data-background-color="orange" style="margin-top:10%">
<form class="form" method="post" action="<?php echo base_url(); ?>register_uni/validation">
<div class="card-header text-center">
<h3 class="card-title title-up">Register University</h3>
<div class="logo-container">
</div>
</div>
<div class="card-body">
<span class="text-danger">
<?php echo form_error('name');?>
<?php echo form_error('contact_first_name');?>
<?php echo form_error('contact_last_name');?>
<?php echo form_error('university_id');?>
</span>
<div class="input-group no-border input-lg">
<input type="text" name="name" id="name" class="form-control" placeholder="University name">
</div>
<div class="input-group no-border input-lg">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="now-ui-icons users_circle-08"></i>
</span>
</div>
<input type="text" name="contact_first_name" placeholder="Contact first name" class="form-control" />
</div>
<div class="input-group no-border input-lg">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="now-ui-icons users_circle-08"></i>
</span>
</div>
<input type="text" name="contact_last_name" placeholder="Contact last name" class="form-control" />
</div>
<div class="input-group no-border input-lg">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="now-ui-icons users_circle-08"></i>
</span>
</div>
<input type="text" name="contact_email" placeholder="Contact email" class="form-control" />
</div>
</div>
<div class="card-footer text-center">
<input type="submit" name='register_uni' class="btn btn-neutral btn-round btn-lg">
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Core JS Files -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> type="text/javascript"></script>
<script src="http://bedford-computing.co.uk/hackathon/assets/js/core/popper.min.js" type="text/javascript"></script>
<script src="http://bedford-computing.co.uk/hackathon/assets/js/core/bootstrap.min.js" type="text/javascript"></script>
<!-- Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
<script src="http://bedford-computing.co.uk/hackathon/assets/js/plugins/bootstrap-switch.js"></script>
<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
<script src="http://bedford-computing.co.uk/hackathon/assets/js/plugins/nouislider.min.js" type="text/javascript"></script>
<!-- Plugin for the DatePicker, full documentation here: https://github.com/uxsolutions/bootstrap-datepicker -->
<script src="http://bedford-computing.co.uk/hackathon/assets/js/plugins/bootstrap-datepicker.js" type="text/javascript"></script>
<!-- Control Center for Now Ui Kit: parallax effects, scripts for the example pages etc -->
<script src="http://bedford-computing.co.uk/hackathon/assets/js/now-ui-kit.js?v=1.3.0" type="text/javascript"></script>
</body>
</html>
UPDATE: I've found this after a couple of hours https://bugs.jqueryui.com/ticket/8391
If you have a div with "position:fixed" and an input tag inside, the
autocomplete menu will scroll with the rest of the page. Instead, it
should stay with the input tag.
That answered my question. Admins might close it, cheers.
I've found this after a couple of hours https://bugs.jqueryui.com/ticket/8391
If you have a div with "position:fixed" and an input tag inside, the
autocomplete menu will scroll with the rest of the page. Instead, it
should stay with the input tag.
I search but I didn't find any solution for this. I need to create a modal like this.
When we pass true in GET request the modal must be shown. Otherwise if not any value for $GET request page will be load normally.
I am trying to do this by:
<?php if(isset($_GET["model"=="true"])){
echo "
<script type='text/javascript'>
$(document).ready(function(){
$('#addstudent').modal('show');
});
</script>" ;
} ?>
But it didn't work with my code.
Full code:
<?php
include_once('../func/islogin.php') ;
if($login=='false'){
header('location:../index.php');
}elseif($login!='true'){
header('location:../index.php');
}
include('../include/conn.php') ;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Creative - Bootstrap 3 Responsive Admin Template">
<meta name="author" content="GeeksLabs">
<link rel="shortcut icon" href="img/favicon.png">
<title>SMS - Sending System</title>
<script src="https://kit.fontawesome.com/e491dc23d1.js" crossorigin="anonymous"></script>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap-theme.css" rel="stylesheet">
<link href="../css/elegant-icons-style.css" rel="stylesheet"/>
<link href="../css/font-awesome.min.css" rel="stylesheet" />
<link href="../css/style.css" rel="stylesheet">
<link href="../css/style-responsive.css" rel="stylesheet" />
</head>
<body>
<?php if(isset($_GET["model"=="true"])){
echo "
<script type='text/javascript'>
$(document).ready(function(){
$('#addstudent').modal('show');
});
</script>" ;
} ?>
<section id="container" class="">
<header class="header dark-bg">
<div class="toggle-nav">
<div class="icon-reorder tooltips" data-original-title="Toggle Navigation" data-placement="bottom"><i class="icon_menu"></i></div>
</div>
SFT <span class="lite">හසිත පෙරේරා</span>
</div>
</header> <!--header menu end-->
<?php include('../include/design/slidebar.php') ?> <!--sidebar Include-->
</div>
</aside>
<section id="main-content">
<section class="wrapper">
<div class="row">
<div class="col-lg-12">
<h3 class="page-header"><i class="fas fa-chalkboard-teacher"></i> Classes</h3>
</div>
<?php include('../include/design/statusbar.php') ?>
</div>
<div class="row">
<div class="col-lg-8">
<section class="panel">
<header class="panel-heading text-center">
List Of All Classes
</header>
<table class="table table-striped table-advance table-hover">
<tbody>
<tr>
<th><i class="fas fa-sort-amount-down"></i></i> Class_ID</th>
<th><i class="fas fa-building"></i> Class_Name</th>
<th><i class="fas fa-sync-alt"></i></i> Status</th>
<th><i class="fas fa-user-edit"></i> Manage</th>
<th><i class="icon_cogs"></i> Action</th>
</tr>
<?php
$alldonators="SELECT * FROM classes ";
$alldonators_query = mysqli_query($conn,$alldonators);
if($alldonators_query){
while($row=mysqli_fetch_assoc($alldonators_query)){ ?>
<tr>
<td><?php echo $row['id'] ?></td>
<td><?php echo $row['Class'] ?></td>
<td>
<span
<?php if($row['isActive'] == 1){
echo " class='text-success'> <i class='icon_check_alt2'></i> Active ";
} else{
echo " class='text-danger' ><i class='fas fa-exclamation-circle'></i> Inactive";
}?>
</span>
</td>
<td><div class="btn btn-primary"><i class="fas fa-user-edit"></i> Manage Class</div></td>
<td><div class="btn-group">
<?php if($row['isActive'] == 1){
echo "<a class='btn btn-warning' href='#'><i class='fas fa-exclamation-circle'></i> </a>";
} else{
echo "<a class='btn btn-success' href='#'><i class='icon_check_alt2'></i> </a>";
}?>
<a class="btn btn-danger" href="#"><i class="icon_close_alt2"></i></a>
</div>
</td>
</tr>
<?php } } ?>
</tbody>
</table>
</section>
</div>
<div class="col-lg-4">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addstudent">
<i class="fas fa-plus-circle"></i> Create New Class
</button>
<div class="modal fade" id="addstudent" tabindex="-1" role="dialog" aria-labelledby="addstudents" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addstudent">Add Student-Class</h5>
</div>
<div class="modal-body">
<form action="../func/saveclass.php" method="POST">
<!-- Input Name -->
<div class="form-group">
<label for="ClassNameInput" required>Name For Class</label>
<textarea class="form-control" id="ClassNameInput" name="newclassInput" placeholder ="2020 A/L Matugame" rows="3" required></textarea>
</div>
<!-- input current Status -->
<div class="form-group">
<label for="InputCurrentStatus">Current Status</label>
<select class="form-control" id="InputCurrentStatus" name="statusInput">
<option value="1">Active</option>
<option value="0">Inactive</option>
</select>
</div>
</div>
<!-- modal-footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="saveClassBtn">Save changes</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</section>
</section>
<!-- container section end -->
<!-- javascripts -->
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- nice scroll -->
<script src="../js/jquery.scrollTo.min.js"></script>
<script src="../js/jquery.nicescroll.js" type="text/javascript"></script>
<!--custome script for all page-->
<script src="../js/scripts.js"></script>
</body>
</html>
It looks like your isset() statement is wrongly enclosed, you should have:
if (isset($_GET['model']) && $_GET['model'] === 'true')) {
// TODO
}
In short, your assertion needs to be separate to your check to make sure $_GET['model'] is set.
Instead of doing this, you could make a hidden input field and check for the GET parameters and then give it a value. Then in your jQuery check for the value of that input field and show the modal accordingly.
HTML
<input type="hidden" id="show_modal" value="<?php echo isset($_GET['model']) && $_GET['model'] === true ? 1 : 0; ?>
JQuery
$(document).ready(function(){
let show_modal = $('#show_modal').val();
if(show_modal == 1){
$('#addstudent').modal('show');
}
});
Im currently working on a project using codeigniter framework and bootstrap 3 sb admin 2 template, I have no experience about JQuery or Ajax before, now I want create an edit form to load and saving data in bootstrap modal just like this http://formvalidation.io/examples/loading-saving-data-modal/ but I keep getting this error on my console view_user:323 Uncaught ReferenceError: $ is not defined and the edit form didn't load at all. Here's and my code :
The CSS I include:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Home">
<meta name="author" content="MGA">
<title>App | POS</title>
<!--Page Logo-->
<link rel="icon" type="images/ico" href="<?php echo base_url();?>/assets/images/logo.png">
<!-- Bootstrap Core CSS -->
<link href="<?php echo base_url();?>/assets/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom -->
<link href="<?php echo base_url();?>/assets/bower_components/bootstrap/dist/css/mytheme.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="<?php echo base_url();?>/assets/bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="<?php echo base_url();?>/assets/dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="<?php echo base_url();?>/assets/fontawesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- DataTables CSS -->
<link href="<?php echo base_url();?>/assets/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet">
<!-- DataTables Responsive CSS -->
<link href="<?php echo base_url();?>/assets/bower_components/datatables-responsive/css/dataTables.responsive.css" rel="stylesheet">
<!-- 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
The Code Itself :
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Daftar User</h1>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#view">Lihat User</a></li>
<li><a data-toggle="pill" href="#add">Tambah Baru</a></li>
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div id="view" class="tab-pane fade in active">
<div class="row">
<div class="col-lg-12">
<!-- /.panel-heading -->
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>No.</th>
<th>ID</th>
<th>Jabatan</th>
<th>Status</th>
<th>Menu</th>
</tr>
</thead>
<tbody>
<?php
$no = 1;
foreach ($session as $row1) {
if($row1->id == "ADMIN" && $row1->jabatan_id == 1){
foreach ($user as $row) {
echo "<tr>
<td><div style='text-align:right;'>".$no.".</div></td>
<td >".$row->id."</td>
<td><div style='text-align:center;'>".$row->namajabatan."</div></td>
<td>".$row->status."</td>
<td>
<div style='text-align:center;'><a class='btn btn-primary btn-circle'><i class='fa fa-info fa-fw'></i></a> <a data-toggle='modal' data-id=".$row->id." class='edit btn btn-warning btn-circle'><i class='fa fa-pencil fa-fw'></i></a></div>
</td>
</tr>";
$no++;
}
}else{
foreach ($user as $row) {
echo "<tr>
<td><div style='text-align:right;'>".$no.".</div></td>
<td>".$row->id."</td>
<td><div style='text-align:center;'>".$row->namajabatan."</div></td>
<td>".$row->status."</td>
<td><div style='text-align:center;'><a class='btn btn-primary btn-circle'><i class='fa fa-info fa-fw'></i></a></div>
</tr>";
$no++;
}
}
}
?>
</tbody>
</table>
<!-- /.table-responsive -->
</div>
</div>
</div>
<!-- /.panel-body -->
</div>
<div id="add" class="tab-pane fade">
<?php include 'addnew.php' ?>
</div>
<?php include 'formedit.php' ?>
</div>
</div>
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->
The formedit.php :
<script type="text/javascript">
$(document).on("click", ".open-edit", function () {
var userID = $(this).data('id');
$(".modal-body #userID").val( userID );
});
</script>
<div class="modal hide" id="edit_user">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>some content</p>
<input type="text" name="userID" id="userID" value=""/>
</div>
The Javascripts And JQueries :
<!-- jQuery -->
<script src="<?php echo base_url();?>/assets/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="<?php echo base_url();?>/assets/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="<?php echo base_url();?>/assets/bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="<?php echo base_url();?>/assets/dist/js/sb-admin-2.js"></script>
<!-- DataTables JavaScript -->
<script src="<?php echo base_url();?>/assets/bower_components/datatables/media/js/jquery.dataTables.min.js">
</script>
<script src="<?php echo base_url();?>/assets/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>
<!-- Page-Level Demo Scripts - Tables - Use for reference -->
<script type="text/javascript">
$(document).ready(function() {
$('#dataTables-example').DataTable({
responsive: true
});
});
</script>
Sorry for my bad english btw :)
IDs should be unique to the page, so it would probably be cleaner to do $(#userID).val(userID). But that aside...
In terms of error view_user:323 Uncaught ReferenceError: $ is not defined likely your jQuery is not defined. Ensure that your page is loading the jQuery properly (that the file is both there, and has the code in it).
Chrome: Right click -> Inspect -> Sources
Firefox: Right Click -> Inspect Element -> Debugger -> Sources
Internet Explorer: Click -> Inspect Element -> Debugger
I use session to send that value to other page, but mysql syntax does not display the data using that value. It doesnt show the error on MySQL syntax. Can someone help me? and Explain why mysql syntax cannot read the session? or I need to assign new variable for session on the pakejlist.php page?
the value already call from DB and display on A HREF link on food.php , i want to get that value on pakejlist.php mysql syntax.
and what I achieve is nothing.. the syntax just fine but the data doesnt came out.
//food.php
<?php include("../kahwin/Connections/conn.php"); ?>
<!DOCTYPE html>
<html>
<head>
<title>Kahwin Ringkas</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/kahwin/index.php">Walimatul Urus</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="page-header">
<h1>Carian Katering</h1>
</div>
<?php
session_start();
$_SESSION['id'] = $row['v_id'];
mysql_select_db($database_conn, $conn);
$sql = mysql_query("SELECT * FROM vendor WHERE type = 'Katering'") or die (mysql_error());
while ($row = mysql_fetch_array($sql)) {
?>
<div class="col-md-4">
<?php echo '<img src="data:image;base64, '.$row['img'].'" class="img-thumbnail">' ?>
<h4><?php echo $row['companyName']?></h4>
<p><?php echo $row['address']?>, <?php echo $row['code']?> <?php echo $row['city']?>, <?php echo $row['state']?><br><?php echo $row['contact']?><br><?php echo $row['email']?><br></p>
View Package<br>
</div>
<?php }
?>
</div>
</body>
</html>
//pakejlist.php
<?php include("../kahwin/Connections/conn.php"); ?>
<!DOCTYPE html>
<html>
<head>
<title>Kahwin Ringkas</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/kahwin/index.php">Walimatul Urus</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<!-- Page Heading -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Senarai Pakej</h1>
</div>
</div>
<!-- /.row -->
<!-- Project One -->
<?php
//$vid = $_REQUEST['id'];
session_start();
mysql_select_db($database_conn, $conn);
$sql = mysql_query("SELECT * FROM pakej WHERE v_id = '" .$_SESSION['id']. "' ") or die (mysql_error());
while ($result = mysql_fetch_array($sql)) {
?>
<div class="row">
<div class="col-md-6">
<h3><?php echo $result['name_p']?></h3>
<h4>$ <?php echo $result['harga']?></h4>
<p><?php echo $result['descr']?></p>
<a class="btn btn-primary" href="#">Add to cart <span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
<div class="col-md-5"></div>
</div>
<?php }
?>
<!-- /.row -->
<hr>
</body>
</html>
In food.php, you are initialising session variable $_SESSION['id'] = $row['v_id'] , outside mysql_fetch_array loop. So $row['v_id'] is empty. Also if you initialize that from within the loop, it will be overwritten and will have the value from the last row.
In the loop,
View Package<br>
The value in anchor tag does not mean anything. It is not valid. So you can try this instead..
View Package<br>
And in the pakejlist.php you will have change to
$sql = mysql_query("SELECT * FROM pakej WHERE v_id = '" .$_GET['v_id']. "' ") or die (mysql_error());
Hope this helps...
I had 3 .php files, they are index.php, load_file.php,and register.php
In index.php, contain navigation, and each navigation has dropdown list, i call this navigation and the dropdown from database. and also index.php has link to register.php, note : load_file.php included in this file
In load_file.php, contain code to check value of page, by using if($_GET['page']),and trigger every value with switch-case
register.php, just a normal form
My problem is, after I navigate to register.php by typing ?page=register in browser, my dropdown in index.php file become unusable
::UPDATE::
this is my index.php file
<?php
session_start();
require_once './model/functions.php';
if(isset($_GET["category"])){
$index_page= $_GET["category"];
$index_sub_page= null;
}elseif (isset ($_GET["sub_category"])) {
$index_sub_page = $_GET["sub_category"];
$index_page= null;
}else{
$index_sub_page= null;
$index_page= null;
}
if($_POST){
$username = $_POST["username"];
$password = $_POST["password"];
if(check_username_and_password_from_users($username, $password)){
$_SESSION["username"] = $username;
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Learn Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
<div id="TopContainer" class="container">
<div class="pull-right navbar-default">
<ul class="nav navbar-nav">
<?php if(isset($_SESSION["username"])){ ?>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown"><?php echo $_SESSION["username"]; ?></a>
<div class="dropdown-menu" style="padding: 17px;">
Logout
</div>
</li>
<?php }else{ ?>
<!--dropdown here -->
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown" id="login">Dropdown</a>
<div class="dropdown-menu" style="padding:17px;">
<form id="loginform" method="post" action="index.php" class="form">
<div class="form-group">
<input class="form-control" type="text" name="username" id="username" placeholder="username">
</div>
<div class="form-group">
<input class="form-control" type="password" name="password" id="password" placeholder="password">
</div>
<input type="submit" value="Submit">
</form>
</div>
</li>
<li>Register</li>
<?php } ?>
<li>FAQs</li>
<li>Twitter</li>
<li>Facebook</li>
</ul>
</div>
</div>
<div id="logo" class="container">
<div class="col-md-6">
<a class="navbar no-margin" href="#"><img src="picture/LogoSaya.png"></a>
</div>
<div class="col-md-6">
<div class="col-md-6 pull-right">
<div class="input-group input-group-sm">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div>
</div>
</div>
</div>
<nav class="container">
<div class="navbar navbar-default">
<ul class="nav navbar-nav">
<?php
$subject_set = find_all_subjects();
while($subject = mysqli_fetch_assoc($subject_set)){
?>
<li>
<a id="dLabel" data-target="#" href="?subject=<?php echo urlencode($subject["id"]);?>" data-toggle="dropdown" aria-haspopup="true" role="button">
<?php echo $subject["name"];?>
<span class="caret"></span>
</a>
<!--dropdown here -->
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<?php
$page_set = find_pages_from_subjects($subject["id"]);
while($page = mysqli_fetch_assoc($page_set)){
?>
<li>
<?php echo $page["name"];?>
<ul>
<?php
$sub_page_set = find_sub_pages_from_pages($page["id"]);
while($sub_page = mysqli_fetch_assoc($sub_page_set)){
?>
<li>
<?php echo $sub_page["name"];?>
</li>
<?php
}
clear_result($sub_page_set);
?>
</ul>
</li>
<?php
}
clear_result($page_set);
?>
</ul>
</li>
<?php
}
clear_result($subject_set);
?>
</ul>
</div>
</nav>
<div class="container">
<?php
include "load_files.php"; //this is to load the files
?>
</div>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
to navigate register.html, i use this code
<li>Register</li>
as you can see, i put code on below in index.php
<?php
include "load_files.php"; //this is to load file
?>
and this is my load_files.php
<?php
if($_GET){
switch ($_GET['page']) {
case 'register':
if(!file_exists("register.html")){
die("Sorry Empty Page");
}
include 'register.html';
break;
default:
break;
}
}
?>
Seems like an event handler issue. I'd look at how you are adding event handlers and see if the handler is getting wiped out somehow.
::SOLVED::
My problem is, after I navigate to register.php by typing ?page=register in browser, my dropdown in index.php file become unusable
this problem happen because, i had 2
<script src="jquery.js"></script>
, inside index.php and register.html .by remove the one inside register.html will solve the problem