#model IEnumerable<ModelClass.DhoniRegistry>
#using (#Html.BeginForm())
{
<b> Dhoni Name </b>
#Html.TextBox("SearchTerm", null, new { id = "txtSearch" })
<input type="submit" value="Search" />
}
<link href="~/Content/jquery-ui.min.css" rel="stylesheet" />
<link href="~/Content/jquery-ui.structure.min.css" rel="stylesheet" />
<link href="~/Content/jquery-ui.theme.min.css" rel="stylesheet" />
<script src="~/Scripts/external/jquery/jquery.js"></script>
<script src="~/Scripts/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(function ()
{
$("#txtSearch").autocomplete({ source: '#Url.Action("ASDhoniName")' });
});
</script>
Controller
public JsonResult ASDhoniName(string SearchTerm)
{
DhoniRegistryBusinessSer dhoniBisSer = new DhoniRegistryBusinessSer();
List<string> dhoniReg;
dhoniReg = dhoniBisSer.ListDhoniRegistry().Where(x => x.DhoniName.StartsWith(SearchTerm))
.Select(y => y.DhoniName).ToList();
return Json(dhoniReg,JsonRequestBehavior.AllowGet);
}
You're missing/wrongly placed jQuery/ jQuery UI.js/ autocomplete.js files.
Also you have added two copies of jquery-ui. Remove one.
Here's the order to include files
jQuery.js
jQuery UI.js
autocomplete.js
Add the following before autocomplete
<script src="http://code.jquery.com/jquery-1.9.1.js />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" />
Related
I am using jquery-modal by kyle fox and am encountering this issue. When I open up the modal window, my partial view is loaded into the modal. However, I get this error in the console:
Dropzone.options.dropzone is not a function
If i change Dropzone.options.dropzone into $(#dropzone).dropzone, the code works. However, when I submit, it doesn't upload the files to the server but just redirects me to the home page.
I already loaded dropzone js and css in the header but I can't seem to get this to work.
#model AppOne.Data.ViewModels.AnnouncementAttachmentDetailsViewModel
<script>
Dropzone.options.dropzone({
url: "#Url.Action("Save", "AnnouncementAttachments", new { area = "Messages" })",
autoProcessQueue: false,
addRemoveLinks: true,
maxFiles: 1,
uploadMultiple: true,
parallelUploads: 100,
init: function () {
console.log("active");
var submitButton = document.querySelector("#submit");
var token = $('input[name="__RequestVerificationToken"]').val();
var wrapperThis = this;
submitButton.addEventListener("click", function (e) {
console.log("submitted");
wrapperThis.processQueue();
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
});
this.on('sendingmultiple', function (data, xhr, formData) {
formData.append("__RequestVerificationToken", token);
formData.append("#Html.IdFor(x=>x.AttachmentId)",$("##Html.IdFor(x => x.AttachmentId)").val())
});;
this.on('errormultiple', function (file, message) {
//toastr.error(message);
wrapperThis.disable();
});
this.on('successmultiple', function (file,message) {
$.each(message, function (key, value) {
//toastr.success(value);
});
$(".dz-remove").hide();
wrapperThis.disable();
});
}
});
</script>
<div class="row row-extend">
<div class="col-sm-12">
<h2>Upload</h2>
</div>
<div class="col-sm-12">
<hr />
</div>
</div>
#using (Html.BeginForm(null, null, FormMethod.Post, new { #action = "/", enctype = "multipart/form-data", id = "modal" }))
{
#Html.AntiForgeryToken()
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
#Html.HiddenFor(x => x.AttachmentId)
<div id="dropzone" name="Files" class="dropzone form-group"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<hr />
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<div class="clearfix">
<div class="pull-right">
<button type="submit" id="submit" class="btn btn-primary">Upload</button>
#Html.ActionLink("Cancel", "Index", #ViewContext.RouteData.Values["controller"].ToString(), new { }, new { #class = "btn btn-outline-secondary" })
</div>
</div>
</div>
</div>
</div>
</div>
}
EDIT:
My layout.cshtml:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - AppOne</title>
<link rel="stylesheet" href="~/twitter-bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/theme/theme-extended.css" />
<link rel="stylesheet" href="~/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="~/jqueryui/jquery-ui.css" />
<link rel="stylesheet" href="~/toastr.js/toastr.css" />
<link rel="stylesheet" href="~/jquery-modal/jquery.modal.css" />
<link rel="stylesheet" href="~/select2/css/select2.min.css" />
<link rel="stylesheet" href="~/css/Modal.css" />
<link rel="stylesheet" href="~/css/Site.css" />
<link rel="stylesheet" href="~/datatables/css/jquery.dataTables.css" />
<link rel="stylesheet" href="~/datatables/css/select.dataTables.css" />
<link rel="stylesheet" href="~/datatables/css/fixedHeader.dataTables.css" />
<link rel="stylesheet" href="~/datatables/css/responsive.bootstrap.css" />
<link rel="stylesheet" href="~/css/DataTablesExtended.css" />
<link rel="stylesheet" href="~/bootstrap-datetimepicker/bootstrap-datetimepicker.css" />
<link rel="stylesheet" href="~/dropzone/dropzone.css" />
<script src="~/jquery/jquery.min.js"></script>
<script src="~/jquery-validate/jquery.validate.js"></script>
<script src="~/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<script src="~/jqueryui/jquery-ui.js"></script>
<script src="~/twitter-bootstrap/js/bootstrap.js"></script>
<script src="~/moment.js/moment.min.js"></script>
<script src="~/select2/js/select2.min.js"></script>
<script src="~/toastr.js/toastr.min.js"></script>
<script src="~/jquery-modal/jquery.modal.min.js"></script>
<script src="~/datatables/js/jquery.dataTables.js"></script>
<script src="~/datatables/js/dataTables.select.js"></script>
<script src="~/datatables/js/dataTables.fixedHeader.js"></script>
<script src="~/datatables/js/dataTables.responsive.js"></script>
<script src="~/datatables/js/responsive.bootstrap.js"></script>
<script src="~/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
<script src="~/dropzone/dropzone.js"></script>
#RenderSection("scripts", false)
#RenderSection("styles", false)
</head>
However, when I submit, it doesn't upload the files to the server but just redirects me to the home page.
It seems that your Upload button is in the form , and the url of form conflicts with the url of Dropzone.js (the url has to be specified on elements other than form (or when the form doesn't have an action attribute).).Try to make the modification like the working example below :
Html.BeginForm , remove the action
#using (Html.BeginForm( FormMethod.Post, new { enctype = "multipart/form-data", id = "modal" }))
{
// the stuff you want
}
Dropzone.js , NOTE: If you have the option uploadMultiple set to true, then Dropzone will append [] to the paramName. After looking at the request from a html5 multiple file upload I noticed the request does not add the indexes to the filename (files[n]). Dropzone.js does this so there is a work around. If you add the paramName option to Dropzone JS config and have it call a method which returns files you will get the same behaviour as the html5 multiple file upload. You could also refer to this link for more details on Configuration options of Dropzone.js
#section Scripts
{
<script>
function myParamName() {
return "Files";
}
$("#dropzone").dropzone({
url: "#Url.Action("Save", "Home")",
autoProcessQueue: false,
paramName: myParamName,
addRemoveLinks: true,
maxFiles: 1,
uploadMultiple: true,
parallelUploads: 100,
init: function () {
console.log("active");
var submitButton = document.querySelector("#submit");
var token = $('input[name="__RequestVerificationToken"]').val();
var wrapperThis = this;
submitButton.addEventListener("click", function (e) {
console.log("submitted");
wrapperThis.processQueue();
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
return false;
});
this.on('sendingmultiple', function (data, xhr, formData) {
formData.append("__RequestVerificationToken", token);
formData.append("#Html.IdFor(x=>x.AttachmentId)",$("##Html.IdFor(x => x.AttachmentId)").val());
});;
}
});
</script>
}
Controller
public IActionResult Save(List<IFormFile> Files,int AttachmentId)
{
//....
}
I keep getting the following error when I try to create a Grid or a Chart using Kendo UI. A simple ComboBox will work, though. We are using the commercial lisence and downloaded the js and css from Telerik's website while authenticated.
Uncaught ReferenceError: kendo is not defined
Uncaught ReferenceError: $ is not defined
Config: _Layout.cshtml
<head>
<environment names="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet"
href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common-bootstrap.min.css"
asp-fallback-href="~/lib/kendo-ui/styles/kendo.common-bootstrap.min.css"
asp-fallback-test-class="k-common-test-class"
asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
<link rel="stylesheet"
href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.bootstrap.min.css"
asp-fallback-href="~/lib/kendo-ui/styles/kendo.bootstrap.min.css"
asp-fallback-test-class="k-theme-test-class"
asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
</head>
<environment names="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/lib/kendo-ui/js/kendo.all.min.js"></script>
<script src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment names="Staging,Production">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous"
integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
crossorigin="anonymous"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa">
</script>
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"
asp-fallback-src="~/lib/kendo-ui/js/kendo.all.min.js"
asp-fallback-test="window.kendo">
</script>
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.aspnetmvc.min.js"
asp-fallback-src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"
asp-fallback-test="kendo.data.transports['aspnetmvc-ajax']">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
_ViewImports.cshtml
#using Microsoft.AspNetCore.Identity
#using Kendo.Mvc.UI
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
View.cshtml
<div class="invoice-charts-container">
<h3>Invoice History Week Totals</h3>
<div class="demo-section k-content wide">
#(Html.Kendo().Chart()
.Name("chart")
.HtmlAttributes(new { style = "height: 400px;" })
.Title("Site Visitors Stats /thousands/")
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.SeriesDefaults(seriesDefaults => seriesDefaults
.Column().Stack(true)
)
.Series(series =>
{
series.Column(new double[] { 56000, 63000, 74000, 91000, 117000, 138000 }).Name("Total Visits");
series.Column(new double[] { 52000, 34000, 23000, 48000, 67000, 83000 }).Name("Unique visitors");
})
.CategoryAxis(axis => axis
.Categories("Jan", "Feb", "Mar", "Apr", "May", "Jun")
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis
.Numeric()
.Line(line => line.Visible(false))
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0}")
)
)
</div>
<div class="box wide">
<div class="box-col">
<h4>API Functions</h4>
<ul class="options">
<li>
<input id="typeColumn" name="seriesType"
type="radio" value="column" checked="checked" autocomplete="off" />
<label for="typeColumn">Columns</label>
</li>
<li>
<input id="typeBar" name="seriesType"
type="radio" value="bar" autocomplete="off" />
<label for="typeBar">Bars</label>
</li>
<li>
<input id="typeLine" name="seriesType"
type="radio" value="line" autocomplete="off" />
<label for="typeLine">Lines</label>
</li>
<li>
<input id="stack" type="checkbox" autocomplete="off" checked="checked" />
<label for="stack">Stacked</label>
</li>
</ul>
<p>
<strong>refresh()</strong> will be called on each configuration change
</p>
</div>
</div>
<script>
$(document).ready(function() {
$(".options").bind("change", refresh);
$(document).bind("kendo:skinChange", updateTheme);
});
function refresh() {
var chart = $("#chart").data("kendoChart"),
series = chart.options.series,
type = $("input[name=seriesType]:checked").val(),
stack = $("#stack").prop("checked");
for (var i = 0, length = series.length; i < length; i++) {
series[i].stack = stack;
series[i].type = type;
};
chart.refresh();
}
function updateTheme() {
$("#chart").getKendoChart().setOptions({ theme: kendoTheme });
}
</script>
</div>
Here is where the error occurs in the DOM:`
Uncaught ReferenceError: kendo is not defined
<script>kendo.syncReady(function(){jQuery("#chart").kendoChart(
Uncaught ReferenceError: $ is not defined
<script>
$(document).ready
(function() {
$(".options").bind("change", refresh);
$(document).bind("kendo:skinChange", updateTheme);
});
EDIT - It seems the javascript files are loaded but the errors are happening anyway:
When I had this problem, after upgrading an existing project to 2017.2.504, it was because I had my scripts defined in the body... Like you.
They have to be in the head. Here's the response I got from support:
kendo.syncReady was introduced to address a major issue with jQuery 3.1.1 and the way Kendo UI widgets are generated on the client when using the MVC wrappers. This change, however, requires that Kendo UI script files are referenced in the page head section (this has been the default instruction for Kendo UI references in the past, as well). Please, try moving your Kendo UI references to the tag, after the jQuery files are referenced and let me know if the error keeps occurring.
Adding to what #Brian MacKay already mentioned, you have the possibility to defer script output:
#(Html.Kendo().DatePicker().Name("datepicker").Deferred())
When you're using .Deferred(), you'll store the rendered JavaScript and you'll have the possibility to place this deferred script wherever you want:
<head>
</head>
<body>
<!-- stuff -->
#(Html.Kendo().DatePicker().Name("datepicker").Deferred(true))
<!-- other stuff -->
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.web.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.aspnetmvc.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
#Html.Kendo().DeferredScripts()
</body>
If you're on a development box, prefix all src and href attributes that start with https:// to use //:. Chances are high that your development environment is not using SSL, so it can't use any resources over SSL links (javascript won't load at all!). The prefix change will make the urls inherit whatever the page is using.
See more here
I am trying to display two datetimepickers but i'm getting the error "Uncaught TypeError: $(...).datetimepicker is not a function" .
I've installed :
Install-Package Bootstrap.v3.Datetimepicker
Install-Package Bootstrap.v3.Datetimepicker.CSS
Here is the code :
#model MVCGreenhouseMonitoring.Models.Plotting.PlottingCalendarDropDownList
<head>
<title></title>
<script src="~/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>
<script src="~/scripts/moment-with-locales.min.js"></script>
<script src="~/scripts/bootstrap.min.js"></script>
<script src="~/scripts/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href="~/Content/bootstrap-datetimepicker.css" />
</head>
<script>
$(function () {
$("#txtdatepicker1").datetimepicker();
$("#txtdatepicker2").datetimepicker();
});
</script>
#using (Html.BeginForm("IntervalReports", "Greenhouse", FormMethod.Post))
{
<table>
<tr>
<td>
<p>
Start Date: #Html.TextBoxFor(m => m.StartDateCalendar, new { #id = "txtdatepicker1", #style = "width:200px;" })
</p>
</td>
<td>
<p>
End Date: #Html.TextBoxFor(m => m.EndDateCalendar, new { #id = "txtdatepicker2", #style = "width:200px;" })
</p>
</td>
</tr>
</table>
<input type="submit" name="btnSubmit" value="Submit" />
}
I have all the necessary scripts in the Scripts folder.
Just include this on top of the other js files:
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
And wrap your script like this:
jQuery(document).ready(function($){
jQuery("#txtdatepicker1").datetimepicker();
jQuery("#txtdatepicker2").datetimepicker();
});
Make sure you included the right path of jquery script and must be the first in the head tag of the html you can get the latest jquery script here https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
You need to include the jQuery library before you can use jQuery UI n your page.
How to use jQuery UI
Like this
<link rel="stylesheet" href="jquery-ui.min.css">
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.min.js"></script>
jQuery UI is dependant on the jQuery library.
jQuery UI is a widget and interaction library built on top of the
jQuery JavaScript Library that you can use to build highly interactive
web applications.
https://learn.jquery.com/jquery-ui/getting-started/
Make sure you include a reference to it before jQuery UI:
<head>
<title></title>
-- jQuery.js reference here --
<script type="text/javascript" src="~/Scripts/jquery-ui-1.11.4.min.js"></script>
<script type="text/javascript" src="~/scripts/moment-with-locales.min.js"></script>
1, I downloaded the all these three files(JS and CSS) in my local system and tried it is not working as it is directly referring from URLS.
2, Even If i use URL src and href it is not working with the IE.IE also not saying any error.
Please help me to know what am doing wrong.
PART 1 :
<link rel="stylesheet" type="text/css" href="jquery/css/jquery-ui-1.10.2.custom.css" />
<script src="jquery/js/jquery-1.9.0.js"/></script>
<script src="jquery/js/jquery-ui-1.10.0.custom.min.js"></script>
PART 2 :
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
HTML CODE :
![<script>
$(function () {
$(document).tooltip({
content: function () {
return $(this).prop('title');
}
});
});
</script>
<style>
.tooltip
{
background-color:#F8D2DA;
}
.tooltipqty
{
text-align:right;
}
</style>
</head>
<body>
<p><label for="age">Your age:</label><input id="age"
title="<table class='tooltip'><tr><td class='tooltipqty'>20.00</td><td>31-01-2013</td></tr>
<tr><td class='tooltipqty'>0.02</td><td>01-01-2013</td></tr></table>" />
</p>
</body>][1]
Replace $(this).prop('title') with $(this).attr('title').
jsfiddle
Didn't see it was IE related. Didn't know either that jsfiddle had problems in IE 8 ...
i try to fill/overwrite(if exists) an input field from an colorbox popup search form, but i dont get the variable back into my input field.
this is the mainpage:
link rel="stylesheet" href="jquery/css/ui-darkness/jquery-ui-1.10.1.custom.css">
<script src="jquery/js/jquery-1.9.1.js"></script>
<script src="jquery/js/jquery-ui-1.10.1.custom.js"></script>
<script src="jquery/colorbox/jquery.colorbox-min.js"></script>
<link rel="stylesheet" href="jquery/colorbox/colorbox.css" />
<script>
$(function() {
var kid = $('#Kontaktname').val();
$("#Kontaktname").colorbox({
href:"contact_search_popup.php?s_contacts_id=" + kid,
iframe:true,
innerWidth:850,
innerHeight:400,
opacity:0.1,
overlayClose:false,
});
});
</script>
<p><input type="text" id="Kontaktname" value="1001" name="Kontaktname"></p>
<p id="test">
return value:
</p>
this is colorbox popup page:
link rel="stylesheet" href="jquery/css/ui-darkness/jquery-ui-1.10.1.custom.css">
<script src="jquery/js/jquery-1.9.1.js"></script>
<script src="jquery/js/jquery-ui-1.10.1.custom.js"></script>
<script src="jquery/colorbox/jquery.colorbox-min.js"></script>
<link rel="stylesheet" href="jquery/colorbox/colorbox.css" />
<input type="submit" id="formSubmit" class="test" value="{Label1}" name="formSubmit">
<script>
$(document).ready(function() {
$("input.test").click(function() {
window.parent.$("#kontaktname").text($(this).val()); // works
window.parent.$("#test").text($(this).val()); // dont work !!!
parent.$.colorbox.close();
});
});
</script>