It seems that dijit.Menu is dependent on dojo/resources/blank.gif which is found when we perform a dojo build and leave it in the release directory. We are building a single layer - our build profile is as follows:
dependencies = {
layers: [{
name: "dojo.js",
dependencies: ["core.bootstrap.dojo_deps"]
}],
prefixes: [
["core", "../../../core"],
["dijit", "../dijit"],
["dojox", "../dojox"]
]
};
Our problem arises when we attempt to rename dojo.js to something else. When we do that, dojo can no longer find the dojo/resources directory. Here is an example:
<html>
<head>
<script type="text/javascript" src="dojo_release_140_src/release/dojo/dojo/complete-build.js"></script>
<link rel="stylesheet" type="text/css" href="dojo_release_140_src/dijit/themes/dijit.css" />
<link rel="stylesheet" type="text/css" href="dojo_release_140_src/dijit/themes/tundra/Menu.css" />
<script type="text/javascript">
dojo.require("dijit.Menu");
dojo.ready(function(){
pMenu = new dijit.Menu({
targetNodeIds: ["menu"],
leftClickToOpen: true
});
pMenu.addChild(new dijit.PopupMenuItem({
label: "Clocks"
}));
});
</script>
</head>
<body class="tundra">
<a id="menu">menu</a>
</body>
</html>
As shown, the browser will attempt to fetch undefined./resources/blank.gif; however, if we change complete-build.js to dojo.js it finds it successfully at dojo_release_140_src/release/dojo/dojo/resources/blank.gif. We can't keep the name as dojo.js - right now we are working around it by actually creating an undefined. directory at the base of our domain and sticking the image in there.
Help!
I believe the bootstrap looks for the script tag containing 'dojo.js' in order to determine the path for loading resources. If you must rename dojo.js, try defining djConfig.baseUrl prior to the SCRIPT tag which loads your renamed Dojo.
Related
My goal is to do the following in ASP Net Core:
Create a jQuery DataTable
Show the number of entries in the
datatable
Make sure the user is able to export the dataset in excel,
csv, pdf, and copy the results Have all of the references installed
using the CDN (Content Delivery Network) in ASP Net Core
My question
Are there any tutorials on youtube, or any articles that describe how to do this?
I am following this tutorial https://youtube.com/watch?v=Pt7O-X9vmjw The problem is that, although I am able to create a datatable using his tutorial, the following problems continue:
The number of entries in the datatable is missing.
The user is unable to export the dataset in excel, csv, pdf, and copy the results
I have been trying to figure out how to do this for weeks. My suspicion is that bootstrap, which is already installed in the layout, is causing these problems. Any help is greatly appreciated.
Sincerely,
Sandra
To achieve your requirement of using DataTables with data export functionality, you can refer to the following example.
In _Layout.cshtml
CSS references
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css" rel="stylesheet" />
<link rel="stylesheet" href="~/css/site.css" />
JS references
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
In View page
Add required JS references of data export plug-ins
#section scripts{
<script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.print.min.js"></script>
<script>
$(function () {
$("#myTable").dataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
});
})
</script>
}
Test Result
I'm trying to follow the GettingStarted instructions on https://github.com/googleads/videojs-ima to setup videojs with ima. But, am getting stuck on the part "In player.js, load the ads library"; nothing has been changed in the local player.js file so it still looks exactly the same as here https://github.com/videojs/video.js/blob/master/src/js/player.js.
Bellow is the current code I have, but when it's ran in IE11, the console reports a warning and two errors:
Warning: "VIDEOJS: WARN: videojs.plugin() is deprecated; use videojs.registerPlugin() instead" in video.js (489,5)
Error: "SCRIPT1002: Syntax error" in player.js (5,1)
Error: "CSS3120: No fonts available for #font-face rule" in video-js.css (12,7)
Any input very much appreciated.
Thank you.
<!DOCTYPE html>
<html>
<head>
<!-- Load dependent stylesheets. -->
<link rel="stylesheet" href="http://vjs.zencdn.net/6.2.0/video-js.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-ads/5.0.2/videojs.ads.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/videojs-ima/0.6.0/videojs.ima.css" />
</head>
<body>
<video id="content_video" class="video-js vjs-default-skin"
controls preload="auto" width="440" height="260">
<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
</video>
<!-- Load dependent scripts -->
<script src="http://vjs.zencdn.net/6.2.0/video.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-ads/5.0.2/videojs.ads.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-ima/0.6.0/videojs.ima.js"></script>
<script src="src/js/player.js"></script>
<script>
var player = videojs('content_video');
var options = {
id: 'content_video',
adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=440x260&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator='
};
// This must be called before player.play() below.
player.ima(options);
player.ima.requestAds();
// On mobile devices, you must call initializeAdDisplayContainer as the result
// of a user action (e.g. button click). If you do not make this call, the SDK
// will make it for you, but not as the result of a user action. For more info
// see our examples, all of which are set up to work on mobile devices.
// player.ima.initializeAdDisplayContainer();
// This must be called after player.ima(...) above.
player.play();
</script>
</body>
</html>
what seems to be wrong here i dont get any error but at the same time no progress in routing. .
index.html
<!DOCTYPE html>
<html>
<head>
<title>My Angular App</title>
<link rel="stylesheet" type="text/css" href="/myAngularApp/css/style.css">
<link rel="stylesheet" type="text/css" href="/myAngularApp/css/bootstrap/css/bootstrap.min.css">
<script type="text/javascript" src="/myAngularApp/css/angular/angular.min.js"></script>
<script src="/myAngularApp/css/mainpage.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-animate.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-route.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/bootstrap/ui-bootstrap-tpls-2.2.0.min.js"></script>
</head>
<body ng-app="myApp">
<h1> this is index.html </h1>
<div ng-view></div>
</body>
</html>
mainpage.js // where my controller is
var app = angular.module('myApp', ['ngRoute', 'ngAnimate', 'ngResource', 'ui.bootstrap']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'index.html'
})
.when('/home', {
templateUrl : 'homepage.html'
})
.otherwise({
templateUrl : 'index.html'
});
});
when i load '/' in my browser nothins is happening same with /home i dont know where did i get wrong since there is no error in my console
The template for a route should be a partial view. Here index.html is the root of the single page app , this page should never reload (unless you want to destroy and rebootstrap the app). Try changing the templateUrl for / to a file that just has <h2> HELLO WORLD!</h2> and monitor the console (dev tools) for any 404 errors related to fetching the template
I think problem is with your javascript file name. In index you mentioned mainpage.js and in description its homepage.js.
Edit : Okay. Then try arranging files list like
<script type="text/javascript" src="/myAngularApp/css/angular/angular.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-animate.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-resource.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/angular/angular-route.min.js"></script>
<script type="text/javascript" src="/myAngularApp/css/bootstrap/ui-bootstrap-tpls-2.2.0.min.js"></script>
<script src="/myAngularApp/css/mainpage.js"></script>
As mentioned in the answer by user Priyanka, the filename can be the issue. But that should produce an error on the console and according to you there was no error on the console.
The other possible reason can be the sequence in which you've imported your files. I generally sequence my files this way -
<head>
<!-- 1. External CSS Libraries likes bootstrap, jquery -->
<!-- 2. My Application specific CSS files -->
<!-- 3. External JS libraries like Angular, bootstrap, JQuery -->
<!-- 4. My Application specific JS files like my controllers, services, directives etc.
</head>
Again the sequence in which you import the external JS libraries may also cause problems.
I am trying to workout a HelloWorld example of Bootstrap3 and X-editable. I am attaching my page source code in this post. I am facing two issues.
I am getting the following error when i use mode as 'popup' as soon as i click on the editable link.
TypeError: this.getCalculatedOffset is not a function
If i switch from popup to inline at-least the page appears however, the buttons dont appear correctly.
Any feedback would be appreciated. Page Source is below:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>X-Editable Bootstrap Hello World!</title>
<link rel="stylesheet" href="twitter-bootstrap/css/bootstrap.css" type="text/css"/>
<link href="bootstrap-editable/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Hello World Bootstrap</h1>
<div class="hero-unit">
<p>Hey.. this is my very first XEdit-able Bootstrap site.</p>
<!-- superuser -->
superuser
</div>
</div>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="twitter-bootstrap/js/bootstrap.js"></script>
<script src="bootstrap-editable/bootstrap3-editable/js/bootstrap-editable.js"></script>
<script type="text/javascript">
$.fn.editable.defaults.mode = 'inline';
$(document).ready( function(){
//$('#username').editable();
$('#username').editable( {
type: 'text',
pk: 1,
url: '/post',
title: 'Enter username'
});
} );
</script>
</body>
</html>
Your bootstrap css and js files must be from 2.xx version of bootstrap, that's a problem.
Use x-editable for bootstrap 2 or update your bootstrap to version 3+.
I had the same issue after upgrading from Bootstrap 2 to Bootstrap 3.
I had upgraded Bootstrap's CSS, X-Editable's CSS and JS, but had forgotten to upgrade Bootstrap's JS which was still for v2.
Don't forget to update all files:
Bootstrap 3 .css and .js
X-Editable for Bootstrap 3 .css and .js
Probably a bit late, but hopefully that can still help someone.
I'm working on Sencha Architect 2 - extjs 4
i found out that GeoExt doesn't work with extjs 4. but i really need to use it so i searched and end up here https://github.com/geoext/geoext2
I'm trying to something like examples so i just add :
Ext.Loader.setConfig({
enabled: true,
disableCaching: false,
paths: {
GeoExt: "../geoext-2/src/GeoExt",
// for dev use
Ext: "http://cdn.sencha.io/ext-4.1.0-gpl/src"
// for build purpose
//Ext: "extjs-4.1.0/src"
}
});
to my app.js file. but i keep getting "GeoExt is not defined" error message.
anyone could help me with that ?
EDIT
I couldn't find a way to insert a map in my panel using GeoExt-2 , my files :
app.html :
<!DOCTYPE html>
<!-- Auto Generated with Sencha Architect -->
<!-- Modifications to this file will be overwritten. -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-4.0.7-commercial/resources/css/ext-all.css"/>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-4.0.7-commercial/ext-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body></body>
</html>
app.js :
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
autoCreateViewport: true,
name: 'MyApp',
controllers: [
'MyController'
]
});
Here is a couple of different approaches coming mostly from the github examples
1) You can simply add the map in your application launch -
jsfiddle example
2) You can create a map view and add it to the panel in the viewport - js fiddle example 2