Ember cli, cannot display/debug my model data - ember-cli

I'm using JSBIN to test out some Ember stuff and I can't seem to display my model data.
Unfortunately on only error I get is "Script error (line 0)" which isn't very helpful.
JSBIn here:
http://jsbin.com/duqehebewu/3/edit?html,console,output
<script src="http://static.iamstef.net/ember-cli-jsbin/jquery/dist/jquery.js"></script>
<script src="http://static.iamstef.net/ember-cli-jsbin/loader.js/loader.js"></script>
<script src="http://static.iamstef.net/ember-cli-jsbin/handlebars/handlebars.js"></script>
<script src="http://static.iamstef.net/ember-cli-jsbin/ember/ember.js"></script>
<script src="http://static.iamstef.net/ember-cli-jsbin/ember-load-initializers/ember-load-initializers.js"></script>
<script src="http://static.iamstef.net/ember-cli-jsbin/ember-resolver/dist/ember-resolver.js"></script>
<script src="http://static.iamstef.net/ember-cli-jsbin/ember-cli-shims/app-shims.js"></script>
<script src="http://static.iamstef.net/ember-cli-jsbin/ember-cli.js"></script>
<meta name="ember-app" content="app" mode="auto-run">
<script type='text/x-esnext' id='app/app'>
import Ember from 'ember';
import Resolver from 'ember/resolver';
import loadInitializers from 'ember/load-initializers';
import config from './config/environment';
Ember.MODEL_FACTORY_INJECTIONS = true;
var App = Ember.Application.extend({
modulePrefix: config.modulePrefix,
podModulePrefix: config.podModulePrefix,
Resolver: Resolver
});
loadInitializers(App, config.modulePrefix);
export default App;
</script>
<script type='text/x-esnext' id='app/config/environment'>
export default { modulePrefix: 'app', locationType: 'hash'};
</script>
<script type='text/x-esnext' id='app/router'>
import Ember from 'ember';
import config from './config/environment';
var Router = Ember.Router.extend({
location: config.locationType,
});
export default Router;
</script>
<script type='text/x-esnext' id='app/router/index'>
import Ember from 'ember';
import config from './config/environment';
var posts = [{
title: "Rails is omakase",
body: "There are lots of à la carte software environments in this world."
}, {
title: "Broken Promises",
body: "James Coglan wrote a lengthy article about Promises in node.js."
}];
var IndexRouter = Ember.Router.extend({
location: config.locationType,
model: function() {
return posts;
}
});
export default IndexRouter;
</script>
<script type='text/x-handlebars' id='app/templates/application'>
<h2 id='title'>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type='text/x-handlebars' id='app/templates/index'>
<h1>Index template</h1>
{{#each}}
{{body}}
{{/each}}
</script>

I'm not sure how to do Ember cli stuff in JSBin. Here's a not-cli version:
http://jsbin.com/zixaju/2/edit
Edit: Got it.
http://jsbin.com/qimeta/2/edit
Edit2: For real:
http://jsbin.com/qimeta/4/edit

Related

Openlayers5 and ol-ext

Could anybody give me an example please how to integrate the ol-ext-library in OL5?
So far I have downloaded the .css & .js-Files from here: https://github.com/Viglino/ol-ext/tree/master/dist
...to my openlayers/dist-directory.
I try to link it in my html-file with:
<!-- ol-ext -->
<link rel="stylesheet" href="openlayers/dist/ol-ext.css" />
<script type="text/javascript" src="openlayers/dist/ol-ext.js"></script>
...and then I try "npm run build"...but I get so many errors.
Has anybody included the ol-ext succesfully and could give me a hint?
In my application i just use same method as "ol" do, for example if you want to use "ol-ext" of "Imageline" then you just need to import
import Imageline from 'ol-ext/control/Imageline';
And you don't need to add anything in your HTML file nor change the way you use "ol" library in your code.
Hope it can help you
Thanks a lot, Mike, it works now.
In the index.html I needed:
<!DOCTYPE html>
<html>
<head>
<!--<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<!-- jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<link
rel="stylesheet"
href="https://viglino.github.io/ol-ext//dist/ol-ext.css"
/>
<meta charset="utf-8">
<title>k,ais test</title>
<style>
#image {
background-color: #eee;
padding: 1em;
clear: both;
display: inline-block;
margin: 1em 0;
}
</style>
....
......
In the index.js I use the file mentioned next:
import "ol/ol.css";
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import {getCenter} from 'ol/extent.js';
import {transform} from 'ol/proj.js';
import TileLayer from 'ol/layer/Tile.js';
import OSM from 'ol/source/OSM.js';
import WKT from 'ol/format/WKT.js';
import {defaults as defaultControls} from 'ol/control.js';
import ol_control_Print from 'ol-ext/control/Print'
import {ScaleLine} from 'ol/control.js';
import ImageLayer from 'ol/layer/Image.js';
import ImageWMS from 'ol/source/ImageWMS.js';
import TileWMS from 'ol/source/TileWMS.js';
import Static from 'ol/source/ImageStatic.js';
import proj4 from 'proj4';
import {register} from 'ol/proj/proj4.js';
import {get as getProjection} from 'ol/proj';
import BingMaps from 'ol/source/BingMaps.js';
import * as olProj from 'ol/proj';
import GeoJSON from 'ol/format/GeoJSON.js';
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
import {Circle as CircleStyle,Fill, Stroke, Style, Text} from 'ol/style.js';
proj4.defs('EPSG:25832', '+proj=utm +zone=32 +x_0=-32000000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
register(proj4);
var osm = new TileLayer({
source: new OSM()
});
var view = new View({
center: [rechtswert,hochwert],
zoom: mzoom,
projection: 'EPSG:25832'
});
var map = new Map({
layers: [osm,wmsLayer3,wmsLayer2],
target: 'map',
view: view
});
var printControl = new ol_control_Print();
map.addControl(printControl);
printControl.on('print', function(e) {
$('body').css('opacity', .1);
alert ("hello");
});
printControl.on(['print', 'error'], function(e) {
$('body').css('opacity', 1);
alert ("hello2");
});

Meteor server api using iron router returns HTML not the response

I have a simple Meteor app just the basic meteor create test. I want to be able to route traffic to the "/" directory to a template.
I want to be able to route data from a facebook web-hook to a simple js response.
My issue is that when I fire the web-hook URL using postman it returns HTML and not my response.
I've tried many different options for other posts I have read but now have the most basic version to just get it working.
Here is the code I've used
main.html
<head>
<title>test</title>
</head>
<body>
</body>
<template name="home">
<form class="new-message">
<input type="text" name="message" placeholder="Testing">
</form>
</template>
main.js:
import { Meteor } from 'meteor/meteor';
import { Router } from 'meteor/iron:router';
import { Template } from 'meteor/templating';
import './main.html';
Router.route('/', function () {
this.render('home');
});
Router.route('/webhooks/facebook', function() {
var request = this.request;
var response = this.response;
response.end('webhook was called');
}, {
where: 'server'
});
All other files are exactly how they are created with meteor create.
I'm on Meteor version 1.8.1
I'm using postman to test the web-hook this is the created GET URL:
https://------.ngrok.io/webhooks/facebook?hub.verify_token=mytoken&hub.challenge=1234567&hub.mode=subscribe
code omitted to keep ngrok from getting slammed.
This is the response I'm getting:
<html>
<head>
<link rel="stylesheet" type="text/css" class="__meteor-css__"
href="/merged-stylesheets.css?hash=6b1f9f6fb78291ae58da8ec4f36476931155453c">
<title>simplechat</title>
</head>
<body>
<script type="text/javascript">
__meteor_runtime_config__ = JSON.parse(decodeURIComponent("%7B%22meteorRelease%22%3A%22METEOR%401.8.1%22%2C%22meteorEnv%22%3A%7B%22NODE_ENV%22%3A%22development%22%2C%22TEST_METADATA%22%3A%22%7B%7D%22%7D%2C%22PUBLIC_SETTINGS%22%3A%7B%7D%2C%22ROOT_URL%22%3A%22http%3A%2F%2Flocalhost%3A3000%2F%22%2C%22ROOT_URL_PATH_PREFIX%22%3A%22%22%2C%22autoupdate%22%3A%7B%22versions%22%3A%7B%22web.browser%22%3A%7B%22version%22%3A%22b22f1ad86c0a904c992885256b7de72ed2863e1d%22%2C%22versionRefreshable%22%3A%22a580e09175421ec6994fc6da61a0413f3a15d2b1%22%2C%22versionNonRefreshable%22%3A%22fc4ded0006de942fe57524f94d500abeb4569d6f%22%7D%2C%22web.browser.legacy%22%3A%7B%22version%22%3A%222571a76ffc344fbc5b40ade303255cbbc59e2682%22%2C%22versionRefreshable%22%3A%22a580e09175421ec6994fc6da61a0413f3a15d2b1%22%2C%22versionNonRefreshable%22%3A%22dc1e886b7786e303655c010220e9f502e82dcf1c%22%7D%7D%2C%22autoupdateVersion%22%3Anull%2C%22autoupdateVersionRefreshable%22%3Anull%2C%22autoupdateVersionCordova%22%3Anull%2C%22appId%22%3A%22zqskgg1xifoj.hlnqbjmcma6f%22%7D%2C%22appId%22%3A%22zqskgg1xifoj.hlnqbjmcma6f%22%2C%22isModern%22%3Afalse%7D"))
</script>
<script type="text/javascript" src="/packages/meteor.js?hash=857dafb4b9dff17e29ed8498a22ea5b1a3d6b41d"></script>
<script type="text/javascript" src="/packages/meteor-base.js?hash=29010b127daf4ebacaaf9db9b8a61487e57d7d86">
</script>
<script type="text/javascript" src="/packages/mobile-experience.js?hash=2751f9ec11102d1106042c462b340c3fcfcb1990">
</script>
<script type="text/javascript" src="/packages/modules-runtime.js?hash=d3c3e5d67c95f97a60888bda7373292efad3be5e">
</script>
<script type="text/javascript" src="/packages/modules.js?hash=e8b7455d5562fec1444a3c6882cdc6639055cfca"></script>
<script type="text/javascript" src="/packages/modern-browsers.js?
<script type="text/javascript" src="/packages/autoupdate.js?hash=6d56c0f3a885390c688b4f3f893d96d1280fd0ee"></script>
---- Cut out all of the other script calls to keep this short -----
<script type="text/javascript" src="/app/global-imports.js?hash=1f8a1ae2e343994912f72f1dc6eec1ca7df24cae"></script>
<script type="text/javascript" src="/app/app.js?hash=70cfa37cd2f85e533f69d7312d02ef8984eae01a"></script>
</body>
</html>
So basically it returns HTML.
I'm sure I'm missing something simple.
Thanks in advance for you help. Usually I wait till I have exhausted all other options before posting here. And I'm sure I have tried every other example given here on StackOverflow.
My desired result is simple to just return a HTTP response "webhook was called" instead of the HTML garbage.
You could use somethings like this :
Router.map(function(){
this.route("routeName", {path: "/url/:param1/:optionalParam?,
where: "server",
action: function(){
var param = this.params.param1;
this.response.writeHead(200, {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'
});
//authenticate call and decrypt body
if (this.request.method == 'POST') {
//do something
}
if (this.request.method == 'GET') {
//do something
}
}
});
this.route("abc", {path: "/api/get/user/activity/:temp1",
where: "server",
action: function(){
//proceed as above
}
});
});
For help, read through https://iron-meteor.github.io/iron-router/#server-routing
The router file should be saved inside the server folder (for server-side routes)
Haven't used iron route in a long time but from what I remember you want to change your server side route to the following as it is for restful routes.
Router.route('/webhooks/facebook', { where: 'server' })
.get(function () {
// GET
})
.post(function () {
// POST
})
.put(function () {
// PUT
})
For others who have been struggling getting both server and client routes to work on the same Meteor app here is the solution.
Iron routers newest version requires all server side routes to be on the server side and you must fire them from the startup.
All client routes are added on the client side and included in the main.js on the client side.
My simple test was this:
meteor create test
Then in clients/main.html replace the current code and add a simple template as follows:
<head>
<title>newroutetest</title>
</head>
<body>
</body>
<template name="home">
<h1>Home</h1>
</template>
Then in the client/main.js add your client routes as follows:
import { Template } from 'meteor/templating';
import './main.html';
Router.route('/', {
template: 'home'
});
Now we setup the server side route in the file server/main.js you add the route in the startup section as follows:
import { Meteor } from 'meteor/meteor';
Meteor.startup(() => {
Router.route('/webhook', function () {
var req = this.request;
var res = this.response;
res.end('hello from the server\n');
}, {where: 'server'});
});
That's It
I hope this helps others who have been struggling with this.

Editing feature in OpenLayers2 published by geoserver and saving the updated in postgres connected database table

I have published a shapefile "ind_adm2" in geoserver as Postgis(postgres database), It can be accessed as webpage using OpenLayers code given below. Now I need to edit the shapefile on webpage itself and save the edited(updated) things in Postgres database. Can anyone help !!
I tried using wfs URL of geoserver but unable to select the feature.
<html>
<head>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script defer="defer" type="text/javascript">
var map = new OpenLayers.Map('map');
basemap = new OpenLayers.Layer.WMS( "Layer Name1",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
utility = new OpenLayers.Layer.WMS( "Layer Name2",
"http://localhost:8080/geoserver/iirs/ows?", {layers: 'iirs:ind_adm2',
transparent:"true"}, {isBaseLayer:false} );
map.addLayers([basemap,utility]);
map.zoomToMaxExtent();
</script>
</body>
</html>
Its expected to select any polygon then edit there itself and update the edits in postgres database.
As what you need will be much more complex than your existing code you should update that to the latest version of OpenLayers (currently 5.3.0) and develop with that. It is easier to get started using the full build https://openlayers.org/en/latest/doc/quickstart.html which is very similar to using versions 3 and 4 so you will be able to reuse examples from those versions. For help about editing WFS here's one question with links a tutorial and some examples Javascript editing WFS from GeoServer using OpenLayers
<html>
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
</head>
<body>
<div style="width:100%; height:100%" id="map"></div>
<script defer="defer" type="text/javascript">
var basemap = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: "http://vmap0.tiles.osgeo.org/wms/vmap0",
params: {
'LAYERS': 'basic'
},
projection: 'EPSG:4326',
ratio: 1
})
});
var utility = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: "http://localhost:8080/geoserver/iirs/ows",
params: {
'LAYERS': 'iirs:ind_adm2',
'TRANSPARENT': 'true'
},
projection: 'EPSG:4326'
})
});
var map = new ol.Map({
target: 'map',
layers: [basemap], utility],
view: new ol.View({
projection: 'EPSG:4326'
})
});
map.getView().fit(map.getView().getProjection().getExtent());
</script>
</body>
</html>

