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
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 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 :-(
I am using the below code to display menu in a native popup form, when user clicks on menu icon on header part, but it simply the shows a blank page with a loader. Please anyone see what is the wrong in the below code
<!DOCTYPE HTML>
<html>
<head>
<title>IRetail</title>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/Toast-Plugin.js"></script>
<script type="text/javascript" charset="utf-8" src="js/ScanditSDK.js" ></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.3.2.min.js"></script>
<!--<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.0rc1.min.js"></script>-->
<script type="text/javascript" charset="utf-8" src="js/jquery.jsonp-2.1.4.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/main.js"></script>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.2.min.css" />
<script type="text/javascript">
/*function success(result) {
var barcode = result[0];
//var symbology = result[1];
document.getElementById("product_id").value = barcode;
$('#product_id').keyup();
}
function failure(error) {
alert("Failed: " + error);
}
function scanBarcode() {
cordova.exec(success, failure, "ScanditSDK", "scan",
["y5TRWAxOEeKeEGfJ+mo2k17YexeY5gnQXlsZD8bHHPY",
{"beep": true,
"1DScanning": true,
"2DScanning": true,
"scanningHotspot": "0.5/0.5",
"vibrate": true}]);
}*/
/*function showHint() {
//alert("Please meet the cash counter to know about offer");
Toast.longshow("Please meet the cash counter to know about offer");
}*/
</script>
</head>
<body>
<div data-role="page" id="mainPage">
<header data-role="header">
<h1>Xlogix</h1>
Menu
<div data-role='popup' id='mainMenu' data-theme='d'>
<ul data-role='listview' data-inset='true' style='min-width:210px;' data-theme='d'>
<li data-role='divider' data-theme='a'>Choose an action</li>
<li data-icon='false'><a href='#' onclick='addQty()'>Add Quantity</a></li>
<li data-icon='false'>Delete</li>
</ul>
</div>
</header>
<article data-role="content" id="product_list">
</article>
<footer data-role="footer" data-position="fixed">
<nav data-role="navbar">
<ul>
<li>Scan</li>
<li>Manual</li>
<li>Checkout</li>
<li>Cancel</li>
</ul>
</nav>
</footer>
</div>
</body>
</html>
All I'm trying to do is embed a goggle map in the content tag of a jQuery mobile page and I can't get it to appear on the page. I'm guessing it's a little mistake but I've been wrestling with this for a while and any help would be appreciated.
<head>
<style type="text/css">
#map_canvas {
height: 256px;
width: 384px;
margin-top: 0.6em;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="fbObj1.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="PATH_TO_PLUGIN/jquery.ui.map.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
</head>
<body>
<script type="text/javascript">
geocoder = new google.maps.Geocoder();
var map = new google.maps.Map($("div#map_canvas"), {
center: new google.maps.LatLng(37.371940, -122.116470),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
map.index = 2;
</script>
<div data-role="page">
<div data-role="header"></div>
<div data-role="content">
<div id="map_canvas"></div>
</div>
<div data-role="footer" data-position="inline"></div>
</div>
</body>
The following code is working for me
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(37.371940, -122.116470),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
</script>
<body onload="initialize()">