gulp-wiredep to replace path - django

for django, i am trying to insert a relative path ..
the wiredep section of my older grunt file looked like this
wiredep: {
dashboard: {
src: '<%= backOffice.dashboard %>/base.html',
exclude: ['/selectize/', '/sifter/', '/microplugin/'],
ignorePath: '../../static/',
fileTypes: {
html: {
replace: {
js: '<script src="{{ STATIC_URL }}{{filePath}}"></script>',
css: '<link rel="stylesheet" href="{{ STATIC_URL }}{{filePath}}" />'
}
}
}
}
}
i am trying to do the same with my wiredep.js for gulp task and this is what it looks like
'use strict';
var gulp = require('gulp');
// inject bower components
gulp.task('wiredep', function() {
var wiredep = require('wiredep').stream;
gulp.src('src/{app,components}/*.scss')
.pipe(wiredep({
directory: 'src/bower_components'
}))
.pipe(gulp.dest('src'));
gulp.src('../../templates/backoffice/__base.html')
.pipe(wiredep({
fileTypes: {
html: {
replace: {
js: '<script src="{{ STATIC_URL }}{{filePath}}"></script>',
css: '<link rel="stylesheet" href="{{ STATIC_URL }}{{filePath}}" />'
}
}
}
}));
but this isn't working, can anybody help?

got the answer, must include the gulp.dest for the file to be created.
gulp.src('../../templates/backoffice/__base.html')
.pipe(wiredep({
ignorePath: '../../static/',
fileTypes: {
html: {
replace: {
js: '<script src="{{ STATIC_URL }}{{filePath}}"></script>',
css: '<link rel="stylesheet" href="{{ STATIC_URL }}{{filePath}}" />'
}
}
}
}))
.pipe(gulp.dest('../../templates/backoffice'));

Related

Angular "Uncaught (in promise): ChunkLoadError: Loading chunk 12 failed." error

I have recently rewritten my angular application. The previous project worked fine and I've not changed my django or apache2 configuration as it should just slip in.
n.b. I have changed the django home.html to include "-es2015" in the appropriate file names.
I'm currently getting the below errors in the inspector
Resource interpreted as Stylesheet but transferred with MIME type application/javascript: "http://146.148.41.45/static/assets/js/frontendwikiconverter.js". 146.148.41.45/:33
GET https://p.typekit.net/p.css?s=1&k=oov2wcw&ht=tk&f=39203&a=2613646&app=typekit&e=css net::ERR_CONNECTION_REFUSED oov2wcw.css:1
Uncaught SyntaxError: Invalid or unexpected token styles.css:1
Uncaught SyntaxError: Unexpected token '<' 12-es5.js:2
ERROR Error: Uncaught (in promise): ChunkLoadError: Loading chunk 12 failed. main-es5.js:1
My app.module:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '#angular/core';
import { LocationStrategy, HashLocationStrategy } from '#angular/common';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { PerfectScrollbarConfigInterface } from 'ngx-perfect-scrollbar';
import { ToastrModule } from 'ngx-toastr';
import { JwtTokenService } from './services/jwt-token.service'
import { IconModule, IconSetModule, IconSetService } from '#coreui/icons-angular';
import { LocalStorageService } from './services/local-storage-service.service';
import { NgxSmartModalModule } from 'ngx-smart-modal';
const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
suppressScrollX: true
};
import { AppComponent } from './app.component';
import { DefaultLayoutComponent } from './containers';
import { CommonModule } from "#angular/common";
import {AddToPlannerModule} from './views/planner/add-to-planner.module'
import { TooltipModule } from 'ngx-bootstrap/tooltip';
const APP_CONTAINERS = [
DefaultLayoutComponent
];
import {
AppAsideModule,
AppBreadcrumbModule,
AppHeaderModule,
AppFooterModule,
AppSidebarModule,
} from '#coreui/angular';
import { AppRoutingModule } from './app.routing';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TabsModule } from 'ngx-bootstrap/tabs';
import { ChartsModule } from 'ng2-charts';
import { AuthorizeGuard } from './services/authorize-guard.service';
import { TokenInterceptor } from './services/http.interceptor'
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { HttpClientModule, HTTP_INTERCEPTORS } from '#angular/common/http';
import { DatePipe } from '#angular/common';
import { IsAdmin } from './services/can-activate-guard.service';
#NgModule({
imports: [
BrowserModule,
CommonModule,
TooltipModule.forRoot(),
BrowserAnimationsModule,
AppRoutingModule,
AppAsideModule,
AppBreadcrumbModule.forRoot(),
AppFooterModule,
AppHeaderModule,
AppSidebarModule,
PerfectScrollbarModule,
BsDropdownModule.forRoot(),
TabsModule.forRoot(),
ChartsModule,
IconModule,
IconSetModule.forRoot(),
HttpClientModule,
NgxSmartModalModule.forRoot(),
ToastrModule.forRoot({
positionClass :'toast-bottom-right'
}),
NgbModule,
AddToPlannerModule
],
declarations: [
AppComponent,
...APP_CONTAINERS,
],
providers: [
{
provide: HTTP_INTERCEPTORS,
useClass: TokenInterceptor,
multi: true,
deps: [JwtTokenService]
},
{
provide: LocationStrategy,
useClass: HashLocationStrategy
},
IconSetService,
JwtTokenService,
LocalStorageService,
AuthorizeGuard,
DatePipe,
IsAdmin
],
schemas: [
NO_ERRORS_SCHEMA
],
bootstrap: [
AppComponent
],
entryComponents: [],
exports: [
//AddToPlannerComponent
]
})
export class AppModule { }
Routing Module:
import { NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
// Import Containers
import { DefaultLayoutComponent } from './containers/default-layout/default-layout.component';
import { P404Component } from './views/site-admin/p404/p404.component';
import { P500Component } from './views/site-admin/p500/p500.component';
import { SignInComponent } from './views/useradmin/sign-in/sign-in.component';
import { JoinComponent } from './views/useradmin/join/join.component';
import { HomeComponent } from './views/general/home/home.component'
export const routes: Routes = [
{
path: '404',
component: P404Component,
data: {
title: 'Page 404'
}
},
{
path: '500',
component: P500Component,
data: {
title: 'Page 500'
}
},
{
path: 'signin',
component: SignInComponent,
data: {
title: 'Sign In'
}
},
{
path: 'join',
component: JoinComponent,
data: {
title: 'Join KeyStageWiki'
}
},
{
path: '',
redirectTo: 'home',
pathMatch: 'full'
},
{
path: '',
component: DefaultLayoutComponent,
data: {
title: 'KeyStageWiki'
},
children: [
{
path: 'home',
loadChildren: () => import('./views/general/home/home.module').then(m => m.HomeModule)
},
{
path: 'ad-manager',
loadChildren: () => import('./views/admin/ad-manager/ad-manager.module').then(m => m.AdManagerModule)
},
{
path: 'general',
loadChildren: () => import('./views/general/general.module').then(m => m.GeneralModule)
},
{
path: 'planner',
loadChildren: () => import('./views/planner/planner.module').then(m => m.PlannerModule)
},
{
path: 'user',
loadChildren: () => import('./views/useradmin/user-admin.module').then(m => m.UserAdminModule)
},
{
path: 'wiki',
loadChildren: () => import('./views/wiki/wiki.module').then(m => m.WikiModule)
},
{
path: 'lessons',
loadChildren: () => import('./views/lessons/lessons.module').then(m => m.LessonsModule)
},
]
},
{ path: '**', component: P404Component }
];
#NgModule({
imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
exports: [RouterModule]
})
export class AppRoutingModule { }
home.html in the Django project:
{% load static %}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="{% static 'assets/img/keystagewiki.png' %}">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- <link rel="stylesheet" href="{% static 'ang/styles.css' %}"> -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="https://cdn.ckeditor.com/4.7.0/full-all/ckeditor.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdn.ckeditor.com/4.5.11/full-all/ckeditor.js"></script>
<link rel="stylesheet" href="https://use.typekit.net/oov2wcw.css">
<link rel="stylesheet" href="{% static 'assets/css/indigo-pink.css' %}">
<link rel="stylesheet" href="{% static 'assets/css/angular-calendar.css' %}">
<link rel="stylesheet" href="{% static 'assets/js/frontendwikiconverter.js' %}">
<link href="../css/style.css" type="text/scss" rel="stylesheet">
<link rel="stylesheet" href="{% static 'assets/css/ksw.css' %}">
</head>
<body style="max-width:1250px;margin:auto;" >
<app-root>
<img src="https://media.giphy.com/media/MDrmyLuEV8XFOe7lU6/giphy.gif" alt="Loading..." style="position:fixed; top:50%; left:50%; transform: translate(-50%, -50%);">
</app-root>
<script type="text/javascript" src="{% static 'ang/runtime.js' %}" defer></script>
<script type="text/javascript" src="{% static 'ang/polyfills.js' %}" defer></script>
<script type="text/javascript" src="{% static 'ang/main.js' %}" defer></script>
<script type="text/javascript" src="{% static 'ang/vendor.js' %}" defer></script>
<script type="text/javascript" src="{% static 'ang/styles.css' %}" defer></script>
<script type="text/javascript" src="{% static 'ang/scripts.js' %}" defer></script>
</body>
</html>
I'm very stuck, search and tried everything listed online. No progress. Any advise?

