Textarea returns empty value - javascript

I have a form which takes three values Roomname, Experience and Rating. This data is then submitted to a database. The issue I'm facing is through my Roomname and Rating is getting submitted perfectly, the data I enter in textarea is giving me empty result in database. I have tried every way but I'm not able to solve this issue. Only this is the issue, other code is working fine.
Please help!!!
Here is the code:
<?php
include 'db.php';
session_start();
error_reporting(0);
?>
<!DOCTYPE html>
<html>
<head>
<title>Welcome</title>
<!--Bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!--User's CSS-->
<link rel="stylesheet" type="text/css" href="../css/feedback.css">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<!--Fonts-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#100;300&display=swap" rel="stylesheet">
<!--Font Awesome JS-->
<script src="https://use.fontawesome.com/1033686ccb.js"></script>
<!--JQuery-->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
<header>
<?php include 'inner-navbar.php';
error_reporting(0);
?>
</header>
<div class="container">
<div id="feedback">
<h3 class="mb-5">Your Feedback</h3>
<form method="post" id="feedback-form">
<div class="row mb-3">
<label class="col-sm-6 col-form-label">Room Name: </label>
<div class="col-sm-6">
<select name="selectedRoomName" id="selectedRoomName" class="form-control">
<?php
$selectQuery="SELECT*FROM bookings where firstname='".$_SESSION['firstname']."';";
$selectQueryResult=mysqli_query($conn,$selectQuery);
if($selectQueryResult){
while($row=mysqli_fetch_assoc($selectQueryResult)){
echo '<option value="'.$row["roomName"].'">'.$row["roomName"].'</option>';
}
}
?>
</select>
</div>
</div>
<div class="row mb-4">
<label class="col-sm-6 col-form-label">Your Experience: </label>
<div class="col-sm-6">
<textarea class="form-control" placeholder="Your Experience" name="experience" id="experience"></textarea>
</div>
</div>
<div class="row mb-5">
<label class="col-sm-6 col-form-label">Your Rating: </label>
<div class="col-sm-6">
<i class="fa fa-star fa-2x" aria-hidden="true" data-index="0"></i>
<i class="fa fa-star fa-2x" aria-hidden="true" data-index="1"></i>
<i class="fa fa-star fa-2x" aria-hidden="true" data-index="2"></i>
<i class="fa fa-star fa-2x" aria-hidden="true" data-index="3"></i>
<i class="fa fa-star fa-2x" aria-hidden="true" data-index="4"></i>
</div>
</div>
<button type="submit" class="btn btn-outline-dark submit" name="submit" id="submit">Submit Feedback</button>
<?php
if(isset($_POST['rating'])){
$roomName=$_POST['selectedRoomName'];
$experience=$_POST['experience'];
$rating=$_POST['rating'];
$submitQuery="INSERT INTO feedback(roomName,experience,rating) VALUES('$roomName','$experience','$rating');";
$submitQueryRes=mysqli_query($conn,$submitQuery);
if($submitQueryRes){
echo '<script>alert("Your Feedback has been Successfully Submitted!");</script>';
}else{
echo '<script>alert("Error: '.$rating.'");</script>';
}
}
?>
</form>
</div>
</div>
</body>
<script type="text/javascript">
var selectedRoomName=$("#selectedRoomName").val();
var experience=$("#experience").val();
var rating=-1;
$(document).ready(function(){
$('.fa-star').click(function(){
rating=parseInt($(this).data('index'));
});
$('.fa-star').mouseover(function(){
resetStarColors();
var value=parseInt($(this).data('index'));
for(var i=0;i<=value;i++){
$('.fa-star:eq('+i+')').css('color','#eb9e34');
}
});
$('.fa-star').mouseleave(function(){
resetStarColors();
if(rating!=-1){
for(var i=0;i<=rating;i++){
$('.fa-star:eq('+i+')').css('color','#eb9e34');
}
}
});
function resetStarColors(){
$('.fa-star').css('color','black');
}
$("#submit").click(function(){
$.ajax({
url:'feedback.php',
method:'POST',
data:{
selectedRoomName: selectedRoomName,
experience: experience,
rating: rating
},
success: function(){
alert(experience);
}
});
});
});
</script>
</html>


