Has anyone shown a carto map in an ionic 2 app? When I used ionic 1 there was no problem, because it is angular js and I could add the library in the index.html:
and then use it in a controller.js like that:
var mapa; mapa = new L.Map('mapa', { center: [39,-6], zoom: 9 })
But the problem is that now I'm using ionic 2, so it's angular 2, typescript. After adding the libraries I try to do the same code above in the .ts file, but it can't find the name L.
Has anyone idea how to show my map? Or how to use a js library in typescript?
I'm not sure if I explained well the problem, so any doubt, ask me please.
Thanks!
in index.html add this:
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css">
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
in page.ts file add this:
import L from 'leaflet';
and alsodeclare L for avoiding from that error:
declare var L: any;
Related
I have django bokeh project and I'm trying to add dateRangePicker slider but I get error in console
bokeh-0.12.16.min.js:1 Uncaught Error: Model 'DateRangeSlider' does not exist. This could be due to a widget
or a custom model not being registered before first usage.
This is code for that.
date_range_slider = DateRangeSlider(title="Date Range: ", start='2018-01-02', end='2018-06-09',
value=('2018-06-02', '2018-06-09'), step=1)
# l = layout(children=[[date_range_slider]], sizing_mode='fixed')
l = layout(children=[[p], [date_range_slider]], sizing_mode='fixed')
script, div = components(l)
print(div)
return render(request, 'index.html', {"the_script": script, "the_div": div})
Do I need to add anything in django model?
Update: note that starting with Bokeh 2.0, there are only JS components to load (no separate CSS files)
BokehJS is split into multiple pieces so that users who do not need, e.g. widgets, do not have to load the extra JS and CSS for them. If you use widgets and components, you need to explicitly include the extra JS and CSS for them as described in the documentation
<link
href="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-x.y.z.min.css"
rel="stylesheet" type="text/css">
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-x.y.z.min.js"></script>
The problem is that my index.html won't load a css file from a sister folder. I've tried a variety of Browsersync options and none worked.
Into my second day trying to figure this out. I'm working in the Flask framework for Python which works something like Laravel, etc. My task manager is Gulp, front end framework is Foundation 6. I'm new to Flask and Gulp. I used to use Grunt and Livereload with Laravel some years ago and had scss and browser reload working then. Memory fades though.
My file structure is supposed to be typical Flask, just the relevant folders here:
-root
-app
-static
-css
-js
-templates (html files)
-foundation (scss files and framework)
Browsersync seems to be designed so you have to have css under the html files. I've tested this with an index.html in the /root and /app folders and it works. However, I need / want the html in /templates.
In /app/templates/index.html:
<link rel="stylesheet" href="../static/css/app.css">
I'm using both command line for Browsersync and Gulp.js files in the root and in /foundation.
The Browsersync server will serve html from /templates if I set it up with "app/templates" but then it can't find the css. If I move /static/css into /templates the proper index.html file is rendered nicely in the browser. So Browsersync works with the old pre-app framework layout. It just can't deal with paths to sister folders.
gulp.task('serve', ['scss'], function() {
browserSync({
server: "app"
});
gulp.watch(src.css, ['scss']);
gulp.watch(src.html).on('change', reload);
});
I've considered their proxy option but so far can't find a solution with that. I haven't found many setup examples online and none were useful.
For now I'm just doing desktop layout of the app's html pages with Foundation 6 and haven't set up a dev server, just a folder on my MBP.
Any ideas? Please :-)
You can provide multiple base directories from which to serve static files
server: {
baseDir: ["app/templates", "static"]
}
this will server app/templates/index.html by default and then in your html just use
<link rel="stylesheet" href="/css/app.css">
This is my final working gulpfile.js in the site root and setup to work with Flask or most other application frameworks plus Foundation 6. Hope this example saves someone a day or more of figuring this out. I'll add js files later.
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var reload = browserSync.reload;
var src = {
scss: 'foundation/scss/*.scss',
css: 'app/static/css/app.css',
allscss: 'foundation/scss/**/*.scss',
cssdest: 'app/static/css',
html: 'app/templates/*.html'
};
var sassPaths = [
'foundation/bower_components/foundation-sites/scss'
//'foundation/bower_components/motion-ui/src'
];
gulp.task('serve', ['sass'], function() {
browserSync({
open: false,
server: {
baseDir: ["app/templates", "app/static"]
}
});
gulp.watch([src.scss, src.allscss], ['sass'])
gulp.watch(src.html).on('change', reload);
gulp.watch(src.css).on('change', reload);
});
gulp.task('sass', function() {
return gulp.src(src.scss)
.pipe($.sass({
includePaths: sassPaths
})
.on('error', $.sass.logError))
.pipe($.autoprefixer({
browsers: ['last 2 versions', 'ie >= 9']
}))
.pipe(gulp.dest(src.cssdest))
});
gulp.task('default', ['serve']);
I am trying content dropdown from Foundation 5: http://foundation.zurb.com/docs/components/dropdown.html, but it does not work as you can see on this fiddle: http://jsfiddle.net/AQGd9/2/. Basically, the content does not appear upon clicking the link when it should.
Has Content Dropdown
<ul id="drop2" class="f-dropdown content" data-dropdown-content>
<li>This is a link</li>
<li>This is another</li>
<li>Yet another</li>
</ul>
Thanks
You need to explicitly initialize foundation with this piece of code before the end of your body, like this:
<body>
...
<script>
$(document).foundation();
</script>
</body>
I have the same problem right now. The doc says that you need include the javascript required files, there are two ways to do it:
1) All Js (core + plugins): foundation.min.js
2) Only the core, and add the plugins on demand: foundation.js + foundation.dropdown.js (in this case).
So, launch foundation Js:
$(document).foundation();
Source: Foundation 5 Js Doc
This work for me.
I have a Bootstrap theme from https://wrapbootstrap.com/ that I want to use in my MeteorJS application. The issue is it has script tags like:
<!--[if !lte IE 6]><!-->
<!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery.min.js"><\/script>')</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>window.jQuery.ui || document.write('<script src="js/libs/jquery.ui.min.js"><\/script>')</script>
script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></scrip>
<!-- RECOMMENDED: For (IE6 - IE8) CSS3 pseudo-classes and attribute selectors -->
<!--[if lt IE 9]>
<script src="js/include/selectivizr.min.js"></script>
<![endif]-->
<script src="js/libs/jquery.ui.touch-punch.min.js"></script> <!-- REQUIRED: A small hack that enables the use of touch events on mobile -->
which don't work when added to MeteorJS. I know tags don't work, but how would you acoomodate this designed page to MeteorJS?
Later edit:
I added the script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script> above. All the above scripts are added in the <body>. The google.maps library is used in lib/main.js and it doesn't work with MeteorJS because it raises ReferenceError. Outside of Meteor it works fine.
Any ideas on how to add that Google Maps script from the Bootstrap Template?
Later edit:
The Bootstrap template has a lib/main.js file which is the last javascript file imported. Nevertheless, when I add it to Meteor, it seems to be run, but its effects are not seen in UI. For example, it executes this line $(".chzn-select").select2(); but only when I execute it from the Console I can see the UI changes. This file is loaded last by Meteor. I also tried with
function load_scripts() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "lib/main.js";
document.body.appendChild(script);
}
if (Meteor.is_client) {
window.onload = load_scripts;
}
with no success.
These external themes might not be compatible with the default bootstrap included with meteor, so you should remove meteor's bootstrap package:
Remove default bootstrap:
meteor remove bootstrap
Add your theme:
Place your css files in your project's css directory, say /client/css
Place the themes javascript files in /client/lib
Don't worry about the script tags, or linking any of them or anything, meteor should take care of all of that.
Also
Meteor includes JQuery by default so you don't have to worry about including it in your project. To add jquery if for some odd reason you're meteor project might not have it use:
meteor add jquery
External Apis
e.g FB/Google Mapis API/Tracking scripts. Add them in the <head> section of your html file as normal.
Hopefully you find all of this cool!!
hy!
i m trying to use django ajax filtered fields for a many-to-many-relationship (outside the admin! for staff and non-staff users.). i walked through the introduction at the homepage of this add-in and the result is, that i can not make it run :-(
i m wondering what i m doing wrong and hope to find some help here.
thus i included all the stuff that i need. this is my form.
class MarketingActionForm(forms.ModelForm):
contact = ManyToManyByLetter(Contact, field_name="first_name")
class Meta:
model = MarketingAction
exclude = ('created_by',)
class Media:
js = (
settings.ADMIN_MEDIA_PREFIX + "js/SelectBox.js",
settings.ADMIN_MEDIA_PREFIX + "js/SelectFilter2.js",
settings.MEDIA_URL + "js/jquery.js",
settings.MEDIA_URL + "js/ajax_filtered_fields.js",
)
my project urls.py
(r'^ajax_filtered_fields/', include('ajax_filtered_fields.urls')),
(r'^dynamic-media/jsi18n/$', 'django.views.i18n.javascript_catalog'),
the javascript included in my page:
{% load adminmedia %}
<!--<script type="text/javascript" src="/admin/jsi18n/"></script>-->
<script type="text/javascript" src="/dynamic-media/jsi18n/"></script>
<script type="text/javascript" src="{% admin_media_prefix %}js/core.js"></script>
all these links do work. i tested it by clicking on the links. thus i think all the needed .js is available.
the first question that i have is:
1) should the tag {% load adminmedia %} create any output? because there is no output in the .html file.
the second question:
2) the following code is created in the .html .
<a class="ajax_filter_choice"
href="javascript:void(0)"
onclick="ajax_filtered_fields.getManyToManyJSON('id_contact', 'crm', 'Contact', 'first_name__istartswith=w', 'None')">w</a>
how i can test whether this ajax call is successfull? or whether this function (ajax_filtered_fields.getManyToManyJSON) can be referenced. because it seems as nothing happens when i click on the link.
the third question:
3) if you click on the link below you see what is already created. i see only one box, and if i click on the links nothing happens. only the contacts which start with "a" are shown.
ok not really a question.. rather more information ;-)
screenshot of the (wrong) result
would be great if this a filtered fields professional read and help me.. thanks in advance!
edit1:
after playing around with firebug i get the two following errors:
SelectFilter is not defined
anonymous()1 (line 424)
anonymous()jquery.js (line 19)
anonymous([function(), function(), function(), 1 more...], function(), Object name=F)jquery.js (line 12)
anonymous()jquery.js (line 19)
anonymous()jquery.js (line 19)
[Break on this error] SelectFilter.init("id_c... "http://localhost:8000/media/admin/");\n1 (line 424)
ajax_filtered_fields is not defined
function onclick(event) { ajax_filtered_fields.getManyToManyJSON("id_contact", "crm", "Contact", "first_name__istartswith=o", "None"); }(click clientX=470, clientY=390)
Now I`m asking myself what i have to add in order that these two functions are available to the page!?
edit2:
Ok it seems as this in the MarketingActionForm is not working:
class Media:
js = (
settings.ADMIN_MEDIA_PREFIX + "js/SelectBox.js",
settings.ADMIN_MEDIA_PREFIX + "js/SelectFilter2.js",
settings.MEDIA_URL + "js/jquery.js",
settings.MEDIA_URL + "js/ajax_filtered_fields.js",
)
But when i print out the urls they are correct. hmm..
Another question to me is why i reference here to "js/SelectFilter2.js" and the generated javascript part in the html references to SelectFilter.js ?
edit3:
the correct urls printed out via print form.media
<script type="text/javascript" src="http://localhost:8000/media/admin/js/SelectBox.js"></script>
<script type="text/javascript" src="http://localhost:8000/media/admin/js/SelectFilter2.js"></script>
<script type="text/javascript" src="http://localhost:8000/media/js/jquery.js"></script>
<script type="text/javascript" src="http://localhost:8000/media/js/ajax_filtered_fields.js"></script>
and these work all. thats strange.
if i add these includes to my base.html the above mentioned errors disappear! Does anybody has an idea why django behaves here this way?
Thus one step ahead. But the next bug is in SelectBox.js:
error: box is null
var SelectBox = {
2 cache: new Object(),
3 init: function(id) {
4 var box = document.getElementById(id);
5 var node;
6 SelectBox.cache[id] = new Array();
7 var cache = SelectBox.cache[id];
8 for (var i = 0; (node = box.options[i]); i++) {
9 cache.push({value: node.value, text: node.text, displayed: 1});
10 }
11 },
id = "id_contact_from"
In line 4 the script is searching for this element in the html body, does not find it and crashes in line 8, since box is Null.
Should this element not be created a utomatically by ajax-filtered-fields? Do i have to provide this element by myself? I did not found anything in the docs about this.
how i can test whether this ajax call is successfull?
Use firebug. its a MUST for any web developer.