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.
Related
I'm working on a class project that required me to code a website that sells something. I'm trying to create the shopping cart so that when I click add to cart it should add the product. However, when I added in a bootstrap link my page becomes white. Is the bootstrap the problem or is it something wrong with my code?
My first time using this site so I'm not sure if this is all I need to post. If any other code is required (like the js) just ask. Thank you in advance.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Printing Prime</title>
<link rel="icon" type="image/png" href="img/favi.png">
<link rel="stylesheet" type="text/css" href="css/home.css">
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/script.js"></script>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto+Condensed:100'>
<link rel="stylesheet" href="css\splitslick\style.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
(problem***)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<section id="" class="container-fluid cart">
<article id="" class="col">
<span class="open-modal">
<i id="carts" class="fa fa-shopping-cart" data-toggle="modal" data-target="#cart"></i>
</span>
</article>
</section>
<section id="" class="container-fluid">
<article id="" class="row">
<div id="mask"></div>
<div class="modal fade" id="cart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Cart</h5>
</div>
<div class="modal-body">
<table class="show-cart table">
</table>
<div>Total price: $<span class="total-cart"></span></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Order now</button>
</div>
</div>
</div>
</div>
</article>
</section>
<section id="" class="container-fluid">
<article id="" class="row">
<div id="" class="col col-md-12">
<nav class="navi">
<ul class="list">
<li>PRODUCTS</li>
<li>REVIEWS</li>
<li style="padding: 10px; margin: 10px;"><img src="img/ppppp.png" id="logo"></li>
<li>CONTACT</li>
<li>ABOUT US</li>
</ul>
</nav>
</div>
</article>
</section>
<section id="" class="container-fluid">
<article id="" class="row">
<div id="" class="col col-md-12">
<div class="split-slideshow">
<div class="slideshow">
<div class="slider">
<div class="item">
<img src="img/banner1.png" />
</div>
<div class="item">
<img src="img/banner2.png" />
</div>
<div class="item">
<img src="https://png.pngtree.com/thumb_back/fw800/background/20190222/ourmid/pngtree-blue-gradient-pattern-overlay-background-banner-image_50591.jpg" />
</div>
<div class="item">
<img src="img/banner4.jpeg" />
</div>
</div>
</div>
<div class="slideshow-text">
<div class="item">PRINTING PRIME</div>
<div class="item">PRODUCTS</div>
<div class="item">THREE</div>
<div class="item">ABOUT US</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js'></script>
<script src="js/splitslick/js/index.js"></script>
</div>
</article>
</section>
<!-- <section id="" class="container-fluid">
<article id="" class="row">
<div id="" class="col col-md-12">
<div class="col-md-6">
</div>
<div clas="col-md-6">
<div class="col-lg-12">
</div>
</article>
</section> -->
<section id="products" class="container-fluid">
<article id="" class="row">
<div id="" class="col col-md-12 product-grid">
<div class="col col-md-4 grid-item">
<div>
<div>
<div>
<img style="height: 30vh; width: 15vw;" src="img/hat1.png" alt="Avatar">
<h5 style="color:white;">Sad Face Cap</h5>
<h5 style="color:white;">$12.99</h5>
<div>
<input type="number" placeholder="# of items">
Add to cart
</div>
</div>
</div>
</div>
</div>
<div class="col col-md-4 grid-item">
<div>
<div>
<div>
<img style="height: 30vh; width: 15vw;" src="img/shirt1.png" alt="Avatar">
<h5 style="color:white;">Signature Tee</h5>
<div>
<input type="number" placeholder="# of items">
<input type="submit" value="Add To Cart" id="submit">
</div>
</div>
</div>
</div>
</div>
<div class=" col col-md-4 grid-item">
<div>
<div>
<div>
<img style="height: 30vh; width: 14vw;" src="img/hoodie1.png" alt="Avatar" >
<h5 style="color:white;">VHS Hoodie</h5>
<div>
<input type="number" placeholder="# of items" >
<input type="submit" value="Add To Cart" id="submit">
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
There appear to be a few problems with the files you link:
You appear to have four different jQuery versions included (3.4.1, 2.1.3, 3.1.0 and slim). You only need one reference to jQuery (making sure it is referenced before Bootstrap). Having multiple references will throw errors.
You also appear to reference Bootstrap twice (once from the CDN at the end of your <head>, and once at the start of your <head> with a local reference). Multiple Bootstrap references will also likely throw errors.
You also appear to be missing a reference to PopperJS, which is a required dependency of Bootstrap 4.
css\splitslick\style.css is referenced with backslashes; you'll want forrward slashes.
Your local script.js and style.css come before Bootstrap's JS and CSS, which means that Bootstrap will overwrite your own code; you'll want your code to be loaded last.
Removing these additional references, and making sure that Bootstrap
comes after jQuery, PopperJS and Tether should fix your problem. Shifting your own JavaScript and CSS to the bottom of each respective section should cause it to override any conflicting Bootstrap code.
Here's a modified <head> that should work. Take note of the following order:
Bootstrap 4 CSS -> Plugins -> Fonts -> Custom CSS
jQuery -> PopperJS -> Tether -> Bootstrap 4 JS -> Custom JS
<head>
<meta charset="utf-8">
<title>Printing Prime</title>
<link rel="icon" type="image/png" href="img/favi.png">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css'>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans&display=swap" rel="stylesheet">
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto+Condensed:100'>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/splitslick/style.css">
<link rel="stylesheet" type="text/css" href="css/home.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</head>
I want to use color picker in my form and i have tried below code in my project but its not working. Anything wrong with the code?,
In view blade,
#extends('layouts.blank')
#push('stylesheets')
<link href="https://maxcdn.bootstrapcdn.com/bootstrap
/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
colorpicker/2.5.1/css/bootstrap-colorpicker.min.css" rel="stylesheet">
#endpush
#section('main_container')
<div class="main-content">
<!-- page content -->
<div id="page-wrapper">
<div class="tab-pane active" id="horizontal-form">
<h3 class="blank1">Vehicle Details</h3>
{!! Form::open(array('class' => 'form-horizontal','route' =>
'vehicles.store','method'=>'POST')) !!}
<script type="text/javascript">
$('.colorpicker').colorpicker();
</script>
<div class="row">
<div id="cp2" class="input-group colorpicker colorpicker-component">
<input type="text" value="#00AABB" class="form-control" />
<span class="input-group-addon"><i></i></span>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-6">
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
{{ Form::close() }}
</div>
</div>
</div>
</div>
#endsection
#pushonce('custom-scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">
</script>
#endpushonce
I got an empty text box not showing the color.Is there any problem with including css or js files.
How can I solve this ?Can anyone help?
I have used the scripts through #yield scripts then it worked.
You can try this it's worked fine!
<html lang="en">
<head>
<title>Bootstrap Color Picker Plugin Example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.6/css/bootstrap-colorpicker.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.6/js/bootstrap-colorpicker.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Color Picker Plugin Example</h1>
<div id="cp2" class="input-group colorpicker-component">
<input type="text" value="#00AABB" class="form-control" />
<span class="input-group-addon"><i></i></span>
</div>
</div>
<script type="text/javascript">
$('#cp2').colorpicker();
</script>
</body>
</html>
Make like this
<div class="main-content">
<!-- page content -->
<div id="page-wrapper">
<div class="tab-pane active" id="horizontal-form">
<h3 class="blank1">Vehicle Details</h3>
{!! Form::open(array('class' => 'form-horizontal','route' =>
'vehicles.store','method'=>'POST')) !!}
<script type="text/javascript">
$('#cp2').colorpicker();
</script>
<div class="row">
<div id="cp2" class="input-group colorpicker-component">
<input type="text" value="#00AABB" class="colorpicker form-control" />
<span class="input-group-addon"><i></i></span>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-6">
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
{{ Form::close() }}
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script>
Here is My Master Page Code. None of the buttons on any page inherited from this master is firing. I have no idea what could be stopping it. It's been killing my brains for 3 days. Help, Please? Tried creating new onClick methods etc. Buttons just wont fire. Something somewhere is stopping the button Fire and I;m not sure what it is
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="master.Master.cs" Inherits="ABSA.Site1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ABSA Property | Home</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Plottage Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1); }
</script>
<!-- //for-mobile-apps -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- js -->
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<!-- //js -->
<link href='//fonts.googleapis.com/css?family=Quicksand:400,300,700' rel='stylesheet' type='text/css'/>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'/>
<!-- start-smoth-scrolling -->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
<!-- start-smoth-scrolling -->
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<script src="js2/jquery.leanModal.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" href="css2/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Different Multiple Form Widget template Responsive, Login form web template,Flat Pricing tables,Flat Drop downs Sign up Web Templates, Flat Web Templates, Login sign up Responsive web template, SmartPhone Compatible web template, free web designs for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Custom Theme files -->
<link href="css3/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- //Custom Theme files -->
<!-- font-awesome icons -->
<link href="css3/font-awesome.css" rel="stylesheet"/>
<!-- //font-awesome icons -->
<!-- web font -->
<link href="//fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet"/>
<!-- //web font -->
</head>
<body>
<form id="form1" runat="server">
<!-- header -->
<div class="header">
<div class="header-top">
<div class="container">
<div class="header-top-left">
<ul>
<li><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>+270000000</li>
<li><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>property#absa.co.za</li>
</ul>
</div>
<div class="header-top-left1">
<ul class="social-icons">
<li></li>
<li></li>
</ul>
</div>
<div class="header-top-right">
<div class="search">
<input class="search_box" type="checkbox" id="search_box"/>
<label class="icon-search" for="search_box"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></label>
<div class="search_form">
<form action="#" method="post">
<input type="text" name="Search" placeholder="Search..."/>
<input type="submit" value=" "/>
</form>
</div>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="header-bottom">
<div class="container">
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo">
<h1><a class="navbar-brand" href="Home.aspx">ABSA<span>Real Estate</span></a></h1>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
<nav>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Absa Help Us Sell</li>
<li>Absa Properties</li>
<li>FAQ's</li>
<li><a id="modal_trigger" href="#modal" class="hvr-bounce-to-bottom modal_close2">Login</a></li>
</ul>
</nav>
</div>
<!-- /.navbar-collapse -->
</nav>
</div>
<section id="SigninModal" class="popupBody" >
<div class="top-grids-left">
<div class="signin-form-grid">
<div id="modal" class="signin-form main-agile popupContainer" style="display:none;">
<p style="text-align:right;"><span class="modal_close"><i class="fa fa-times "></i></span></p>
<h2>SIGN IN</h2>
<form id="signin" action="#" method="post">
<input type="text" name="Email" placeholder="Email" required="" runat="server"/>
<input type="password" name="Password" placeholder="Password" required="" runat="server"/>
<input type="checkbox" id="brand" value="" runat="server"/>
<label for="brand" runat="server"><span></span> Remember me ?</label>
<asp:Button ID="btnLogin" type="submit" runat="server" Text="SIGN IN"/>
<div class="signin-agileits-bottom">
<p>Forgot Password ?</p>
<p><a class="modal_close" id="modal_trigger2" href="#modal2" runat="server">Register </a></p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- //main -->
</section>
<section class="popupBody">
<div class="top-grids-left">
<div class="signin-form-grid">
<div id="modal2" class="signin-form main-agile popupContainer" style="display:none;">
<p style="text-align:right;"><span class="modal_close2"><i class="fa fa-times "></i></span></p>
<h3>REGISTER</h3>
<form id="register">
<input type="text" name="FirstName" placeholder="First Name" required="" runat="server"/>
<input type="text" name="LastName" placeholder="Last Name" required="" runat="server"/>
<input type="text" name="Contact" placeholder="Contact Number" required="" runat="server"/>
<input type="email" name="Email" placeholder="Your Email" required="" runat="server"/>
<input type="password" name="Password" placeholder="Password" required="" />
<input type="checkbox" id="brand1" value="" runat="server"/>
<label for="brand1"><span></span>I accept the terms of use</label>
<asp:Button ID="btnRegister" runat="server" Text="REGISTER" OnClick="btnRegister_Click"/>
</form>
</div>
</div>
</div>
<!-- //main -->
</section>
<script type="text/javascript">
$("#modal_trigger").leanModal({ top: 200, overlay: 0.6, closeButton: ".modal_close" });
$("#modal_trigger2").leanModal({ top: 200, overlay: 0.6, closeButton: ".modal_close2" });
$(function(){
// Calling Login Form
$("#login_form").click(function(){
$(".social_login").hide();
$(".user_login").show();
return false;
});
// Calling Register Form
$("#modal_trigger2").click(function () {
$(".social_login").hide();
$(".user_register").show();
$(".header_title").text('Register');
return false;
});
// Going back to Social Forms
$(".back_btn").click(function(){
$(".user_login").hide();
$(".user_register").hide();
$(".social_login").show();
$(".header_title").text('Login');
return false;
});
})
</script>
<!-- //header -->
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<!-- footer -->
<div class="footer">
<div class="container">
<div class="footer-grids">
<div class="col-md-2 footer-grid" style="font-size:12px">
<ul>
<li>Contact Us</li>
<li>Security Estates</li>
<li>About Us</li>
<li>Privacy Policy</li>
<li>Terms and Conditions</li>
<li>Site Map</li>
<li>Property for Sale By Suburb</li>
</ul>
</div>
<div class="col-md-3 footer-grid">
<div class="footer-grid1">
<div class="footer-grid1-left">
<img src="images/7.jpg" alt=" " class="img-responsive"/>
</div>
<div class="footer-grid1-right">
Property 1
<div class="m1">
<span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>
</div>
</div>
<div class="clearfix"> </div>
</div>
<div class="footer-grid1">
<div class="footer-grid1-left">
<img src="images/6.jpg" alt=" " class="img-responsive"/>
</div>
<div class="footer-grid1-right">
Property 2
<div class="m1">
<span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>
</div>
</div>
<div class="clearfix"> </div>
</div>
<div class="footer-grid1">
<div class="footer-grid1-left">
<img src="images/8.jpg" alt=" " class="img-responsive"/>
</div>
<div class="footer-grid1-right">
Property 3
<div class="m1">
<span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
<div class="col-md-3 footer-grid">
<div class="footer-grid-instagram">
<img src="images/9.jpg" alt=" " class="img-responsive" />
</div>
<div class="footer-grid-instagram">
<img src="images/10.jpg" alt=" " class="img-responsive" />
</div>
<div class="footer-grid-instagram">
<img src="images/6.jpg" alt=" " class="img-responsive" />
</div>
<div class="footer-grid-instagram">
<img src="images/7.jpg" alt=" " class="img-responsive" />
</div>
<div class="clearfix"> </div>
</div>
<div class="col-md-4 footer-grid">
<p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Johannesburg, South Africa</p>
<p><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> property#absa.co.za</p>
<p><span class="glyphicon glyphicon-earphone" aria-hidden="true"></span>+27000000</p>
</div>
</div>
<div class="clearfix"> </div>
<div class="footer-copy">
<p>© 2016 ABSA Ltd. All rights reserved</p>
</div>
</div>
</div>
<!-- //footer -->
<!-- for bootstrap working -->
<script src="js/bootstrap.js"></script>
<!-- //for bootstrap working -->
<!-- here stars scrolling icon -->
<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<!-- //here ends scrolling icon -->
</form>
</body>
</html>
I've Deleted Validation from the scripts but still nothing
First, you have to put some more info...It impossible to know what is really happening only by see some jquery and dependencies..
Second, (in chrome) right click on the element, click on "inspect", go to "Event Listeners" and click on "click".
You will see which are the event listeners of the buttons, and you will be able to investigate what is going on.
Add method="post" attribute to the first form tag and try again;
I mean;
<form id="form1" runat="server" method="post">
I have some problems with my modal which doesn't show up even though I set data-target and data toggle attributes to my button. The screen is faded like it is when the modal is open...
This is the button that triggers the modal:
<a id="createCampaignBtn" data-target="#createCampaignModal" data-toggle="modal"
class="removeRight removeLeft buttonsA">
<div class="buttons removeRight centerTextOutHoriz">
<span class="centerTextInner buttonRight">Start a new Campaign</span>
</div>
</a>
The modal:
<div class="modal">
<div id="createCampaignModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content modalLook">
<div class="modal-header divTitlesModal">
<div class="col-xs-7 removeLeft">Start a new campaign</div>
<button type="button" class="close col-xs-1 removeRight removeLeft " data-dismiss="modal"
aria-label="Close"><span
aria-hidden="true">×</span></button>
<div class="hidden" id="actionType"></div>
</div>
<div class="modal-body">
<form id="createCampaignForm" class="form-horizontal">
<div class="form-group ">
<label class=" col-sm-12 col-md-12 requiredField pull-label-left"
for="campaignTitle">Campaign Title</label>
<div class="col-sm-12 col-md-12 inputContainer">
<input class="form-control" id="campaignTitle" name="title"
placeholder="" type="text" maxlength="100" required="" autofocus=""/>
</div>
</div>
<div class="form-group ">
<label class=" col-sm-12 col-md-12 requiredField pull-label-left"
for="campaignStartDate">Start Date</label>
<div class="col-sm-12 col-md-12 inputContainer">
<input class="form-control" id="campaignStartDate" name="startDate"
placeholder="MM/DD/YYYY" type="text" required=""/>
</div>
</div>
<div class="form-group ">
<label class=" col-sm-12 col-md-12 requiredField pull-label-left"
for="campaignEndDate">End Date</label>
<div class="col-sm-12 col-md-12 inputContainer">
<input class="form-control" id="campaignEndDate" name="endDate"
placeholder="MM/DD/YYYY" type="text" required=""/>
</div>
</div>
<div class="form-group ">
<label class=" col-sm-12 col-md-12 requiredField pull-label-left"
for="campaignTypes">Type</label>
<div class="col-sm-12 col-md-12 inputContainer">
<select class="select form-control" id="campaignTypes" name="typeId">
</select>
</div>
</div>
<div class="form-group">
<label class=" col-sm-12 col-md-12 requiredField pull-label-left"
for="campaignDescription">Description</label>
<div class="col-sm-12 col-md-12">
<textarea class="form-control" id="campaignDescription" name="description"
placeholder="" required="" form="createCampaignForm"></textarea>
</div>
</div>
<div class="modal-footer">
<div class="row">
<div class="form-group submitFormGroup">
<button type="button" class="btn btn-default cancel modalButton"
data-dismiss="modal">
Cancel
</button>
<button class="btn btn-primary modalButton modalSubmit"
value="Submit"
type="submit">Submit
</button>
</div>
</div>
<div class="col-xs-5">
<div id="holidayAlert" class="errorMessage"></div>
</div>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
And this is what I've included for this page:
CSS:
<head>
<meta charset="UTF-8">
<title>Holiday System</title>
<link rel="stylesheet" href="../commons/css/bootstrap.min.css"/>
<link rel="stylesheet" href="../commons/css/bootstrap-datepicker3.css"/>
<link rel="stylesheet" href="../commons/css/jquery.minicolors.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../commons/css/navbar.css"/>
<link rel="stylesheet" type="text/css" href="../commons/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../commons/css/simple-sidebar.css">
<link href="../commons/css/style.css" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="../commons/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" href="../commons/favicon/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="../commons/favicon/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="../commons/favicon/manifest.json">
<link rel="mask-icon" href="../commons/favicon/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="../commons/favicon/favicon.ico">
<meta name="msapplication-config" content="/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="css/home.css">
</head>
And the js files:
<!--Include jQuery-->
<script type="text/javascript" src="../commons/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../commons/js/jquery.serializeObject.min.js"></script>
<script type="text/javascript" src="../commons/js/jquery-ui.js"></script>
<script src="../commons/js/sidebar_menu.js"></script>
<!--Include Date Range Picker-->
<script type="text/javascript" src="../commons/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="../commons/css/bootstrap-datepicker3.css"/>
<script type="text/javascript" src="../commons/js/jquery.autocomplete.min.js"></script>
<!--Include js created for this page-->
<script type="text/javascript" src="../commons/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/homepage.js"></script>
<script type="text/javascript" src="../commons/js/navbar.js"></script>
<script type="text/javascript" src="../commons/js/jquery.minicolors.min.js"></script>
<script type="text/javascript" src="../commons/js/notify.js"></script>
<script src="../commons/js/sidebar_menu.js"></script>
<script type="text/javascript" src="../commons/js/searchBar.js"></script>
<script type="text/javascript" src="../commons/js/jquery.tablesorter.min.js"></script>
I tried to force the modal to show up with this js code, but it works only one time and after I close it, it doesn't work anymore.
$('#createCampaignBtn').click(function () {
$("#createCampaignModal").css('display', 'block');
});
You need to remove the wrapper div on the modal:
<div class="modal"></div>
The wrapper prevents the modal from showing up.
To show the modal programatically you can use bootstrap's modal('show') function.
$('#createCampaignBtn').click(function () {
$("#createCampaignModal").modal('show'); // initializes and invokes show immediately
});
You can even omit the show parameter, which is the default action.
Try this
Jsfiddle
$('#createCampaignBtn').click(function () {
$("#createCampaignModal").modal("show");
});
And remove
<div class="modal"></div>
i'v been running in trouble, with my Bootstrap contact form. It seems to be important at which time the javascript files are loaded.
Depending on the placement some things doesn't work correctly:
If so:
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
my contact form will don't work. Click on "SUBMIT"-Button and nothing happens. But the collapse menu button of bootstrap works fine.
If loading order is like this:
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
the contact form (especially the subimt button) works as expected. But the collapse
bootstrap menu button don't work fine. It is unclickable.
I tried everything but I don't know the reason for that behavior.
Do you have an idea, how to make both things work each other?
Here come's my full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Contact Form</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="navbar navbar-fixed-top" data-activeslide="1">
<div class="container">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav row">
<li data-slide="1" class="col-12 col-sm-2"><a id="menu-link-1" href="#slide-1"> <span class="text">MENU 1</span></a></li>
<li data-slide="2" class="col-12 col-sm-2"><a id="menu-link-2" href="#slide-2"> <span class="text">MENU 2</span></a></li>
</ul>
<div class="row">
<div class="col-sm-2 active-menu"></div>
</div>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
<div class="slide story" id="slide-1" data-slide="1">
<div class="container">
<div class="row">
<div class="col-12">
<p>TEST</p>
</div>
</div>
</div><!-- /container -->
</div>
<div class="slide story" id="slide-2" data-slide="2">
<div class="container">
<div class="row">
<div class="col-12">
<div class="well">
<form id="contact-form" class="form">
<fieldset>
<legend>Contact Form</legend>
<div class="form-group">
<label for="name" class="control-label">Name</label>
<input type="text" class="form-control" id="name" name="name1" placeholder="name"/>
</div>
<div class="form-group">
<label for="name" class="control-label">E-Mail</label>
<input type="text" class="form-control" id="email" name="email" placeholder="email"/>
</div>
<div class="form-group">
<label for="name" class="control-label">Phone</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="phone"/>
</div>
<div class="form-group">
<label for="name" class="control-label">message</label>
<textarea type="text" id="message" class="form-control" name="message" rows="10" cols="40" placeholder="Message"></textarea>
</div>
<div class="form-group">
<button value="Send" class="btn btn-primary" type="submit" id="submit" name="submit">Send</button>
<button type="reset" class="btn">Clear</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div><!-- /container -->
</div>
<!-- Java-Scripts -->
<script src="js/html5shiv.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/script.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="js/val55.js"></script>
</body>
</html>
This is what the val55.js-File looks like:
$(document).ready(function() {
$("#contact-form").validate({
rules: {
name1:{
minlength: 3,
maxlength: 20,
required: true
},
email:{
minlength: 3,
required: true,
email: true
},
phone:{
minlength: 3,
required: true
},
message: {
minlength: 10,
required: true
}
},
highlight: function(element) {
$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error').addClass('has-success');
},
submitHandler: function(form) {
//form.submit();
alert('Hallo');
}
})
}); // end document.ready
Regards,
John
Do this:
<script src="js/html5shiv.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="js/script.js"></script>
<script src="js/val55.js"></script>
You might need to switch between the last to scripts and everything should work fine provided you don't have any errors in your javascript.