Move
var selectedRoomName=$("#selectedRoomName").val();
var experience=$("#experience").val();
inside your .click() method.

Related

jquery autocomplete suggestions come at the bottom of the page

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.

How to open Bootstrap modal by using a PHP GET request?

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');
}
});

How does the star rating works in the most simplest way?

I am tryng to run a star rating component in the most simplest approach. I got most of the code from this link. But unfortunately, nothing appears in the page.
Here is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="./rating-stars.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>
<script src="./rating-stars.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="star-rating">
<span class="fa fa-star-o" data-rating="1"></span>
<span class="fa fa-star-o" data-rating="2"></span>
<span class="fa fa-star-o" data-rating="3"></span>
<span class="fa fa-star-o" data-rating="4"></span>
<span class="fa fa-star-o" data-rating="5"></span>
<input type="hidden" name="whatever1" class="rating-value" value="2.56">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="star-rating">
<span class="fa fa-star-o" data-rating="1"></span>
<span class="fa fa-star-o" data-rating="2"></span>
<span class="fa fa-star-o" data-rating="3"></span>
<span class="fa fa-star-o" data-rating="4"></span>
<span class="fa fa-star-o" data-rating="5"></span>
<input type="hidden" name="whatever2" class="rating-value" value="1.9">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="star-rating">
<span class="fa fa-star-o" data-rating="1"></span>
<span class="fa fa-star-o" data-rating="2"></span>
<span class="fa fa-star-o" data-rating="3"></span>
<span class="fa fa-star-o" data-rating="4"></span>
<span class="fa fa-star-o" data-rating="5"></span>
<input type="hidden" name="whatever3" class="rating-value" value="4.1">
</div>
</div>
</div>
</div>
</body>
</html>
and then a simple css file called as rating-stars.css:
.star-rating {
line-height:32px;
font-size:1.25em;
}
.star-rating .fa-star{color: yellow;}
and finally the javascript file is:
var $star_rating = $('.star-rating .fa');
var SetRatingStar = function() {
return $star_rating.each(function() {
if (parseInt($star_rating.siblings('input.rating-value').val()) >= parseInt($(this).data('rating'))) {
return $(this).removeClass('fa-star-o').addClass('fa-star');
} else {
return $(this).removeClass('fa-star').addClass('fa-star-o');
}
});
};
$star_rating.on('click', function() {
$star_rating.siblings('input.rating-value').val($(this).data('rating'));
return SetRatingStar();
});
SetRatingStar();
$(document).ready(function() {
});
The problem is, no star appears in the page. I checked the console, and it seems that, everything is fine, and there is no error.

