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
Related
I am using AdminBSB template for practice, and Jquery datatable plugin JS not working in my blade template
I want to make datatable looks like this:
but exportable, search, and pagination function in mytable not working like this:
this is sample of my code for script:
posts/index.blade.php:
<x-admin-master>
#section('content')
<!-- T A B E L --->
<div class="container-fluid">
<div class="block-header">
<h2>
JQUERY DATATABLES USER
<small>Taken from datatables.net</small>
</h2>
</div>
<!-- Exportable table Examples -->
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
<h2>
All Post
</h2>
</div>
<div class="body">
<div class="table-responsive">
<table id="tableCategory" class="table table-bordered table-striped table-hover dataTable js-exportable">
<thead>
<tr>
<th>XXX</th>
<th>XXX</th>
<th>XXX</th>
</tr>
</thead>
<tfoot>
<tr>
<th>XXX</th>
<th>XXX</th>
<th>XXX</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>XXX</th>
<th>XXX</th>
<th>XXX</th>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- #END# Basic Examples -->
</div>
<!-- END - T A B E L --->
#endsection
#section('scripts')
<!-- Jquery DataTable Plugin Js -->
<script src="{{asset('plugins/jquery-datatable/jquery.dataTables.js')}}"></script>
<script src="{{asset('plugins/jquery-datatable/skin/bootstrap/js/dataTables.bootstrap.js')}}"></script>
<script src="{{asset('plugins/jquery-datatable/extensions/export/dataTables.buttons.min.js')}}"></script>
<script src="{{asset('plugins/jquery-datatable/extensions/export/buttons.flash.min.js')}}"></script>
<script src="{{asset('plugins/jquery-datatable/extensions/export/jszip.min.js')}}"></script>
<script src="{{asset('plugins/jquery-datatable/extensions/export/pdfmake.min.js')}}"></script>
<script src="{{asset('plugins/jquery-datatable/extensions/export/vfs_fonts.js')}}"></script>
<script src="{{asset('plugins/jquery-datatable/extensions/export/buttons.html5.min.js')}}"></script>
<script src="{{asset('plugins/jquery-datatable/extensions/export/buttons.print.min.js')}}"></script>
#endsection
</x-admin-master>
admin-master.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title>Welcome To | Bootstrap Based Admin Template - Material Design</title>
<!-- Favicon-->
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
<!-- Bootstrap Core Css -->
<link href="{{asset('plugins/bootstrap/css/bootstrap.css')}}" rel="stylesheet">
<!-- Waves Effect Css -->
<link href="{{asset('plugins/node-waves/waves.css')}}" rel="stylesheet" />
<!-- Animation Css -->
<link href="{{asset('plugins/animate-css/animate.css')}}" rel="stylesheet" />
<!-- Morris Chart Css-->
<link href="{{asset('plugins/morrisjs/morris.css')}}" rel="stylesheet" />
<!-- Custom Css -->
<link href="{{asset('css/style.css')}}" rel="stylesheet">
<!-- AdminBSB Themes. You can choose a theme from css/themes instead of get all themes -->
<link href="{{asset('css/themes/all-themes.css')}}" rel="stylesheet" />
<!-- JQuery DataTable Css -->
<link href="{{asset('plugins/jquery-datatable/skin/bootstrap/css/dataTables.bootstrap.css')}}" rel="stylesheet">
<!-- Bootstrap DatePicker Css -->
<link href="{{asset('plugins/bootstrap-datepicker/css/bootstrap-datepicker.css')}}" rel="stylesheet" />
<!-- Wait Me Css -->
<link href="{{asset('plugins/waitme/waitMe.css')}}" rel="stylesheet" />
<!-- Bootstrap Select Css -->
<link href="{{asset('plugins/bootstrap-select/css/bootstrap-select.css')}}" rel="stylesheet" />
<!-- Dropzone Css -->
<link href="{{asset('plugins/dropzone/dropzone.css')}}" rel="stylesheet">
<!-- Toastr Css -->
<link href="{{asset('css/toastr.min.css')}}" rel="stylesheet">
</head>
</head>
<body class="theme-red">
<!-- Page Loader -->
<div class="page-loader-wrapper">
<div class="loader">
<div class="preloader">
<div class="spinner-layer pl-red">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
<p>Please wait...</p>
</div>
</div>
<!-- #END# Page Loader -->
<!-- Overlay For Sidebars -->
<div class="overlay"></div>
<!-- #END# Overlay For Sidebars -->
<!-- Search Bar -->
<div class="search-bar">
<div class="search-icon">
<i class="material-icons">search</i>
</div>
<input type="text" placeholder="START TYPING...">
<div class="close-search">
<i class="material-icons">close</i>
</div>
</div>
<!-- #END# Search Bar -->
<!-- Top Bar -->
<x-admin.top-nav.admin-top-navbar></x-admin.top-nav.admin-top-navbar>
<!-- #Top Bar -->
<section>
<!-- Left Sidebar -->
<x-admin.left-nav.admin-left-navbar></x-admin.left-nav.admin-left-navbar>
<!-- #END# Left Sidebar -->
<!-- Right Sidebar -->
<x-admin.right-nav.admin-right-navbar></x-admin.right-nav.admin-right-navbar>
<!-- #END# Right Sidebar -->
</section>
{{-- <section class="content"> --}}
<div class="container-fluid">
<section class="content">
#yield('content')
</section>
</div>
{{-- </section> --}}
<!-- Jquery Core Js -->
<script src="{{asset('plugins/jquery/jquery.min.js')}}"></script>
<!-- Bootstrap Core Js -->
<script src="{{asset('plugins/bootstrap/js/bootstrap.js')}}"></script>
<!-- Select Plugin Js -->
<script src="{{asset('plugins/bootstrap-select/js/bootstrap-select.js')}}"></script>
<!-- Slimscroll Plugin Js -->
<script src="{{asset('plugins/jquery-slimscroll/jquery.slimscroll.js')}}"></script>
<!-- Waves Effect Plugin Js -->
<script src="{{asset('plugins/node-waves/waves.js')}}"></script>
<!-- Jquery CountTo Plugin Js -->
<script src="{{asset('plugins/jquery-countto/jquery.countTo.js')}}"></script>
<!-- Morris Plugin Js -->
<script src="{{asset('plugins/raphael/raphael.min.js')}}"></script>
<script src="{{asset('plugins/morrisjs/morris.js')}}"></script>
<!-- ChartJs -->
<script src="{{asset('plugins/chartjs/Chart.bundle.js')}}"></script>
<!-- Flot Charts Plugin Js -->
<script src="{{asset('plugins/flot-charts/jquery.flot.js')}}"></script>
<script src="{{asset('plugins/flot-charts/jquery.flot.resize.js')}}"></script>
<script src="{{asset('plugins/flot-charts/jquery.flot.pie.js')}}"></script>
<script src="{{asset('plugins/flot-charts/jquery.flot.categories.js')}}"></script>
<script src="{{asset('plugins/flot-charts/jquery.flot.time.js')}}"></script>
<!-- Sparkline Chart Plugin Js -->
<script src="{{asset('plugins/jquery-sparkline/jquery.sparkline.js')}}"></script>
<!-- Custom Js -->
<script src="{{asset('js/admin.js')}}"></script>
<script src="{{asset('js/pages/index.js')}}"></script>
<!-- Demo Js -->
<script src="{{asset('js/demo.js')}}"></script>
#yield('scripts')
</body>
</html>
I got this issue before. I changed
#section('scripts') ... #endsection
to
#push('scripts') ... #endpush
In admin-master.blade.php, I changed:
#yield('script') to #stack('script')
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');
}
});
I have installed last woocommerce plugin on my child theme.
When i change "Sort By" items on dropdown on shop page, nothing happend.
In Console view there is no any event.
JQuery works i check now,
jquery is loaded manually from footer.php like this:
<script type="text/javascript" src="/assets/plugins/jquery/jquery.min.js"></script>
and also i add this in functions.php:
function my_js() {
wp_enqueue_script( 'jquery' );
}
add_action('init', 'my_js');
Is there maybe sort with button and classic refresh?
EDIT:
this is footer.php where are scripts included:
<!-- JS Global Compulsory -->
<script type="text/javascript" src="/assets/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/assets/plugins/jquery/jquery-migrate.min.js"></script>
<script type="text/javascript" src="/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- JS Implementing Plugins -->
<script type="text/javascript" src="/assets/plugins/back-to-top.js"></script>
<script type="text/javascript" src="/assets/plugins/smoothScroll.js"></script>
<!-- JS Customization -->
<script type="text/javascript" src="/assets/js/custom.js"></script>
<!-- JS Page Level -->
<script type="text/javascript" src="/assets/js/app.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
App.init();
});
</script>
<!--[if lt IE 9]>
<script src="/assets/plugins/respond.js"></script>
<script src="/assets/plugins/html5shiv.js"></script>
<script src="/assets/plugins/placeholder-IE-fixes.js"></script>
<![endif]-->
header.php
<?php
global $current_user;
get_currentuserinfo();
$BASE = $_SERVER["DOCUMENT_ROOT"];
?>
<?php $base = 'https://www.example.co'; ?>
<?php
/**
* The header for our theme.
*
* Displays all of the <head> section and everything up till <div id="content">
*
* #package parallax-one
*/
?><!DOCTYPE html>
<?php parallax_hook_html_before(); ?>
<html <?php language_attributes(); ?> class="no-js">
<head>
<!--<title>Example.co - Betting system builder</title>-->
<?php parallax_hook_head_top(); ?>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<?php parallax_hook_head_bottom(); ?>
<?php wp_head(); ?>
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico">
<!-- Web Fonts -->
<link rel='stylesheet' type='text/css' href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600&subset=cyrillic,latin'>
<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="<?php echo $base ?>/assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="<?php echo $base ?>/assets/css/style.css">
<!-- CSS Theme -->
<link rel="stylesheet" href="<?php echo $base ?>/assets/css/theme-colors/blue.css"/>
<!-- CSS Header and Footer -->
<link rel="stylesheet" href="<?php echo $base ?>/assets/css/headers/header-default.css">
<link rel="stylesheet" href="<?php echo $base ?>/assets/css/footers/footer-v1.css">
<script src="<?php echo $base ?>/assets/plugins/jquery/jquery.min.js"></script>
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="<?php echo $base ?>/assets/plugins/animate.css">
<link rel="stylesheet" href="<?php echo $base ?>/assets/plugins/line-icons/line-icons.css">
<link rel="stylesheet" href="<?php echo $base ?>/assets/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="<?php echo $base ?>/assets/plugins/parallax-slider/css/parallax-slider.css">
<link rel="stylesheet" href="<?php echo $base ?>/assets/plugins/owl-carousel/owl-carousel/owl.carousel.css">
<!-- CSS Page Style -->
<link rel="stylesheet" href="<?php echo $base ?>/assets/css/pages/pricing/pricing_v6.css">
<link rel="stylesheet" href="<?php echo $base ?>/assets/css/pages/pricing/pricing_v7.css">
<link rel="stylesheet" href="<?php echo $base ?>/assets/css/pages/pricing/pricing_v8.css">
<!-- CSS Customization -->
<!-- CSS Customization -->
<link rel="stylesheet" href="<?php echo $base ?>/assets/css/custom.css">
<link rel="stylesheet" href="<?php echo $base ?>/assets/css/pages/page_invoice.css">
</head>
<body itemscope itemtype="http://schema.org/WebPage" <?php body_class(); ?>
dir="<?php if (is_rtl()) echo "rtl"; else echo "ltr"; ?>">
<div class="header">
<div class="container">
<!-- Logo -->
<a class="logo" href="https://www.predictology.co">
<img src="<?php $BASE ?>/assets/img/logo1-default.png" alt="Logo">
</a>
<!-- End Logo -->
<!-- Topbar -->
<div class="topbar">
<ul class="loginbar pull-right">
<li>Join Now</li>
<li class="topbar-devider"></li>
<li>Why Predictology?</li>
<li class="topbar-devider"></li>
<li>Features</li>
<li class="topbar-devider"></li>
<li>Videos</li>
<li class="topbar-devider"></li>
<li>User Guide</li>
<li class="topbar-devider"></li>
<li>Support</li>
<li class="topbar-devider"></li>
<?php if($current_user->ID) { ?>
<li><?php echo $current_user->user_nicename; ?></li>
<li class="topbar-devider"></li>
<li>Logout</li>
<?php } else {?>
<li>Login</li>
<?php } ?>
</ul>
</div>
<!-- End Topbar -->
<!-- Toggle get grouped for better mobile display -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="fa fa-bars"></span>
</button>
<!-- End Toggle -->
</div><!--/end container-->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse mega-menu navbar-responsive-collapse">
<div class="container">
<ul class="nav navbar-nav">
<!-- Shortcodes -->
<li>
<a href="/predictions">
Predictions
</a>
</li>
<!-- End Shortcodes -->
<!-- Misc Pages -->
<li>
<a href="/eloratings">
Elo Ratings
</a>
</li>
<li>
<a href="/streaks">
Streaks
</a>
</li>
<!-- Pages -->
<li>
<a href="/stats">
Statististics
</a>
</li>
<!-- End Pages -->
<!-- Pages -->
<li>
<a href="/bettrack">
Bet Tracker
</a>
</li>
<!-- End Pages -->
<li>
<i class="fa fa-unlock"></i> Join Now
</li>
<!-- End Misc Pages -->
<?php //wp_nav_menu( array( 'theme_location' => 'predictology-menu' ) ); ?>
</ul>
</div><!--/end container-->
</div><!--/navbar-collapse-->
I am working with free downloaded "Ustora" template (html theme for eCommerce). In the same I am working with "Add to cart" button in the single-product page. After click it should launch a ajax function that will be insert product data into my cart table in database. But this one is not working.
I am working with this to learn make eCommerce website. Please help as earliest here is my code below.
Single-product-page.php
<?php
$row = mysql_fetch_row(mysql_query("SELECT * FROM `products` where pid='".$_GET['proid']."' "));
echo '<div class="row">
<div class="col-sm-6">
<div class="product-images">
<div class="product-main-img">
<img src="'.$row[5].'" alt="'.$row[2].'">
</div>
<div class="product-gallery">
<img src="'.$row[5].'" alt="'.$row[2].'">
<img src="'.$row[5].'" alt="'.$row[2].'">
<img src="'.$row[5].'" alt="'.$row[2].'">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="product-inner">
<h2 class="product-name">'.$row[2].'</h2>
<div class="product-inner-price">
<ins>'.$row[3].'/- INR</ins> <del>'.$row[3].'/- INR</del>
</div>
<form method="post">
<div class="quantity">
<input type="number" size="4" class="input-text qty text" title="Qty" value="1" name="quantity" id="qty" min="1" step="1" max='.$row[6].'>
</div>
<button class="add_to_cart_button" onclick="addtocart('.$row[1].','.$row[2].','.$row[3].','.$buid.');">
Add to cart
</button>
</form>
<div class="product-inner-category">
<p>Category: Summer. Tags: awesome, best, sale, shoes. </p>
</div>
<div role="tabpanel">
<ul class="product-tab" role="tablist">
<li role="presentation" class="active">Description</li>
<li role="presentation">Reviews</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home">
<h2>Product Description</h2>
'.$row[4].'
</div>
<div role="tabpanel" class="tab-pane fade" id="profile">
<h2>Reviews</h2>
<div class="submit-review">
<p><label for="name">Name</label> <input name="name" type="text"></p>
<p><label for="email">Email</label> <input name="email" type="email"></p>
<div class="rating-chooser">
<p>Your rating</p>
<div class="rating-wrap-post">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
<p><label for="review">Your review</label> <textarea name="review" id="" cols="30" rows="10"></textarea></p>
<p><input type="submit" value="Submit"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>';
?>
Header.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Product Page - Ustora Demo</title>
<!-- Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,200,300,700,600' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100' rel='stylesheet' type='text/css'>
<script src="jquery.js"></script>
<script type="text/javascript">
function addtocart(pid,name,price,buid)
{
alert("addToCart function working");
var pid = pid;
var pname = name;
var pprice = price;
var pqty = document.getElementById("qty").value; //$(#qty).val();
var buid = buid;
//var cstid = $(#).val();
$.ajax({
type:"POST",
url:"http://localhost/phpsales/insert-cart.php",
data:{pid,pname,pprice,pqty,buid},
cache:false,
success:alert("Product Added Successfully")
//error:function fail(){alert("Some technical error occured dufine product add to cart. Please try after some time.");}
});
}
</script>
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/responsive.css">
<!-- HTML5 shim and Respond.js for 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.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
I just want to launch addtocart() function on "Add to cart" button click and after want to insert data in shopping cart.
Thanks in advance
i think the problem is in data where you are sending data to new page
function addtocart(pid,name,price,buid)
{
alert("addToCart function working");
var pid = pid;
var pname = name;
var pprice = price;
var pqty = document.getElementById("qty").value; //$(#qty).val();
var buid = buid;
//var cstid = $(#).val();
$.ajax({
type:"POST",
url:"http://localhost/phpsales/insert-cart.php",
data:{pid,pname,pprice,pqty,buid},//here is the problem
data:{pid:pid,pname:pname,pprice:pprice,pqty:pqty,buid:build},//this must be like this
cache:false,
success:alert("Product Added Successfully")
//error:function fail(){alert("Some technical error occured dufine product add to cart. Please try after some time.");}
});
}
I think you need to put quotes around your arguments calling the addToCard() function like so:
onclick="addtocart(/''.$row[1].'/',/''.$row[2]./'',/''.$row[3].'/',/''.$buid.'/');"
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.