I want to add basic authorization in swagger-ui, to test my WS with "Try it out" button. I tried from swagger documentation, and this topic Adding Basic Authorization for Swagger-UI, but no one work. No header is added in request, but in curl command, the basic authorization header is present. If I copy paste this curl command, all is ok.
My swagger-ui version is 2.1.2. I downloaded from github, ant put directly dist folder in static folder of my server.
Here my index.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sensor API documentation</title>
<link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16" />
<link href='css/typography.css' media='screen' rel='stylesheet' type='text/css' />
<link href='css/reset.css' media='screen' rel='stylesheet' type='text/css' />
<link href='css/screen.css' media='screen' rel='stylesheet' type='text/css' />
<link href='css/reset.css' media='print' rel='stylesheet' type='text/css' />
<link href='css/print.css' media='print' rel='stylesheet' type='text/css' />
<script src='lib/jquery-1.8.0.min.js' type='text/javascript'></script>
<script src='lib/jquery.slideto.min.js' type='text/javascript'></script>
<script src='lib/jquery.wiggle.min.js' type='text/javascript'></script>
<script src='lib/jquery.ba-bbq.min.js' type='text/javascript'></script>
<script src='lib/handlebars-2.0.0.js' type='text/javascript'></script>
<script src='lib/underscore-min.js' type='text/javascript'></script>
<script src='lib/backbone-min.js' type='text/javascript'></script>
<script src='swagger-ui.js' type='text/javascript'></script>
<script src='lib/highlight.7.3.pack.js' type='text/javascript'></script>
<script src='lib/marked.js' type='text/javascript'></script>
<script src='lib/swagger-oauth.js' type='text/javascript'></script>
<!-- Some basic translations -->
<!-- <script src='lang/translator.js' type='text/javascript'></script> -->
<!-- <script src='lang/ru.js' type='text/javascript'></script> -->
<!-- <script src='lang/en.js' type='text/javascript'></script> -->
<script type="text/javascript">
$(function() {
// Pre load translate...
if (window.SwaggerTranslator) {
window.SwaggerTranslator.translate();
}
window.swaggerUi = new SwaggerUi({
url : "/swagger/json/SensorAPI.json",
validatorUrl : "",
dom_id : "swagger-ui-container",
supportedSubmitMethods : [ 'get', 'post', 'put', 'delete', 'patch' ],
onComplete : function(swaggerApi, swaggerUi) {
if (window.SwaggerTranslator) {
window.SwaggerTranslator.translate();
}
$('pre code').each(function(i, e) {
hljs.highlightBlock(e)
});
addAuthorization();
},
onFailure : function(data) {
log("Unable to Load SwaggerUI");
},
docExpansion : "none",
apisSorter : "alpha",
showRequestHeaders : false
});
function addAuthorization() {
var username = $('#input_username').val();
var password = $('#input_password').val();
if (username && username.trim() != "" && password && password.trim() != "") {
var basicAuth = new SwaggerClient.PasswordAuthorization(username, password);
window.swaggerUi.api.clientAuthorizations.add('Basic', basicAuth);
log("authorization added: username = " + username + ", password = " + password);
} else {
window.authorizations.remove();
}
}
$('#input_username').change(addAuthorization);
$('#input_password').change(addAuthorization);
// pre-populate on the page using demo account
$('#input_username').val("demo");
$('#input_password').val("demo");
window.swaggerUi.load();
function log() {
if ('console' in window) {
console.log.apply(console, arguments);
}
}
});
</script>
</head>
<body class="swagger-section">
<div id='header'>
<div class="swagger-ui-wrap">
<a id="logo" href="http://swagger.io">swagger</a>
<form id='api_selector'>
<div class='input'>
Username: <input placeholder="username" id="input_username" name="username" type="text" size="10" />
</div>
<div class='input'>
Password: <input placeholder="password" id="input_password" name="password" type="password" size="10" />
</div>
</form>
</div>
</div>
<div id="message-bar" class="swagger-ui-wrap" data-sw-translate> </div>
<div id="swagger-ui-container" class="swagger-ui-wrap"></div>
</body>
</html>
Please tell me what is wrong. Thanks
I found : the issue came from my json files. I defined many "securityDefinitions", one per user role
...,
"securityDefinitions":{
"administrator":{
"type":"basic",
"description":"The administrator."
},
"supervisor":{
"type":"basic",
"description":"A supervisor."
},
"customer":{
"type":"basic",
"description":"A customer."
}
},
...
and for each WS, I indicate which roles are authorized. By example :
...,
"get":{
"security":[
{
"administrator":[
]
},
{
"supervisor":[
]
}
],
...
},
...
By removing security section in WS, all is working.
In swagger editor, we need security section to test WS, but in swagger ui, this section produce an error :-(
Related
I am trying to use Xtext (2.14.0) together with the Orion web editor, but even with a simple example the Content Assist is not triggered by CTRL+SPACE inside the Orion editor.
From what I know, CTRL+SPACE is used by default to trigger the Content Assist inside the Orion editor.
I also want to mention that if I add a character to the "contentAssistCharTriggers" option (as described in the Xtext documentation), than the specified character triggers the Content Assist, but CTRL+SPACE still doesn't work.
Does anyone know what could be the problem?
Update:
I am using the basic xtext state machine example.
Below is the html file used to embed the Orion Editor:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="en-us">
<title>Example Web Editor</title>
<link rel="stylesheet" type="text/css" href="dependencies/orion/code_edit/built-codeEdit.css"/>
<link rel="stylesheet" type="text/css" href="xtext/2.14.0/xtext-orion.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="webjars/requirejs/2.3.2/require.min.js"></script>
<script type="text/javascript">
var baseUrl = window.location.pathname;
var fileIndex = baseUrl.indexOf("index.html");
if (fileIndex > 0)
baseUrl = baseUrl.slice(0, fileIndex);
require.config({
baseUrl: baseUrl,
paths: {
"text": "webjars/requirejs-text/2.0.15/text",
"jquery": "webjars/jquery/2.2.4/jquery.min",
"xtext/xtext-orion": "xtext/2.14.0/xtext-orion"
}
});
require(["dependencies/orion/code_edit/built-codeEdit-amd"], function() {
require(["xtext/xtext-orion"], function(xtext) {
xtext.createEditor({
baseUrl: baseUrl,
syntaxDefinition: "xtext-resources/generated/mylang-syntax",
contentAssistCharTriggers: " "
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="header">
<h1>Demo</h1>
</div>
<div class="content">
<div id="xtext-editor" data-editor-xtext-lang="mylang"></div>
</div>
</div>
</body>
</html>
here is the index html that works fine for me (content assist with crtl+space)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="en-us">
<title>Example Web Editor</title>
<link rel="stylesheet" type="text/css" href="orion/code_edit/built-codeEdit.css"/>
<link rel="stylesheet" type="text/css" href="xtext/2.14.0/xtext-orion.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="webjars/requirejs/2.3.2/require.min.js"></script>
<script type="text/javascript">
var baseUrl = window.location.pathname;
var fileIndex = baseUrl.indexOf("index.html");
if (fileIndex > 0)
baseUrl = baseUrl.slice(0, fileIndex);
require.config({
baseUrl: baseUrl,
paths: {
"text": "webjars/requirejs-text/2.0.15/text",
"jquery": "webjars/jquery/2.2.4/jquery.min",
"xtext/xtext-orion": "xtext/2.14.0/xtext-orion"
}
});
require(["orion/code_edit/built-codeEdit-amd"], function() {
require(["xtext/xtext-orion"], function(xtext) {
xtext.createEditor({
baseUrl: baseUrl,
syntaxDefinition: "xtext-resources/generated/mydsl-syntax"
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="header">
<h1>Example MyDsl Web Editor</h1>
</div>
<div class="content">
<div id="xtext-editor" data-editor-xtext-lang="mydsl">
</div>
</div>
</div>
</body>
</html>
and here is how your stuff looks like
Updating requirejs to 2.3.6 and jquery to 3.3.1-1 make codeEdit with you version work.
We updated everything in Xtext 2.17 that will come in spring 2019.
I installed LazyLoading jquery plugin and try to use it in my bootstrap mvc project. In examples that I saw, address of just one image is set to tag. I don't know how does it work.
How can I show all images by scrolling page. This is my Code.
<script src="~/Scripts/jquery-2.2.3.min.js"></script>
<script src="~/scripts/js/modernizr.custom.js"></script>
<script src="~/Scripts/jquery.lazyload.js"></script>
<script src="~/Scripts/js/bootstrap.min.js"></script>
<!--Custom-Theme-files-->
<!--theme-style-->
<link href="~/Content/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="~/Content/css/style.css" rel="stylesheet" type="text/css" media="all" />
<link href="~/Content/css/products.css" rel="stylesheet" type="text/css" media="all" />
<div class="LazyImage">
<div class="container">
<div>
<div class="col-md-9 ">
<div>
<div class="col-md-4 product-left p-left">
<div class="product-main simpleCart_shelfItem">
<img class="lazy" src="~/Content/images/grey.gif" data-original="../Content/images/LazyLoad/example.jpg" width="200" height="200" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script language="javascript" type="text/javascript" charset="utf-8">
$(function () {
$("img.lazy").lazyload({
//threshold = 100,
//event = "sporty",
placeholder : "/Content/images/grey.gif",
event : "lazyload",
effect : "fadeIn",
effectspeed : 2000
});
});
$(window).bind("load", function () {
var timeout = setTimeout(function () {
$("img.lazy").trigger("lazyload")
}, 6000);
});
$(window).load(function () {
$("html,body").trigger("scroll");
});
</script>
I am using jquery mobile and html5.
when i redirect from one page to another page , getting a white screen (flickering).
So how to get out of this problem.
Here is my code..
--Page1--
<html>
<head>
<title>Login</title>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<meta name="x-blackberry-defaultHoverEffect" content="false" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link href="css/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.1.js" type="text/javascript"></script>
<link href="css/Global.css" rel="stylesheet" />
<script>
/*********Page bind evnet --start--********/
$(document).bind("pageinit", function () {
$("#login").unbind("click").click(function () {
Login();
});
});
/*********Page bind evnet --Ends--********/
var Type;
var Data;
var Url;
var DataType;
var ContentType;
var ProcessData;
var Method;
jQuery.support.cors = true
function Login() {
Type = "POST";
Url = "/login";
Data = '{}';
DataType = "JSON";
ContentType = "application/json; charset=UTF-8";
ProcessData = true;
CallLoginService();
}
function CallLoginService() {
$.ajax({
type: Type,
data: Data,
dataType: DataType,
processData: ProcessData,
url: Url,
contentType: ContentType,
crossDomain: true,
success: function (jsonObj) {
if (jsonObj.GetLoginResult[0].Status == "true") {
$(location).attr('href', 'City.html');
}
else if (jsonObj.GetLoginResult[0].Status == "Invalid username") {
ShowErrorMsg(jsonObj.GetLoginResult[0].Message, '#alertcontainer1');
}
else {
ShowErrorMsg(jsonObj.GetLoginResult[0].Message, '#alertcontainer1');
}
},
error: function (response) {
CheckNetwork();
}
});
</script>
</head>
<body>
<div data-role="page" id="page2" data-theme="a">
<div data-role="header">
<p style="color:#13a5db;"> Login</p>
</div>
<div data-role="content">
<div id="alertcontainer1" >
<div data-role="controlgroup" data-type="horizontal">
<a data-role="button" id="login" data-theme="b">Login</a>
<a data-role="button" href="Registration.html" data-transition="slide" data-theme="b">Register</a>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<p> CopyRight ® 2013</p>
</div>
</div>
</body>
</html>
page2--(city.html) second page
<html>
<head>
<link href="css/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*********Page bind evnet --start--********/
$(document).bind("pageinit", function () {
//code
});
/*********Page bind evnet --Ends--********/
</head>
<body>
//code
</body>
</html>
I am using the instagram ruby gem. If i do more than 2 requests below is what the error i get.
Now, for the first two request it shows this
Processing by HomesController#index as JS
Processing by HomesController#index as */*
So when the third request happens now, it erros into (as said above) this
Completed 500 Internal Server Error in 4525ms
JSON::ParserError (757: unexpected token at '<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" class="hl-en not-logged-in ">
<head>
<meta charset="UTF-8" />
<title>Page Not Found • Instagram</title>
<meta name="robots" content="noimageindex" />
<link rel="Shortcut Icon" type="image/x-icon" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/images/ico/favicon.ico" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon-precomposed" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/images/ico/apple-touch-icon-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/images/ico/apple-touch-icon-72x72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/images/ico/apple-touch-icon-114x114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/images/ico/apple-touch-icon-144x144-precomposed.png" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<script type="text/javascript" src="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/scripts/jquery.js"></script>
<script type="text/javascript" src="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/scripts/bluebar.js"></script>
<script type="text/javascript" src="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/cache/strings/strings_en.js"></script>
<script>
window._csrf_token = 'NOTPROVIDED';
window._jscalls = [
];
</script>
<script type="text/javascript" src="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/cache/polyfills/polyfill_old.js"></script>
<script data-main="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/cache/modules/main.js" src="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/scripts/require.js"></script>
<link rel="stylesheet" type="text/css" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/cache/bluebar/bluebar_new.css" />
<link rel="stylesheet" type="text/css" href="//d36xtkk24g8jdx.cloudfront.net/bluebar/f4f8a28/cache/distillery/dialog-main.css"/>
</head>
<body class=" p-error dialog-404">
<div class="root">
<div class="page">
<header class="top-bar top-bar-new">
<div class="top-bar-wrapper">
<h1 class="logo">Instagram</h1>
<div class="top-bar-left">
<ul class="top-bar-actions">
<li>
<a class="top-bar-home" href="/" label=Home><i></i></a>
</li>
</ul>
<div class="top-bar-search" id="top-bar-search">
</div>
</div>
<div class="top-bar-right account-state" id="top_bar_right">
<ul class="top-bar-actions">
<li id="link_profile" class="link-signin">
<a href="javascript:;" class="loginLink">
<i></i>
<strong>Log in</strong>
</a>
</li>
</ul>
</div>
</div>
</header> <!-- .top-bar -->
<div class="main">
<div class="error-container">
<h2>Page Not Found</h2>
<p>This page could not be found.<br />You might have followed an incorrect link.</p>
</div>
</div> <!-- .main -->
</div> <!-- .page -->
<footer class="page-footer" role="contentinfo">
<div class="wrapper">
<nav>
<ul>
<li>About us</li>
<li>Support</li>
<li>Blog</li>
<li>API</li>
<li>Jobs</li>
<li>Privacy</li>
<li>Terms</li>
</ul>
</nav>
<p class="copyright">© 2013 Instagram</p>
</div>
</footer>
<div id="reactModalMountPoint"></div>
</div> <!-- .root -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-18105282-1']);
_gaq.push(['_setDomainName', 'none']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>'
I think something is wrong with the header? Since I am doing the process via ajax, how can I force it to process it through JS? since thats what seems to work here I believe.
Here is my ajax code
{
$.ajax({
url: /home,
method: "post",
data: {
// data goes here
},
success: function(html)
{
if(html)
{
// html goes here
}else
{
// html goes here</center>');
}
}
I think instagram is blocking your request if you do to many request in a specific time
Instagram is serving up an error page instead of the JSON you expect. You need to check the response's status code (in this case it would be 404 instead of 200) to find out if the payload is JSON or HTML in the case of the error page.
After so much work on this, I found out for my case that it is because something in the content of the JSON data is screwing things around. That was my situation (and I hate how 500 status is so vague about the error, too)
I am having a JSON string. With it I have to fill the dropdown menu. GroupBy in JavaScript to group JSON data and populate on optgroup I looked into the question and tried it.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0 ,maximum-scale=1.0 ,minimum-scale=1 ,user-scalable=0" />
<!--jQuery Mobile CSS-->
<link rel="stylesheet" href="common/style/jquery/jquery.mobile-1.1.0.min.css" />
<link type="text/css" href="common/style/jquery/jquery.mobile.fixedToolbar.polyfill.css" rel="stylesheet" />
<link type="text/css" href="common/style/jquery/jquery.mobile.datebox.min.css" rel="stylesheet" />
<link type="text/css" href="common/style/jquery/jquery.mobile.simpledialog.min.css" rel="stylesheet" />
<link type="text/css" href="common/style/jquery/prettify.css" rel="stylesheet" />
<!--Custom CSS-->
<link rel="stylesheet" href="common/style/commonLayout.css"/>
<link rel="stylesheet" href="common/style/mc-lib/mclib.css"/>
<link rel="stylesheet" href="common/style/custom/custom.css"/>
<!--jQuery Mobile JS-->
<script type="text/javascript" src="common/js/jquery/jquery-1.7.2.js"></script>
<script type="text/javascript" src="common/js/jquery/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="common/js/jquery/jquery.mobile.fixedToolbar.polyfill.js"></script>
<script type="text/javascript" src="common/js/jquery/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="common/js/jquery/jquery.mobile.datebox.min.js"></script>
<script type="text/javascript" src="common/js/jquery/jquery.mobile.simpledialog.min.js"></script>
<script type="text/javascript" src="common/js/jquery/prettify.js"></script>
<!--Custom JS-->
<script type="text/javascript" src="common/js/Lib/spin.js"></script>
<script type="text/javascript" src="common/js/Lib/iscroll.js"></script>
<script type="text/javascript" src="common/js/Lib/MCLib.js"></script>
<!--Hy5 JS-->
<script type="text/javascript" src="common/js/hy5/hy5.js"></script>
<script type="text/javascript" src="js/sample.js"></script>
</head>
<body>
<div data-role="page" data-theme="b" id="LoginScreen" data-overlay-theme="c">
<div id="wrapper">
<div id="scroller">
<div data-role="content">
<fieldset class="l1c1Panel" data-role="controlgroup">
<label for="product">Product</label>
<select name="products" class="product" id="product">
</select>
</fieldset>
</div>
</div>
</div>
</div>
</body>
<script type='text/javascript'>
var data = {
"Category 1":[
{"id": "210","name": "Name 1"},
{"id": "187","name": "Name 2"},
{"id": "186","name": "Name 3"},
{"id": "185","name": "Name 4"},
{"id": "184","name": "Name 5"},
{"id": "183","name": "Name 6"},
{"id": "182","name": "Name 7"}
],
"Category 2":[
{ "id": "181","name": "Name 8"},
{"id": "178","name": "Name 10"}
],
"Category 3": [
{"id": "180","name": "Name 9"}
]
};
var product = $('#product');
$.each(data, function (key, cat) {
var group = $('<optgroup>',{label:key});
$.each(cat,function(i,item) {
$("<option/>",{value:item.id,text:item.name})
.appendTo(group);
});
group.appendTo( product );
});
var pageScroller;
$(document).on("pagebeforeshow",'#LoginScreen',function(event){
pageScroller.refresh();
});
function makeScroll(){
pageScroller=new iScroll('wrapper');
}
$(document).on("pagebeforecreate",'#LoginScreen',function(event){
makeScroll();
});
</script>
</html>
The dropdown is working fine if I remove the iScroll related code. I am unable to find the problem. Kindly help me with this