I would like to develop a dojo calendar as per in the site PAYCHECKCITY
I worked out on the text box focus but i would like to have image inside textbox as he had can any one help me out
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.form.DateTextBox");
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css"
/>
Replace the 1.5 with 1.6 you will get automatically.
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dijit.form.DateTextBox");
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css"
/>
Related
According to documentation these are the files that need to be added
<script src="https://unpkg.com/#progress/kendo-vue-charts#latest/dist/cdn/js/kendo-vue-charts.js"></script>
<script src="https://unpkg.com/#progress/kendo-vue-intl#latest/dist/cdn/js/kendo-vue-intl.js"></script>
<script src="https://unpkg.com/#progress/kendo-drawing/dist/cdn/js/kendo-drawing.js"></script>
// Load the Kendo Default Theme
<link rel="stylesheet" href="https://unpkg.com/#progress/kendo-theme-default#latest/dist/all.css">
// Load the Kendo Bootstrap Theme
<link rel="stylesheet" href="https://unpkg.com/#progress/kendo-theme-bootstrap#latest/dist/all.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/#progress/kendo-theme-default#latest/dist/all.css">
<link rel="stylesheet" href="https://unpkg.com/#progress/kendo-theme-bootstrap#latest/dist/all.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://unpkg.com/#progress/kendo-vue-charts#latest/dist/cdn/js/kendo-vue-charts.js"></script>
<script src="https://unpkg.com/#progress/kendo-vue-intl#latest/dist/cdn/js/kendo-vue-intl.js"></script>
<script src="https://unpkg.com/#progress/kendo-drawing/dist/cdn/js/kendo-drawing.js"></script>
The Error is
Cannot read properties of undefined (reading 'support') at Module. (kendo-vue-charts.js:1:28556)
The order of the script tags is wrong - we need to put the drawing script tag first, then the intl and last but not least the charts script.
I am using Kendo ASP.NET Core MVC controls.
I am using my form controls using Kendo() helpers like
- Html.Kendo().TextBoxFor(x=>x.Title)
- Html.Kendo().DropDownListFor(x=>x.TypeId)
- Html.Kendo().EditorFor(x=>x.Description)
all controls works fine except Kendo().TextBoxFor, it throws the following error on console
Uncaught TypeError: jQuery(...).kendoTextBox is not a function
Here is how my scripts and JS refereed in Head tag page
<link href="~/css/style.css" rel="stylesheet" integrity="" asp-append-version="true" />
<link href="~/css/colors/green.css" rel="stylesheet" integrity="" asp-append-version="true" />
<link href="~/lib/flickity/flickity.css" rel="stylesheet" media="screen" />
<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.common.min.css" integrity="" />
<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.metro.min.css" integrity="" />
<link href="~/lib/kendo-ui/styles/kendo.bootstrap-v4.min.css" rel="stylesheet" />
<script src="~/js/jquery-3.3.1.min.js" integrity=""></script>
<script src="~/js/jquery-migrate-3.0.0.min.js" integrity=""></script>
<script src="~/lib/kendo-ui/js/jszip.min.js"></script>
<script src="~/lib/kendo-ui/js/kendo.all.min.js" integrity=""></script>
<script src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js" integrity=""></script>
Cant find any related issues online much.
Here is the full console error:
Solution:
Probably something wrong with my local Kendo JS libraries. Updated the scripts and CSS as below and all worked fine.
<link href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.common-bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<link href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.metro.min.css" rel="stylesheet" type="text/css" />
<script src="~/js/jquery-3.3.1.min.js" integrity=""></script>
<script src="~/js/jquery-migrate-3.0.0.min.js" integrity=""></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.aspnetmvc.min.js"></script>
I'm trying to use the Vue2Leaflet component (https://vuejsexamples.com/vue-2-components-for-leaflet-maps/) but I have hard time to make it works. I could not make this simple example work, with the html file :
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet/dist/leaflet.css" />
</head>
<body>
<div id="app" style="height: 400px">
<v-map :zoom=13 :center="[47.413220, -1.219482]">
<v-tilelayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"></v-tilelayer>
<v-marker :lat-lng="[47.413220, -1.219482]"></v-marker>
</v-map>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/vue2-leaflet"></script>
</body>
</html>
and the js file :
Vue.component('v-map', window.Vue2Leaflet.LMap)
Vue.component('v-tilelayer', window.Vue2Leaflet.TileLayer)
Vue.component('v-marker', window.Vue2Leaflet.Marker)
new Vue({ el: '#app'});
I made a fiddle with this basic exemple : http://jsfiddle.net/rvxc2uLk/3.
What am I missing ?
You forgot the "L" before .TileLayer also for .Marker.
Vue.component('v-map', window.Vue2Leaflet.LMap)
Vue.component('v-tilelayer', window.Vue2Leaflet.LTileLayer)
Vue.component('v-marker', window.Vue2Leaflet.LMarker)
Here's the minimal configuration that I've figured out so far:
<html>
<head>
<link rel="shortcut icon" href="microsoft.png" type="image/png">
<link rel="stylesheet" href="bootstrap-4.0.0-alpha.2/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h1>Hello World!</h1>
<script src="bootstrap-4.0.0-alpha.2/docs/assets/js/vendor/tether.min.js"></script>
<script src="bootstrap-4.0.0-alpha.2/dist/js/bootstrap.js"></script>
</body>
</html>
Q: After the opening body tag, what replaces div class="container"?
Nothing replaces it. Bootstrap 4 still uses containers.
I've written such code in my _Layout.cshtml:
<head>
<link href="#Url.Content("~/Content/jquery.fancybox-1.3.4.css")" rel="stylesheet" type="text/css" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<script src="#Url.Content("~/Scripts/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.easing.1.3.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.fancybox-1.3.4.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//alert("H");
$('#gallery a').fancybox({
});
}); // end ready
</script>
</head>
<body>
<div id="gallery" >
<a href="../../Content/Images/Slide1.JPG" rel="gallery" title="Img1!:)">
<img alt="Dog" height="170" src="../../Content/Images/Slide1_s.JPG" width="200" /></a>
<a href="../../Content/Images/Slide2.JPG" rel="gallery" title="Img2!:)">
<img alt="Cat" height="170" src="../../Content/Images/Slide2_s.JPG" width="200" /></a>
</div>
</body>
I've used above code in simple html file and it works perfectly. However, if I try to put this code in MVC 4, it does not work. Just links of images work and it shows just image without "new pop-up window". I checked a lot of times all addresses of ".js" libraries and putted "alert('Hello from .js')" to check availability from "Scripts" folder of these libraries.
What's the reason of that? How to resolve it?
I just moved "#Scripts.Render("~/bundles/jquery")" and "#RenderSection("scripts", required: false)" from to and it works perfectly!
The whole code is:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
<link href="~/Icon.ico" rel="shortcut icon" type="image/x-icon" />
</head>