I am using Swagger 2.0 and the Try It Out button is not showing for my methods.
My HTML is same as Petstore Swagger.
I am not getting any console errors.
My Swagger.json is here:
https://raw.githubusercontent.com/novastorm123/abapswaggerNW7.0/master/swagger_70.json
<body>
<div id="swagger-ui"></div>
<script type="text/javascript">
window.onload = function() {
const ui = SwaggerUIBundle({
url: https://raw.githubusercontent.com/novastorm123/abapswaggerNW7.0/master/swagger_70.json",
dom_id: "#swagger-ui",
supportedSubmitMethods: ['get'],
presets: [
SwaggerUIBundle.presets.apis,
Array.isArray(SwaggerUIStandalonePreset) ? SwaggerUIStandalonePreset : SwaggerUIStandalonePreset.default
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: "StandaloneLayout"
})
window.ui = ui
}
</script>
</body>
Related
Short Version:
I'm building an app with Angular2 and Webpack. I have the bundles building successfully, but when I include them on my page, the angular components loading. No errors are showing up.
webpack.config.js
"use strict";
let webpack = require('webpack');
let ExtractTextPlugin = require('extract-text-webpack-plugin');
let helpers = require('./webpack.helpers.js');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
'app': helpers.root('/Modules/Shared/Main.ts'),
'vendor': helpers.root('/External/Vendor.ts'),
'polyfills': helpers.root('/External/Polyfill.ts')
},
devtool: 'source-map',
resolve: {
extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html']
},
output: {
path: helpers.root('/wwwroot/scripts'),
filename: '[name].js'
},
module: {
rules: [
{
test: /\.ts$/,
loaders: [
{ loader: 'awesome-typescript-loader', options: { tsConfig: 'tsconfig.json' } },
'angular-router-loader',
'angular2-template-loader',
'source-map-loader',
'tslint-loader'
]
},
{
test: /\.(png|jpg|gif|woff|woff2|ttf|svg|eot)$/,
loader: 'file-loader?name=assets/[name]-[hash:6].[ext]'
},
{
test: /favicon.ico$/,
loader: 'file-loader?name=/[name].[ext]'
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: "style-loader",
loader: "css-loader"
})
},
{
test: /\.scss$/,
exclude: /node_modules/,
loaders: ['style-loader', 'css-loader', 'sass-loader']
},
{
test: /\.html$/,
loader: 'raw-loader'
}
]
},
plugins: [
new ExtractTextPlugin('css/[name].bundle.css'),
new webpack.NoEmitOnErrorsPlugin(),
// Workaround for angular/angular#11580
new webpack.ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
/angular(\\|\/)core(\\|\/)#angular/,
'Modules/', // location of your src
{} // a map of your routes
),
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills']
}),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery',
}),
new HtmlWebpackPlugin()
]
};
tsconfig.json
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "commonjs",
"moduleResolution": "node",
"noEmitOnError": true,
"noImplicitAny": true,
"removeComments": true,
"skipLibCheck": true,
"sourceMap": true,
"target": "es5"
},
"exclude": [
"node_modules",
"wwwroot"
],
"compileOnSave": true
}
The files are being generated correctly:
http://imgur.com/a/xzw0E
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"]</title>
<base href="/" />
</head>
<body style="background-color: #333;">
#RenderBody()
<script type="text/javascript" src="/scripts/polyfills.js"></script>
<script type="text/javascript" src="/scripts/vendor.js"></script>
#RenderSection("scripts", required: false)
</body>
</html>
index.cshtml
#using System.Threading.Tasks
#{
ViewData["Title"] = "Home Page";
}
<div style="height: 100%;">
<app-component>Loading...</app-component>
</div>
#section Scripts{
<script type="text/javascript" src="/scripts/app.js"></script>
}
The component I'm expecting to see looks like this:
import { Component } from '#angular/core';
#Component({
selector: 'app-component'
})
export class AppComponent {
constructor() {
console.log('I\'m running !!!!');
}
}
But when I generate the page, it looks like this:
http://imgur.com/a/YrPJf
with no errors in the console:
http://imgur.com/a/Xepl2
Any help is greatly appreciated
Seems you forgot about bootstrapping your application via
platformBrowserDynamic().bootstrapModule(AppModule);
I try to use Electon's webview tag inside my Angular2 app, but when I add the src attribute binded to an Angular2 variable, the following error occurs:
Can't bind to 'src' since it isn't a known native property
This is the index.html:
<head>
<!-- cut out stylings, metatags, etc. -->
<script src="../node_modules/zone.js/dist/zone.js"></script>
<script src="../node_modules/reflect-metadata/Reflect.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
const electron = require('electron');
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<MainComponent>Loading...</MainComponent>
</body>
This is the systemjs.config.js:
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'angular',
'#angular': '../node_modules/#angular',
'angular2-in-memory-web-api': '../node_modules/angular2-in-memory-web-api',
'rxjs': '../node_modules/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' }
};
var ngPackageNames = [
'common',
'compiler',
'core',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade'
];
// Add package entries for angular packages
ngPackageNames.forEach(function(pkgName) {
packages['#angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);
This is the Angular2 component template I (want to) use webview in:
<div class="stage-component component">
<webview *ngIf="iFrameUrl" src="{{iFrameUrl}}"></webview>
</div>
How can I introduce the webview element to Angular2?
If this appears, use "attr" before.
<webview *ngIf="iFrameUrl" attr.src="{{iFrameUrl}}"></webview>
That is strange. It sounds like you maybe have a version issue. You can try to use the loadUrl api instead and see if that helps.
<script>
onload = () => {
const webview = document.getElementById('foo');
webview.loadUrl('http://example.com')
</script>
Jquery ui datepicker not works on click on input.
main.js
require.config({
baseUrl: "js",
paths: {
html5shiv: "libs/html5shiv",
jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min",
jqueryui: "http://code.jquery.com/ui/1.10.3/jquery-ui",
tablesorter: "libs/jquery.tablesorter.min",
script: "script",
underscore: "libs/underscore.min",
backbone: "libs/backbone.min",
utils: "utils",
collectorModel: "models/collectorModel",
collectorCollection: "collections/collectorCollection",
tollectorRouter: "routers/tollectorRouter",
edit: "views/collector/tollector_edit",
index: "views/collector/collector_index",
neww: "views/collector/collector_new",
row: "views/collector/collector_row",
show: "views/collector/collector_show",
'templates': 'templates'
},
shim: {
jqueryui: {
deps: ["jquery"],
exports: "Jqueryui"
},
tablesorter: {
deps: ["jquery"],
exports: "TableSorter"
},
script: {
deps: ["jquery", "jqueryui", "tablesorter"],
exports: "Script"
},
jqueryui: {
deps: ["jquery"]
},
underscore: {
exports: "_"
},
backbone: {
deps: ["underscore", "jquery"],
exports: "Backbone"
}
}
});
require(["backbone", "underscore", "collectorCollection", "collectorRouter", "script"],
function (Backbone, _, CollectorCollection, CollectorRouter) {
var collectors = new CollectorCollection();
var router = new CollectorRouter({collectors: collectors});
Backbone.history.start();
});
Template: collector_edit.html
input type="text" class="inputs dateInput" name="endDate" placeholder="End date" value="<%= endDate %>
scripts.js
$(document).ready(function () {
$(".dateInput").datepicker({dateFormat: "dd/mm/yy"});
});
it worked before using backbone and RequireJS
When using requireJS your dependencies do not exist in the global scope anymore but only inside modulde that requires them. Try changing your script JS to:
define(['jqueryui'], function( jqueryui ) {
$(document).ready(function () {
$(".dateInput").datepicker({dateFormat: "dd/mm/yy"});
});
})
I have set up a project that uses require.js, backbone.js, openlayers (mobile single file build) and jquery mobile.
Now I have some issues displaying the map correctly, because no tiles are loading. I have figured out how to load the openlayers api with the require.js shim parameter:
shim: {
"backbone": {
"deps": [ "underscore", "jquery" ],
"exports": "Backbone"
},
"openlayers": {
"exports": "OpenLayers"
}
}
In the MapView.js file I create a new openlayers map:
define([ "jquery", "backbone", "openlayers" ], function( $, Backbone, OpenLayers ) {
var MapView = Backbone.View.extend( {
// The View Constructor
initialize: function() {
console.log(3);
var mapOptions = {
div: this.el,
maxExtent: new OpenLayers.Bounds(-174,18.4,-63.5,71),
maxResolution: 0.25,
projection: "EPSG:102100",
theme: "/css/theme/default/style.css",
layers: [
new OpenLayers.Layer.OSM("OpenStreetMap", null, {
transitionEffect: 'resize'
})
]};
this.map = new OpenLayers.Map( mapOptions );
},
render: function() {
console.log(4);
}
} );
return MapView;
} );
Now the map works partly. I can see the Zoom Buttons which are added by openlayers at the top-left of the map, but no Tiles are loaded. Firebug told me, that there isn't even a request for the tiles.
At the moment I have no clue whats the problem might be.
For completetion this is my backbone router:
define([ "jquery", "backbone", "../models/Map", "../views/Map" ], function( $, Backbone, MapModel, MapView ) {
var Router = Backbone.Router.extend( {
initialize: function() {
console.log(2);
this.mapView = new MapView( { el: "#mapView" } );
Backbone.history.start();
},
// Backbone.js Routes
routes: {
"": "home",
},
// Home method
home: function() {
console.log(0);
$.mobile.changePage( "#map" , { reverse: false, changeHash: false } );
},
});
return Router;
} );
and the Page html
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="/css/jquerymobile.css" />
<script src="/js/libs/require-min.js" data-main="/js/mobile"></script>
<style>
#mapView {
height: 500px;
width: 500px;
}
</style>
</head>
<body>
<div id="map" data-role="page" data-title="Map">
<div data-role="header">
<h1>Map</h1>
</div><!-- /header -->
<div data-role="content">
<div id="mapView"></div>
</div><!-- /content -->
</div>
</body>
</html>
Any ideas?
I figured it out now. All I had to do is add this.map.zoomToMaxExtent();. For some reason without that the map was not able to calculate the correct visible extent for the tiles.
I am using jqgrid with grails first time and facing some problem.i set up jggrid in my gsp as below
<link rel="stylesheet" href="${resource(dir:'css',file:'ui.jqgrid.css')}" />
<link rel="stylesheet" href="${resource(dir:'css/ui-lightness',file:'jquery
ui-1.8.23.custom.css')}" />
<g:javascript library="jquery-1.7.2.min"/>
<g:javascript library="jquery.jqGrid.min"/>
<script type="text/javascript">
$(document).ready(function() {
jQuery("#g-grid").jqGrid({
datatype: "json",
mtype: 'GET',
url: '${createLink(controller: 'roadmap', action: 'listRequestsAsJSON')}',
colNames: ['Entry Type', 'Life Cycle Status'],
colModel: [
{name:'roadMapEntryTypeCode',index:'roadMapEntryTypeCode', editable:'true'},
{name:'lifeCycleStatusCode',index:'lifeCycleStatusCode',editable:'true'}
],
pager: jQuery('#g-pager'),
viewrecords: true,
gridview: true
});
});
</script>
and the code in the controller for getting the response is
def listRequestsAsJSON = {
def r = AssetRoadmap.findAllByAsetIDAndRoadMapEntryTypeCode(Asset.get(10033), CodeConstants.ROADMAP_ENTRY_TYPE_CODE_LIFECYCLE, [sort:"roadMapEventStartDate", order:"asc"])
def jsonCells = r.collect {
[ id: it.id,
cell: [
it.roadMapEntryTypeCode,
it.lifeCycleStatusCode
]
]
}
def jsonData= [rows: jsonCells]
render jsonData as JSON
}
When I looked the response in Firefox (using with Firebugs) I am not seeing in it as response but when I manually render the jsp in browser I am getting
{"rows":[{"id":10172,"cell":["LIFECYCLE","DESTROY"]},{"id":10173,"cell":["LIFECYCLE","ARCHIVE"]},{"id":10174,"cell":["LIFECYCLE","CONTAINMENT"]}]}
which seem to me correct so not sure where is the problem,Any help will be greatly appreciated.Thanks!!!
The request was actually redirecting the request to some other place so the json response was not coming.I got this clue with 302 status,a good learning though