Phonegap App not including javascript files

Javascript files are not being pulled into my Phonegap app. This is a recent problem that is quite frankly driving me insane. This is the top of my index.html file:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD90W6MypWGP6s4luD2kQHhZ9IFQrfr04g&sensor=true"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/facebook.js"></script>
<script type="text/javascript">
app.initialize();
</script>
This is my facebook.js file that I'm trying to pull in:
$(document).on('ready' , function(){
console.log('ready')
function onDeviceReady(){
console.log('test')
var plugin = new CC.CordovaFacebook();
plugin.init('***************', 'myapp',
['email'],
function(response){console.log(response)},
function(failure){console.log(failure)});
var loginButton = $('#login-with-facebook');
loginButton.on('click' , function(e){
e.preventDefault();
plugin.login(function(token) {
console.log("Access token is: " + token);
}), function(failure){console.log(failure)});
})
}
if (window.cordova.logger) {window.cordova.logger.__onDeviceReady();};
onDeviceReady();
document.addEventListener("deviceready", onDeviceReady, false);
})
I can't console.long anything in the facebook.js file. What's driving me even more crazy is that it's worked on occasion. Are my files out of order? Also, I only seem to be running into this issue after installing one of the cordova facebook plugins. Does anybody know what's going on here?
Because you define your onDeviceReady function inside an anonymous event handler function, it won't be available until the DOM is loaded (and shouldn't only be accessible from within the event handler. This would only work properly if the device is ready before the DOM loads and only because onDeviceReady is manually invoked in the onDocumentReady event handler. Replace your facebook.js with the following.
function onDeviceReady(){
console.log('test')
var plugin = new CC.CordovaFacebook();
plugin.init('443530475777959', 'spencerspiegelapp',
['email'],
function(response){console.log(response)},
function(failure){console.log(failure)});
var loginButton = $('#login-with-facebook');
loginButton.on('click' , function(e){
e.preventDefault();
plugin.login(function(token) {
console.log("Access token is: " + token);
}), function(failure){console.log(failure)});
})
}
$(document).on('ready' , function() {
console.log('ready')
document.addEventListener("deviceready", onDeviceReady, false);
if (window.cordova.logger) {
window.cordova.logger.__onDeviceReady();
}
});

When i select CheckBox().I need to update its value into DB - MVC2,AJAx,JQuery

Please find the code which i tried to update the DB using MVC2.But unable to update
View Page with Ajax Code
<script src="../../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$('#cbID').click(function(){
$.ajax({ url: 'Home/About',
type: 'POST',
data: { checkbox: $('#cbID').attr('checked') },
success: function(o) { alert('saved'); }
});
</script>
<div class="bgDiv">
<input id="cbID" type="checkbox" name="SelectedObject" value="cbValue" />
Controller page code
public ActionResult About(string str)
{
AboutModels ObjAM = new AboutModels();//model class name
polloptions = ObjAM.dbValue(str);//call the model function to udate the table
return View();
}
Please advice
you should either declare your event handler in ready function or declare it with live or delegate methods like
<script language="javascript" type="text/javascript">
$(function(){
$('#cbID').click(function(){
$.ajax({ url: 'Home/About',
type: 'POST',
data: { checkbox: $('#cbID').attr('checked') },
success: function(o) { alert('saved'); }
});
});
});
</script>
the problem is that your script is running before the required checkbox is rendered so putting it in ready will wait until document is ready or live will bind it on document level where the event will reach through propogation