I'm working on a webpage based on a template downloaded from the internet. This page contains several includes and I do not know enough to change.
My problem is that I am implementing a Flot chart and the error "Uncaught TypeError: $.plot is not a function" always occour.
I've implemented the same chart on a sample page and it works with four includes: jquery-2.2.3.min.js, /jquery.flot.min.js, jquery.flot.time.js, and utilitarios.js (my authorship )
I'm think that the problem may be in some include that is in the template and is in some type of conflict.
Line of erro:
$.plot("#line-chart", [line_data1, line_data2],
My Html source page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Painel Predial</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/dist/css/AdminLTE.min.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/dist/css/skins/_all-skins.min.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/iCheck/flat/blue.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/morris/morris.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/datepicker/datepicker3.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/daterangepicker/daterangepicker.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/iCheck/all.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/colorpicker/bootstrap-colorpicker.min.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/timepicker/bootstrap-timepicker.min.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<header class="main-header">
<!-- some informations -->
</header>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<style>
.esconde{
display:none;
}
</style>
<!-- Content Header (Page header) -->
<section class="content-header">
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Home</li>
<li class="active">Dashboard</li>
</ol>
</section>
<section class="content">
<!-- Área do form -->
<form id="formDashboard">
<div class="row esconde" id="boxForm">
<div class="col-md-10">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Informe os critérios para geração do gráfico</h3>
</div>
<div class="box-body">
<!--Seleção de unidades -->
<div class="row">
<div class="col-xs-4">
<div class="form-group">
<label>Informe a macrolocalidade</label>
<select id="macroLocalidadeSelect" class="form-control">
<option value=" ">Selecione...</option>
</select>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label>Informe a localidade</label>
<select id="localidadeSelect" class="form-control">
<option value=" ">Selecione...</option>
</select>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label>Informe a unidade</label>
<select id="unidadeSelect" class="form-control">
<option value=" ">Selecione...</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="form-group">
<label>Informe o período desejado</label>
<select id="periodo" class="form-control">
<option value="0">Registro Diário</option>
<option value="1">Media por Hora</option>
<option value="7">7 dias</option>
<option value="15">15 dias</option>
<option value="30">30 dias</option>
<option value="45">45 dias</option>
<option value="60">60 dias</option>
</select>
</div>
</div>
<div class="col-xs-4" id='boxDataDia'>
<div class="form-group">
<label>Informe a data que deseja consultar</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right" id="diaPesquisa" name="data_hora_inicio">
</div>
</div>
</div>
<!--
<div class="col-xs-5">
<div class="form-group">
<label>Date:</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right" id="datepicker2" name="data_hora_fim">
</div>
</div>
</div> -->
</div>
</div>
<div class="box-footer">
<input type="hidden" value="5a5D0Rl5Vl57U4pesspDGe0lIhzTsXwNflDzidMb" name="_token">
<input type="button" onclick='processar()' class="btn btn-primary active" value="Gerar Relatório" />
<input type="reset" class="btn btn-default" value="Limpar" />
</div>
</div>
</div>
</div>
</form>
<!-- Área do Gráfico -->
<div class="row">
<div class="col-md-8">
<!-- Área de mensagem de erro -->
<div class="box box-danger box-solid esconde" id="boxError">
<div class="box-header with-border">
<h3 class="box-title">Erro</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
<!-- /.box-tools -->
</div>
<!-- /.box-header -->
<div class="box-body" id="boxErrorMessage">
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
<!--Área de mensagem -->
<div class="box box-primary box-solid esconde" id="boxAguarde">
<div class="box-header">
<h3 class="box-title">Carregando....</h3>
</div>
<div class="box-body">
Aguarde enquanto o gráfico é gerado
</div>
<!-- /.box-body -->
<!-- Loading (remove the following to stop the loading)-->
<div class="overlay">
<i class="fa fa-refresh fa-spin"></i>
</div>
<!-- end loading -->
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 text-center esconde" id="boxPainelSituacaoAtualHidrico">
<div class="box box-primary esconde" id="boxGraficoAtualHidricoSensor1">
<input type="text" class="knob" value="30" data-width="90" data-height="90" id="inputKnobHidricoSensor1" data-readOnly="true">
<div class="knob-label" id="labelSituacaoAtualHidricoSensor1"></div>
<div class="box box-primary bg-aqua-active color-palette">
<div id="mediaRegistradaHidricoSensor1"></div>
</div>
</div>
<div class="box box-primary esconde" id="boxGraficoAtualHidricoSensor2">
<input type="text" class="knob" value="30" data-width="90" data-height="90" id="inputKnobHidricoSensor2" data-readOnly="true">
<div class="knob-label" id="labelSituacaoAtualHidricoaSensor2"></div>
<div class="box box-primary bg-aqua-active color-palette">
<div id="mediaRegistradaHidricoSensor2"></div>
</div>
</div>
</div>
<div class="col-md-8">
<!-- AREA CHART -->
<div class="box box-primary esconde" id="boxGraficoHidrico">
<div class="box-header with-border">
<i class="fa fa-bar-chart-o"></i>
<h3 class="box-title">Histórico de Nivel de Reservatórios</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<div class="chart" id="areaChartContainer">
<canvas id="areaChart" style="height:310px"></canvas>
</div>
</div>
<!-- /.box-body -->
</div>
</div>
</div>
<!-- Gráficos de temperatura -->
<div class="row">
<div class="col-md-2 text-center" id="boxPainelSituacaoAtualTemperatura">
<div class="box box-danger esconde" id="boxGraficoAtualTemperaturaSensor1">
<input type="text" class="knob" value="30" data-width="90" data-height="90" id="inputKnobTemperaturaSensor1" data-readOnly="true">
<div class="knob-label" id="labelSituacaoAtualTemperaturaSensor1"></div>
<div class="box box-danger bg-red color-palette">
<div id="mediaRegistradaTemperaturaSensor1"></div>
</div>
</div>
<div class="box box-danger esconde" id="boxGraficoAtualTemperaturaSensor2">
<input type="text" class="knob" value="30" data-width="90" data-height="90" id="inputKnobTemperaturaSensor2" data-readOnly="true">
<div class="knob-label" id="labelSituacaoAtualTemperaturaSensor2"></div>
<div class="box box-danger bg-red color-palette">
<div id="mediaRegistradaTemperaturaSensor2"></div>
</div>
</div>
</div>
<div class="col-md-8">
<!-- FLOT CHART -->
<div class="box box-danger esconde" id="boxGraficoTemperatura">
<div class="box-header with-border">
<i class="fa fa-bar-chart-o"></i>
<h3 class="box-title">Histórico de Temperatura das Bombas</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<div id="line-chart" style="height: 300px;"></div>
</div>
<!-- /.box-body-->
</div>
</div>
</div>
<div id="saida"></div>
</section>
<!-- jQuery 2.2.3 -->
<script src="http://localhost/sistema/public/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- ChartJS 1.0.1 Hídrico-->
<script src="http://localhost/sistema/public/plugins/chartjs/Chart.min.js"></script>
<!-- date-range-picker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="http://localhost/sistema/public/plugins/daterangepicker/daterangepicker.js"></script>
<!-- Flot graph (Temperatura) -->
<script src="http://localhost/sistema/public/plugins/flot/jquery.flot.min.js"></script>
<script src="http://localhost/sistema/public/plugins/flot/jquery.flot.time.js"></script>
<!-- Utilitários -->
<script src="http://localhost/sistema/public/js/utilitarios.js"></script>
<script src="http://localhost/sistema/public/js/graph/graficos.js"></script>
<script>
/**
Load da Página
*/
$(function () {
$('#diaPesquisa').datepicker({
dateFormat: "dd/mm/yyyy" ,
language: "pt-BR",
autoclose:true
});
$.get('/sistema/public/dashload', function(dataLoad){
var hasError = showLoadError(dataLoad);
if(!hasError)
showFormOptions(dataLoad);
});
});
</script>
<!-- page script -->
</div>
<!-- /.content-wrapper -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Versão</b> 1.0.4
</div>
<strong>Copyright © 2017 <a href="http://www.sensoragroup.com.br" target='_blank'>Sensora Group</a>.</strong> Todos os direitos reservados
</footer>
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Create the tabs -->
<ul class="nav nav-tabs nav-justified control-sidebar-tabs">
<li><i class="fa fa-home"></i></li>
<li><i class="fa fa-gears"></i></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<!-- Home tab content -->
<div class="tab-pane" id="control-sidebar-home-tab">
<h3 class="control-sidebar-heading">Recent Activity</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-birthday-cake bg-red"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Langdon's Birthday</h4>
<p>Will be 23 on April 24th</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-user bg-yellow"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>
<p>New phone +1(800)555-1234</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-envelope-o bg-light-blue"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>
<p>nora#example.com</p>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<i class="menu-icon fa fa-file-code-o bg-green"></i>
<div class="menu-info">
<h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>
<p>Execution time 5 seconds</p>
</div>
</a>
</li>
</ul>
<!-- /.control-sidebar-menu -->
<h3 class="control-sidebar-heading">Tasks Progress</h3>
<ul class="control-sidebar-menu">
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Custom Template Design
<span class="label label-danger pull-right">70%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-danger" style="width: 70%"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Update Resume
<span class="label label-success pull-right">95%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-success" style="width: 95%"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Laravel Integration
<span class="label label-warning pull-right">50%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-warning" style="width: 50%"></div>
</div>
</a>
</li>
<li>
<a href="javascript:void(0)">
<h4 class="control-sidebar-subheading">
Back End Framework
<span class="label label-primary pull-right">68%</span>
</h4>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-primary" style="width: 68%"></div>
</div>
</a>
</li>
</ul>
<!-- /.control-sidebar-menu -->
</div>
<!-- /.tab-pane -->
<!-- Stats tab content -->
<div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
<!-- /.tab-pane -->
<!-- Settings tab content -->
<div class="tab-pane" id="control-sidebar-settings-tab">
<form method="post">
<h3 class="control-sidebar-heading">General Settings</h3>
<div class="form-group">
<label class="control-sidebar-subheading">
Report panel usage
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Some information about this general settings option
</p>
</div>
<!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Allow mail redirect
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Other sets of options are available
</p>
</div>
<!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Expose author name in posts
<input type="checkbox" class="pull-right" checked>
</label>
<p>
Allow the user to show his name in blog posts
</p>
</div>
<!-- /.form-group -->
<h3 class="control-sidebar-heading">Chat Settings</h3>
<div class="form-group">
<label class="control-sidebar-subheading">
Show me as online
<input type="checkbox" class="pull-right" checked>
</label>
</div>
<!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Turn off notifications
<input type="checkbox" class="pull-right">
</label>
</div>
<!-- /.form-group -->
<div class="form-group">
<label class="control-sidebar-subheading">
Delete chat history
<i class="fa fa-trash-o"></i>
</label>
</div>
<!-- /.form-group -->
</form>
</div>
<!-- /.tab-pane -->
</div>
</aside>
<!-- /.control-sidebar -->
<!-- Add the sidebar's background. This div must be placed
immediately after the control sidebar -->
<div class="control-sidebar-bg"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="http://localhost/sistema/public/js/dropdown.js"></script>
<!-- jQuery 2.2.3
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script> -->
<script src="http://localhost/sistema/public/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.6
<script src="bootstrap/js/bootstrap.min.js"></script> -->
<script src="http://localhost/sistema/public/bootstrap/js/bootstrap.min.js"></script>
<!-- Morris.js charts -->
<!-- <script src="plugins/morris/morris.min.js"></script> -->
<script src="http://localhost/sistema/public/plugins/morris/morris.min.js"></script>
<!-- Sparkline
<script src="plugins/sparkline/jquery.sparkline.min.js"></script> -->
<script src="http://localhost/sistema/public/plugins/sparkline/jquery.sparkline.min.js"></script>
<!-- jvectormap
<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>-->
<script src="http://localhost/sistema/public/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<!-- <script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script> -->
<script src="http://localhost/sistema/public/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart
<script src="plugins/knob/jquery.knob.js"></script> -->
<script src="http://localhost/sistema/public/plugins/knob/jquery.knob.js"></script>
<!-- daterangepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<!-- <script src="plugins/daterangepicker/daterangepicker.js"></script> -->
<script src="http://localhost/sistema/public/plugins/daterangepicker/daterangepicker.js"></script>
<!-- datepicker
<script src="plugins/datepicker/bootstrap-datepicker.js"></script> -->
<script src="http://localhost/sistema/public/plugins/datepicker/bootstrap-datepicker.js"></script>
<!-- bootstrap datepicker -->
<!-- Bootstrap WYSIHTML5
<script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script> -->
<script src="http://localhost/sistema/public/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script> -->
<script src="http://localhost/sistema/public/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick
<script src="plugins/fastclick/fastclick.js"></script> -->
<script src="http://localhost/sistema/public/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App
<script src="dist/js/app.min.js"></script> -->
<script src="http://localhost/sistema/public/dist/js/app.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes)
<script src="dist/js/pages/dashboard.js"></script> -->
<script src="http://localhost/sistema/public/dist/js/pages/dashboard.js"></script>
<!-- AdminLTE for demo purposes
<script src="dist/js/demo.js"></script> -->
<script src="http://localhost/sistema/public/dist/js/demo.js"></script>
<!-- <script src="http://localhost/sistema/public/js/app.js"></script>
-->
<script>
$(function () {
//Initialize Select2 Elements
$(".select2").select2();
//Datemask dd/mm/yyyy
$("#datemask").inputmask("dd/mm/yyyy", {"placeholder": "dd/mm/yyyy"});
//Datemask2 mm/dd/yyyy
$("#datemask2").inputmask("mm/dd/yyyy", {"placeholder": "mm/dd/yyyy"});
//Money Euro
$("[data-mask]").inputmask();
//Date range picker
$('#reservation').daterangepicker();
//Date range picker with time picker
$('#reservationtime').daterangepicker({timePicker: true, timePickerIncrement: 30, format: 'MM/DD/YYYY h:mm A'});
//Date range as a button
$('#daterange-btn').daterangepicker(
{
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
startDate: moment().subtract(29, 'days'),
endDate: moment()
},
function (start, end) {
$('#daterange-btn span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
);
//Date picker
$('#datepicker').datepicker({
autoclose: true
});
//iCheck for checkbox and radio inputs
$('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
checkboxClass: 'icheckbox_minimal-blue',
radioClass: 'iradio_minimal-blue'
});
//Red color scheme for iCheck
$('input[type="checkbox"].minimal-red, input[type="radio"].minimal-red').iCheck({
checkboxClass: 'icheckbox_minimal-red',
radioClass: 'iradio_minimal-red'
});
//Flat red color scheme for iCheck
$('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
checkboxClass: 'icheckbox_flat-green',
radioClass: 'iradio_flat-green'
});
//Colorpicker
$(".my-colorpicker1").colorpicker();
//color picker with addon
$(".my-colorpicker2").colorpicker();
//Timepicker
$(".timepicker").timepicker({
showInputs: false
});
});
</script>
</body>
</html>
In your HTML output you've got jQuery sourced three times on that page. First time it's sourced right before you source Flot.
<!-- jQuery 2.2.3 -->
<script src="http://localhost/sistema/public/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- ChartJS 1.0.1 Hídrico-->
<script src="http://localhost/sistema/public/plugins/chartjs/Chart.min.js"></script>
<!-- date-range-picker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="http://localhost/sistema/public/plugins/daterangepicker/daterangepicker.js"></script>
<!-- Flot graph (Temperatura) -->
<script src="http://localhost/sistema/public/plugins/flot/jquery.flot.min.js"></script>
<script src="http://localhost/sistema/public/plugins/flot/jquery.flot.time.js"></script>
Then later down the page you source it again here:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="http://localhost/sistema/public/js/dropdown.js"></script>
Then almost immediately after you do it again here:
<!-- jQuery 2.2.3
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script> -->
<script src="http://localhost/sistema/public/plugins/jQuery/jquery-2.2.3.min.js"></script>
Aside from loading jQuery too many times, the issue you're seeing is the first jQuery is loaded and then you source Flot which binds to that instance of jQuery. Once the next sourced instance of jQuery happens that association disappears.
Take time to assure you're sourcing jQuery once at the beginning of your sourced scripts and then source everything that depends on jQuery.
Related
I'm trying to add a date time picker to an input in a modal, but for some reason, I can't, when I make click in the input it doesn't display, I don't have an idea why but I need it for a better UX/UI in the modal, something that I try was change the id to the divs but it didn't work.
I'm leaving my code.
Modal
<!-- Modal newevent-->
<div class="container">
<div class="modal fade " id="newevent">
<div class="modal-dialog modal-lg mw-80 ">
<div class="modal-content border-0 rounded">
<div class="modal-body mr-4 ml-4 pr-2 pl-2">
<form action="./plugins/login/php/completedetails" class="" method="POST">
<div class="form-group ">
<input maxlength="30" class="form-control-plaintext" type="text" name="name" placeholder="Nueva Tarea" id="name" />
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-4 col-form-label"><i class="fas fa-user mr-3 text-primary"></i>Responsable</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputPassword">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-4 col-form-label"><i class="fas fa-stream mr-3 text-primary"></i>Estado</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputPassword">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label"><i class="fas fa-calendar-day mr-3 text-primary"></i>Fecha de entrega</label>
<div class="col-sm-8 input-group">
<input type="text" id="datetimepicker-default" class="form-control">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-4 col-form-label"><i class="fas fa-stopwatch mr-3 text-primary"></i>Tiempo estimado</label>
<div class="input-group mb-3 col-sm-8">
<input type="number" class="form-control" aria-label="Amount (to the nearest dollar)">
<div class="input-group-append">
<span class="input-group-text">h</span>
</div>
</div>
</div>
</div>
<div class="form-group col-md-12">
<label for="inputPassword4">Descripción</label>
<textarea class="form-control" rows="5" id="comment" placeholder="Añade detalles"></textarea>
</div>
</div>
</form>
</div>
</div>
</div>
Scripts and stylesheets
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<!-- ELemeentos añadidos para el datepicker -->
<!-- jquery JS -->
<script
type="text/javascript"
src="https://code.jquery.com/jquery-3.3.1.min.js"
></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<!-- Bootstrap js -->
<script
type="text/javascript"
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
></script>
<!-- Propeller textfield js -->
<script type="text/javascript" src="dist/js/propeller.min.js"></script>
<!-- Datepicker moment with locales -->
<script
type="text/javascript"
language="javascript"
src="datetimepicker/js/moment-with-locales.js"
></script>
<!-- Propeller Bootstrap datetimepicker -->
<script
type="text/javascript"
language="javascript"
src="datetimepicker/js/bootstrap-datetimepicker.js"
></script>
<script>
// Default date and time picker
$("#datetimepicker-default").datetimepicker();
</script>
I think datetimepicker init success before html render
check state html create after script
try $(document).ready(function(){$("#datetimepicker-default").datetimepicker();
});
I started doing website now and I've known the bootstrap a little while ago. I'm here because I have a problem with navbar link's.
On the homepage the links work perfectly but on the following pages does not work. the same menu.
If anyone can help, I really appreciate it.
<!DOCTYPE html> <!--Index-->
<html lang="pt">
<head>
<title>Urbisouto - A tua imobiliaria</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="shortcut icon" type="image/ico" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,900|Oswald:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="fonts/icomoon/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/jquery.fancybox.min.css">
<link rel="stylesheet" href="css/bootstrap-datepicker.css">
<link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">
<link rel="stylesheet" href="css/aos.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">
<div class="site-wrap">
<div class="site-mobile-menu site-navbar-target">
<div class="site-mobile-menu-header">
<div class="site-mobile-menu-close mt-3">
<span class="icon-close2 js-menu-toggle"></span>
</div>
</div>
<div class="site-mobile-menu-body"></div>
</div>
<header class="site-navbar py-4 js-sticky-header site-navbar-target" role="banner">
<div class="container">
<div class="row align-items-center">
<div class="col-6 col-xl-2">
<h1 class="mb-0 site-logo m-0 p-0">logo</h1>
</div>
<div class="col-12 col-md-10 d-none d-xl-block">
<nav class="site-navigation position-relative text-right" role="navigation">
<ul class="site-menu main-menu js-clone-nav mr-auto d-none d-lg-block">
<li>Inicio</li>
<li>Imoveis</li>
<li>Agentes</li>
<li>Sobre nós</li>
<!-- <li>News</li> -->
<li>Contactos</li>
</ul>
</nav>
</div>
<div class="col-6 d-inline-block d-xl-none ml-md-0 py-3"><span class="icon-menu h3"></span></div>
</div>
</div>
</header>
<div class="site-block-wrap">
<div class="owl-carousel with-dots">
<div class="site-blocks-cover overlay overlay-2" style="background-image: url(images/intro_1.jpg);" data-aos="fade" id="home-section">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-md-6 mt-lg-5 text-center">
<h1 class="text-shadow">123</h1>
<p class="mb-5 text-shadow">321</p>
<p> <a href="#properties-section" class="btn btn-primary px-5 py-3" class="smoothscroll arrow-down" class="nav-link" >go</a></p>
</div>
</div>
</div>
</div>
<div class="site-blocks-cover overlay overlay-2" style="background-image: url(images/intro_2.jpg);" data-aos="fade" id="home-section">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-md-6 mt-lg-5 text-center">
<h1 class="text-shadow">123</h1>
<p class="mb-5 text-shadow">321</p>
<p>go</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="site-section" id="properties-section">
<div class="container">
<div class="row large-gutters">
<div class="col-md-6 col-lg-4 mb-5 mb-lg-5 ">
<div class="ftco-media-1">
<div class="ftco-media-1-inner">
<img src="images/vieira/homepage.jpg" alt="#" class="img-fluid">
<div class="ftco-media-details">
<h3>Vieira do Minho</h3>
<p>Braga</p>
<strong>€1.150.000,00</strong>
</div>
</div>
</div>
</div>
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-5">
<h2 class="footer-heading mb-4">Sobre nós</h2>
<p>Fundada em 1998, a Urbisouto caracteriza-se por ser uma agência imobiliária, com uma grande experiência no mercado, empenhada em satisfazer a necessidade de quem nos procura.
Fazemos pesquisas de mercado para garantir o melhor preço.</p>
</div>
<div class="col-md-3 mx-auto">
<h2 class="footer-heading mb-4">Quick Links</h2>
<ul class="list-unstyled">
<li>Sobre nós</li>
<li>Serviços</li>
<li>Testemunhos de clientes</li>
<li>Contactos</li>
</ul>
</div>
</div>
</div>
<!-- <div class="col-md-4">
<div class="mb-4">
<h2 class="footer-heading mb-4">Subscribe Newsletter</h2>
<form action="#" method="post" class="footer-subscribe">
<div class="input-group mb-3">
<input type="text" class="form-control border-secondary text-white bg-transparent" placeholder="Enter Email" aria-label="Enter Email" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-primary text-black" type="button" id="button-addon2">Send</button>
</div>
</div>
</form>
</div> -->
<div class="col-md-3 mx-auto">
<h2 class="footer-heading mb-4">Segue-nos</h2>
</span>
<!-- <span class="icon-twitter"></span>
<span class="icon-linkedin"></span>
<span class="icon-instagram"></span> -->
</div>
</div>
</div>
<div class="row pt-5 mt-5 text-center">
<div class="col-md-12">
<div class="border-top pt-5">
<p class="copyright"><small>© <script>document.write(new Date().getFullYear());</script> Urbisouto - Empreendimentos Copyrigth. Design by Albino Teixeira</small></p>
</div>
</div>
</div>
</div>
</footer>
</div>
<span class="icon-angle-double-up"></span>
<script tpye="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.countdown.min.js"></script>
<script src="js/bootstrap-datepicker.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/aos.js"></script>
<script src="js/jquery.fancybox.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/main.js"></script>
</body>
</html>
I remember than on desktop it works well, just in mobile dont work on second page
I have created dynamic list using bootstrap and thymeleaf, list also contains collapse functionality which is not working properly, aria-expanded = "false" is not working, I browsed a lot but not any solution for dynamically created list using thymeleaf.
When the page loads all collapsible panel should be closed for that I used aria-expanded="false", but it is not working.
As the list comes into from it takes few clicks to achieve collapse.
Below there is the code and image.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="/resources/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="/resources/css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="/resources/css/style.css" rel="stylesheet">
<link href="/resources/css/jquery.qtip.min.css" rel="stylesheet"/>
<link href="/resources/css/icheck.css" rel="stylesheet" />
<link href="/resources/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<link href="/resources/css/sweet-alert.css" rel="stylesheet" />
<link href="/resources/css/custom-accordin.css" rel="stylesheet" />
</head>
<body>
<div class="container" th:fragment="content">
<header>
<!--Main Navigation-->
<nav class="navbar fixed-top scrolling-navbar navbar-expand-lg navbar-dark blue-grey darken-2">
<ul class="navbar-nav mr-auto">
<li class="nav-item"> <a class="nav-link" href="EmployerDashboard.html"><i class="fa fa-chevron-left fa-2x"></i></a> </li>
</ul>
<ul class="navbar-nav mr-auto">
<li class="nav-item"> <a class="navbar-brand" href="#">Submission status</a> </li>
</ul>
<ul class="navbar-nav nav-flex-icons">
<li class="nav-item"><i class="fa fa-bars fa-2x"></i></li>
</ul>
</nav>
</header>
<!--Main Navigation-->
<div class="container-fluid">
<!--Grid row-->
<div class="row">
<div class="col-12">
<div class="mx-auto">
<div class="alert blue-grey lighten-4" role="alert" style="border-top: 2px solid #000;">
<div class="row">
<div class="col text-center">
<p class="h6"><strong th:text="${efiledHdrBean.payPeriod}"></strong><br/>
<small>Submission Period</small></p>
</div>
<div class="col text-center">
<p class="h6"><strong th:text="${#codeMapUtil.getCodeValue(efiledHdrBean.payFreq, 'PAY_FREQ_DESC').concat('ly')}"></strong><br/>
<small>Pay Frequency</small></p>
</div>
<div class="col text-center">
<p class="h6"><strong th:text="${efiledHdrBean.ppType}"></strong><br/>
<small>Pension Prov.</small></p>
</div>
</div>
</div>
<div class="alert alert-success alert-dismissible" role="alert">
<p class="text-center"><i class="fa fa-check fa-2x text-success"></i> Your Contribution data is accepted by NEST<br />
Amount Due to Pension provider: <strong>£ 40.72</strong></p>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<ul class="list-group" >
<div class="accordion" id="accordionEx" role="tablist" aria-multiselectable="true">
<!-- <li class="list-group-item" th:each="listBean,iterator: ${contributionStatus}"> -->
<li class="list-group-item">
<div class="card" th:each="listBean,iterator: ${contributionStatus}" >
<div class="card-header" role="tab" th:id="'heading' + ${iterator.index}"> <a class="collapsed black-text" data-toggle="collapse" th:href="'#collapse' + ${iterator.index}" aria-expanded="false" th:attr = "aria-controls='collapse' + ${iterator.index}"> <i class="fa fa-angle-down rotate-icon float-right"></i>
<div class="row">
<div class="col-7"> <span class="icon-round pull-left">
<p class="icon"><span th:text=" ${#strings.substring(listBean.eeSurname,0,1) + #strings.substring(listBean.eeFname,0,1)}"></span></p>
</span>
<p class="h5 list-group-item-heading"><strong><span th:text="${listBean.eeSurname}"></span> , <span th:text="${listBean.eeFname}"></span></strong></p>
<p class="list-group-item-text mb-2"><span th:text="${listBean.eeWksNo}"></span> <span class="badge grey lighten-2 black-text" th:text="${listBean.assessStatus}"></span></p>
</div>
<div class="col-4 pr-0">
<p class="h5 list-group-item-heading text-right"><span class="float-left">£</span><span th:text="${listBean.eePenEarnings}"></span></p>
</div>
</div>
</a> </div>
<div th:id="'collapse' + ${iterator.index}" class="collapse show" role="tabpanel" data-parent="#accordionEx" th:attr="aria-labelledby='heading' + ${iterator.index}">
<div class="card-body black-text">
<p class="h6">Pensionable Earnings: £ <span th:text="${listBean.eePenEarnings}"></span></p>
<ul class="list-group" >
<li class="list-group-item">
<div class="row">
<div class="col-5 pr-0">
<p class="list-group-item-heading mb-0">Employer</p>
</div>
<div class="col-4 p-0">
<p class="list-group-item-heading mb-0">Rate(%): <span th:text="${listBean.erContribRate}"></span></p>
</div>
<div class="col-3 pl-0">
<p class="list-group-item-heading text-right mb-0"><span class="float-left">£</span><span th:text="${listBean.erDedValue}"></span></p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-5 pr-0">
<p class="list-group-item-heading mb-0">Employee</p>
</div>
<div class="col-4 p-0">
<p class="list-group-item-heading mb-0">Rate(%): <span th:text="${listBean.eeContribRate}"></span></p>
</div>
<div class="col-3 pl-0">
<p class="list-group-item-heading text-right mb-0"><span class="float-left">£</span><span th:text="${listBean.eeDedValue}"></span></p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-9 pr-0">
<p class="list-group-item-heading mb-0">Additional Voluntary Contribution (AVC)</p>
</div>
<div class="col-3 pl-0">
<p class="list-group-item-heading text-right mb-0"><span class="float-left">£</span><span th:text="${listBean.eeAvcDedValue}"></span></p>
</div>
</div>
</li>
<li class="list-group-item grey lighten-4">
<div class="row">
<div class="col-9 pr-0">
<p class="list-group-item-heading mb-0"><strong>Total Contribution</strong></p>
</div>
<div class="col-3 pl-0">
<p class="list-group-item-heading text-right mb-0"><strong><span class="float-left">£</span><span th:text="${listBean.erContribution}"></span></strong></p>
</div>
</div>
</li>
</ul>
<ul class="list-group mt-4" aria-hidden="true">
<li class="list-group-item grey lighten-3">
<div class="row">
<div class="col-9 pr-0">
<p class="list-group-item-text mb-0"><strong>Partial / Non-Payment of Contribution</strong></p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-5 pr-0">
<p class="list-group-item-heading mb-0">Reason</p>
</div>
<div>
<p class="list-group-item-heading text-right mb-0"><span th:text="${listBean.partialContribReason}"></span></p>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-5 pr-0">
<p class="list-group-item-heading mb-0">Effective Date</p>
</div>
<div>
<p class="list-group-item-heading text-right mb-0"><span th:text="${listBean.partialContribEffectiveDate}"></span></p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
</div>
</ul>
</div>
<!--/.Card-->
</div>
</div>
</div>
<!--Main container-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" th:src="#{/resources/js/jquery.3.2.1.min.js}"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" th:src="#{/resources/js/popper.min.js}"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" th:src="#{/resources/js/bootstrap.min.js}"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" th:src="#{/resources/js/mdb.min.js}"></script><!--
<script type="text/javascript" th:src="#{/resources/js/thymol.js}"></script>
<script type="text/javascript" th:src="#{/resources/js/thymolconfig.js}"></script> -->
<script type="text/javascript" th:src="#{/resources/js/custom.js}"></script>
<script th:src="#{/resources/js/numericfield.js}"></script>
<script th:src="#{/resources/js/moment.2.10.6.min.js}"></script>
<!-- SCRIPTS -->
<!-- <!-- thymol JavaScript -->
<script th:src="#{/resources/js/main.js}"></script>
<script th:src="#{/resources/js/sweet-alert.min.js}"></script>
<script th:src="#{/resources/js/utils.js}"></script>
<script th:src="#{/resources/js/numericfield.js}"></script>
<script th:src="#{/resources/js/date.js}"></script>
<script th:src="#{/resources/js/icheck.min.js}"></script>
<script th:src="#{/resources/js/dynamicFormFields.js}"></script>
<script th:src="#{/resources/js/moment.js}"></script>
<script th:src="#{/resources/js/bootstrap-datetimepicker.min.js}"></script>
<script th:src="#{/resources/js/jquery.qtip.min.js}"></script>
<script th:src="#{/resources/js/bc-quicklink.js}"></script>
<script th:inline="javascript">
/*<![CDATA[*/
// SideNav Initialization
$(document).ready(function () {
$(".button-collapse").sideNav({
edge: 'right',
closeOnClick: true
});
var container = document.getElementById('slide-out');
Ps.initialize(container);
});
</script>
<script>
// Material Select Initialization
$(document).ready(function () {
$('.mdb-select').material_select();
});
/*]]>*/
</script>
</div>
</body>
</html>
Help me to solve the problem.
I am using a Framework 7 to develop a web app, and in it, I have it so the menu is a left panel that opens from a menu button. When the menu is open, the body has the class .with-panel-left-cover. I have been trying to add a class to another part of the document when this occurs, so I can add styling. Below is the code and what I am trying to use right now.
if ( $('body').hasClass('with-panel-left-cover') ) {
$('.views').addClass( "overlay" );
}
And the html (with filler text)
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<title>My App</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="links/font-awesome-4.4.0/css/font-awesome.min.css">
<!-- Path to Framework7 Library CSS-->
<link rel="stylesheet" href="dist/css/framework7.ios.min.css">
<link rel="stylesheet" href="dist/css/framework7.ios.colors.min.css">
<!-- Path to your custom app styles-->
<link rel="stylesheet" href="links/css/my-app.css">
<script src="phonegap.js"></script>
</head>
<body>
<div class="statusbar-overlay"></div>
<!-- Panels overlay-->
<div class="panel-overlay"></div>
<!-- Left panel with reveal effect-->
<div class="panel panel-left panel-cover" style="background:lightgray">
<div class="content-block">
<p> <a class="button button-big color-blue button-fill panel-close" href="#index"><i class="fa fa-home fa-lg fa-fw"></i> Step 1</a> </p>
<p> <a class="button button-fill button-big panel-close" href="#about"><i class="fa fa-info fa-lg fa-fw"></i> Step 2/a> </p>
<p> <a class="button button-fill button-big panel-close" href="#form"><i class="fa fa-file fa-lg fa-fw"></i> Step 3</a> </p>
</div>
</div>
<!-- Views-->
<div class="views">
<!-- Your main view, should have "view-main" class-->
<div class="view view-main">
<!-- Top Navbar-->
<div class="navbar">
<!-- Navbar inner for Index page-->
<div data-page="index" class="navbar-inner" style="background-color:white">
<!-- We have home navbar without left link-->
<div class="center sliding"><strong>Phone App</strong></div>
<div class="right">
<!-- Right link contains only icon - additional "icon-only" class--> <i class="icon icon-bars"></i>
</div>
</div>
<!-- Navbar inner for About page-->
<div data-page="about" class="navbar-inner cached">
<div class="left sliding"> <i class="icon icon-back"></i><span>Back</span></div>
<div class="center sliding"><strong>How it works</strong></div>
</div>
<!-- Navbar inner for Services page-->
<div data-page="services" class="navbar-inner cached">
<div class="left sliding"> <i class="icon icon-back"></i><span>Back</span></div>
<div class="center sliding">Services</div>
</div>
<!-- Navbar inner for Form page-->
<div data-page="form" class="navbar-inner cached">
<div class="left sliding"> <i class="icon icon-back"></i><span>Back</span></div>
<div class="center sliding"><strong>Submissions</strong></div>
</div>
</div>
<!-- Pages, because we need fixed-through navbar and toolbar, it has additional appropriate classes-->
<div class="pages navbar-through toolbar-through">
<!-- Index Page-->
<div data-page="index" class="page">
<!-- Scrollable page content-->
<div class="page-content" style="background-color: #ed1c24" >
<img src="images/Filler.png" alt="" class="ri">
<!--<h1 style="font-size: 3em;
color: ghostwhite;
text-shadow: red -2px -1px 1px;"> Flash <i class="fa fa-bolt" style="color: white; text-shadow: yellow -1px 2px 25px;"></i> News </h1>
<h2 style="color:ghostwhite;text-shadow: red -2px -1px 1px;">Please swipe to the right or use the above button to navigate the app!</h2>-->
</div>
</div>
<!-- About Page-->
<div data-page="about" class="page cached">
<div class="page-content" style="padding-top:0px; padding-bottom:0px">
<div class="content-block" style="padding:0; margin:0px">
<div class="content-block-title"></div>
<div class="one" style="background-image:url(images/8-People.jpg); background-size: cover; height:66vh">
<div class="card">
<div class="card-header">Filler</div>
<div class="card-content">
<div class="card-content-inner">
Filler
</div>
</div>
</div>
</div>
<div class="two" style="background-image:url(images/12370-NOAIKP.jpg); background-size: cover; height:66vh">
<div class="card">
<div class="card-header">Filler</div>
<div class="card-content">
<div class="card-content-inner">
Filler
</div>
</div>
</div>
</div>
<div class="three" style="background-image:url(images/10895-NN6QH9.jpg); background-size: cover; height:66vh">
<div class="card">
<div class="card-header">Filler</div>
<div class="card-content">
<div class="card-content-inner">
Filler
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Form Page-->
<div data-page="form" class="page cached">
<div class="page-content">
<iframe src="http://www.filler.com" style="width: 100%;height: 100%;border: 0;"></iframe>
</div>
</div>
</div>
<!-- Bottom Toolbar-->
</div>
</div>
<!-- Path to Framework7 Library JS-->
<script type="text/javascript" src="dist/js/framework7.min.js"></script>
<!-- Path to your app js-->
<script type="text/javascript" src="links/js/my-app.js"></script>
</body>
</html>
When I click a link, ng-view renders a new html page, but its defaulting to the searchbox and zooming in on the page in mobile view.
If you are unsure what I mean, go to http://www.andrewhnovak.com with your phone and you will see what I mean.
How can I have it not default to the search box?
Beef-Recipes.html
<!DOCTYPE html>
<html ng-app="RecipeSite">
<head>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.2/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" type="text/css" href="app.css">
<script src="app.js"></script>
<title></title>
</head>
<body>
<div class="container">
<div class="row"> </div>
<div class="row top-buffer"> </div>
<div ng-controller="RecipeController">
<div class="row">
<div class="col-md-offset-5 col-sm-offset-4">
<form class="form-inline">
<input ng-model="query" type="text" class="form-control"
placeholder="Search Beef Recipes" autofocus>
</form>
</div>
</div>
<div class="row">
<div ng-repeat="recipe in BeefRecipes | limitTo: -12 | filter:query | orderBy: 'name' ">
<div class="col-md-3">
<br><br>
<button class="btn btn-warning btn-lg" ng-click="open(recipe)"><img ng-src="{{recipe.image}}" alt="recipeImage" class="recipeImage"/><br>{{ recipe.name }}</button> <br />
</div>
</div>
</div>
</div><!--end recipeController-->
</div><!--end container-->
<!--MODAL WINDOW-->
<div class="container">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h2>Recipe </h2><h3>{{ recipe.name }}</h3>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-3">
<img ng-src="{{recipe.image}}" class="recipeImageModal"/>
</div>
<br>
<br>
<div class="col-md-offset-3 col-md-5 col-sm-offset-1 col-sm-5">
<ul>
<li> {{"Cook Time: " + recipe.cookTime }}</li>
<li> {{"Yield: " + recipe.yield}}</li>
</ul>
</div>
</div>
<div class="row top-buffer"> </div>
<div class="row">
<div class="col-md-offset-2 col-md-6 col-sm-offset-2"><div id="ingredientLabel">Ingredients</div>
</div>
</div>
<div class="ingredients">
<br>
<div class="row">
<div class="col-md-6 col-sm-6">
<ul>
<li>{{recipe.ingredient1}}</li>
<li>{{recipe.ingredient2}}</li>
<li>{{recipe.ingredient3}}</li>
<li>{{recipe.ingredient4}}</li>
<li>{{recipe.ingredient5}}</li>
<li>{{recipe.ingredient6}}</li>
<li>{{recipe.ingredient7}}</li>
<li>{{recipe.ingredient8}}</li>
<li>{{recipe.ingredient9}}</li>
<li>{{recipe.ingredient10}}</li>
<li>{{recipe.ingredient11}}</li>
<li>{{recipe.ingredient12}}</li>
<li>{{recipe.ingredient13}}</li>
<li>{{recipe.ingredient14}}</li>
<li>{{recipe.ingredient15}}</li>
<li>{{recipe.ingredient16}}</li>
<li>{{recipe.ingredient17}}</li>
<li>{{recipe.ingredient18}}</li>
<li>{{recipe.ingredient19}}</li>
<li>{{recipe.ingredient20}}</li>
</ul>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="directionsandlabel"> <div class="directionsLabel">
Directions</div>
<div class="directions">
<ol>
<li> {{recipe.direction1}}</li>
<li>{{recipe.direction2}}</li>
<li>{{recipe.direction3}}</li>
<li>{{recipe.direction4}}</li>
<li>{{recipe.direction}}</li>
</ol>
</div>
</div></div>
</div>
</div>
</div><!--end ingredients class-->
</div>
</div>
</script>
</body>
</html>