you can use the rateYo plugin
$(function () {
$(".rateyo").rateYo({
starWidth: "80px"
}).on("rateyo.change", function (e, data) {
var rating = data.rating;
$(this).parent().find('.result').text('rating :'+ rating);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css" rel="stylesheet"/>
<div>
<div class="rateyo"
data-rateyo-rating="1.5"
data-rateyo-num-stars="5"></div>
<span class='result'>0</span>
</div>

It's using a custom font from fontawesome to create the stars (referenced from here: https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css). The font is relative to that CSS file, so you either need to ensure you're including that file or that you have the fonts locally.

I don't see link to font awesome. There're multiple ways to add it check
http://fontawesome.io/get-started/
The simplest solution add between <head></head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Uncaught ReferenceError: $ is not defined laravel

Hello i am new to laravel and i'm following this tutorial in order to build a student CMS, i have a datepicker and a bootstrap modal that are supposed to popup when i click form buttons, but nothing shows up even though everything seems okay.
I have a master page that contains all the styles and js references
master.blade.php
<!DOCTYPE html>
<html>
<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">
<meta name="keyword" content="Creative, Dashboard, Admin, Template, Theme, Bootstrap, Responsive, Retina, Minimal">
<link rel="shortcut icon" href="img/favicon.png">
<title>Dashboard</title>
<!-- Bootstrap CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- bootstrap theme -->
<link href="/css/bootstrap-theme.css" rel="stylesheet">
<!--external css-->
<!-- font icon -->
<link href="/css/elegant-icons-style.css" rel="stylesheet" />
<link href="/css/font-awesome.min.css" rel="stylesheet" />
<!-- full calendar css-->
<link href="/assets/fullcalendar/fullcalendar/bootstrap-fullcalendar.css" rel="stylesheet" />
<link href="/assets/fullcalendar/fullcalendar/fullcalendar.css" rel="stylesheet" />
<!-- easy pie chart-->
<link href="/assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen"/>
<!-- owl carousel -->
<link rel="stylesheet" href="/css/owl.carousel.css" type="text/css">
<link href="/css/jquery-jvectormap-1.2.2.css" rel="stylesheet">
<!-- Custom styles -->
<link rel="stylesheet" href="/css/fullcalendar.css">
<link href="/css/widgets.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
<link href="/css/style-responsive.css" rel="stylesheet" />
<link href="/css/xcharts.min.css" rel=" stylesheet">
<link href="/css/jquery-ui-1.10.4.min.css" rel="stylesheet">
<!-- =======================================================
Theme Name: NiceAdmin
Theme URL: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/
Author: BootstrapMade
Author URL: https://bootstrapmade.com
======================================================= -->
</head>
<body>
<section id="container" class="">
#include('layouts.header.header')
#include('layouts.sidebars.sidebar')
<section id="main-content">
<div class="wrapper">
#yield('content')
</div>
</section>
</section>
#yield('script')
<script src="/js/jquery.js"></script>
<script src="/js/jquery-ui-1.10.4.min.js"></script>
<script src="/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.9.2.custom.min.js"></script>
<!-- bootstrap -->
<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>
<!-- charts scripts -->
<script src="/assets/jquery-knob/js/jquery.knob.js"></script>
<script src="/js/jquery.sparkline.js" type="text/javascript"></script>
<script src="/assets/jquery-easy-pie-chart/jquery.easy-pie-chart.js"></script>
<script src="/js/owl.carousel.js" ></script>
<!-- jQuery full calendar -->
<<script src="/js/fullcalendar.min.js"></script> <!-- Full Google Calendar - Calendar -->
<script src="/assets/fullcalendar/fullcalendar/fullcalendar.js"></script>
<!--script for this page only-->
<script src="/js/calendar-custom.js"></script>
<script src="/js/jquery.rateit.min.js"></script>
<!-- custom select -->
<script src="/js/jquery.customSelect.min.js" ></script>
<script src="/assets/chart-master/Chart.js"></script>
<!--custome script for all page-->
<script src="/js/scripts.js"></script>
<!-- custom script for this page-->
<script src="/js/sparkline-chart.js"></script>
<script src="/js/easy-pie-chart.js"></script>
<script src="/js/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/js/jquery-jvectormap-world-mill-en.js"></script>
<script src="/js/xcharts.min.js"></script>
<script src="/js/jquery.autosize.min.js"></script>
<script src="/js/jquery.placeholder.min.js"></script>
<script src="/js/gdp-data.js"></script>
<script src="/js/morris.min.js"></script>
<script src="/js/sparklines.js"></script>
<script src="/js/charts.js"></script>
<script src="/js/jquery.slimscroll.min.js"></script>
</body>
</html>
I have another page that contains the form to add a course and the scripts for the datepicker and the modal
manageCourse.blade.php
#extends('layouts.master')
#section('content')
#include('courses.popup.academic')
<div class="row">
<div class="col-lg-12">
<h3 class="page-header"><i class="fa fa-file-text-o"></i>Courses</h3>
<ol class="breadcrumb">
<li><i class="fa fa-home"></i>Home</li>
<li><i class="icon_document_alt"></i>Course</li>
<li><i class="fa fa-file-text-o"></i>Manage Course</li>
</ol>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<section class="panel panel-default">
<header class="panel-heading">
Manage Course
</header>
<form class="form-horizontal">
<div class="panel-body" style="border-bottom: 1px solid #ccc;">
<div class="form-group">
<div class="col-sm-3">
<label for="academic-year">Academic Year</label>
<div class="input-group">
<select class="form-control" name="academic_id" id="academic_id">
</select>
<div class="input-group-addon" >
<span class="fa fa-plus" id="add-more-academic"></span>
</div>
</div>
</div>
<div class="col-sm-4">
<label for="program">Course</label>
<div class="input-group">
<select class="form-control" name="program_id" id="program_id">
</select>
<div class="input-group-addon">
<span class="fa fa-plus"></span>
</div>
</div>
</div>
<div class="col-sm-5">
<label for="level">Course</label>
<div class="input-group">
<select class="form-control" name="level_id" id="level_id">
</select>
<div class="input-group-addon">
<span class="fa fa-plus"></span>
</div>
</div>
</div>
<div class="col-sm-3">
<label for="shift">Shift</label>
<div class="input-group">
<select class="form-control" name="shift_id" id="shift_id">
</select>
<div class="input-group-addon">
<span class="fa fa-plus"></span>
</div>
</div>
</div>
<div class="col-sm-4">
<label for="time">Time</label>
<div class="input-group">
<select class="form-control" name="time_id" id="time_id">
</select>
<div class="input-group-addon">
<span class="fa fa-plus"></span>
</div>
</div>
</div>
<div class="col-sm-3">
<label for="batch">Batch</label>
<div class="input-group">
<select class="form-control" name="batch_id" id="batch_id">
</select>
<div class="input-group-addon">
<span class="fa fa-plus"></span>
</div>
</div>
</div>
<div class="col-sm-2">
<label for="group">Group</label>
<div class="input-group">
<select class="form-control" name="group_id" id="group_id">
</select>
<div class="input-group-addon">
<span class="fa fa-plus"></span>
</div>
</div>
</div>
<div class="col-sm-3">
<label for="startDate">Start date</label>
<div class="input-group">
<select class="form-control" name="start_date" id="start_date">
</select>
<div class="input-group-addon">
<span class="fa fa-calendar"></span>
</div>
</div>
</div>
<div class="col-sm-4">
<label for="endDate">End date</label>
<div class="input-group">
<select class="form-control" name="end_date" id="end_date">
</select>
<div class="input-group-addon">
<span class="fa fa-calendar"></span>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<button type="submit" class="btn btn-default btn-sm">Create Course</button>
</div>
</form>
</section>
</div>
</div>
#endsection
#section('script')
<script type="text/javascript">
$('#start_date').datepicker({
changeMonth:true,
changeYear:true,
});
$('#add-more-academic').on('click', function(){
$('#academic-year-show').modal();
});
</script>
#endsection
and the page for the modal
<div class="modal fade" id="academic-year-show" tabindex="-1" role="dialog" aria-labelled-by="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Academic year</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<input type="text" name="academic_year" id="new-academic" class="form-control" placeholder="Academic year">
</div>
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
<button class="btn btn-success btn-save-academic" type="button">Save</button>
</div>
</div>
</div>
Nothing seems to work, everytime i get this error: Uncaught ReferenceError: $ is not defined. Can anyone tell me why the datepicker and the modal are not showing?

Your section #yield("script") needs to go after <script src="/js/jquery.js"></script> in master.blade.php. Currently, you're trying to run code that is depending on jQuery being available by extending the master layout and yielding a section to the extending template, but when this yield is happening is prior to jQuery being available.
<script src="/js/jquery.js"></script>
#yield('script')
<script src="/js/jquery-ui-1.10.4.min.js"></script>
...
</body>
or
...
<script src="/js/charts.js"></script>
<script src="/js/jquery.slimscroll.min.js"></script>
#yield('script')
</body>
Generally, whenever I do #yield for js, I do it after all other <script> tags in the master layout, but as long as you know your dependencies have been loaded before they're called, all is well.

ajax not working onclick in shopping cart

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.'/');"

Categories

Resources