Unable to get the bootstrap datetimepicker.full.js in my extension.
I have tried the below code:
List.html
<head>
<script src="jhttps://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script src="jquery.datetimepicker.full.js"></script>
<script src="{f:uri.resource(path:'JS/datetimepicker.full.js')}"></script>
<script>$("#datetimepicker").datetimepicker();</script>
</head>
<f:section name="content">
<input type="text" id="datetimepicker"/> ..
setup.ts
page.includeJS.HsRoombooking = EXT:hs_roombooking/Resources/Public/JS/jquery.datetimepicker.full.js
Could you suggest what is missing?
Related
I use example from : blogs.adobe.com
but my output html file doesn't include links to my css files.
boilerplateSightlyPage.html:
<html>
<sly data-sly-include="head.html" data-sly-unwrap />
<sly data-sly-include="/libs/wcm/core/components/init/init.jsp" data-sly-unwrap />
<body>
<div data-sly-test="${wcmmode.edit}">
<!--/* Show only in edit (author) mode */-->
<h1>Simple Page Component Using Sightly</h1>
</div>
<div class="flex-row">
<div class="col-half">First column</div>
<div class="col-half">Second column</div>
</div>
<div data-sly-resource="${#path='par',resourceType='wcm/foundation/components/parsys'}"></div>
</body>
</html>
head.html:
<head>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8” />
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
data-sly-call="${clientlib.css # categories='alexpi, flex'}"/>
<title>${currentPage.title}</title>
</head>
clientLib :
/etc/designs/alexpi-training/clientLib
properties:
jcr:primaryType (Name)cq:ClientLibraryFolder
categories (String[]) alexpi, flex
css.txt:
#base=css
flex.css
first.css
CSS files location:
/etc/designs/alexpi-training/clientLib/css/first.css
/etc/designs/alexpi-training/clientLib/css/flex.css
I see 'head.html' was included:
<head>
<meta http-equiv="”content-type”" content="”text/html;" charset="UTF-8”">
<title>AP empty sightly page with clienlib</title>
<link rel="stylesheet"href="/libs/cq/gui/components/authoring/clientlibs/page.css" type="text/css">
<script type="text/javascript" src="/libs/granite/author/deviceemulator/clientlibs.js"></script>
<script type="text/javascript" src="/libs/cq/gui/components/authoring/clientlibs/page.js"></script>
</head>
to pass an array via an option you need to use ${myVar # optName=[myVar, 'string']} syntax, read here
in your head.html:
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"
data-sly-call="${clientlib.css # categories=['alexpi', 'flex']}"/>
note: categories=['alexpi', 'flex']
I am new to SAPUI5. I'm able to create controls in my SAPUI5 mobile application.But I'm not able to set them in a layout. I'm writing my view as HTML page and adding my controls to that. I have tried placing them in a division but I don't know what is the attribute to specify layout.Please guide about the layouts.
Thanks
<template data-controller-name="sample.controllers.index">
<div data-sap-ui-type="sap.m.Page" data-title="Title">
<div data-sap-ui-aggregation="content">
<div data-sap-ui-type="sap.m.Layout" data-type="vertical">
<div data-sap-ui-type="sap.m.Input" data-width="20%"
id="Textfield" data-placeholder="User" data-max-length="10"></div><br>
<div data-sap-ui-type="sap.m.Input" data-width="20%" id="Textfield2" data-placeholder="Password" data-type="Password"></div><br>
<div data-sap-ui-type="sap.m.TextArea" data-width="30%" id="textarea" data-placeholder="Text for information..."></div>
</div>
<div data-sap-ui-type="sap.m.Button" id="btn1" data-text="My Button1" data-press="doIt"></div>
<div data-sap-ui-type="sap.m.Button" id="btn2" data-text="My Button2" data-press="doIt"></div>
<div data-sap-ui-type="sap.m.Label" data-text="I'm Label" data-width="100px" data-height="100px" data-background-colour="orange"></div>
</div>
</div>
This is my sample code and when i run this on browser it shows me a error message that
Uncaught Error: failed to load 'sap/m/Layout.js' from resources/sap/m/Layout.js: 404 - Not Found
here is my index.html
`
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("sample");
var app = new sap.m.App({initialPage:"idindex1"});
var page = sap.ui.view({id:"idindex1", viewName:"sample.views.index", type:sap.ui.core.mvc.ViewType.HTML});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>`
<div data-sap-ui-type="sap.m.Layout" data-type="vertical">
There is no such a control like sap.m.Layout. For layout, you can choose any from the sap.ui.layout controls, for example, sap.ui.layout.Grid
So i have this code, (i'm learning Backbone, but the console tells me: "Uncaught ReferenceError: $ is not defined", and i don't have any idea why, i have the exact code of the video tutorial, the error is in this line: el : $('#container')
Here is my code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Backbone Project</title>
<script src="lib/underscore.js" type="text/javascript"></script>
<script src="lib/backbone.js" type="text/javascript"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<script type="text/template" id="task_template">
<label>Task: </label>
<input type="text" id="task_desc"/>
<input type="button" value="Add Task" id="btn"/>
</script>
<div id="container"></div>
<script type="text/javascript">
Task = Backbone.View.extend({
el : $('#container'),
initialize: function(){
this.render();
},
render: function(){
var template = _.template($('#task_template').html(), {});
this.$el.html(template);
}
});
var task = new Task();
</script>
</body>
</html>
The example is using jQuery to select DOM elements, add the library to your head...
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<!-- load other libraries that depend on jquery *after* jquery -->
<script src="lib/underscore.js" type="text/javascript"></script>
<script src="lib/backbone.js" type="text/javascript"></script>
<!-- ... time passes ... -->
<script type="text/javascript">
// use jQuery onReady wrapper to ensure DOM has loaded before
// executing JS that might depend on DOM elements, and scripts to exist
$(function(){
Task = Backbone.View.extend({
el : $('#container'),
initialize: function(){
this.render();
},
render: function(){
var template = _.template($('#task_template').html(), {});
this.$el.html(template);
}
});
var task = new Task();
});
</script>
I'm trying to use autocomplete inside a jstree but can't figure out why it doesn't work when both bindings are done in document ready. It works if the autocomplete binding is done after the jstree binding via windows load or a user triggered script.
This is a simplified example of the issue. (code at JSFiddle)
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jsTree v.1.0 - Demo</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.cookie.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.hotkeys.js"></script>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
<link type="text/css" rel="stylesheet" href="http://static.jstree.com/v.1.0pre/_docs/syntax/!style.css"/>
<link type="text/css" rel="stylesheet" href="http://static.jstree.com/v.1.0pre/_docs/!style.css"/>
<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/_docs/syntax/!script.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script>
function autocomplete(element) {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$(element).autocomplete({
source: availableTags
});
};
</script>
</head>
<body id="demo_body">
<div id="container">
<h1 id="dhead">jsTree v.1.0</h1>
<h1>DEMO</h1>
<div>
<label for="tags">Tags: </label>
<input id="tags" />
</div>
<h2>Autocomplete inside jsTree</h2>
<div id="description">
<!-- autocomplete inside a tree works when the user adds autocomplete manually -->
<button type="button" onclick="autocomplete('#tagstree')">add autocomplete manually (comment out other autocomplete bindings)</button>
<div id="demo1" class="demo" style="height:100px;">
<ul>
<li id="phtml_1">
<label for="tagstree">Tags: </label>
<input id="tagstree" />
<ul>
<li id="phtml_2">
Child node 1
</li>
<li id="phtml_3">
Child node 2
</li>
</ul>
</li>
<li id="phtml_4">
Root node 2
</li>
</ul>
</div>
<script type="text/javascript">
$(function () {
/* just to demonstrate an autocomplete field by itself works */
autocomplete('#tags');
/* adding autocomplete on an element in the tree doesn't work */
autocomplete('#tagstree');
$("#demo1")
.jstree({
"plugins" : ["themes","html_data","ui","crrm","hotkeys"],
"core" : { "initially_open" : [ "phtml_1" ] }
})
.bind("loaded.jstree", function (event, data) {
});
});
/* autocomplete inside a tree works when it gets added via windows load instead of document ready */
//$(window).load(function () {
// autocomplete('#tagstree');
//});
</script>
</div>
</body>
</html>
I would like to append some code to a page using jQuery/jQuery mobile,
but I am tripping up on some of the page() and pageshow and refresh methods.
Here is my code. you can cut, paste and run as is.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<script>
//$(document).ready(function() // get error when I use this
$('div').live('pageshow', function () {
function fnCreateGroups(){
var section = "<p>and add a whole bunch of html code...</p>";
myClone = $(section);
alert((myClone).html()); // this works
myClone.appendTo("#placeholder").page(); // but not appending
}
fnCreateGroups();
});
</script>
</head>
<body>
<div data-role="page">
<div id="placeholder">
<div data-role="content">
<div id="placeholder">this is a small amount of html code.</div>
</div>
</div>
</div>
</body>
</html>
Beta2 release notes:
http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/
instead of:
myClone.appendTo("#placeholder").page();
try
myClone.appendTo("#placeholder").trigger('create');
From your comment:
You are running the live() on all div's
$('div').live('pageshow', function ()
try using the page id instead
$('#change_this_page_only').live('pageshow', function ()
and this:
<div data-role="page">
to something like this:
<div data-role="page" id="change_this_page_only">