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>
Related
I need to create charts on a website.
In my HTML code i have created a div with an ID.
This is my HTML code :
<script src="/js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/styles/jquery.jqplot.min.css" />
<script language="javascript" type="text/javascript" src="/js/jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript" src="/js/graph.js"></script>
<body>
<div id="graph" style="height:400px;width:300px;></div> //i want to have my chart here
</body>
In the js code i have only wrote an exemple from the official website of jqPlot :
$(document).ready(function() {
var chart_data = [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]];
var chart_opt = {
title:'Graph',
axes:{yaxis:{min:-10, max:240}},
series:[{color:'#5FAB78'}]
};
$.jqplot('graph', chart_data, chart_opt);
});
So my problem is that i have an error on the browser's console : $.jqplot is not a function
Any idea ?
You are getting this error because you have the jqplot inside the $(document).ready(function(). Try something like this.
$(document).ready(function(){
GetChart();
});
function GetChart(){
var chart_data = [[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]];
$('#graph').jqplot([chart_data], {
title:'Default Bar Chart',
seriesDefaults:{
renderer:$.jqplot.BarRenderer
},
axes:{
xaxis:{
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
}
Here is a working example - https://jsfiddle.net/xrnfqax3/
For this example to work, you will need to add the following references to your project-
jquery.min.js
jquery.jqplot.js
jquery.jqplot.css
jqplot.barRenderer.js
jqplot.barRenderer.min.js
jqplot.categoryAxisRenderer.js
jqplot.categoryAxisRenderer.min.js
Make sure that jquery-*.js order is before jqPlot.js.
and use language="javascript" type="text/javascript" on all scripts tag.
Best Regards
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" />
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>
I have trouble adding a personal javascript file in my option.html for my google-chrome extension.
I've added this line to my options.html:
<script type="text/javasctipt" src="/js/content/toto.js"></script>
And the object $.toto, described in this file is unreachable.
I would like to know if it's possible to add a personal js file and how or if you have to do everything in the options.js ?
Thank in advance for your answers.
Here is a part of the code as the project is already large:
options.html:
<!DOCTYPE html>
<html lang="fr">
<body>
<script type="text/javascript" src="/js/lib/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/js/lib/sprintf-0.6.js"></script>
<script type="text/javascript" src="/js/lib/bootstrap/bootstrap-modal.js"></script>
<script type="text/javascript" src="/js/shared/constant.js"></script>
<script type="text/javascript" src="/js/shared/storage.js"></script>
<script type="text/javasctipt" src="/js/content/toto.js"></script>
<script type="text/javascript" src="/js/content/messages.js"></script>
<script type="text/javascript" src="/js/content/debug.js"></script>
<script type="text/javascript" src="/js/content/form.js"></script>
<script type="text/javascript" src="/js/content/base.js"></script>
<script type="text/javascript" src="/js/content/options.js"></script>
</body>
</html>
options.js:
$.options = $.extend({}, $.base, {
ready: function() {
// onMessage
chrome.extension.onMessage.addListener(this.onMessage);
// init events
$("#logout_btn").live("click",function() {
$.options.logout();
});
// init ui
$.toto.initialize();
this.displayCorrectContext();
this.initMailPrescrip();
}
});
toto.js:
$.toto = $.extend({}, $.base, {
TAG: "MESSAGES",
ready: function() {
$("[title-message]").each(function() {
var txt = chrome.i18n.getMessage($(this).attr("title-message"));
$(this).attr('title', txt);
});
$("[data-message]").each(function() {
var txt = chrome.i18n.getMessage($(this).attr("data-message"));
$(this).html(txt);
});
},
log: function(message) {
$.base.log($.messages.TAG,message);
}
});
Use .ready event like this.
jQuery(document).ready(function(){
// jquery function code
});
In the manifest.json, try adding it in the "scripts" line, like so:
"app": {
"background": {
"scripts": ["exampleReference1.js", "exampleReference2.js", "toto.js"],
"transient": true
}
},
Hope it works.
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