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>
Related
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>
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 have a an HTML page with an input area and a submit button.
I am using jQuery to alert the user of what their input is. (Really I am trying to store that in a variable but that will be trivial once I get this working).
Can someone help me understand why it is not working, as well as a solution? Thanks.
The HTML form is as follows:
<html>
<head>
</head>
<body>
<form>
<input type="text" class="grid_size">
<button type="submit">Submit Me!</button>
</form>
<!-- Add jQuery -->
<script src="js/jquery.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
The custom jQuery I am using is this:
$(document).ready(function() {
$("form").submit(function() {
alert( grabUserInput )});
});
function grabUserInput() {
return $("form").find(".grid-size").val();
}
You named your class grid_size, and search for a class grid-size in javascript code.
This code should fix a typo:
$(document).ready(function() {
$("form").submit(function() {
alert( grabUserInput() );
});
});
function grabUserInput() {
return $("form").find(".grid_size").val();
}
Try this -- grabUserInput is a function, not a variable -- so you have to include () to invoke the function:
$(document).ready(function() {
$("form").submit(function() {
alert( grabUserInput() );
});
});
And your markup has to match your selector:
<input type="text" class="grid-size">
BONUS:
In case all you want is to alert the value, and you do not want to submit the form use the following:
$(document).ready(function() {
$("form").submit(function(e) {
e.preventDefault()
alert( grabUserInput() );
});
});
why not try to put some id
<input id="input_grid_size" type="text" class="grid_size">
<button id="button_submit" type="submit">Submit Me!</button>
and jq
$(document).ready(function() {
$("#button_submit").click(function() {
alert($('#input_grid_size').val()); }); });
it seem your code also forgot the ";" and "()" in the alert
I am getting problem while calling a function in included javascript library function daypilotMonth. It says undefined is not a function. I checked daypilot-all.min.js is loading correctly. I really can't figure out which other way is to do it. This is I am doing in ASP.NET mvc page.
Any help will be great. Thanks
<script src="#Url.Content(" ~/Scripts/jquery-1.10.2.js ")" type="text/javascript"></script>
<script src="#Url.Content(" ~/Scripts/daypilot-all.min.js ")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
dp = $("#dpm").daypilotMonth({
backendUrl: '#Url.Content("~/Schedule/Backend")',
eventMoveHandling: "CallBack",
eventResizeHandling: "CallBack",
timeRangeSelectedHandling: "JavaScript",
onTimeRangeSelected: function(start, end) {
dp.timeRangeSelectedCallBack(start, end, {
name: prompt('New Event Name:', 'New Event')
});
}
});
});
</script>
#using (Html.BeginForm()) {
<p>
<div style="margin:20%" id="dpm"></div>
</p>
}
#section Scripts { #Scripts.Render("~/bundles/jqueryval") }
I think the script not recognize
backendUrl: '#Url.Content("~/Schedule/Backend")'
try change to
backendUrl: #Url.Content("~/Schedule/Backend")
check you have correct syntax in javascript code. It might be some typo. For me it I made a typo. it should be
$("#ddlCustomer").val()
instead of
$(#ddlCustomer)
I'm trying to add Datepicker to my online form as part of my student assessment. I'm very new to all this and I'm having issues . I've downloaded and linked to my jquery UI and I've typed the code as per the jquery UI website states but the calendar doesn't pop up on my form when I click in the Date field like it suggests, I've also taken examples from this site but I still can't get it to work.
<head>
<link href="javascript/jquery-ui-1.10.3.custom/css/south-street/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<script src="javascript/jquery-ui-1.10.3.custom/js/jquery-1.9.1.js"></script>
<script src="javascript/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.js"></script>
<script>
function validate(){
date = document.getElementById("datePicker").value;
errors = "";
if (date == ""){
errors += "Please supply a valid DOB \n";
}
}
</script>
</head>
<body>
<form name= "myform" method="post" action="" class="booking">
<fieldset>
<div>
<label for="datePicker" class="fixedwidth">Date</label>
<input type="text" name="datePicker" id="datePicker"/>
</div>
</fieldset>
</body>
You need to call your code in ready or load function , or insert it to a function and call it in your main js file.
You have to have some jQuery code to initialize the datepicker, like
<script type="text/javascript">
$(function(){
$('#datePicker').datepicker();
});
</script>
Need to call datepicker on body load.
<script type="text/javascript">
$(document).ready(function(){
$("#datePicker").datepicker();
});
</script>
<script>
$(document).ready(function(){
$("#datePicker").datepicker();
});
function validate(){
date = document.getElementById("datePicker").value;
errors = "";
if (date == ""){
errors += "Please supply a valid DOB \n";
}
}
</script>
You are missing this code in your script
$(function() {
$( "#datepicker" ).datepicker();
});
First initialize the datepicker UI method.
$(document).ready(function(){
$("#datePicker").datepicker();
});
Since you are using jQuery, you get the value like
$("#datePicker").val();
Update:
To get the value after selecting it from datepicker
$(document).ready(function () {
$("#datePicker").datepicker({
onSelect: function (date) {
alert(date);
}
});
});
JSFiddle