jQuery autocomplete not functioning - javascript

I have spent many hours trying to figure out what is preventing the jQuery autocomplete function from working so would really appreciate any help. I am getting the following error in IE and a similar one in Chrome and Firefox:
JavaScript runtime error: Object doesn't support property or method 'autocomplete'
From what I have researched I understand that this is due to a js reference file but none of the solutions I have seen have worked. Here are the references to the js-ui and general js file:
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Custom data and display</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery-ui-1.11.4.js"></script>
</head>
And here is where I implement it:
<script type="text/javascript">
$(document).ready(function () {
$("#school").autocomplete ({
minLength: 2,
source: schools,
select: function (e, ui) {
e.target.value = ui.item.label;
$("#schoolValue").val(ui.item.value);
e.preventDefault();
}
});
</script>
<input id="school" class="register-field" placeholder="School" type="text" />
This has been driving me absolutely crazy so I again appreciate any help!

Try this:
<script type="text/javascript">
$(function () {
$("#school").autocomplete ({
minLength: 2,
source: schools,
select: function (e, ui) {
e.target.value = ui.item.label;
$("#schoolValue").val(ui.item.value);
e.preventDefault();
}
});
});
</script>
<input id="school" class="register-field" placeholder="School" type="text" />

Related

Autocomplete field with JSON data from external url (Steam API)

I am working on an input field that is autocompleted with names from this link(steam API):
http://api.steampowered.com/ISteamApps/GetAppList/v0002/?format=json
or
http://api.steampowered.com/ISteamApps/GetAppList/v0001
I would also like the field to return the id of the game despite the name being insered into it.
So far after browsing the forums I put together this but it doesn't quite work:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</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() {
$("#tags").autocomplete({
source: function (request, response) {
$.ajax({
url: "http://api.steampowered.com/ISteamApps/GetAppList/v0002/?format=json",
data: { query: request.term },
success: function (data) {
var transformed = $.map(data, function (el) {
return {
label: el.appid + " - " + el.name,
id: el.appid
};
});
response(transformed);
},
error: function () {
response([]);
}
});
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>
For the autocomplete part I chose to use jQuery autocomplete function: https://jqueryui.com/autocomplete/ however I am open to other methods.
Edit: Fixed syntax error on line 31 but the code still isn't working.
JSFiddle: https://jsfiddle.net/vxej2L5g/
In the success block you are assigning a label and id. In the label you have assigned name, and in id the appid. We can modify this to format the label like this:
success: function (data) {
var transformed = $.map(data, function (el) {
return {
label: el.appid + " - " + el.name,
id: el.appid
};
});
response(transformed);
},
There is a syntax error in your Javascript on line 31 (basically you have an extra closing parenthesis and semicolon).
The JSON response for the API you are calling wraps the list of apps.

why isn't my jQuery working when I try to fetch a tag by Id?

I'm trying to fetch and listen to an event on form tag by id, but the jQuery isn't working and I got no errors...
var socket = io();
socket.on('connect', function() {
console.log('connected to server');
});
socket.on('newMessage', function(data) {
console.log('message', data);
});
socket.on('changeParagraph', function(data) {
document.getElementsByTagName('h1')[0].innerHTML = data
});
console.log('jQuery:', jQuery("#message-form"));
jQuery("#message-form").on('submit', function(e) {
e.preventDefault();
socket.emit('createMessage', {
from: 'User Q',
msg: 'test message!'
});
});
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Chat App</title>
</head>
<body>
<script src="/js/libs/jquery-3.3.1.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/js/index.js">
</script>
<h1>Welcome to the chat app! :)</h1>
<form id="message-form">
<input type="text" name="message" placeholder="Message" />
<button type="submit">send message</button>
</form>
</body>
</html>
what am I missing here the console.log(jQuery('#message-form')) return a really big object like
w.fn.init {} proto: Object(0)
and a bunch of other stuff in it... but not the form that I want...
what am I missing here??
thank you in advance for the answers.
as #jmoerdyk mentioned, you need to run your jQuery selector after the form has been defined, either by including your code at the bottom of the body tag or wrapping your jquery in the ready handler, like:
jQuery(function($) { // runs onready, aliases jQuery as '$' in this func
$("#message-form").on('submit', function(e) {
e.preventDefault();
socket.emit('createMessage', {
from: 'User Q',
msg: 'test message!'
});
});
});
what you are seeing in your console log is the entire jQuery object, even though it didn't match any elements.

Jquery autocomplete is not a function

I am trying to implement JQuery's autocomplete function into an input field on a website. The inspector is giving me an error that says:
"Uncaught TypeError: $(...).autocomplete is not a function".
I believe the problem might have to do with the order of my script tags but so far everything I have tried has not worked. Here is my content:
<head>
<title></title>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet">
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
</head>
<body>
<script type="text/javascript">
var schools = new Array();
$(document).ready(function () {
$("#school").autocomplete ({
minLength: 2,
source: schools,
select: function (e, ui) {
e.target.value = ui.item.label;
$("#schoolValue").val(ui.item.value);
e.preventDefault();
}
});
</script>
</body>
You haven't define any element with school id. Check below working code to compare with your own.
var schools = ['abc', 'xyz'];
$(document).ready(function() {
$("#school").autocomplete({
minLength: 2,
source: schools,
select: function(e, ui) {
e.target.value = ui.item.label;
$("#schoolValue").val(ui.item.value);
e.preventDefault();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<title></title>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<label for="school">Tags:</label>
<input id="school">
</body>
In the code above doesn't look like you are closing the ready function correctly.
<head>
<title></title>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet">
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
</head>
<body>
<script type="text/javascript">
var schools = new Array();
$(document).ready(function () {
$("#school").autocomplete ({
minLength: 2,
source: schools,
select: function (e, ui) {
e.target.value = ui.item.label;
$("#schoolValue").val(ui.item.value);
e.preventDefault();
}
});
});
</script>
</body>
The code seems to work but you need to initialize your array of schools. See running example below.
Also remember, you need to type at least two letters for the drop down to appear.
var schools = ['aaaaa', 'bbbbb', 'cccccc', 'ddddd'];
$(document).ready(function() {
$("#school").autocomplete({
minLength: 2,
source: schools,
select: function(e, ui) {
e.target.value = ui.item.label;
$("#schoolValue").val(ui.item.value);
e.preventDefault();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet">
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
Search school
<input id="school" type="text">
<br/><br/>School selected
<input type="text" id="schoolValue" />
Looks like it could be a race condition, meaning that the jquery script hasn't finished loading by the time you start trying to use it. You have document ready, which is good, but that only checks that the DOM is ready, not that asynchronously loaded scripts are done loading.
There are some answers to this here and elsewhere : How to make script execution wait until jquery is loaded
But in short, you can defer your method execution until window.jQuery returns true, try $( window ).load or you can use something like require.js to do it for you. You should also touch up your script tags:
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

jQuery UI Autocomplete in ASP.NET MVC 4 does not work

I'm deploying autocomplete jQueryUI in ASP.NET MVC 4 but it wasn't working perfectly. When I typed a name of Bike, it displays an error like this parsererror. Here's my simply code:
public JsonResult GetAutoComplete(string modelname)
{
var result = db.Products;
var search = result.Where(p => p.Name.ToLower().Contains(modelname.ToLower())).ToList();
return this.Json(result, JsonRequestBehavior.AllowGet);
}
Index.cshtml:
<script type="text/javascript">
//Javascript function to provide AutoComplete and Intellisense feature for finding Users.
$(document).ready(function () {
$("#Name").autocomplete({
source: '#Url.Action("", "StoreManager")'
});
});
</script>
<p>
Search the Name of Bikes #Html.TextBox("Name")
<input type="submit" value="Submit" id="GetName" />
</p>
Does anyone can tell me where I'm doing something wrong ? I just updated my code.
try this it may helpful to you.
<script src="../../Scripts/jquery-1.8.3.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#Name').autocomplete({
source: '#Url.Action("GetAutoComplete")',
minLength: 3,
select: function (evt, ui) {
}
});
});
</script>

javascript: Getting "DOM Exception 9" while creating custom event

I'm using PhoneGap to develop an android app. in the index.html I load a js file like this:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles/style.css" />
<link rel="stylesheet" href="styles/loading.css" />
<script src="scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="scripts/cordova-2.5.0.js"></script>
<script type="text/javascript" src="scripts/readImages.js"></script>
<script type="text/javascript">
function onReadImage(event) {
//do something
}
document.addEventListener("onReadImage", onReadImage, false);
</script>
</head>
<body>
<!--
.....
-->
</body>
</html>
readImages.js
// Some codes
window.readImageEvent= document.createEvent("readImageEvent"); // line 4
readImageEvent.initEvent("onWeddingCakesRead", true, true);
//Some functions
readImageEvent.images = data;
document.dispatchEvent(readImageEvent);
but when I check LogCat, I see this error:
Uncaught Error: NOT_SUPPORTED_ERR: DOM Exception 9 at file:///android_asset/www/scripts/readImages.js: 4
Any ideas?
finally I found out the problem.
I changed the below code:
window.readImageEvent= document.createEvent("readImageEvent");
to:
window.readImageEvent= document.createEvent("Event");
Because "readImageEvent" is not a proper event type. This link could be so useful
about this issue.
According to developer.mozilla.org
The createEvent method is deprecated.
I guess, you can try something like this:
var readImageEvent = new CustomEvent(
"onReadImage",
{
detail: {
images: data
},
bubbles: true,
cancelable: true
}
);
document.dispatchEvent(readImageEvent);
More information about usage, compatibility, etc can be found HERE

Categories

Resources