I am trying to use the JQuery UI date picker but it only displays as a normal textbox. When I open the Google Chrome debugger there is one error "Uncaught TypeError: $(...).datepicker is not a function"
This is my Bundle.config file
using System.Web;
using System.Web.Optimization;
namespace ultimateorganiser
{
public class BundleConfig
{
// For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery - ui.min.js",
"~/Scripts/Scripts/jquery-ui.js",
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
//JQuery bxSlider
bundles.Add(new ScriptBundle("~/bundles/slider").Include(
"~/Scripts/jquery.bxslider.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/jquery - ui.css",
"~/Content/site.css"));
}
}
}
This is my view with the script code at the bottom
#model ultimateorganiser.Models.ClubMember
#{
ViewBag.Title = "Register";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
//UserDob
<div class="form-group">
#Html.LabelFor(model => model.UserDoB, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.UserDoB, new { id = "userdob" })
#Html.ValidationMessageFor(model => model.UserDoB, "", new { #class = "text-danger" })
</div>
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
<script>
$(document).ready(function () {
$("#news_date").datepicker({ dateFormat: 'dd/mm/yy' });
});
</script>
}
I think you need to add #Scripts.Render("~/bundles/jquery") in your view.
Related
I am quite sure my problem is something to do with the script reference.
I have added it to my bundles
bundles.Add(new ScriptBundle("~/bundles/bootstrap-select").Include(
"~/Scripts/bootstrap-select.js",
"~/Scripts/bootstrap-select.min.js"));
here is my views code:
<script type="text/javascript">
$(document).ready(function () {
$('.selectpicker').selectpicker({
liveSearch: true,
showSubtext: true
});
});
Html form:
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.SagId, "SagId", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownListFor(x => x.SagId,(IEnumerable<SelectListItem>)ViewBag.SagId,
new
{
#class = "form-control selectpicker",
data_show_subtext = "true",
data_live_search = "true"
})
#Html.ValidationMessageFor(model => model.SagId, "", new { #class = "text-danger" })
</div>
</div>
I get the list from my view bag, that works fine. But I cannot seem to fix this problem.
Update:
tried to manually add referrences in the view. now the dropbox is completly gone and i get theese errors:
Uncaught TypeError: Cannot read property 'valHooks' of undefined
at bootstrap-select.min.js:7
at bootstrap-select.min.js:8
at bootstrap-select.min.js:7
at bootstrap-select.min.js:7
Create:78 Uncaught ReferenceError: $ is not defined
at Create:78
First, you only want to add one of the references; start with just the JS; when built in release mode, it will find the min.js.
bundles.Add(new ScriptBundle("~/bundles/bootstrap-select").Include(
"~/Scripts/bootstrap-select.js"));
This was registering the same script, which will have these sorts of problems.
Secondly, it looks like this bundle is defined before wherever you have JQuery defined. So the $ is not defined is likely because bootstrap select script, and usage, has to be after the JQuery initialization.
I've been able to get FullCalendar to load in my webpage but I can't seem to successfully pass my test JSON data to the calendar and have it render events. I'm not sure what I'm doing wrong.
I'm following this website's example and I even downloaded their source code and was able to run it successfully in my dev environment. My code seems to almost completely mirror their's yet I still can't render events. I even went back and added javascript files to my bundles just in case that was the issue but to no success.
Any ideas?
Bundles:
public class BundleConfig
{
// For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/themes/base/jquery.ui.all.css",
"~/Content/fullcalendar.css"));
/*Kendo UI Instructions that were followed
* http://docs.telerik.com/kendo-ui/aspnet-mvc/asp-net-mvc-5
*/
bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
"~/Scripts/kendo/2016.2.714/kendo.webcomponents.min.js",
// "~/Scripts/kendo/kendo.timezones.min.js", // uncomment if using the Scheduler
"~/Scripts/kendo/2016.2.714/kendo.aspnetmvc.min.js",
"~/Scripts/kendo/2016.2.714/jquery.min.js",
"~/Scripts/kendo/2016.2.714/kendo.ui.core.min.js",
"~/Scripts/kendo/2016.2.714/kendo.calendar.min.js",
"~/Scripts/kendo/2016.2.714/kendo.popup.min.js",
"~/Scripts/kendo/2016.2.714/kendo.datepicker.min.js"));
bundles.Add(new StyleBundle("~/Content/kendo/css").Include(
"~/Content/kendo/2016.2.714/kendo.common-bootstrap.min.css",
"~/Content/kendo/2016.2.714/kendo.bootstrap.min.css",
"~/Content/kendo/2016.2.714/kendo.common.min.css",
"~/Content/kendo/2016.2.714/kendo.defualt.min.css"));
bundles.Add(new ScriptBundle("~/bundles/fullcalendar").Include(
"~/Scripts/jquery-ui-1.12.0.min.js",
"~/Scripts/moment.min.js",
"~/Scripts/fullcalendar.min.js"));
bundles.IgnoreList.Clear();
}
_Layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Zone Event Calendar</title>
#Styles.Render("~/Content/kendo/css")
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/kendo")
#Scripts.Render("~/bundles/fullcalendar")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Time Zone Event Calendar", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - Time Zone Event Calendar</p>
</footer>
</div>
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
Index:
#{
ViewBag.Title = "Home Page";
}
<head>
#section scripts{
<script type="text/javascript">
$(document).ready(function ()
{
$('#calendar').fullCalendar(
{
header:
{
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: false,
events: "/home/loadevents/"
})
});
</script>
<script type="text/javascript">
$(document).ready(function () {
$("#pickDateTime").kendoDateTimePicker({
culture: "es-Es",
interval: 1,
format: "yyyy/MM/dd hh:mm tt",
parseFormats: ["MMMM yyyy", "HH:mm"]
});
});
</script>
}
</head>
<body>
<div id="headerBar">
<div id="datepicker">
<form method="post">
<input id="pickDateTime" name="DateTimePicker" />
<input type="submit" value="Add" />
</form>
</div>
</div>
<div id="calendar"></div>
</body>
HomeController:
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult About()
{
ViewBag.Message = "Your application description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
public ActionResult LoadEvents (double start, double end)
{
var fromDate = ConvertFromUnixTimestamp(start);
var toDate = ConvertFromUnixTimestamp(end);
var eventList = GetEvents();
var rows = eventList.ToArray();
return Json(rows, JsonRequestBehavior.AllowGet);
}
private List<CalendarEventsViewModel> GetEvents()
{
List<CalendarEventsViewModel> eventList = new List<CalendarEventsViewModel>();
CalendarEventsViewModel newEvent = new CalendarEventsViewModel
{
ID = "1",
EventName = "Event 1",
StartDateString = DateTime.Now.AddDays(1).ToString("s"),
EndDateString = DateTime.Now.AddDays(1).ToString("s"),
AllDay = false
};
eventList.Add(newEvent);
newEvent = new CalendarEventsViewModel
{
ID = "1",
EventName = "Event 3",
StartDateString = DateTime.Now.AddDays(2).ToString("s"),
EndDateString = DateTime.Now.AddDays(3).ToString("s"),
AllDay = false
};
eventList.Add(newEvent);
return eventList;
}
private static DateTime ConvertFromUnixTimestamp(double timestamp)
{
var origin = new DateTime(1970, 1, 1, 0, 0, 0, 0);
return origin.AddSeconds(timestamp);
}
}
CalendarEventsViewModel:
public class CalendarEventsViewModel
{
public string ID { get; set; }
public string EventName { get; set; }
public string EventText { get; set; }
public string StartDateString { get; set; }
public string EndDateString { get; set; }
public bool AllDay { get; set; }
}
I think you have made the same mistake I did when I first set it up, the example you are looking at only works for version one of FullCalendar. In version two it's not a unix timestamp your LoadEvents action receives.
It's a moment object that is passed to the action, if you remove your ConvertFromUnixTimestamp method and change your start and end parameters from double to DateTime I think it will start working.
If you break point your LoadEvents action without making any changes I am pretty confident it's not even being called.
Your property names should match those of the event object otherwise it will treat them like non standard fields.
I am new to MVC and trying to use DotNet High Chart for the first time. I am following this tutorial in Visual Studios MVC 5.
My Bundles :
public class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css"));
bundles.Add(new Bundle("~/bundles/highchart").Include(
"~/Scripts/Highcharts-4.0.1/js/highchart.js"));
}
}
}
My Model:
namespace Charts2.Models
{
public class TransactionCount
{
public string MonthName { get; set; }
public int Count { get; set; }
}
}
My Controller :
namespace Charts2.Controllers
{
public class ChartSampleController : Controller
{
// GET: ChartSample
public ActionResult Index()
{
//create a collection of data
var transactionCounts = new List<TransactionCount>{
new TransactionCount(){ MonthName="January", Count=30},
new TransactionCount(){ MonthName="Febuary", Count=40},
new TransactionCount(){ MonthName="March", Count=4},
new TransactionCount(){ MonthName="April", Count=35},
};
// modify data type to make it of array types
var xDataMonths = transactionCounts.Select(i => i.MonthName).ToArray();
var yDataCounts = transactionCounts.Select(i => new object[] { i.Count }).ToArray();
//instanciate an object of the high charts type
var chart = new Highcharts("chart")
// define the type of chart
.InitChart(new Chart { DefaultSeriesType = ChartTypes.Line})
//overall title of the chart
.SetTitle(new Title { Text = "Incoming Transactions per hour"})
//small label below the main title
.SetSubtitle(new Subtitle { Text = "Accounting"})
// load the x values
.SetXAxis(new XAxis {Categories = xDataMonths})
// set the y title
.SetYAxis(new YAxis { Title = new YAxisTitle { Text = "Number of Transactions"}})
.SetTooltip(new Tooltip{
Enabled = true,
Formatter = #"function() { return '<b>'+this.series.name +'</b><br/>'+this.x+': '+this.y;}"
})
.SetPlotOptions(new PlotOptions{
Line = new PlotOptionsLine {
DataLabels = new PlotOptionsLineDataLabels {
Enabled = true
},
EnableMouseTracking = false
}
})
//load y values
.SetSeries(new []
{
new Series {Name = "Hour", Data = new Data(yDataCounts)},
});
return View(chart);
}
}
}
and my view:
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
#model DotNet.Highcharts.Highcharts
<p> My Chart </p>
#(Model)
My shared _Index:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/highchart")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
Whenever I run the application the chart does not generate at all. I had followed the tutorial and cannot understand where I am going wrong. On the console I am getting the following exception:
Uncaught ReferenceError: Highcharts is not defined
Any advice would be greatly appreciated
Thanks
Can you please post entire view code. As in your current view you are not adding high chart bundle to view
Some thing like
#Scripts.Render("~/bundles/highchart")
I've realised where I was going wrong. I was missing an s at the end of the bundle name, I changed the bundle:
bundles.Add(new ScriptBundle("~/bundles/highcharts").Include(
"~/Scripts/Highcharts-4.0.1/js/highcharts.js"
));
and updated the _index according and now it works.
I am trying to use fckeditor tinyMCE in my mvc project.
So i added this code to the header of my website :
#Scripts.Render("//tinymce.cachefly.net/4.0/tinymce.min.js")
<script type="text/javascript">
// Initialize your tinyMCE Editor with your preferred options
tinyMCE.init({
// General options
mode: "textareas",
theme: "modern",
});
</script>
I added this to my model :
[AllowHtml]
[DataType(DataType.MultilineText)]
public string NewsText { get; set; }
And finally my view :
<div class="form-group">
#Html.LabelFor(model => model.NewsDate, new { #class = "control-label col-lg-2" })
<div class="col-lg-10">
#Html.TextBoxFor(model => model.NewsDate, new { #class = "form-control myfont" })
#Html.ValidationMessageFor(i => i.NewsDate, "", new { #class = "validation" })
</div>
</div>
the result is :
Every thing works fine but when i am trying to change the theme of editor to advance i mean :
<script type="text/javascript">
// Initialize your tinyMCE Editor with your preferred options
tinyMCE.init({
// General options
mode: "textareas",
theme: "advance",
});
</script>
the editor is removed why ?
Simple typo, should be "advanced" not "advance"
Index.cshtml:
<div class="search-ctn">
#{ Html.RenderAction(MVC.Home.Search()); }
</div>
Search.cshtml:
#model ViewModels.SearchVM
#using (Ajax.BeginForm(MVC.Home.Search(), new AjaxOptions { UpdateTargetId = "idx-list-ctn", InsertionMode = InsertionMode.Replace }, new { #id = "sch-frm" }))
{
#Html.AntiForgeryToken()
#Html.TextBoxFor(m => m.Service)
#Html.ValidationMessageFor(m => m.Service)
}
MVC.Home.Search Action:
[HttpPost, ValidateAntiForgeryToken]
public virtual PartialViewResult Search(SearchVM partnerSearch)
{
// Search made here
}
ViewModel:
public class SearchVM
{
[Required]
public string Service { get; set; }
}
Libraries:
jquery-2.1.3.js
jquery.unobtrusive-ajax.js (v3.2.3)
jquery.validate.js (v1.13.1)
jquery.validate.unobtrusive.js (v3.2.3)
In an old project using jquery-1.10.2.js I was activating the form's validation like this:
$.validator.unobtrusive.addValidation("#sch-frm");
and it was working just fine, but now it's submiting the form ignoring the validation.