Flex Grid not rendering in Orchard CMS - javascript

I dont understand why Flex Grid is not rendering in my orchard cms project. same code is running in separate project but does not work here. below is the code for page. i have verified the path for scripts and style sheet and both are correct.
View
#{
Script.Include("navigation-admin.js");
Script.Require("jQuery");
Script.Require("jQueryUI");
Script.Require("flexgrid");
Style.Include("flexgrid.css");
Style.Include("flexgrid.pack.css");
}
<table id="jobListing" style="display: none"></table>
#using (Script.Foot()) {
<script type="text/javascript">
$(document).ready(function () {
$('#jobListing').flexigrid({
url: '/Member/List',
dataType: 'json',
colModel: [
{
display: 'Caption',
name: 'Caption',
width: 180,
sortable: true,
align: 'left'
}, {
display: 'Name',
name: 'Name',
width: 180,
sortable: true,
align: 'left'
}, ]
});
});
</script>
}
ResourceManifest
public void BuildManifests(ResourceManifestBuilder builder)
{
// Create and add a new manifest
var manifest = builder.Add();
manifest.DefineScript("flexgrid").SetUrl("flexigrid.pack.js", "flexigrid.js");
}
Currently showing
Should show layout like this (not data or columns)
Console Errors

I think you need to move your $('#jobListing').flexigrid({ .. }); to the document ready part.
Also, to give you some tips:
You should add your scripts and styles to the ResourceManifest
If your don't use the ResourceManifest, use Script.Include("PathToScript") instead
You should use Script.Require("jQuery") instead of requiring it yourself (it probably is injected twice)
I don't think there is a section called Scripts in Orchard. Use the following instead:
#using (Script.Foot()) {
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
[.....your code here.....]
});
//]]>
</script>
}
EDIT:
Looking at your console errors, I'd say you miss the web.config in the Scripts and Styles folder.
"By default, Orchard is setup to restrict folder permissions. This is usually overriden by adding a web.config to each folder as required (in this case, your scripts folder).
If you use the codegen module to generate your module, then this is done for you as part of the generation. If not, then you need to add the web.config yourself."
source: Orchard CMS : Javascript file returns 404 not found even though it exists

Related

How to include a CDN to VueJS CLI without NPM or Webpack?

