In my project im jusing jQuery 3.5.1 and this code doesn't work with that version. My question is, if it is possible to convert this code to be usable with jQuery 3.5.1 This is probably a stupid question but I'm pretty new to jquery...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Multiple values</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#tags" )
// don't navigate away from the field on tab when selecting an item
.on( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).autocomplete( "instance" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter(
availableTags, extractLast( request.term ) ) );
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( ", " );
return false;
}
});
} );
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tag programming languages: </label>
<input id="tags" size="50">
</div>
</body>
</html>
This code isn't mine I got it from: https://jqueryui.com/autocomplete/#multiple I made a JSFiddle with 3.5.1 to show you the error it gives: https://jsfiddle.net/cm3thL0r/
Index:
<html>
<head>
<?php
include "includes/include.php";
?>
<style>
a {
/* Styles for anchors without href */
cursor:pointer;
}
</style>
<title>Kenniscentrum</title>
</head>
<body>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div class="body">
<div class="w-75 mx-auto mt-3">
<?php
echo "<form method='post' id='backToMain' action=''>";
echo "</form>";
echo "<form method='post' id='backToSub'>";
echo "<input type='hidden' name='rubriek' value='".$_POST['rubriek']."'>";
echo "</form>";
if(isset($_POST['rubriek'] , $_POST['subrubriek'])){
echo "<a class='text-primary' ";
?>onclick="document.getElementById('backToMain').submit();"<?php
echo " >Rubrieken > </a>";
echo "<a class='text-primary' ";
?>onclick="document.getElementById('backToSub').submit();"<?php
echo " >Sub-Rubrieken > </a>"; echo "Artikel";
}
else if(isset($_POST['rubriek'])){
echo "<a class='text-primary' ";
?>onclick="document.getElementById('backToMain').submit();"<?php
echo " >Rubrieken > </a> Sub-Rubrieken";
}
else if(!isset($_POST['subrubriek'])){
echo 'Rubrieken';
}
?><button class="btn btn-success float-right mr-3" data-bs-toggle="modal" data-bs-target="#modalCreate">Nieuw</button>
</div>
<table id="example" class="mt-3 w-75 table table-striped table-bordered mx-auto">
<th>Naam</th>
<?php
if(isset($_POST['rubriek'] , $_POST['subrubriek'])){
getAllArtikel();
}
else if(isset($_POST['rubriek'])){
getAllSubRubriek();
}
else if(!isset($_POST['subrubriek'])){
getAllRubriek();
}
?>
</table>
</div>
<?php
include "includes/Modals/modal.php";
include "includes/Modals/modalEdit.php";
include "includes/Modals/modalEditRubriek.php";
include "includes/Modals/modalEditSubrubriek.php";
include "includes/Modals/modalDelete.php";
include "includes/Modals/modalDeleteRubriek.php";
include "includes/Modals/modalDeleteSubrubriek.php";
include "includes/Modals/modalCreate.php";
?>
<script src="includes/script.js"></script>
</body>
</html>
includes:
<?php
include "dbconn.php";
include "phpFunctions.php";
?>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
Some parts might be dutch sorry about that....
As you can see all work with jquery 3.5, i just change <script src="https://code.jquery.com/jquery-1.12.4.js"></script> with cdn of 3.5
$( function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#tags" )
// don't navigate away from the field on tab when selecting an item
.on( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).autocomplete( "instance" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter(
availableTags, extractLast( request.term ) ) );
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( ", " );
return false;
}
});
} );<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Multiple values</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tag programming languages: </label>
<input id="tags" size="50">
</div>
</body>
</html>