I've tried to set up a grunt csscomb task, but I'm not sure if I'm getting the globbing pattern right:
csscomb: {
dynamic_mappings: {
expand: true,
cwd: 'app/',
src: '**/*.scss',
dest: 'app/assets/tempcomb'
},
options: {
config: 'csscomb.json'
}
},
Here is my folder architecture:
app
├── assets
│ ├── css
│ │ ├── imports
│ │ │ ├── helpers
│ │ │ │ └── _helpers.scss
│ │ │ ├── layout
│ │ │ │ ├── _fonts.scss
│ │ │ │ ├── _grid.scss
│ │ │ │ └── _reset.scss
│ │ │ └── modules
│ │ │ ├── _dev.scss
│ │ │ ├── _indicators.scss
│ │ │ ├── _modal.scss
│ │ │ ├── _nav.scss
│ │ │ └── _ref.scss
│ │ ├── main.scss
│ │ └── pages
│ │ ├── bibliography.scss
│ │ ├── cover.scss
│ │ ├── example.scss
│ │ ├── examples
│ │ │ ├── _bar-graph.scss
│ │ │ ├── _modal-transitions.scss
│ │ │ ├── _modals.scss
│ │ │ ├── _scroll-end-animation.scss
│ │ │ ├── _scrollable.scss
│ │ │ └── _tabs.scss
│ │ ├── index.scss
│ │ └── prescribing-information.scss
│ ├── fonts
│ ├── img
│ ├── js
│ ├── tempcomb
What I want it to do is look at all the directories under app, take all the scss files and write them to tempcomb while also maintaining the folder structure.
Currently it replicates the folder structure fine, but it only outputs the scss files that are in the layout folder.
If anyone could explain to me why this is happening it would be much appreciated!
P.s. before the task runs, the tempcomb folder doesn't exist. I've just added it to the architecture diagram to show where it ends up.
Related
I try to document my "large" node.js backend, which has the following file/folder structure:
backend
├── components
│ ├── devices
│ ├── endpoints
│ ├── plugins
│ ├── rooms
│ └── vault
├── helper
│ ├── debounce.js
│ ├── expose.js
│ ├── extend.js
│ ├── infinity.js
│ ├── iterate.js
│ ├── mixins.js
│ ├── observe.js
│ ├── promisify.js
│ ├── propertys.js
│ ├── queue.js
│ ├── request.js
│ ├── sanitize.js
│ └── timeout.js
├── index.js
└── system
├── component
├── hooks.js
└── middleware.js
Basically i want to create tree groups: system, helper & components, where i can add.
Is there a way to add custom categorys/groups in the jsdoc with the above headlines? E.g. (Generated jsdoc output edited to illustrate goal):
Is there a built in way with a combination of built in stuff?
(Im pretty new when it comes to work with jsdoc)
I have a simple static file server and try to host simple WebGL project on my localhost.
Well, I end up with
Loading module from “http://localhost:9000/main.js” was blocked because of a disallowed MIME type (“”).
and really don't know what to do with MIME (""). All I have, are just ".js" files, basically.
Anything else I have modified from This Server Template is that line of code
if (fs.statSync(pathname).isDirectory()) pathname += '/public/index' + ext;
Here is server file and my project directory tree:
const http = require('http');
const url = require('url');
const fs = require('fs');
const path = require('path');
const port = process.argv[2] || 9000;
http.createServer(function (req, res) {
console.log(`${req.method} ${req.url}`);
// parse URL
const parsedUrl = url.parse(req.url);
// extract URL path
let pathname = `.${parsedUrl.pathname}`;
// based on the URL path, extract the file extension. e.g. .js, .doc, ...
const ext = path.parse(pathname).ext;
// maps file extension to MIME typere
const map = {
'.ico': 'image/x-icon',
'.html': 'text/html',
'.js': 'text/javascript',
'.json': 'application/json',
'.css': 'text/css',
'.png': 'image/png',
'.jpg': 'image/jpeg',
'.wav': 'audio/wav',
'.mp3': 'audio/mpeg',
'.svg': 'image/svg+xml',
'.pdf': 'application/pdf',
'.doc': 'application/msword'
};
fs.exists(pathname, function (exist) {
if(!exist) {
// if the file is not found, return 404
res.statusCode = 404;
res.end(`File ${pathname} not found!`);
return;
}
// if is a directory search for index file matching the extension
if (fs.statSync(pathname).isDirectory()) pathname += '/public/index' + ext;
// read file from file system
fs.readFile(pathname, function(err, data){
if(err){
res.statusCode = 500;
res.end(`Error getting the file: ${err}.`);
} else {
// if the file is found, set Content-type and send data
res.setHeader('Content-type', map[ext] || 'text/plain' );
res.end(data);
}
});
});
}).listen(parseInt(port));
console.log(`Server listening on port ${port}`);
First_Triangle]$ tree
.
├── public
│ ├── geometries
│ │ ├── letter_A.js
│ │ └── letter_F.js
│ ├── index.html
│ ├── lib
│ │ ├── cuon-matrix.js
│ │ ├── cuon-utils.js
│ │ ├── webgl-debug.js
│ │ └── webgl-utils.js
│ ├── main.js
│ └── WebGL_Utilities
│ ├── Compile_Shader.js
│ ├── Create_3D_Context.js
│ ├── Create_Canvas
│ │ ├── Append_Canvas.js
│ │ ├── Create_Canvas_Element.js
│ │ ├── Create_Canvas_Imports.js
│ │ ├── Get_Body_Tag.js
│ │ └── Set_WebGL_Attribute.js
│ ├── Create_Canvas.js
│ ├── Create_Program.js
│ ├── FRAGMENT_SHADER_SOURCE.js
│ ├── Imports.js
│ ├── Initialization.js
│ ├── misc
│ │ └── misc
│ │ ├── completed_boilerplate.js
│ │ ├── createAttributeSetters.js
│ │ ├── createBufferInfoFromArrays.js
│ │ ├── createProgram.js
│ │ ├── createShader.js
│ │ ├── createUniformSetter.js
│ │ ├── Imports.js
│ │ ├── initialize_Vertex_Buffers.js
│ │ ├── m3.js
│ │ ├── m4.js
│ │ ├── resizeCanvasToDisplaySize.js
│ │ ├── rome.js
│ │ ├── setAttributes.js
│ │ ├── setBuffersAndAttributes.js
│ │ ├── setGeometry.js
│ │ ├── setRectangle.js
│ │ ├── setUniforms.js
│ │ ├── simple_transformations.js
│ │ ├── WebGL_Initialization
│ │ │ ├── Create_Canvas
│ │ │ │ ├── Append_Canvas.js
│ │ │ │ ├── Create_Canvas_Element.js
│ │ │ │ ├── Create_Canvas_Imports.js
│ │ │ │ ├── Get_Body_Tag.js
│ │ │ │ └── Set_WebGL_Attribute.js
│ │ │ ├── Create_Canvas.js
│ │ │ └── Initialization.js
│ │ ├── webgl-utils.js
│ │ └── webGlUtils.js
│ └── VERTEX_SHADER_SOURCE.js
└── server.js
UPDATE
I deleted type="module" from index.html file to import main.js, and got errors:
GET http://localhost:9000/main.js [HTTP/1.1 404 Not Found 2ms]
Cookie “” has been rejected as third-party.
I was tasked with upgrading a Django 1.3 application up to 1.8. I changed out the applications Filebrowser with a newer version from a Django 1.7 app we also have. Everything is working great, except in the admin, when I try to upload an image with Filebrowser I get the error ReferenceError: FileBrowser is not defined. It is being called in this Filebrowser template
filebrowser/templates/filebrowser/custom_field.html
/* Part that throws the error -> */ FileBrowser.show('id_image', '/admin/filebrowser/browse/?pop=1&dir=/customer_media');
{% load fb_versions %}
<input id="{{ final_attrs.id }}" type="text" class="vFileBrowseField" name="{{ final_attrs.name }}" value="{{ value }}" /><a href="javascript:FileBrowser.show('{{ final_attrs.id }}', '{% url "fb_browse" %}?pop=1{% if final_attrs.directory %}&dir={{ final_attrs.directory }}{% endif %}{% if final_attrs.format %}&type={{ final_attrs.format }}{% endif %}');" class="fb_show">
<img src="{{ final_attrs.search_icon }}" alt="" />
</a>
{% ifequal value.filetype "Image" %}
<p class="help" id="help_{{ final_attrs.id }}">
<a href="{{ value.url_full }}" target="_blank" id="link_{{ final_attrs.id }}">
<img id="image_{{ final_attrs.id }}" src="{% version value.path final_attrs.ADMIN_THUMBNAIL %}" class="preview" />
</a>
</p>
{% else %}
<p class="help" id="help_{{ final_attrs.id }}" style="display: none;">
<a href="javascript://" target="_self" id="link_{{ final_attrs.id }}">
<img id="image_{{ final_attrs.id }}" class="preview" src="" />
</a>
</p>
{% endifequal %}
{% if final_attrs.DEBUG %}
<p>
<strong>Path</strong> {{ value.path }}<br />
<strong>FileType</strong> {{ value.filetype }}<br /><br />
<strong>Directory</strong> {{ final_attrs.directory }}<br />
<strong>Extensions</strong> {{ final_attrs.extensions }}<br />
<strong>Format</strong> {{ final_attrs.format }}
</p>
{% endif %}
I am also getting this error, even though I can see that jquery is being loaded in the network tab of my chrome debugger.
TypeError: $ is not a function
├── admin_media
│ └── js
├── customer_media
│ └── js
├── site_media
│ ├── js
├── sqlite
│ └── endeavor.db
├── templates
│ ├── admin
│ │ └── base_site.html
│ ├── base.html
│ ├── detail
│ │ ├── detail_base.html
│ │ └── detail_page.html
│ ├── donation.html
│ ├── faqs.html
│ ├── fund_list.html
│ ├── home.html
│ ├── news
│ │ ├── news_article.html
│ │ ├── news_articles.html
│ │ └── news_list.html
│ ├── staff.html
│ └── thank_you.html
├── webapp
│ ├── DoImport.py
│ ├── FundsList.csv
│ ├── __init__.py
│ ├── filebrowser
│ │ ├── __init__.py
│ │ ├── __init__.pyc
│ │ ├── base.py
│ │ ├── base.pyc
│ │ ├── conf.py
│ │ ├── conf.pyc
│ │ ├── decorators.py
│ │ ├── fields.py
│ │ ├── fields.pyc
│ │ ├── forms.py
│ │ ├── functions.py
│ │ ├── management
│ │ │ ├── __init__.py
│ │ │ └── commands
│ │ │ ├── __init__.py
│ │ │ └── version_generator.py
│ │ ├── models.py
│ │ ├── settings.py
│ │ ├── static
│ │ │ └── filebrowser
│ │ │ ├── js
│ │ │ │ ├── AddFileBrowser.js
│ │ │ │ ├── FB_CKEditor.js
│ │ │ │ ├── FB_FileBrowseField.js
│ │ │ │ ├── FB_Redactor.js
│ │ │ │ ├── FB_TinyMCE.js
│ │ │ │ └── TinyMCEAdmin.js
│ │ │ └── uploadify
│ │ │ ├── Instructions.txt
│ │ │ ├── Sample
│ │ │ │ ├── check-exists.php
│ │ │ │ ├── index.php
│ │ │ │ ├── jquery.min.js
│ │ │ │ ├── jquery.uploadifive.min.js
│ │ │ │ ├── uploadifive-cancel.png
│ │ │ │ ├── uploadifive-image-only.php
│ │ │ │ ├── uploadifive.css
│ │ │ │ └── uploadifive.php
│ │ │ ├── change-log.txt
│ │ │ ├── check-exists.php
│ │ │ ├── index.php
│ │ │ ├── jquery.min.js
│ │ │ ├── jquery.uploadifive.js
│ │ │ ├── jquery.uploadifive.min.js
│ │ │ ├── license-commercial.txt
│ │ │ ├── uploadifive-cancel.png
│ │ │ ├── uploadifive-image-only.php
│ │ │ ├── uploadifive.css
│ │ │ └── uploadifive.php
│ │ ├── templates
│ │ │ └── filebrowser
│ │ │ ├── append.html
│ │ │ ├── custom_field.html
│ │ │ ├── include
│ │ │ │ ├── _response.html
│ │ │ │ ├── breadcrumbs.html
│ │ │ │ ├── filelisting.html
│ │ │ │ ├── filter.html
│ │ │ │ ├── paginator.html
│ │ │ │ ├── search.html
│ │ │ │ ├── tableheader.html
│ │ │ │ └── toolbar.html
│ │ │ ├── index.html
│ │ │ ├── makedir.html
│ │ │ ├── rename.html
│ │ │ ├── upload.html
│ │ │ └── versions.html
│ │ ├── templatetags
│ │ │ ├── __init__.py
│ │ │ ├── fb_csrf.py
│ │ │ ├── fb_pagination.py
│ │ │ ├── fb_tags.py
│ │ │ └── fb_versions.py
│ │ ├── urls.py
│ │ └── views.py
│ ├── fund_list.csv
│ ├── manage.py
│ ├── settings.py
│ ├── sslDecorator.py
│ ├── static
│ │ ├── admin
│ │ │ └── js
│ │ │ ├── LICENSE-JQUERY.txt
│ │ │ ├── SelectBox.js
│ │ │ ├── SelectFilter2.js
│ │ │ ├── actions.js
│ │ │ ├── actions.min.js
│ │ │ ├── admin
│ │ │ │ ├── DateTimeShortcuts.js
│ │ │ │ └── RelatedObjectLookups.js
│ │ │ ├── calendar.js
│ │ │ ├── collapse.js
│ │ │ ├── collapse.min.js
│ │ │ ├── core.js
│ │ │ ├── inlines.js
│ │ │ ├── inlines.min.js
│ │ │ ├── jquery.init.js
│ │ │ ├── jquery.js
│ │ │ ├── jquery.min.js
│ │ │ ├── prepopulate.js
│ │ │ ├── prepopulate.min.js
│ │ │ ├── related-widget-wrapper.js
│ │ │ ├── timeparse.js
│ │ │ └── urlify.js
│ │ └── filebrowser
│ │ ├── css
│ │ │ ├── filebrowser.css
│ │ │ └── suit-filebrowser.css
│ │ ├── img
│ │ │ ├── explorer.png
│ │ │ ├── filebrowser_icon_delete.gif
│ │ │ ├── filebrowser_icon_delete_hover.gif
│ │ │ ├── filebrowser_icon_rename.gif
│ │ │ ├── filebrowser_icon_rename_hover.gif
│ │ │ ├── filebrowser_icon_select.gif
│ │ │ ├── filebrowser_icon_select_disabled.gif
│ │ │ ├── filebrowser_icon_select_hover.gif
│ │ │ ├── filebrowser_icon_show.gif
│ │ │ ├── filebrowser_icon_show_hover.gif
│ │ │ ├── filebrowser_icon_showversions.gif
│ │ │ ├── filebrowser_icon_showversions_hover.gif
│ │ │ ├── filebrowser_type_.gif
│ │ │ ├── filebrowser_type_audio.gif
│ │ │ ├── filebrowser_type_code.gif
│ │ │ ├── filebrowser_type_document.gif
│ │ │ ├── filebrowser_type_folder.gif
│ │ │ ├── filebrowser_type_image.gif
│ │ │ ├── filebrowser_type_video.gif
│ │ │ ├── icon-fb-preview-hover.png
│ │ │ ├── icon-fb-preview.png
│ │ │ ├── icon-fb-view-image-hover.png
│ │ │ ├── icon-pulldown-actions-active.png
│ │ │ ├── icon-pulldown-actions-hover.png
│ │ │ ├── icon-pulldown-actions.png
│ │ │ ├── icon-searchbox.png
│ │ │ └── icon-showversions.png
│ │ ├── js
│ │ │ ├── AddFileBrowser.js
│ │ │ ├── FB_CKEditor.js
│ │ │ ├── FB_FileBrowseField.js
│ │ │ ├── FB_Redactor.js
│ │ │ ├── FB_TinyMCE.js
│ │ │ └── TinyMCEAdmin.js
│ │ └── uploadify
│ │ ├── Instructions.txt
│ │ ├── Sample
│ │ │ ├── check-exists.php
│ │ │ ├── index.php
│ │ │ ├── jquery.min.js
│ │ │ ├── jquery.uploadifive.min.js
│ │ │ ├── uploadifive-cancel.png
│ │ │ ├── uploadifive-image-only.php
│ │ │ ├── uploadifive.css
│ │ │ └── uploadifive.php
│ │ ├── change-log.txt
│ │ ├── check-exists.php
│ │ ├── index.php
│ │ ├── jquery.min.js
│ │ ├── jquery.uploadifive.js
│ │ ├── jquery.uploadifive.min.js
│ │ ├── license-commercial.txt
│ │ ├── uploadifive-cancel.png
│ │ ├── uploadifive-image-only.php
│ │ ├── uploadifive.css
│ │ └── uploadifive.php
│ ├── urls.py
│ ├── utility.py
│ ├── views.py
│ └── wsgi.py
└── webapp_admin
Settings
import logging
import os
import sys
from posixpathhelp import parentpath
PROJECT_ROOT = os.path.abspath(os.path.dirname(__file__))
PROJECT_PARENT = parentpath(PROJECT_ROOT)
sys.path.insert(0, PROJECT_ROOT)
DEVELOPMENT = False
# Make this unique, and don't share it with anybody.
SECRET_KEY = ''
# SECURITY WARNING: don't run with debug turned on in production!
ALLOWED_HOSTS = ['*', ]
SITE_ID = 1
# EMAIL SETTINGS
EMAILTO = 'xxxxx#xxxxx.com'
EMAIL_HOST = 'smtp.gmail.com'
EMAIL_PORT = xxx
EMAIL_HOST_USER = 'xxxxx#xxxx.com'
EMAIL_HOST_PASSWORD = 'xxxxxxx'
EMAIL_USE_TLS = True
# Application definition
INSTALLED_APPS = (
'filebrowser',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.sites',
'django.contrib.messages',
'django.contrib.staticfiles',
'django.contrib.sitemaps',
'tinymce',
'content',
'page_content',
'staff',
'news',
'donation',
'paypal.standard',
'paypal.pro',
'paypal.standard.ipn',
)
MIDDLEWARE_CLASSES = (
'django.middleware.common.CommonMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
# 'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
)
from django.conf.global_settings import TEMPLATE_CONTEXT_PROCESSORS as TCP
TEMPLATE_CONTEXT_PROCESSORS = TCP + (
'django.core.context_processors.request',
'common_context_processors.common_context',
)
ROOT_URLCONF = 'webapp.urls'
WSGI_APPLICATION = 'webapp.wsgi.application'
TIME_ZONE = 'America/New_York'
LANGUAGE_CODE = 'en-us'
USE_I18N = True
USE_L10N = True
MEDIA_ROOT = os.path.join(PROJECT_PARENT, "site_media/")
CUSTOMER_MEDIA_ROOT = os.path.join(PROJECT_PARENT, "customer_media/")
MEDIA_URL = '/site_media/'
CUSTOMER_MEDIA_URL = '/customer_media/'
STATIC_ROOT = os.path.join(PROJECT_ROOT, 'static')
STATIC_URL = '/static/'
FILE_UPLOAD_PERMISSIONS = 0644
SESSION_COOKIE_AGE = 3600
SESSION_EXPIRE_AT_BROWSER_CLOSE = True
SESSION_SAVE_EVERY_REQUEST = True
LOGGING = {
'version': 1,
'disable_existing_loggers': True,
'formatters': {
'verbose': {
'format': '%(levelname)s %(asctime)s %(filename)s %(funcName)s %(lineno)d %(message)s'
},
'normal': {
'format': '%(levelname)s %(asctime)s %(funcName)s %(message)s'
},
'simple': {
'format': '%(levelname)s %(message)s'
},
},
'filters': {
'require_debug_false': {
'()': 'django.utils.log.RequireDebugFalse'
}
},
'handlers': {
'console': {
'level': 'ERROR',
'class': 'logging.StreamHandler',
'formatter': 'verbose'
},
},
'loggers': {
'django.request': {
'handlers': ['console'],
'level': 'ERROR',
'propagate': True,
},
'webapp': {
'handlers': ['console'],
'level': 'ERROR',
'propagate': True,
},
'': {
'handlers': ['console'],
'level': 'ERROR',
},
}
}
DJANGO_FRONT_ALLOWED_EDITORS = ['tinymce', ]
DJANGO_FRONT_EDIT_MODE = 'inline'
DJANGO_FRONT_EDITOR_OPTIONS = {
'filebrowserBrowseUrl': '/admin/filebrowser/browse/?pop=3',
'contentsCss': '/static/css/contents.css'
}
DJANGO_FRONT_KEY = 'xxxxxxxxxxxxxxxxxxxxxxx' # MAKE THIS UNIQUE PER SETTINGS FILE
TRACKING_RESULTS_PER_PAGE = 50
ADMINS = (
('XXXX XXXXXXXX', 'xxxxxx#xxxxxx'),
)
MANAGERS = ADMINS
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
# Add 'postgresql_psycopg2', 'postgresql', 'mysql', 'sqlite3' or 'oracle'.
'NAME': os.path.join(PROJECT_PARENT, "sqlite/endeavor.db"), # Or path to database file if using sqlite3.
'USER': '', # Not used with sqlite3.
'PASSWORD': '', # Not used with sqlite3.
'HOST': '', # Set to empty string for localhost. Not used with sqlite3.
'PORT': '', # Set to empty string for default. Not used with sqlite3.
}
}
if DEVELOPMENT:
ADMIN_MEDIA_PREFIX = 'http://127.0.0.1:8080/admin_media/'
else:
ADMIN_MEDIA_PREFIX = '/admin_media/'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [
# insert your TEMPLATE_DIRS here
os.path.join(PROJECT_PARENT, "templates"),
],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
# Insert your TEMPLATE_CONTEXT_PROCESSORS here or use this
# list if you haven't customized them:
'django.contrib.auth.context_processors.auth',
'django.template.context_processors.debug',
'django.template.context_processors.i18n',
'django.template.context_processors.media',
'django.template.context_processors.static',
'django.template.context_processors.tz',
'django.contrib.messages.context_processors.messages',
],
},
},
]
PAYPAL_TEST = False # Testing mode on
PAYPAL_WPP_USER = "xxxxxxxxx" # Get from PayPal
PAYPAL_WPP_PASSWORD = "xxxxxxxxxxxxx"
PAYPAL_WPP_SIGNATURE = "xxxxxxxxxxxxxxxxxxxxxxxx"
PAYPAL_RECEIVER_EMAIL = "xxx#xxxx.com"
From your error message:
TypeError: $ is not a function
It looks like the jQuery global variable $ isn't getting loaded.
Are you sure your jQuery static file jquery.min.js is getting loaded correctly?
I am at the point where I have to add Express 4 to my modularized AngularJS ui-router app. Previously I used this tutorial to modularize my Angular app. I currently have all the modules for my AngularJS app in the src/app/ directory like so:
$ tree -I 'node_modules|bower_components|assets|scss|test' -L 4
.
├── awsS3.js
├── bower.json
├── Gruntfile.js
├── karma.conf.js
├── karma-e2e.conf.js
├── package.json
├── README.md
├── server.js
└── src
├── app
│ ├── app.module.js
│ ├── auth
│ │ ├── auth.ctrl.js
│ │ ├── auth.module.js
│ │ └── auth.serv.js
│ ├── image
│ │ ├── image.module.js
│ │ ├── images.ctrl.js
│ │ ├── image.serv.js
│ │ ├── images.tpl.html
│ │ ├── imageview.ctrl.js
│ │ └── imageview.tpl.html
│ ├── nav
│ │ ├── login.tpl.html
│ │ ├── nav.ctrl.js
│ │ ├── nav.module.js
│ │ ├── post-register.tpl.html
│ │ ├── register.tpl.html
│ │ └── url.fltr.js
│ └── security.json
├── index.html
└── robots.txt
Now I am wondering how I should break up the Express 4 code to fit in with my Angular modules. I really can't find any tutorials that focus on this. Any ideas?
When i develop client-server applications I tend to keep the server and client completely separate from each other. So I would suggest that you create a "server" folder and in there your layout could look something like this:
server
--app.js
--server.js
--config.js
--controllers
----firstController.js
--routes
----firstRoute.js
--models
----firstModel.js
I would recommend this website: https://scotch.io
I have zero experience with jQuery and JavaScript. I have to make use of jqGrid, but I have failed to run any of the demos.
I have the following structure:
.
├── css
│ ├── ui.jqgrid.css
│ └── ui-lightness
│ ├── images
│ │ ├── animated-overlay.gif
│ │ ├── ui-bg_diagonals-thick_18_b81900_40x40.png
│ │ ├── ui-bg_diagonals-thick_20_666666_40x40.png
│ │ ├── ui-bg_flat_10_000000_40x100.png
│ │ ├── ui-bg_glass_100_f6f6f6_1x400.png
│ │ ├── ui-bg_glass_100_fdf5ce_1x400.png
│ │ ├── ui-bg_glass_65_ffffff_1x400.png
│ │ ├── ui-bg_gloss-wave_35_f6a828_500x100.png
│ │ ├── ui-bg_highlight-soft_100_eeeeee_1x100.png
│ │ ├── ui-bg_highlight-soft_75_ffe45c_1x100.png
│ │ ├── ui-icons_222222_256x240.png
│ │ ├── ui-icons_228ef1_256x240.png
│ │ ├── ui-icons_ef8c08_256x240.png
│ │ ├── ui-icons_ffd27a_256x240.png
│ │ └── ui-icons_ffffff_256x240.png
│ ├── jquery-ui-1.10.4.css
│ └── jquery-ui-1.10.4.min.css
├── dbconfig.php
├── example.html
├── example.php
├── js
│ ├── Changes.txt
│ ├── i18n
│ │ ├── grid.locale-ar.js
│ │ ├── grid.locale-bg1251.js
│ │ ├── grid.locale-bg.js
│ │ ├── grid.locale-cat.js
│ │ ├── grid.locale-cn.js
│ │ ├── grid.locale-cs.js
│ │ ├── grid.locale-da.js
│ │ ├── grid.locale-de.js
│ │ ├── grid.locale-dk.js
│ │ ├── grid.locale-el.js
│ │ ├── grid.locale-en.js
│ │ ├── grid.locale-es.js
│ │ ├── grid.locale-fa.js
│ │ ├── grid.locale-fi.js
│ │ ├── grid.locale-fr.js
│ │ ├── grid.locale-gl.js
│ │ ├── grid.locale-he.js
│ │ ├── grid.locale-hr1250.js
│ │ ├── grid.locale-hr.js
│ │ ├── grid.locale-hu.js
│ │ ├── grid.locale-id.js
│ │ ├── grid.locale-is.js
│ │ ├── grid.locale-it.js
│ │ ├── grid.locale-ja.js
│ │ ├── grid.locale-kr.js
│ │ ├── grid.locale-lt.js
│ │ ├── grid.locale-mne.js
│ │ ├── grid.locale-nl.js
│ │ ├── grid.locale-no.js
│ │ ├── grid.locale-pl.js
│ │ ├── grid.locale-pt-br.js
│ │ ├── grid.locale-pt.js
│ │ ├── grid.locale-ro.js
│ │ ├── grid.locale-ru.js
│ │ ├── grid.locale-sk.js
│ │ ├── grid.locale-sr.js
│ │ ├── grid.locale-sr-latin.js
│ │ ├── grid.locale-sv.js
│ │ ├── grid.locale-th.js
│ │ ├── grid.locale-tr.js
│ │ ├── grid.locale-tw.js
│ │ ├── grid.locale-ua.js
│ │ └── grid.locale-vi.js
│ ├── install.txt
│ ├── jquery-1.11.0.min.js
│ ├── jquery.jqGrid.min.js
│ └── jquery.jqGrid.src.js
├── plugins
│ ├── grid.addons.js
│ ├── grid.postext.js
│ ├── grid.setcolumns.js
│ ├── jquery.contextmenu.js
│ ├── jquery.searchFilter.js
│ ├── jquery.tablednd.js
│ ├── searchFilter.css
│ ├── ui.multiselect.css
│ └── ui.multiselect.js
├── src
│ ├── css
│ │ ├── ui.jqgrid.css
│ │ └── ui.multiselect.css
│ ├── grid.base.js
│ ├── grid.celledit.js
│ ├── grid.common.js
│ ├── grid.custom.js
│ ├── grid.filter.js
│ ├── grid.formedit.js
│ ├── grid.grouping.js
│ ├── grid.import.js
│ ├── grid.inlinedit.js
│ ├── grid.jqueryui.js
│ ├── grid.loader.js
│ ├── grid.pivot.js
│ ├── grid.subgrid.js
│ ├── grid.tbltogrid.js
│ ├── grid.treegrid.js
│ ├── i18n
│ │ ├── grid.locale-ar.js
│ │ ├── grid.locale-bg1251.js
│ │ ├── grid.locale-bg.js
│ │ ├── grid.locale-cat.js
│ │ ├── grid.locale-cn.js
│ │ ├── grid.locale-cs.js
│ │ ├── grid.locale-da.js
│ │ ├── grid.locale-de.js
│ │ ├── grid.locale-dk.js
│ │ ├── grid.locale-el.js
│ │ ├── grid.locale-en.js
│ │ ├── grid.locale-es.js
│ │ ├── grid.locale-fa.js
│ │ ├── grid.locale-fi.js
│ │ ├── grid.locale-fr.js
│ │ ├── grid.locale-gl.js
│ │ ├── grid.locale-he.js
│ │ ├── grid.locale-hr1250.js
│ │ ├── grid.locale-hr.js
│ │ ├── grid.locale-hu.js
│ │ ├── grid.locale-id.js
│ │ ├── grid.locale-is.js
│ │ ├── grid.locale-it.js
│ │ ├── grid.locale-ja.js
│ │ ├── grid.locale-kr.js
│ │ ├── grid.locale-lt.js
│ │ ├── grid.locale-mne.js
│ │ ├── grid.locale-nl.js
│ │ ├── grid.locale-no.js
│ │ ├── grid.locale-pl.js
│ │ ├── grid.locale-pt-br.js
│ │ ├── grid.locale-pt.js
│ │ ├── grid.locale-ro.js
│ │ ├── grid.locale-ru.js
│ │ ├── grid.locale-sk.js
│ │ ├── grid.locale-sr.js
│ │ ├── grid.locale-sr-latin.js
│ │ ├── grid.locale-sv.js
│ │ ├── grid.locale-th.js
│ │ ├── grid.locale-tr.js
│ │ ├── grid.locale-tw.js
│ │ ├── grid.locale-ua.js
│ │ └── grid.locale-vi.js
│ ├── jqDnR.js
│ ├── jqModal.js
│ ├── jquery.fmatter.js
│ ├── jquery.jqGrid.js
│ └── JsonXml.js
└── themes
├── basic
│ ├── grid.css
│ └── images
│ ├── cd_run.gif
│ ├── dirty.gif
│ ├── down.gif
│ ├── find.gif
│ ├── first.gif
│ ├── folder.png
│ ├── grid-blue-ft.gif
│ ├── grid-blue-hd.gif
│ ├── headerbg.gif
│ ├── headerleft.gif
│ ├── headerright.gif
│ ├── ico-close.gif
│ ├── last.gif
│ ├── line3.gif
│ ├── minus.gif
│ ├── next.gif
│ ├── nochild.gif
│ ├── off-first.gif
│ ├── off-last.gif
│ ├── off-next.gif
│ ├── off-prev.gif
│ ├── plus.gif
│ ├── prev.gif
│ ├── refresh.gif
│ ├── resize.gif
│ ├── row_add.gif
│ ├── row_delete.gif
│ ├── row_edit.gif
│ ├── sort_asc.gif
│ ├── sort_desc.gif
│ ├── spacer.gif
│ ├── tab_close-on.gif
│ ├── tree_leaf.gif
│ ├── tree_minus.gif
│ ├── tree_plus.gif
│ └── up.gif
├── coffee
│ ├── grid.css
│ └── images
│ ├── cd_run.gif
│ ├── dirty.gif
│ ├── down.gif
│ ├── find.gif
│ ├── first.gif
│ ├── folder.png
│ ├── grid-blue-ft.gif
│ ├── grid-blue-hd.gif
│ ├── headerbg.gif
│ ├── headerleft.gif
│ ├── headerright.gif
│ ├── ico-close.gif
│ ├── last.gif
│ ├── line3.gif
│ ├── minus.gif
│ ├── next.gif
│ ├── nochild.gif
│ ├── off-first.gif
│ ├── off-last.gif
│ ├── off-next.gif
│ ├── off-prev.gif
│ ├── plus.gif
│ ├── prev.gif
│ ├── refresh.gif
│ ├── resize.gif
│ ├── row_add.gif
│ ├── row_delete.gif
│ ├── row_edit.gif
│ ├── sort_asc.gif
│ ├── sort_desc.gif
│ ├── spacer.gif
│ ├── tab_close-on.gif
│ ├── tree_leaf.gif
│ ├── tree_minus.gif
│ ├── tree_plus.gif
│ └── up.gif
├── green
│ ├── grid.css
│ └── images
│ ├── cd_run.gif
│ ├── cross-disabled.png
│ ├── cross.png
│ ├── dirty.gif
│ ├── down.gif
│ ├── find.gif
│ ├── first.gif
│ ├── folder.png
│ ├── grid-blue-ft.gif
│ ├── grid-blue-hd.gif
│ ├── headerbg.gif
│ ├── headerleft.gif
│ ├── headerright.gif
│ ├── ico-close.gif
│ ├── last.gif
│ ├── leaf.gif
│ ├── line3.gif
│ ├── mail_arrow-disabled.png
│ ├── mail_arrow.png
│ ├── minus.gif
│ ├── next.gif
│ ├── nochild.gif
│ ├── off-first.gif
│ ├── off-last.gif
│ ├── off-next.gif
│ ├── off-prev.gif
│ ├── plus-disabled.png
│ ├── plus.gif
│ ├── plus.png
│ ├── prev.gif
│ ├── refresh.gif
│ ├── resize.gif
│ ├── row_add.gif
│ ├── row_delete.gif
│ ├── row_edit.gif
│ ├── search.png
│ ├── sort_asc.gif
│ ├── sort_desc.gif
│ ├── spacer.gif
│ ├── tab_close-on.gif
│ ├── tree_leaf.gif
│ ├── tree_minus.gif
│ ├── tree_plus.gif
│ └── up.gif
├── jqModal.css
└── sand
├── grid.css
└── images
├── cd_run.gif
├── dirty.gif
├── down.gif
├── find.gif
├── first.gif
├── folder.png
├── grid-blue-ft.gif
├── grid-blue-hd.gif
├── headerbg.gif
├── headerleft.gif
├── headerright.gif
├── ico-close.gif
├── last.gif
├── line3.gif
├── minus.gif
├── next.gif
├── nochild.gif
├── off-first.gif
├── off-last.gif
├── off-next.gif
├── off-prev.gif
├── plus.gif
├── prev.gif
├── refresh.gif
├── resize.gif
├── row_add.gif
├── row_delete.gif
├── row_edit.gif
├── sort_asc.gif
├── sort_desc.gif
├── spacer.gif
├── tab_close-on.gif
├── tree_leaf.gif
├── tree_minus.gif
├── tree_plus.gif
└── up.gif
My example.html has this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jqGrid Demos</title>
<!-- In head section we should include the style sheet for the grid -->
<link rel="stylesheet" type="text/css" media="screen" href="themes/sand/grid.css" />
<!-- Of course we should load the jquery library -->
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<!-- and at end the jqGrid Java Script file -->
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
// We use a document ready jquery function.
jQuery(document).ready(function(){
jQuery("#list2").jqGrid({
// the url parameter tells from where to get the data from server
// adding ?nd='+new Date().getTime() prevent IE caching
url:'example.php?nd='+new Date().getTime(),
// datatype parameter defines the format of data returned from the server
// in this case we use a JSON data
datatype: "json",
// colNames parameter is a array in which we describe the names
// in the columns. This is the text that apper in the head of the grid.
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
// colModel array describes the model of the column.
// name is the name of the column,
// index is the name passed to the server to sort data
// note that we can pass here nubers too.
// width is the width of the column
// align is the align of the column (default is left)
// sortable defines if this column can be sorted (default true)
colModel:[
{name:'id',index:'id', width:55},
{name:'invdate',index:'invdate', width:90},
{name:'name',index:'name asc, invdate', width:100},
{name:'amount',index:'amount', width:80, align:"right"},
{name:'tax',index:'tax', width:80, align:"right"},
{name:'total',index:'total', width:80,align:"right"},
{name:'note',index:'note', width:150, sortable:false}
],
// pager parameter define that we want to use a pager bar
// in this case this must be a valid html element.
// note that the pager can have a position where you want
pager: jQuery('#pager2'),
// rowNum parameter describes how many records we want to
// view in the grid. We use this in example.php to return
// the needed data.
rowNum:10,
// rowList parameter construct a select box element in the pager
//in wich we can change the number of the visible rows
rowList:[10,20,30],
// sortname sets the initial sorting column. Can be a name or number.
// this parameter is added to the url
sortname: 'id',
//viewrecords defines the view the total records from the query in the pager
//bar. The related tag is: records in xml or json definitions.
viewrecords: true,
//sets the sorting order. Default is asc. This parameter is added to the url
sortorder: "desc",
caption: "Demo",
});
});
</script>
</head>
<body>
<!-- the grid definition in html is a table tag with class 'scroll' -->
<table id="list2"></table>
<!-- pager definition. class scroll tels that we want to use the same theme as grid -->
<div id="pager2"></div>
</body>
</html>
And my example.php has this.
<?php
//include the information needed for the connection to MySQL data base server.
// we store here username, database and password
include("dbconfig.php");
// to the url parameter are added 4 parameters as described in colModel
// we should get these parameters to construct the needed query
// Since we specify in the options of the grid that we will use a GET method
// we should use the appropriate command to obtain the parameters.
// In our case this is $_GET. If we specify that we want to use post
// we should use $_POST. Maybe the better way is to use $_REQUEST, which
// contain both the GET and POST variables. For more information refer to php documentation.
// Get the requested page. By default grid sets this to 1.
$page = $_GET['page'];
// get how many rows we want to have into the grid - rowNum parameter in the grid
$limit = $_GET['rows'];
// get index row - i.e. user click to sort. At first time sortname parameter -
// after that the index from colModel
$sidx = $_GET['sidx'];
// sorting order - at first time sortorder
$sord = $_GET['sord'];
// if we not pass at first time index use the first column for the index or what you want
if(!$sidx) $sidx =1;
// connect to the MySQL database server
$db = mysql_connect($dbhost, $dbuser, $dbpassword) or die("Connection Error: " . mysql_error());
// select the database
mysql_select_db($database) or die("Error connecting to db.");
// calculate the number of rows for the query. We need this for paging the result
$result = mysql_query("SELECT COUNT(*) AS count FROM invheader");
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$count = $row['count'];
// calculate the total pages for the query
if( $count > 0 && $limit > 0) {
$total_pages = ceil($count/$limit);
} else {
$total_pages = 0;
}
// if for some reasons the requested page is greater than the total
// set the requested page to total page
if ($page > $total_pages) $page=$total_pages;
// calculate the starting position of the rows
$start = $limit*$page - $limit;
// if for some reasons start position is negative set it to 0
// typical case is that the user type 0 for the requested page
if($start <0) $start = 0;
// the actual query for the grid data
$SQL = "SELECT invid, invdate, amount, tax,total, note FROM invheader ORDER BY $sidx $sord LIMIT $start , $limit";
$result = mysql_query( $SQL ) or die("Couldn't execute query.".mysql_error());
// we should set the appropriate header information. Do not forget this.
header("Content-type: text/xml;charset=utf-8");
$s = "<?xml version='1.0' encoding='utf-8'?>";
$s .= "<rows>";
$s .= "<page>".$page."</page>";
$s .= "<total>".$total_pages."</total>";
$s .= "<records>".$count."</records>";
// be sure to put text data in CDATA
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
$s .= "<row id='". $row['invid']."'>";
$s .= "<cell>". $row['invid']."</cell>";
$s .= "<cell>". $row['invdate']."</cell>";
$s .= "<cell>". $row['amount']."</cell>";
$s .= "<cell>". $row['tax']."</cell>";
$s .= "<cell>". $row['total']."</cell>";
$s .= "<cell><![CDATA[". $row['note']."]]></cell>";
$s .= "</row>";
}
$s .= "</rows>";
echo $s;
?>
I have mysqld daemon running and I have a database with the appropiate tables and data.
As far as I understand I should be able to just open the example.html file using either Firefox or Chrome and I should see a nice grid there. However I just see an empty table with no style and no data.
On the Chromium console I get this error.
XMLHttpRequest cannot load file:///home/diego/Dropbox/testing/tutorial/jqgrid/example.php?nd=1403823560719&_search=false&nd=1403823560791&rows=10&page=1&sidx=id&sord=desc. Received an invalid response. Origin 'null' is therefore not allowed access.
On Firefox it just says not well-formed and highlights the line 66 of my example.php which is:
$s .= "<rows>";
So far I have no idea what is wrong. I have PHP 5.5.13 installed. I have used PHP but I bet that part is okay.
Am I missing something? I just want to get this example to run so I can start toying with it.