JQuery Autocomplete not working within current code - javascript

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?

Related

jquery - (...).autocomplete is not a function

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>

jQuery Appending text from an input into a div when a button is clicked

There's a good chance that might be a repeat question, but I couldn't find an answer that seemed to resolve my problem. I'm trying to make a jQuery bit where text is inputted into a text box, a button is clicked, and the text in the text box gets appended to a div. The end product is to make a game, but for now I'm just trying to make sure that the variable gets stored and put into the div. Here's my HTML
<!DOCTYPE html>
<html>
<head>
<title>Maybe a game maybe</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h2>Please enter your name.</h2>
<form name="userInput">
<input type="text" name="textInput"/>
</form>
<button id="confirm">Confirm</button>
<br/>
<div class="textOutput"></div>
</body>
</html>
Here's my CSS
h2 {
font-family:arial;
}
form {
display: inline-block;
}
.list {
font-family:garamond;
color:#cc0000;
}
And here's my jQuery
$(document).ready(function(){
$('#confirm').click(function() {
var playerName = $('input[name=textInput]').val();
$(".textOutput").append("<p>" + playerName + "</p>");
});
});
The idea is that text that gets inputted into the textInput box gets stored in the variable playerName. Then a <p> that contains playerName is appended to the .textOutput <div> when the confirm button is clicked. I'm using a Codecademy tutorial to help me confirm this. The code is almost exactly like the code in the tutorial. The only differences are the names of certain items, and the fact that the confirm button is a button and not a div. The code works perfectly fine in the tutorial, but when I try it in a normal editor, it doesn't work at all. I've even tried copying and pasting the exact code in the tutorial into my editor and still doesn't work. The editor I'm using is Sublime Text 2. I can't find what I'm missing here. Thank you very much in advance.
Please replace
<script type="text/javascript" src="script.js"></script>
with
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
and then try you code:
$(document).ready(function(){
$('#confirm').click(function() {
var playerName = $('input[name=textInput]').val();
$(".textOutput").append("<p>" + playerName + "</p>");
});
});
I presume you are saving it as text file.
You have to save the file as .html or .htm and wrap the script in <script> tag and wrap the css in <style> tag and then open it in a browser.
you need to include the jquery-library:
put e.g.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
inside the head-tag.
You do not have any jQuery libraries in the head tag.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
Your code works, as shown here. http://jsfiddle.net/haxtbh/2gMgQ/

jQuery datepicker not working at all

I have a very annoying problem with jQuery and the datepicker from jQuery-UI.
Here is my javascript code:
<script type="text/javascript">
/*<![CDATA[*/
<!--
$(function(){
$("#startdate").datepicker({dateFormat: 'dd.mm.yyyy'});
});
// -->
/*]]>*/
</script>
And here the HTML part:
<input type="text" name="tx_cal_controller[startdate]" id="startdate" readonly="readonly">
The necessary JavaScript libraries are included in the header:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://foo.bar/fileadmin/res/jquery-ui-1.8.17.custom.min.js?1328657226" type="text/javascript"></script>
But there is no datepicker when I click on the input field. I would really appreciate it, if anyone could give me a hint.
Thanks in advance.
I solved it. There was a problem with the div of the datepicker. I had to include my own jQuery-UI package and modify it, so that when the input field gets clicked, the z-index of the datepicker gets higher (>1000) than the one of the other content divs and therefore visible.

Get an alert box to popup at the jquery event $(document).ready in smarty template

I'm juuuuuust trying to get an pop up displaying test when the document is ready. I've managed to get google maps working on another page but somehow this is a lot of pain.
Here's the code:
<html>
<head>
[...]
<script type="text/javascript" href="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
{literal}
<script type="text/javascript">
$(document).ready(function () {
alert ("test");
});
</script>
{/literal}
</head>
[...]
</html>
What should I do to get that popup message? I also tried copy pasting from my working jquery page without much success.
Changing <script href=...> to <script src=...> works like a charm for me.
Does you javascript is enabled in your browser ?
You can type this:
$(function() {
alert("test");
});

populating first field in form with cursor

I'm designing a series of forms. Is there a way I can mark a field to be populated by the browsers cursor (just like this pages loads with the cursor already in the title field above).
Thanks
Giles
Use focus() function like this in Javascript. Put this code at the end of your HTML code, just before the </body> tag:
<script language="javascript" type="text/javascript">
document.getElementById("textboxid").focus();
</script>
Replace the textboxid with the ID of the <input> text box you are using in your form.
You can use Javascript to set your desired input focus:
Using JavaScript:
<script language="javascript" type="text/javascript">
document.getElementById("xtpo_1").focus();
</script>
Using a JavaScript Library like Jquery:
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#xtpo_1").focus();
});
</script>
Even better, write an function
function autoFocus(x){
document.getElementById(x).focus();
}
and put it in a separate javascript file called basic_functions.js or something.
Load that file at the top of your page in the header like this
<script type="text/javascript" src="basic_functions.js"></script>
In your body tag, call the function onload.
<body onload="focus('first_name')" >
Then create you input:
<input type='text' value='' name='first_name' id='first_name' />
That way you keep javascript functions out of your page and you can reuse the function on other pages. you can then put other basic functions like this in that file and include it in all pages where it is needed
In a HTML5 page, for browser supporting HTML5, you can do:
<input name="lorem" autofocus>
Vanilla Javascript:
<input id="lorem" name="lorem">
...
<script language="javascript" type="text/javascript">
document.getElementById("lorem").focus();
</script>
</body>
</html>
jQuery:
jQuery(document).ready(function($){
$('#email').focus();
});
Also you can do it in jQuery style and paste js-code anywhere:
HTML:
<input type="text" id="name"><br />
<input type="text" id="email">
Javascript:
jQuery(document).ready(function($){
$('#email').focus();
});
Check it online: http://www.jsfiddle.net/4d5JG/

Categories