Cloud 9 carousel for Ionic 2

I want to integrate Cloud9 Carousel in Ionic 2.
Case-1: I import file like this.
import { Cloud9Carousel } from '../../assets/js/jquery.cloud9carousel.js';
Doesn't work
Case-2: I import like this.
import * as Cloud9Carousel from '../../assets/js/jquery.cloud9carousel.js';
Doesn't work too.
My .ts is written as
ngOnInit(){
$(function() {
var showcase = $("#showcase")
showcase.Cloud9Carousel( {
yPos: 42,
yRadius: 48,
mirrorOptions: {
gap: 12,
height: 0.2
},
buttonLeft: $(".nav > .left"),
buttonRight: $(".nav > .right"),
bringToFront: true,
onLoaded: function() {
showcase.css( 'visibility', 'visible' )
showcase.css( 'display', 'none' )
showcase.fadeIn( 1500 )
}
} );
})
}
HTML
<div id="wrap">
<div id="showcase" class="noselect">
<img class="cloud9-item" src="assets/menu/firefox.png" alt="Firefox">
<img class="cloud9-item" src="assets/menu/wyzo.png" alt="Wyzo">
<img class="cloud9-item" src="assets/menu/opera.png" alt="Opera">
<img class="cloud9-item" src="assets/menu/chrome.png" alt="Chrome">
<img class="cloud9-item" src="assets/menu/iexplore.png" alt="Internet Explorer">
<img class="cloud9-item" src="assets/menu/safari.png" alt="Safari">
</div>
</div>
Error:
showcase.Cloud9Carousel is not a function.
Thanks in advance
Put in ngAfterViewInit(), because this function is launched after content is presented, then the DOM is ready to be modified.

