Hi I have a confusion in js i called lot of js version in my site what is the proper way
I called this way in different page
<link src="js/jquery.min.js"/>
<link src="js/bootstrap.min.js"/>
<link src="js/owl.carousel.min.js"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link src="js/jquery-1.12.1.min.js"/>
I have slider Date picker etc. So if one is working then rest is not working
So How i make it work all
Gallery Slider
<?php
foreach($block->getGalleryImages() as $image){ ?>
<?php if(!$block->isMainImage($image)):?>
<img src="<?php //echo $image->getData('medium_image_url') ?>">
<?php endif; ?>
<?php } ?>
<div class="product-slider">
<?php /* #escapeNotVerified */ $json=$block->getGalleryImagesJson();
$array = json_decode($json,true);
foreach($array as $item)
{
$imgurl = $item['full'];?>
<div class="item">
<img src="<?php echo $imgurl;?>"/>
</div>
<?php }?>
</div>
<script type="text/javascript">
$.noConflict();
$(".product-slider").owlCarousel({
loop: true,
margin: 50,
responsiveClass: true,
nav: true,
lazyLoad :true ,
rewind : false ,
autoplay: true,
dots: true,
navText : ["",""],
responsive: {
0: {
items: 1
}
, 768: {
items: 2
}
, 991: {
items: 1
}
}
});
</script>
Date Picker
<script type="text/javascript">
jQuery("#dt1-<?php echo $_product->getId()?>").datepicker({
dateFormat: "dd-M-yy",
minDate: 0,
onSelect: function (date) {
var dt2 = jQuery('#dt2-<?php echo $_product->getId()?>');
var startDate = jQuery(this).datepicker('getDate');
var minDate = jQuery(this).datepicker('getDate');
//dt2.datepicker('setDate', minDate);
startDate.setDate(startDate.getDate() + 30);
//sets dt2 maxDate to the last day of 30 days window
dt2.datepicker('option', 'maxDate', startDate);
dt2.datepicker('option', 'minDate', minDate);
jQuery(this).datepicker('option', 'minDate', minDate);
}
});
jQuery('#dt2-<?php echo $_product->getId()?>').datepicker({
dateFormat: "dd-M-yy"
});
</script>
<input type="text" id="dt1-<?php echo $_product->getId()?>">
<input type="text" id="dt2-<?php echo $_product->getId()?>">
1 - Change the JavaScript tags from <link /> to <script />. Link tags are for stylesheets and script tags, well, for scripts;
2 - Load JavaScript libraries only once;
3 - Check the URL's and versions you want to load the libraries / stylesheets
from. I guess you're mixing things up a bit.
See example below:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript"src="js/owl.carousel.min.js"></script>
If you need to load CSS files, you should write the following:
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" media="all" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" media="all" />
Related
I'm trying to create a calendar inside of a text input with JavaScript and mysqli. This calendar has booked dates in it that are based on the start date and the end date in the db.
I have a db with 2 columns:
start_datum (start_date)
end_datum (end_date)
What I want is that the user is able to click on the input date and that it shows this mini calendar where the user is able to pick out dates to make a reservation
However certain dates are blocked because they have been put inside of the db and ate between the start and end date.
The problems I have with this is that I can't create the disabled dates
How do I fix this?
$(function() {
$( "#datepicker" ).datepicker({
numberOfMonths: 1,
minDate:0,
showButtonPanel: true,
});
});
$(function() {
$( "#datepicker1" ).datepicker({
numberOfMonths: 1,
minDate:1,
showButtonPanel: true,
});
});
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Display multiple months</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<?php
$huis_ID = "1";
$sql = "SELECT * FROM reserveringen WHERE huis_ID = ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("i", $huis_ID);
$stmt->execute();
$result = $stmt->get_result();
$data = $result->fetch_all(MYSQLI_ASSOC);
if ($data):
?>
<?php foreach($data as $row): ?>
<?php
$start_datum = date('d-m-Y', strtotime($row['start_datum']));
echo $start_datum , "<br>";
$eind_datum = date('d-m-Y', strtotime($row['eind_datum']));
echo $eind_datum , "<br>";
?>
<?php endforeach ?>
<?php else: ?>
No data found
<?php endif ?>
</head>
<body>
<p>start_date: <input type="text" id="datepicker" name ="datepicker"></p>
<p>end_date: <input type="text" id="datepicker1" name ="datepicker1"></p>
</body>
</html>
Pics of what it looks like right now
$('.datepicker').datepicker({
todayHighlight:'TRUE',
startDate: new Date('2022-07-15'),
endDate: new Date('2022-07-31'),
autoclose: true
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"> </script>
<input type="text" class="datepicker" value='' />
<input type="text" class="datepicker" value='' />
so I have a CKeditor 5 text area, When I click the submit button, that runs gets the textarea and for the sake of this example fire that out as an alter. However the issue is that it fires out what was in the editor when it loaded not the changes I have made.
I assume I need to tell the text editor to refresh or something before I collect the variable?
does anyone have any idea on how I fix this, here is my code
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no">
<title>OpsPal | Tasks</title>
<link rel="icon" type="image/x-icon" href="../images/favicon.ico?refresh=<?php echo $refresh ?>"/>
<link href="../assets<?php echo $L ?>/css/loader.css?refresh=<?php echo $refresh ?>" rel="stylesheet" type="text/css" />
<script src="../assets<?php echo $L ?>/js/loader.js?refresh=<?php echo $refresh ?>"></script>
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
<link href="../bootstrap<?php echo $L ?>/css/bootstrap.min.css?refresh=<?php echo $refresh ?>" rel="stylesheet" type="text/css" />
<link href="../assets<?php echo $L ?>/css/main.css?refresh=<?php echo $refresh ?>" rel="stylesheet" type="text/css" />
<link href="../assets<?php echo $L ?>/css/structure.css?refresh=<?php echo $refresh ?>" rel="stylesheet" type="text/css" />
<link href="../plugins<?php echo $L ?>/perfect-scrollbar/perfect-scrollbar.css?refresh=<?php echo $refresh ?>" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../plugins<?php echo $L ?>/bootstrap-select/bootstrap-select.min.css?refresh=<?php echo $refresh ?>">
<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css?refresh=<?php echo $refresh ?>">
<link rel="stylesheet" href="../assets/css/formval/screen.css?refresh=<?php echo $refresh ?>">
<!--JAVASCRIPT -->
<script src="../assets/js/libs/jquery-3.1.1.min.js?refresh=<?php echo $refresh ?>"></script>
</head>
<body>
<!-- BEGIN CONTENT PART -->
<div id="content" class="main-content">
<div class="layout-px-spacing">
<div class="container-responsive">
<div class="row layout-top-spacing">
<div class="col-xl-8 col-lg-10 col-md-10 col-sm-12 layout-spacing">
<div class="widget-content widget-content-area br-6">
<form id="newtask" method="post" autocomplete="off" >
<label for="formGroupExampleInput">Note</label>
<div class="centered" >
<div class="row row-editor">
<div class="editor-container" style="width: 100%; margin-left: 10px; margin-right: 10px;">
<textarea required class="editor form-control" name="note" id="note" type="text">Org Text</textarea>
</div>
</div></div>
<input name="submit" type="submit" value="submit" id="submit" class="btn btn-primary">
</form>
</div></div></div></div></div>
<?php include_once("../footer.php"); ?>
</div></div></div>
<!-- END MAIN CONTAINER -->
<!-- BEGIN GLOBAL MANDATORY SCRIPTS -->
<script src="../bootstrap/js/popper.min.js?refresh=<?php echo $refresh ?>"></script>
<script src="../bootstrap/js/bootstrap.min.js?refresh=<?php echo $refresh ?>"></script>
<script src="../plugins/perfect-scrollbar/perfect-scrollbar.min.js?refresh=<?php echo $refresh ?>"></script>
<script src="../assets/js/app.js?refresh=<?php echo $refresh ?>"></script>
<script src="../plugins/bootstrap-select/bootstrap-select.min.js?refresh=<?php echo $refresh ?>"></script>
<script src="../scripts/jquery.validate.js?refresh=<?php echo $refresh ?>"></script>
<script>
///this validates the formon the submit handler if successful it switches the button over//
$('#newpro').validate({
submitHandler: function(){
$("#save").hide();
$("#savedis").show();
$(form).ajaxSubmit();
}
});
</script>
<script>
$(document).ready(function() {
App.init();
});
</script>
<script src="../assets/js/custom.js?refresh=<?php echo $refresh ?>"></script>
<script src="../plugins/ckeditor/build/ckeditor.js?refresh=<?php echo $refresh ?>"></script>
<script src="../plugins/ckeditor/ckfinder/ckfinder.js?refresh=<?php echo $refresh ?>"></script>
<?php //////adds a dark theme to ckeditor////
if($theme=='D'){
echo "<link rel='stylesheet' href='../plugins/ckeditor/styles/dark.css?refresh=$refresh)' type='text/css'>";
}
else{
echo "<link rel='stylesheet' href='../plugins/ckeditor/styles/light.css?refresh=$refresh)' type='text/css'>";
}
?>
<script>
const watchdog = new CKSource.EditorWatchdog();
window.watchdog = watchdog;
watchdog.setCreator( ( element, config ) => {
return CKSource.Editor
.create( element, config )
.then( editor => {
return editor;
} )
} );
watchdog.setDestructor( editor => {
return editor.destroy();
} );
watchdog.on( 'error', handleError );
watchdog
.create( document.querySelector( '.editor' ), {
fontSize: {
options: [
'default',
8,
10,
12,
14,
16,
18,
20
]
},
ckfinder: {
uploadUrl: '../plugins/ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json',
},
mediaEmbed: {
previewsInData: true
},
toolbar: {
items: [
'undo',
'bold',
'italic',
'underline',
'fontSize',
'alignment',
'bulletedList',
'numberedList',
'horizontalLine',
'|',
'link',
'CKFinder',
'mediaEmbed',
'insertTable',
'imageInsert',
'findAndReplace',
'highlight',
'heading',
//'sourceEditing',
],
},
language: 'en-gb',
image: {
toolbar: [
'imageTextAlternative',
'imageStyle:inline',
'imageStyle:block',
]
},
table: {
contentToolbar: [
'tableColumn',
'tableRow',
'mergeTableCells',
'tableCellProperties',
'tableProperties'
]
},
licenseKey: '',
} )
.catch( handleError );
function handleError( error ) {
console.error( 'Oops, something went wrong!' );
console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
console.warn( 'Build id: 8kp2t5e90ll2-hyf8iacvn125' );
console.error( error );
}
</script>
<script>
$('#submit').on('click',function(){
var note= $('#note').val();
alert(note);
})
</script>
</body>
</html>
1, move the button submit script into the first script tag itself. No need to define another .
2, your variable is named watchdog, and not editor. So after you move the button submit, inside it do: console.log(watchdog.getData());.
Here, this fiddle will help: JSFiddle
If you submit in the beginning, it will output 'Old Content', then if you change the text and submit, it'll output 'New Content'. You can see the output in the console of the Fiddle.
I'm trying to load a slick-slide-carousel with ajax so that when one of the radiobuttons is pressed, the new images are loaded via ajax.
But I have a problem because when loading the new images, all the images of the carousel are displayed one on top of the other for a second.
It can be seen on this page: http://infrangible-discoun.000webhostapp.com/slideAjax/, by pressing any of the radio-buttons.This is the code.
index.php:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-latest.js"></script>
<script src="jsSlick/slick/slick.min.js"></script>
<link rel="stylesheet" href="jsSlick/slick/slick.css">
<link rel="stylesheet" href="jsSlick/slick/slick-theme.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" charset="UTF-8">
<link rel="stylesheet" href="estilosSlick.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">
<script src="ajaxIdProducto.js"></script>
</head>
<body>
<div id='foto'>
<div class='contenedor2 slideshow2'>
<img src="imagenes/1.jpg">
<img src="imagenes/2.jpg">
<img src="imagenes/3.jpg">
</div>
</div>
<div>
<form id="formOpciones" action="#" method="post">
<label for='color'>Elegir</label>
<input type="radio" class="color" name="color" value="blanco">
<input type="radio" class="color" name="color" value="negro">
<input type="radio" class="color" name="color" value="gris">
<input type="radio" class="color" name="color" value="azul">
</form>
</div>
</body>
<script src="slick2.js"></script>
</html>
ajaxIdProducto.js:
$(document).on('ready',function(){
$(document).on("change",'.color', function(event) {
var $form = $("#formOpciones");
var url1 = "obtenerFoto.php";
{
$.ajax({
type: "POST",
url: url1,
data: $form.serialize(),
success: function(data)
{
$('#foto').html(data);
}
});
}
});
});
obtenerFoto.php:
<html>
<head>
<meta charset="UTF-8">
<title>Obtener Foto</title>
<script src="jquery-latest.js"></script>
<script src="jsSlick/slick/slick.min.js"></script>
<link rel="stylesheet" href="jsSlick/slick/slick.css">
<link rel="stylesheet" href="jsSlick/slick/slick-theme.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" charset="UTF-8">
<link rel="stylesheet" href="estilosSlick.css?<?php echo date('l jS \of F Y h:i:s A'); ?>">
<script src="ajaxIdProducto.js"></script>
</head>
<body>
<script>
function slickCarousel() {
$('.slideshow2').slick({
dots:true,
arrows: true,
fade:false,
autoplay:false,
slidesToShow: 1,
slidesToScroll: 1,
});
}
function destroyCarousel() {
if ($('.slideshow2').hasClass('slick-initialized')) {
$('.slideshow2').slick('destroy');
}
}
destroyCarousel();
slickCarousel();
</script>
<?php
echo("<div class='contenedor2 slideshow2'>");
echo("<img src='imagenes/11.jpg'>");
echo("<img src='imagenes/12.jpg'>");
echo("<img src='imagenes/13.jpg'>");
echo("</div>");
?>
</body>
</html>
slick2.js:
$(".slideshow2").slick({
dots:true,
arrows: true,
fade:false,
autoplay:false,
slidesToShow: 1,
slidesToScroll: 1,
});
Maybe that's because when you call ajax obtenerFoto.php some of the scripts reload. After the script has finished loading, the slide carousel changes.
ajax request
Maybe you can try by changing the file obtenerFoto.php like this:
<?php
echo("<div class='contenedor2 slideshow2'>");
echo("<img src='imagenes/11.jpg'>");
echo("<img src='imagenes/12.jpg'>");
echo("<img src='imagenes/13.jpg'>");
echo("</div>");
?>
When an existing entry for a process phase has a time like 13:53, opening the datetimepicker sets the time automatically to 13:00, so I could by accident change the time without realizing, just by opening the datetimepicker
Without open datetimepicker
With open datetimepicker
problem with datetimepicker
function createDateTimePicker(id, timePicker, lang) {
var displayTimepicker = (timePicker == true ||timePicker == 'true') ;
var dateTimePicker = $(id).datetimepicker({
showTimepicker : displayTimepicker,
controlType: 'select',
oneLine: true,
dateFormat: 'dd.mm.yy',
timeFormat: 'HH:mm',
stepMinute: 5,
showOn: 'both',
buttonImage: '/assets/images/calendar.png',
buttonImageOnly: true
});
return dateTimePicker;
}
Is there a way or solution to have the same time as the textfield or the closest time within 5 minutes of the text field time in the datetimepicker?
$(function() {
$('#basic_example_1').datetimepicker();
});
var setDateTime = function() {
$('#basic_example_1').datetimepicker('setDate', (new Date()));
}
var clearDateTime = function() {
$('#basic_example_1').val('');
}
<head>
<link rel="stylesheet" media="all" type="text/css" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" media="all" type="text/css" href="https://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.css" />
</head>
<body>
<p>Add a simple datetimepicker to jQuery UI's datepicker</p>
<div style="display:inline">
<input type="text" name="basic_example_1" id="basic_example_1" value="" />
<button onclick="clearDateTime()">clear</button>
<button onclick="setDateTime()">now</button>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>
</body>
</html>
I have used jQuery datetimepicker plugin, hope it helps you!!!
This question already has answers here:
JQuery - $ is not defined
(36 answers)
Closed 7 years ago.
Let me show you all, i put this code in a file called consultas.php
CONSULTAS.PHP
This file shows the table with data, at the end of column called folio id="'.$row["folio"].'" when i clicked there this shows me and towards to VISTAPREVIA.PHP for more data about this folio but in paging #1 it works very well and now when i'm going to paging #2 i clicked again and doesn't work because doesn't show me anything, the error says me: Uncaught ReferenceError: $ is not defined
<script type="text/javascript">
$(document).ready(function() {
var table = $('#registros').DataTable({
"paging": true
});
//new $.fn.dataTable.AutoFill( table );
$('.back').on("click", function(event)
{
event.preventDefault();
location.reload();
});
$('.modificar').on("click", function(event)
{
event.preventDefault();
//Cargamos el contenido del enlace
var f = $(this).attr('id');
$('#mainContainer').load(this.href, {folio: f}, function(){
});
});
$('.vistaprevia').on("click", function(event)
{
event.preventDefault();
//Cargamos el contenido del enlace
var f = $(this).attr('id');
$('#mainContainer').load(this.href, {folio: f}, function(){
});
});
$('.detalle').on("click", function(event)
{
event.preventDefault();
var f = $(this).attr('id');
$('<div></div>').load(this.href, {folio: f}).modal();
});
});
</script>
REGRESAR ATRÁS
<h1 class="titPer">CONSULTA DE LA TABLA</h1>
<div class="tabla">
<table id="registros" class="display" cellspacing="0">
<thead>
<tr>
<th>Folio</th>
<th>Estatus</th>
<th>Punto de Venta</th>
<th>Usuario</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<?php
while ($row = mysql_fetch_array($consulta)) {
?>
<tr>
<td><?=$row['folio']?></td>
<td><?=$row['estatus']?></td>
<td><?=$row['punto_venta']?></td>
<td><?=$row['usuario']?></td>
<td>
<?php
if($_SESSION['permisos'] == 'VENDEDOR' || $_SESSION['permisos'] == 'JEFESUC' || $_SESSION['permisos'] == 'EMBARQUES'){
echo '
<center>
<a class="modificar icon-pencil" href="includes/vistaPrevia.php" id="'.$row["folio"].'"></a>
|
<a class="detalle icon-eye-plus" href="includes/lightbox.php" id="'.$row["folio"].'"></a>
</center>
';
}else{
echo'
<center>
<a class="vistaprevia icon-eye-plus" href="includes/vistaPrevia.php" id="'.$row["folio"].'"></a>
</center>
';
}
?>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
VISTAPREVIA.PHP
<?php session_start(); ?>
<head>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css'>
</head>
REGRESAR ATRÁS
<h1 class="titPer">ACTUALIZACIÓN DE DATOS</h1>
<!-- <form action="includes/"></form> -->
<?php
if($_SESSION['permisos'] == 'CALIDAD'){
include('upRegCal.php');
}
?>
<form action="includes/edit.php" enctype="multipart/form-data" id="formAct" method="POST" name="enviarForm">
<?php
if($_SESSION['permisos'] == 'VENDEDOR' || $_SESSION['permisos'] == 'JEFESUC' || $_SESSION['permisos'] == 'EMBARQUES'){
include('upRegUser.php');
}
if($_SESSION['permisos'] == 'ADMINISTRADOR'){
//include('upRegCal.php');
echo "Hola Administrador";
}
?>
</form>
last
INDEX.PHP
i have to assure this part because i put the correct Jquery scripts but i don't know why and i couldn't find the problem and yes i use the Datables Scripts
<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8"/>
<title>Bienvenido</title>
<script src="js/jquery-1.11.2.js"></script>
<script src="js/funciones.js"></script>
<script src="libs/datatables/media/js/jquery.dataTables.js"></script>
<script src="libs/datatables/extensions/AutoFill/js/dataTables.autoFill.js"></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script type='text/javascript' src='js/basic.js'></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400,600,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css" type="text/css"/>
<link rel="stylesheet" href="css/estilos.css" type="text/css"/>
<link rel="stylesheet" href="css/estilosForm.css" type="text/css"/>
<link type='text/css' href='css/basic.css' rel='stylesheet' media='screen' />
<link rel="stylesheet" href="libs/datatables/media/css/jquery.dataTables.css" type="text/css"/>
<link rel="stylesheet" href="libs/datatables/extensions/AutoFill/css/dataTables.autoFill.css" type="text/css"/>
</head>
<body>
<div class="fondoHeader"></div>
<header class="shadow">
<nav>
<?php
if(isset($_SESSION['usuario']))
include('includes/btnSiSession.php');
else
include('includes/btnNoSession.php');
?>
</nav>
</header>
<div id='mainContainer'>
<?php
include('includes/bienvenido.php');
if(isset($_SESSION['usuario'])){
echo "<script language='JavaScript'>";
// echo "document.getElementById('login').style.display='none'";
echo "document.getElementById('login').style.visibility='hidden'";
echo "</script>";
}
else{
echo "<script language='JavaScript'>";
// echo "document.getElementById('login').style.display='block'";
echo "document.getElementById('login').style.visibility='visible'";
echo "</script>";
}
?>
</div>
<div class="clear"></div>
<footer>
<?php
include('includes/footer.php');
?>
</footer>
</body>
</html>
UPDATE
i put this code jQuery CDN script
<script src="ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#registros').DataTable({
"paging": true
});
//new $.fn.dataTable.AutoFill( table );
$('.back').on("click", function(event)
{
event.preventDefault();
location.reload();
});
$('.modificar').on("click", function(event)
{
event.preventDefault();
//Cargamos el contenido del enlace
var f = $(this).attr('id');
$('#mainContainer').load(this.href, {folio: f}, function(){
});
});
$('.vistaprevia').on("click", function(event)
{
event.preventDefault();
//Cargamos el contenido del enlace
var f = $(this).attr('id');
$('#mainContainer').load(this.href, {folio: f}, function(){
});
});
$('.detalle').on("click", function(event)
{
event.preventDefault();
var f = $(this).attr('id');
$('<div></div>').load(this.href, {folio: f}).modal();
});
});
</script>
In consultas.php, you must include JQuery (<script src="js/jquery-1.11.2.js"></script>) before using it, before your <script>.
In web, each page is different, then you must add jQuery in each one.
example
<script src="js/jquery-1.11.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/* ... */
});
</script>
In some cases you have to use jQuery instead of $.
2nd option: jQuery(document).ready(function($) {
After this you can use $ as synonym for jquery.
This error is because you're missing the JQuery library. If you are including your Javascript libraries(including JQuery) at the bottom of your page(footer), you can either
Include the JQuery library at the top of the page
OR
make your Javascripts functions into a common js file and include it at the footer just below the Jquery include.
Here is the link to Jquery CDN