I'm currently working on a web application.
There, I created a Textbox (Works with jquery autocomplete) which shows up when the user clicks on a button.
Then I want to load the needed source for autocomplete from my database. But I'm currently testing it with some random values.
When I call this:
$("#docNameTB").autocomplete({
source: ["Apple", "Banana"]
});
The console says: "Uncaught TypeError: $(...).autocomplete is not a function"
Here are my script sources:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Here's my event code:
function nextClicked() {
$("#docNameTB").autocomplete({
source: ["Apple", "Banana"]
});
}
And here's my Textbox:
#Html.TextBox("docNameTB", "", new { #class = "form-control", #placeholder="Enter name here" })
Here's my button Press code:
<a class="btn btn-default" id="nextButton" onclick="nextClicked()">Next »</a>
The solution of this question didn't work for me.
I only use the google places script source too and this is not a problem (I have tested it already):
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&libraries=places"></script>
Sry for my bad English and my formatting this is my first question.
:)
I hope somebody can help me!
Thanks for your reply!
I searched for another 3 hours in the Internet and I read, read and read.
And now I created my own solution, that worked for me. The trick was that I had to run autocomplete() on page load AND on button click.
Here's the Page load code:
var docNameTB = $("#docNameTB");
docNameTB.autocomplete({
source: ["Banana", "Apple"]
});
and here's the button click event code:
function nextClicked() {
docNameTB.autocomplete({
source: ["Peach", "Ananas"]
});
// Other Code
}
Maybe this is gonna help somebody too :)
Try this
HTML Part
<input type="text" class="form-control" onkeydown="nameSearch()" id="searchBox" placeholder="Search">
JS PART
function nameSearch()
{
$("#searchBox").autocomplete({
source : ["Apple", "Banana"],
});
}
Use this Sequences
<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>
<script src="yourJSFile"></script>
Use Jquery and Jquery UI CDn or Link at the head section
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
Related
Quick background:
I got a project that some developer worked on a couple of years ago and his code is a nightmare, let alone that almost all the software is outdated. The JQuery in the project is still 1.5.2 but I was able to work around that using the non-conflict option of JQuery.
However, I still can't seem to make the change() function work properly - it fires when the page is being loaded. Furthermore, for some strange reason, the On() function doesn't work either.
Here's the code (below the body):
jQuery_3_2_1(document).ready(function(){
jQuery_3_2_1("input[id^=DepartureDay]").on('change',alert('dd'));
And here's the non-conflict function (if it's relevant):
<script type="text/javascript">
var jQuery_3_2_1 = $.noConflict(true);
</script>
I don't know if it's relevant, but wired thing about the code is that the previous programmer decided load all the HTML using JS strings. Another thing that I should note is that I'm trying to detect a change in the value of a uikit datepicker.
Thank you for your help!
I add a fiddle:
https://jsfiddle.net/vzeuhohm/1/#&togetherjs=Sietj3k5oM
Another edit:
https://jsfiddle.net/vzeuhohm/2/
Another edit:
I attach the full code in the hope that someone would be able to understand what is wrong with it -
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="uikit.docs.min.css" type="text/css">
<script language="javascript" src="https://getuikit.com/v2/vendor/jquery.js"></script>
<script language="javascript" src="https://getuikit.com/v2/docs/js/uikit.min.js"></script>
<script language="javascript" src="https://getuikit.com/v2/src/js/components/datepicker.js"></script>
<link href="example160/css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="example160/js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="example160/js/jquery.autocomplete.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.slim.js"></script>
<script type="text/javascript">
var jQuery_3_2_1 = $.noConflict(true);
</script>
<script type="text/javascript">
jQuery_3_2_1(document).ready(function(){
jQuery_3_2_1("[id^=DepartureDay]").ready(function(){
jQuery_3_2_1("[id^=DepartureDay]").on('input',function(e){
alert('ff');
});
});
});
</script>
</head>
<body>
<form method="post">
<input type="text" name="DepartureDay1" id="DepartureDay1" data-uk-datepicker="{format:'DD.MM.YYYY'}" placeholder="mm/dd/yyyy" />
</form>
<div>TODO write content</div>
</body>
</html>
You're trying to use the result of calling alert('dd') as the change handler.
You probably want to wrap the alert in a function, and pass that function as the handler instead:
jQuery_3_2_1("input[id^=DepartureDay]").on("change", function() {
alert("dd");
});
Instead of using $(document).ready(), try using
$(window).on('load', function() {
$("input[id^=DepartureDay]").on('change',alert('dd');
});
EDIT
var jQuery_3_2_1 = $.noConflict(true);
jQuery_3_2_1(document).ready(function(){
jQuery_3_2_1('[id^=DepartureDay]').on('input', function(){alert('dd');});
});
Instead of .on('change'..., use .on('input'...).
You also have to say function(){alert('dd');} instead of just alert('dd').
try following code
textbox change event doesn't fire until textbox loses focus.
that's why i am posting both example
jQuery_3_2_1(document).ready(function(){
jQuery_3_2_1("input[id^='DepartureDay']").on("change", function() {
alert("your change event is working !!!");
});
});
jQuery_3_2_1("input[id^='DepartureDay2']").on('change keyup paste', function() {
console.log('your change/keyup event is working !!!');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js">
</script>
<script type="text/javascript">
var jQuery_3_2_1 = $.noConflict(true);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
<input type="text" name="DepartureDay" id="DepartureDay" />
<input type="text" name="DepartureDay2" id="DepartureDay2" />
</form>
I know this question may be stupid, but I'm new to JQuery and failed to guess (even after hard search at Google) Why My Function failed to Show me Alert on Click Event of Button, (I'm trying to do more tasks but for debugging purpose I'm showing alert).
<!DOCTYPE html>
<html>
<head>
<title>WebSite Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
$(document).ready(function(){
$('#foo').click(function(){
alert('ggg');
});
});
</script>
</head>
<body>
<input type="button" name="" value="Get Data" id="foo">
</body>
</html>
As #Pranav mentioned, you should separate the scripts, so each can work.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#foo').click(function() {
alert('ggg');
});
});
</script>
I'm Totally Agreed with Answers of above two users, You have to Put Your Code away from the tags referencing the Libraries, What you need to do is place your logical code may be of Javascript or JQuery in Another Script Tags
I am using autocomplete with mysql to look up possible matches from a database...
It works if I empty the page out completely... but doesn't work once I add my page content...
I am getting no errors in the console either..
This is where I add the JS libraries
<script src="templates/bower_components/jquery-1.6.2.js"></script>
<script src="templates/bower_components/ui/jquery.ui.core.js"></script>
<script src="templates/bower_components/ui/jquery.ui.widget.js"></script>
<script src="templates/bower_components/ui/jquery.ui.position.js"></script>
<script src="templates/bower_components/ui/jquery.ui.autocomplete.js"></script>
<script src="templates/bower_components/modernizr/modernizr.js"></script>
and this is my autocomplete function...
<script type="text/javascript">
$(document).ready(function() {
$("#tags").autocomplete({
source: "templates/search2.php?field=sire",
minLength: 5
});
});
</script>
And this is my text box
<input type="text" class="input tiny search-term" name="proposeddam" id = "tags">
I have added an alert box within the function but it never seems to be called..
Any suggestions?
I just started with Jeditable and for 3 hours now it seems I can't figure it out. This tutorial should have been piece of cake:
http://www.appelsiini.net/projects/jeditable
, but it turned out to be a little pain in the a$$. I've put the jquery.js and jquery.jeditable.js in the same directory with the main page. This is my code (it seems like the code tags won't do the trick, so I'll give you only the important blocks):
the header contains
<script type="text/JavaScript"
src="jquery.js"></script>
<script type="text/JavaScript"
src="jquery.jeditable.js"></script>
<script type="text/JavaScript"
$(document).ready(function() {
$('.edit').editable('#');
});
and the body of my html contains:
<div class="edit" id="div_1">Edit me</div>
And that's about it. It should give me an editable form when I click the "Edit me", but nothing happens. Where do I go wrong ? Thanks in advance.
I don't know if this is a typo in the question or your actual code but check this line:
<script type="text/JavaScript"
$(document).ready(function() {
$('.edit').editable('#');
});
it should be
<script type="text/JavaScript">
$(document).ready(function() {
$('.edit').editable('#');
});
</script>
Are you trying to send the ajax to the same page you are on? If so, replace the '#' with window.location.href and you should be good to go.
I am trying out jqueryUI, but firebug catches the following error on this script:
$(function(){$("#date").datepicker()});
The firebug error reads:
$("#date").datepicker is not a function
On my html, the "date" id looks like this:
<input type="text" name="date" id="date" >
NB: I have used the correct JqueryUI css/js scripts on the section
Nothing is executing...
jQuery documentation says you can call the datepicker by this command:
$("#datepicker").datepicker();
If you click the 'view source' button on the documentation page you can see that they've wrapped it into the ready function:
$(document).ready(function(){
$("#datepicker").datepicker();
});
EDIT: It should work with INPUT (thanks for pointing this out Steerpike). This is the test I've written and it works, try it yourself:
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<input type="text" id="datepicker" value="this is a test">
</body>
</html>
You're almost certainly not loading the datepicker plugin properly. Please supply us the code you're using to include the javascript files.
If you keep having problems, load the jquery and the UI from the google api.
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.0");
</script>
for me it was just case of making sure the jquery ui was the last one in the list of all the js includes.
$(document).ready(function(){
// Your code here
});
make sure your function is inside the .ready main function.
It's an old post but I got here when looking for a solution so people still read it ;) I have or rather had the same problem. In my case it turned out that I was attaching js in html in wrong way (notice in what way I was ending script tag)
WRONG: <script type="text/javascript" src="/fbo/js/jquery-ui-1.8.14.custom.min.js"/>
GOOD: <script type="text/javascript" src="/fbo/js/jquery-ui-1.8.14.custom.min.js"></script>
When I was doing it in the wrong way I had the same error.
You are probably loading prototype.js or another library that uses $ as an alias.
Try to replace $ with jQuery.