TestRunner Not Running My Mocha / Chai Tests

Despite my best efforts, I can't seem to get my testRunner.html to acknowledge my tests when I run the testRunner.html page in the browser. I've confirmed that it pulls in the test files and runs through the expect but the test runner is still saying that zero passed and zero failed. I've also tried moving the mocha.run() command into the testRunner.html page as an inline script to no effect.
What have I configured incorrectly?
testRunner.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8" />
<title> Tests </title>
<link href = "../node_modules/mocha/mocha.css" rel = "stylesheet">
</head>
<body>
<div id="mocha"></div>
<script src="../node_modules/mocha/mocha.js"></script>
<script>
mocha.setup('bdd');
</script>
<script src = "../node_modules/requirejs/require.js" data-main = "test.config.js"></script>
</body>
</html>
test.config.js
require.config({
baseUrl: '../src/public/js',
paths: {
jquery: '//code.jquery.com/jquery-2.1.1.min',
chai: '/../../../node_modules/chai/chai',
underscore: '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min',
backbone: '//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min',
marionette: 'http://marionettejs.com/downloads/backbone.marionette',
handlebars: '//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars',
syphon: '//cdnjs.cloudflare.com/ajax/libs/backbone.syphon/0.4.1/backbone.syphon.min'
},
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ['jquery', 'underscore'],
exports: 'Backbone'
},
marionette: {
deps: ['backbone'],
exports: 'Marionette'
},
syphon: {
deps: ['backbone', 'marionette'],
exports: 'Backbone.Syphon'
},
handlebars: {
exports: 'Handlebars'
}
}
});
require([
'../../../test/src/appTest'
], function() {
if (typeof mochaPhantomJS !== "undefined") {
mochaPhantomJS.run();
}
else {
mocha.run();
}
});
appTest.js
define(['chai'], function(chai) {
describe('array', function() {
chai.expect(1+1).to.equal(2);
});
});
You need to put your test in an it call:
define(['chai'], function(chai) {
describe('array', function() {
it("1 + 1 = 2", function () {
chai.expect(1+1).to.equal(2);
});
});
});
This is wholly an issue with how you are using Mocha. RequireJS is not a factor at all here.

Unit testing with QUnit, Grunt and RequireJS