I'm new on VueJS ans Webpack. I've created a project with VueJS CLI and trying to work with it. I need to insert an CDN to my code.
When working with standard HTML, CSS & JS solutions, I'd include CDNs like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>False Merge</title>
<!-- CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.css"/>
<!-- StyleSheets -->
<link rel="stylesheet" href="public/stylesheets/index.css" />
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js"></script>
<script src="public/javascripts/index.js"></script>
</body>
</html>
As you can see, you can add a CDN script with the HTML script tag, and start using it in the JS.
I'm trying to do the same with VueJS in a component. I've got the template and style sections ready.
Unfortunately, I don't know how to add in a simple way a CDN to use inmediately in the script tag within the Vue component. I tried to do this but it is not working.
<template>
<div class="index">
<div class="container">
<table id="table_dataset" class="display">
</table>
</div>
</div>
</template>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js"></script>
<script>
export default {
name: 'Index',
data() {
return {
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
Is there a way to add a CDN (without Webpack or NPM) to a VueJS component?
Unfortunately, no, you can't add a <script> tag to a specific component via template.
In your case you have some options:
1: Use NPM
Propertly install the dependency using npm
Pros: proper usage of NPM and Webpack; scoped definition;
Cons: the script must be available as a NPM package.
Note: when available this is the recommended approach.
Steps:
For your case, you can check in datatables official page they do have a NPM package. I could be used like:
npm install --save datatables.net-dt
And in your .vue file:
<script>
require( 'datatables.net-dt' )();
export default {
name: 'Index',
data() {
return {
}
}
}
</script>
2: Add <script> tag to index.html
Locate and a dd the <script> tag to your index.html
Pros: the <script> tag is clearly (and declaratively) added to the HTML source. The script will only be loaded once.
Cons: the script will be globally loaded.
Steps:
Just add the <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js"></script> to the end of the index.html file, preferably right before </body>.
3: Create the <script> tag programatically
The other alternative is to create the script tag programatically at the component, when the component is lodaded.
Pros: the code stays in the component only. Your external script will be loaded only when the component is loaded.
Cons: the script still will be globally available once it is loaded.
Steps/Code:
<script>
export default {
name: 'Index',
data() {
return {
}
},
mounted() {
if (document.getElementById('my-datatable')) return; // was already loaded
var scriptTag = document.createElement("script");
scriptTag.src = "https://cdn.datatables.net/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js";
scriptTag.id = "my-datatable";
document.getElementsByTagName('head')[0].appendChild(scriptTag);
}
}
</script>
I don't know if this is still a concern, but you could also give vue-meta a look. I'm using it to create a better SEO implementation, but with it, you can include CSS, and/or JS files for specific components. You can even set the individual files to preload if you wanted. Here's a pretty good write-up. https://alligator.io/vuejs/vue-seo-tips/
In there it says that vue-meta isn't stable, but the article was written in February of 2018, and the version as of today, is 2.2.1.
add this line to your package.json file within the dependencies object: "vue-meta": "^2.2.1",
note - omit the trailing comma if it's to be the last line of the dependencies object
open a terminal and cd to the dir which contains above mentioned package.json file. (BTW, this is all super easy if you use the vue ui).
in the terminal run: npm install
Then add the following to your main.js file.
import Meta from "vue-meta";
Vue.use(Meta);
Now you can freely load static CSS/JS assets. This works for local, or from cdn. Below is my example. Disregard my imports, components and methods... they aren't related to vue-meta and may differ from yours. I just wanted to show you a working version.
<script>
import { page } from "vue-analytics";
import Header from "#/components/Header.vue";
import Footer from "#/components/Footer.vue";
export default {
components: {
Header,
Footer
},
data: function() {
return {};
},
methods: {
track() {
page("/");
}
},
metaInfo: {
link: [
{
rel: "preload",
as: "style",
href: "https://cdn.jsdelivr.net/npm/bootstrap-vue#2.0.0-rc.28/dist/bootstrap-vue.min.css"
},
{
rel: "preload",
as: "style",
href: "https://fonts.googleapis.com/css?family=Cinzel|Great+Vibes|Montserra"
},
{
rel: "preload",
as: "style",
href: "/content/css/site.css"
},
{
rel: "stylesheet",
href:
"https://fonts.googleapis.com/css?family=Cinzel|Great+Vibes|Montserra"
},
{
rel: "stylesheet",
href: "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css",
integrity:
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T",
crossorigin: 'anonymous"'
},
{
rel: "stylesheet",
href: "https://cdn.jsdelivr.net/npm/bootstrap-vue#2.0.0-rc.28/dist/bootstrap-vue.min.css",
async: true,
defer: true
},
{
rel: "stylesheet",
href: "https://use.fontawesome.com/releases/v5.8.1/css/all.css",
integrity:
"sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf",
crossorigin: 'anonymous"',
async: true,
defer: true
},
{
rel: "stylesheet",
href: "/content/css/site.css",
async: true,`enter code here`
defer: true
},
{ rel: 'favicon', href: 'favicon.ico' }
],
script: [{ src: "https://unpkg.com/axios/dist/axios.min.js", async: true, defer: true }],
}
};
</script>
https://renatello.com/vue-js-external-css
Include CSS file in one component
Include globally
Include in index.html

Extjs 5 class not found when lunch application

I am using Extjs 5.0.1, trying to implement basic app. This is my folder structure:
Project
app
controller
model
store
view
MainView.js
app.js
OtherFolder
index.html
Note: index.html file is in other location than app.js
This is my index.html file
index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://cdn.sencha.com/ext/gpl/5.1.0/build/ext-all.js"></script>
<script src="http://cdn.sencha.com/ext/gpl/5.1.0/build/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
<script type="text/javascript" src="../Project/app.js"></script>
</head>
<body>
<div id="tables"></div>
</body>
</html>
this is my app.js file:
//app.js
Ext.define('GestioneTit.app.Application',
{
extend: 'Ext.app.Application',
name: 'GestioneTit',
launch: function(){
Ext.create('GestioneTit.view.MainView');
}
});
Ext.application('GestioneTit.app.Application');
This is my MainView.js file:
//MainView.js
Ext.define('GestioneTit.view.MainView',
{
extend: 'Ext.tab.Panel',
tabPosition: "left",
tabRotation: 0,
width: 900,
height: 1000,
activeTab: 0,
items: [
{
title: 'Tab 111111111111111111111111111111 22111221',
html: 'A simple tab'
}],
renderTo: "tables"
});
The problem is when I lunch my application I view this error in console:
[W] [Ext.Loader] Synchronously loading 'GestioneTit.view.MainView'; consider adding Ext.require('GestioneTit.view.MainView') above Ext.onReady
SCRIPT5022: [Ext.create] Unrecognized class name / alias: GestioneTit.view.MainView
I have follow the guides in the official Sencha website, but it seems not working.
I analyzed the http request and I noticed a 404 when the loader try to load the MainView.js file. It produce a wrong url.
In a typical ExtJS application, you place your source code in a folder called app directly under the folder you put the index.html file in. You haven't done that – as a result, the Ajax request to load the view class goes to the wrong place (as you've seen).
What you need to do is tell ExtJS where your code lives. And for that, Ext.Loader.setPath is your friend.
For example: Ext.Loader.setPath('GestioneTit', '../Project/app')
http://docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/Ext.Loader-method-setPath
Try adding the view to the views config in Application.js:
Ext.define('GestioneTit.app.Application',
{
extend: 'Ext.app.Application',
name: 'GestioneTit',
views: [
'GestioneTit.view.MainView'
],
launch: function(){
Ext.create('GestioneTit.view.MainView');
}
});
Ext.application('GestioneTit.app.Application');

Reuse elements of HTML

I'm writing a static web site that uses JQuery to make some AJAX calls to a RESTful API and populate the page with data.
The site functions correctly (and quickly), everything is good.
As I extend the site and add additional pages, I'm noticing that I'm duplicating certain regions on every page.
For instance, each page shares a common header element.
<header>...Some non-trivial content...</header>
Rather than repeat this definition on each page is there some mechanism, by which, I can define this section once and include it in each document.
Remember that the pages must be served statically but any standard complaint browser functionality can be utilised.
Is there a good way to do this, and what is it or, will I have to abandon DRY principles for this aspect of my client side code?
There's definitely some ways to achieve this. You could either do it using some features of your server-side language that allows to include the content of a page in another page, or if you do not have any server-side technology, you could simply put that code in it's own html document and load it's content using AJAX.
In jQuery it could look like:
$('#header').load('header.html');
However, if the content isin't static for all pages, you could always define a JS module that would be responsible to render this header. You module could make use of a client-side templating engine, like Mustache, Handlebars, etc. However you do not have to use any of these.
Here's a simple example:
DEMO
//in somefile.js, please note that you should namespace your modules
var Header = {
//default config
config: {
el: '#header',
title: 'Some title'
},
init: function (config) {
var cfg = this.config = $.extend({}, this.config, config);
$(cfg.el).html('<h1>' + cfg.title + '</h1>');
}
};
$(function () {
Object.create(Header).init({
title: 'Some other title'
});
Object.create(Header).init({
el: '#header1',
title: 'Yeah'
});
});
As I mentioned in the comment, this is how I do it:
main.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Main page</title>
<sript src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$('#commonsection').load('reusablefile.htm');
// which is eqvivalent to:
//
// $.ajax({
// url: 'reusablefile.htm',
// dataType: 'html',
// success: function(data){
// $('#commonsection').html(data);
// }
// });
});
</script>
</head>
<body>
<div id="commonsection"></div>
</body>
</html>
reusablefile.html:
<script>
(function($){ //separate scope to keep everything "private" for each module
//do additional javascript if required
})(jQuery);
</script>
<p>...Some non-trivial content...</p>
You could use jQuery's ajax as to load the header file. In each file you could load the html like so:
$('#header').load('header.html');
Since you're already using AJAX calls to populate your site with data, you could do the same for the common regions.
Just store the HTML for those regions in a separate file and load it in the page with AJAX. Also, you can work with caching using the Cache-Control headers on that file so you don't reload the entire content from the server with each page load.
If you're using straight HTML, you could do it with a SSI include command or by creating a template page and including it in jQuery. Both of these links might help you
Include another HTML file in a HTML file
and
http://www.htmlgoodies.com/beyond/webmaster/article.php/3473341/SSI-The-Include-Command.htm
It looks like this in modest:
main.xhtml
<?xml version='1.0' encoding='UTF-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<include>reusablePiece</include>
</head>
<body>
<reusablePiece/>
</body>
</html>
reusablePiece.xml
<header>...Some non-trivial content...</header>
Very simple would be the jQuery .clone() function.
If you have more complex content I recommend looking at Handlebars.js which is a full fledged JS templating engine.

How can I use easyslider in grails?

how can I implement easyslider 1.7 in grails? I know that you have to include the g:javascript tags, but how do I modify the code for this part:
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
numeric: true
});
});
</script>
I am new to grails, and would really appreciate your help! Thanks!
The easiest way is to create application resources in conf/ApplicationResources.groovy.
modules = {
'slider_resources' {
resource url: 'css/slider.css'
resource url: 'js/slider.js'
}
}
Which can be easily included in your GSP files with:
<r:require module="slider_resources" />
To use this mechanism the resources plugin needs to be installed.
See http://grails.org/plugin/resources

title bar is missing in YUI

I'm using the YUI Rich Text editor on my site. I'm loading it using the load javascript from Google. When I try to create a link (or any other action that creates an "settings" box, the title bar is missing, see picture here. You can see how it supposed to look over here at Yahoos site for YUI.
I'm using this code in the <head>-tag:
<!--Include YUI Loader: -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/yuiloader/yuiloader-min.js"></script>
<!--Use YUI Loader to bring in your other dependencies: -->
<script type="text/javascript">
// Instantiate and configure YUI Loader:
(function() {
var loader = new YAHOO.util.YUILoader({
base: "http://ajax.googleapis.com/ajax/libs/yui/2.7.0/build/",
require: ["editor"],
loadOptional: true,
combine: false,
filter: "MIN",
allowRollup: true,
onSuccess: function() {
var Editor = new YAHOO.widget.Editor('content', {
height: '300px',
width: '802px',
dompath: true, //Turns on the bar at the bottom
animate: true //Animates the opening, closing and moving of Editor windows
});
Editor.render();
}
});
// Load the files using the insert() method.
loader.insert();
})();
</script>
And in my webpage:
<div class="sIFR-ignore yui-skin-sam">
<textarea name="content" id="content" cols="50" rows="10">
</textarea>
</div>
I got some help from David Glass, one of the developers of YUI RTE. The error I had make was actually an CSS thing, some where in my CSS-files it was a line that read "h3 {visibility: hidden;}" which made this error. Any how, thanks for your help!
Try forcing your own title for the editor:
var Editor = new YAHOO.widget.Editor('content', {
height: '300px',
width: '802px',
dompath: true, //Turns on the bar at the bottom
animate: true //Animates the opening, closing and moving of Editor windows
});
Editor._defaultToolbar.titlebar="<b>Use my title</b>";
Editor.render();
I might be wrong here but, due to SOP (Same Origin Policy) I don't think JavaScript hosted in Google will be able to modify the DOM (unless you are google).
Try placing JavaScript in your web server and linking from there:
<script type="text/javascript" src="http://your.web.server.com/yui/2.7.0/build/yuiloader/yuiloader-min.js"></script>

Categories

Resources