I am trying to get my Unit Tests working in Grunt, when I execute my index file in the browser the tests run successfully, however when I run the tests with grunt qunit it cannot recognise any tests.
I I am sure this is down to the way I am executing the tests, if for example I just include:
<script>
test('Always Fail', function() {
equal(5, 2, 'The return should be 2.');
});
</script>
In the head of my index.html test page, and then run Grunt I can see this test failing. However I am trying to load my tests using requireJS, which as I have said do work within the browser.
My index.html file looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Unit Testing</title>
<link rel="stylesheet" href="qunit/qunit.css">
<script data-main="../unittests" src="../lib/require.js"></script>
<script src="qunit/qunit.js"></script>
<script>
test('Always Fail', function() {
equal(5, 2, 'The return should be 2.');
});
</script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>
I am assuming it is this line:
<script data-main="../unittests" src="../lib/require.js"></script>
That is causing the issue and not being loaded with grunt.
My unittests.js file looks like this:
require.config({
paths: {
'QUnit': 'test/qunit/qunit'
},
shim: {
'QUnit': {
exports: 'QUnit',
init: function() {
QUnit.config.autoload = false;
QUnit.config.autostart = false;
}
}
}
});
// require the unit tests.
require(
['QUnit', 'test/dummyTest'],
function(QUnit, dummyTest) {
// run the tests.
dummyTest.run();
// start QUnit.
QUnit.load();
QUnit.start();
}
);
Here is my gruntfile:
module.exports = function(grunt) {
// use grunt
var nocompress, optimize;
nocompress = grunt.option('nocompress') || false;
if(nocompress) {
optimize = 'none';
} else {
optimize = 'uglify';
}
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
requirejs: {
compile: {
options: {
appDir: "dev/",
baseUrl: "js",
mainConfigFile: "dev/js/bootstrap.js",
dir: "www",
optimize: optimize,
modules: [
{
name: "app"
}
]
}
}
},
qunit: {
all: ['dev/js/test/**/*.html']
},
jshint: {
options: {
curly: true,
eqeqeq: true,
eqnull: true,
browser: true,
globals: {
jQuery: true
},
},
uses_defaults: [
'dev/js/collections/*.js',
'dev/js/models/*.js',
'dev/js/views/*.js',
'dev/js/*.js', ]
}
});
// Load plugins
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-requirejs');
// Default task(s).
grunt.registerTask('build-and-qunit', ['default', 'qunit']);
grunt.registerTask('default', ['jshint', 'requirejs']);
};
I've had some success using a structure similar to:
https://github.com/jonnyreeves/qunit-require
Disable QUnit from auto-running.
Require all the dependencies.
Run QUnit.

Ext.On Ready () function not defined error in upload form . How to debug it?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> Upload Layer - EtherSpat </title>
<form action="."
enctype="multipart/form-data" method="post">
<p>
Type some text (if you like):<br>
<input type="text" name="textline" size="30">
</p>
<p>
Upload a shp file:<br>
<input type="file" name="shp" size="40">
</p>
Upload a shx file:<br>
<input type="file" name="shx" size="40">
</p>
Upload a dbf file:<br>
<input type="file" name="prj" size="40">
</p>
Upload a dbf file:<br>
<input type="file" name="dbf" size="40">
</p>
<div>
<input type="submit" value="Send">
</div>
</form>
<link rel="stylesheet" type="text/css" href="../geodjango/geographic_admin/templates/ext-4.0.1
/ext-all.css" />
<script type="text/javascript" src="../geodjango/geographic_admin/templates/ext-4.0.1
/ext-all.js"></script>
<script src="http://demo.geonode.org/media/static/script/OpenLayers.js"></script>
<script type="text/javascript" src="/lang.js"></script>
<script type="text/javascript">
{% autoescape off %}
Ext.onReady(function(){
Ext.QuickTips.init();
var form_target = "{% url maps.views.upload_layer %}";
// var xml_unsafe = /([^a-zA-Z\._])/g;
var xml_safe = /([a-zA-Z]+_[a-zA-Z]+_[1-2]{1}[0-9]{3}_[a-zA-Z]+$)/g;
var layer_name = new Ext.form.TextField({
id: 'layer_name',
fieldLabel: gettext('Name'),
name: 'layer_name',
emptyText: gettext('Unique name for layer. Defaults to file name.'),
validator: function(name) {
if (name.search(xml_safe) == -1) {
return gettext("The layer name must follow a pattern. Statename_city_year_datatype");
} else {
return true;
}
},
allowBlank: false
});
var listeners = {
"fileselected": function(cmp, value) {
// remove the path from the filename - avoids C:/fakepath etc.
cmp.setValue(value.split(/[/\\]/).pop());
}
};
var base_file = new Ext.ux.form.FileUploadField({
id: 'base_file',
emptyText: gettext('Select a layer data file'),
fieldLabel: gettext('File'),
name: 'base_file',
allowBlank: false,
listeners: listeners
});
var dbf_file = new Ext.ux.form.FileUploadField({
id: 'dbf_file',
emptyText: gettext('Select a .dbf data file'),
fieldLabel: gettext('DBF'),
name: 'dbf_file',
allowBlank: false,
listeners: listeners
});
var shx_file = new Ext.ux.form.FileUploadField({
id: 'shx_file',
emptyText: gettext('Select a .shx data file'),
fieldLabel: gettext('SHX'),
name: 'shx_file',
allowBlank: false,
listeners: listeners
});
var prj_file = new Ext.ux.form.FileUploadField({
id: 'prj_file',
emptyText: gettext('Select a .prj data file (optional)'),
fieldLabel: gettext('PRJ'),
name: 'prj_file',
allowBlank: true,
listeners: listeners
});
var fp = new Ext.FormPanel({
renderTo: 'upload_form',
fileUpload: true,
width: 500,
frame: true,
title: gettext('Upload Layer Data'),
autoHeight: true,
bodyStyle: 'padding: 10px 10px 0 10px;',
labelWidth: 50,
defaults: {
anchor: '95%',
msgTarget: 'side'
},
items: [layer_name, base_file, dbf_file, shx_file, prj_file, {
xtype: "hidden",
name: "csrfmiddlewaretoken",
value: "{{ csrf_token }}"
}],
buttons: [{
text: gettext('Upload'),
handler: function(){
if (fp.getForm().isValid()) {
fp.getForm().submit({
url: form_target,
waitMsg: gettext('Uploading your data...'),
success: function(fp, o) {
document.location = o.result.redirect_to;
},
failure: function(fp, o) {
error_message = '<ul>';
for (var i = 0; i < o.result.errors.length; i++) {
error_message += '<li>' + o.result.errors[i] + '</li>'
}
error_message += '</ul>'
Ext.Msg.show({
title: gettext("Error"),
msg: error_message,
minWidth: 200,
modal: true,
icon: Ext.Msg.ERROR,
buttons: Ext.Msg.OK
});
}
});
}
}
}]
});
var disable_shapefile_inputs = function() {
dbf_file.disable();
dbf_file.el.parent('.x-form-item').hide();
shx_file.disable();
shx_file.el.parent('.x-form-item').hide();
prj_file.disable();
prj_file.el.parent('.x-form-item').hide();
};
var enable_shapefile_inputs = function() {
dbf_file.enable();
dbf_file.el.parent('.x-form-item').show();
shx_file.enable();
shx_file.el.parent('.x-form-item').show();
prj_file.enable();
prj_file.el.parent('.x-form-item').show();
};
var check_shapefile = function() {
var main_filename = base_file.getValue();
if (main_filename.search(/\.shp$/i) != -1) {
enable_shapefile_inputs();
}
else {
disable_shapefile_inputs();
}
};
base_file.addListener('fileselected', function(cmp, value) {
check_shapefile();
var main_filename = value.split(/[/\\]/).pop();
var extension_index = main_filename.search(/\.\w+$/i);
if (extension_index != -1 && layer_name.getValue() == "") {
var cleaned = main_filename.substring(0, extension_index);
cleaned = cleaned.replace(xml_safe, "_");
layer_name.setValue(cleaned);
}
});
disable_shapefile_inputs();
});
{% endautoescape %}
</script>
This is the code . I understand that I need to include ext-base.js , but there is no such file in the ext-4 package that I have downloaded . Is there a certain path I need to follow , as in the files need to be in a certain directory for it to work in Django ? This html file is in the templates folder and the ext-4 folder too is in the templates folder
Javascript and js files should be in your "media" (Django <= 1.2) or "static" (Django 1.3) folders.
Django 1.3: https://docs.djangoproject.com/en/1.3/howto/static-files/#basic-usage
Put your js files in your app static/js/ folder and use this in your template:
<script src="{{STATIC_URL}}js/foo.js">
Django 1.2: In your settings.py add:
MEDIA_URL = '/static/'
BASE_DIR = os.path.abspath(os.path.dirname(__file__))
MEDIA_ROOT = '%s/static/' % BASE_DIR
Put your js files in your project static/js/ folder and use this in your template:
<script src="{{MEDIA_URL}}js/foo.js">
Be sure to configure your production web server properly as well: https://docs.djangoproject.com/en/dev/howto/deployment/modwsgi/#serving-media-files