I have seen the programmatic example here:
http://jsfiddle.net/8azsz/2/
var fp;
require(["dojo/ready", "dojo/parser", "dojo/on","dojox/layout/FloatingPane", "dijit/form/Button"], function(ready, parser, on, FloatingPane, Button) {
ready(function() {
parser.parse();
fp = new FloatingPane({
title: "Test",
resizable: true,
dockable: false,
style:"position:absolute;top:0;left:0;width:100px;height:100px;visibility:hidden;",
id: "fp"
}, dojo.byId("fp"));
fp.startup();
on(fp._resizeHandle, "resize", function(e) {
// Event handler
console.log("test");
});
});
});
The question is, how do i do this when i am using a declarative method of creating the floatingpane?
You can use dojo declarative scripting example.
See https://dojotoolkit.org/documentation/tutorials/1.10/declarative/
Specially section "Modifying Behavior"
You will need something like :
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="parseOnLoad:true"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/dijit.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/layout/resources/FloatingPane.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/layout/resources/ResizeHandle.css">
<div id="floatingPane" data-dojo-type="dojox/layout/FloatingPane"
data-dojo-props="title: 'Hello World!',resizable:true,dockable: false">
<p>I am a floating pane. That makes me happy See browser console for the resize event.</p>
<script type="dojo/aspect" data-dojo-advice="after" data-dojo-event="resize">
console.log("resize is executed");
</script>
</div>
Related
I have Barba.js working on a website I am developing, I have debugged some other issues but I've noticed my jS isn't reinitialising between pages, which is not the intended behaviour. Please see my code below (I have removed my actual site content for the purposes of DRY):
index.html:
<head>
<!--- Default Page Values -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="favicon.png" />
<title>TEST.</title>
<!--- Load Local Styles -->
<link type="text/css" rel="stylesheet" href="fonts/fontsauce.css" />
<link rel="stylesheet" href="css/globals.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/videoModal.css">
<!--- End Load Local Styles -->
<!--- Load Local Scripts -->
<script src="js/lib/jQuery/jquery-3.5.1.min.js"></script>
<script src="js/lib/anime/anime.min.js"></script>
<script src="js/lib/parallax/parallax.min.js"></script>
<script src="js/lib/barba/2.9.7/barba.umd.js"></script>
<!--- End Load Local Scripts -->
<!--- Load External Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js" integrity="sha512-IQLehpLoVS4fNzl7IfH8Iowfm5+RiMGtHykgZJl9AWMgqx0AmJ6cRWcB+GaGVtIsnC4voMfm8f2vwtY+6oPjpQ==" crossorigin="anonymous"></script>
<!--- End Load External Scripts -->
</head>
<body id="barba-wrapper" data-barba="wrapper">
<main class="barba-container" data-barba="container" data-barba-namespace="home">
// all my website content //
</main>
<script src="js/introParams.js"></script>
<script src="js/parallaxParams.js"></script>
<script src="js/content.js"></script>
<script src="js/videoModal.js"></script>
<script src="js/pageTransitions.js"></script>
</body>
pageTransitions.js:
barba.init({
transitions: [{
name: 'diffuse-transition',
leave(data) {
return gsap.to(data.current.container, {
opacity: 0
});
},
beforeEnter: ({ next }) => {
window.scrollTo(0, 0);
},
enter(data) {
return gsap.from(data.next.container, {
opacity: 0
});
}
}]
});
The problem as I understand it, is that each time the content from a new page is loaded into the DOM, it's not re-initialising my other scripts. Any ideas how I can re-init my other scripts correctly?
Like you do for resetting scroll in the beforeEnter callback you also need to call your init methods from your scripts to reset them on a new page load. You also have afterEnter if you need to access the new page dom.
From the barba.js doc :
barba.init({
views: [{
namespace: 'home',
beforeEnter() {
// re-init/reset script default function on before page load
myScriptInit();
},
afterEnter() {
// refresh parallax on new page content
parallax.refresh();
}
}]
});
I suggest you take a look at the lifecycle of barba.js to help you.
In my case this helped:
barba.hooks.after(() => {
const bottomDOM = document.getElementsByTagName("body")[0]
const newScript = document.createElement("script")
const oldScript = document.querySelector(".main-script")
newScript.src = "js/main-dist.js"
newScript.className = "main-script"
oldScript.remove()
bottomDOM.appendChild(newScript)
})
I have a <script class="main-script"></script> at the end of the DOM, and use barba.hook to remove it and then add it again
guys i am using jqgrid
and when i click on saveAllRows an error occurs which is Cannot read property 'errcap' of undefined .. here is my code for that button
function saveAllRows(){
var ids = $("#jqGrid").jqGrid('getDataIDs');
var i;
for (i = 0; i < ids.length; i++) {
$("#jqGrid").jqGrid('saveRow', ids[i]);
}
}
and here is what i included
<script type="text/ecmascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<!-- We support more than 40 localizations -->
<script type="text/ecmascript" src="resources/grid.locale-en.js"></script>
<!-- This is the Javascript file of jqGrid -->
<script type="text/ecmascript" src="resources/jquery.jqGrid.js"></script>
<!-- A link to a Boostrap and jqGrid Bootstrap CSS siles-->
<script type="text/ecmascript" src="resources/bootstrap-datepicker.js"></script>
<script type="text/ecmascript" src="resources/jquery.timepicker.js"></script>
<script type="text/ecmascript" src="https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-sliderAccess.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="resources/ui.jqgrid-bootstrap.css" />
<link rel="stylesheet" type="text/css" media="screen" href="resources/bootstrap-datepicker.css" />
<link rel="stylesheet" type="text/css" media="screen" href="resources/jquery.timepicker.css" />
<link rel="stylesheet" type="text/css" media="screen" href="resources/style.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
any help .. why that happens ??
The error
Cannot read property 'errcap' of undefined
means that the string like $.jgrid.defaults.errors.errcap, $.jgrid.locales["en-US"].errors.errcap or $.jgrid.regional.en.errors.errcap (dependent from the version and the fork of jqGrid which you use) is undefined. The problem can't exist if you would use free jqGrid because the required strings for en-US locale are defined in jquery.jqgrid.min.js. For example to use the latest free jqGrid 4.13.3 you need to include ui.jqgrid.min.css and jquery.jqgrid.min.js files
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.3/css/ui.jqgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.13.3/js/jquery.jqgrid.min.js"></script>
which included all what you need.
If you use some old jqGrid, for example jqGrid 4.6 then you have to include grid.locale-en.js, which defines some language specific strings inclusive $.jgrid.defaults.errors.errcap. Then the list of included files should be the following
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
{ label: 'Date', name: 'Date', width: 150 , "formatter":"date",
editable: true,
edittype:"custom",
editoptions: {
autoclose: true,
autoOpen: false,
format: 'yyyy-mm-dd',
orientation : 'auto bottom',
showOn: 'both',
formatoptions :{"srcformat":"Y-m-d", "newformat":"m/d/Y"},
dataInit : function (elem) {
// $(elem).datepicker({autoclose: true});
//$(elem).datepicker('hide');
setTimeout(function(){
$(elem).datepicker({autoclose: true});
},10);
/*$(elem).on('changeDate', function(ev){
$(this).datepicker('hide');
});*/
},
custom_element: function(value, options) {
var parts = value.split(' ');
var elemStr = '<div><input size="6" id="txt_' +'" value="' + parts[0] +
'" /><input type="button" size="5" value="..."/></div>';
// return DOM element from jQuery object
return $(elemStr)[0];
},
custom_value: function(elem) {
var inputs = $("input", $(elem));
var first = inputs.value;
return first;
}
}
},
Ive got some problem with my jquery function. First of all, this is my HTML head
<link href="css/bootstrap.css" media="screen" rel="stylesheet">
<link href="css/datepicker.css" media="screen" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap-datepicker.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js" type= 'text/javascript'></script>
<script src="js/bootstrap-tooltip.js" type= 'text/javascript'></script>
<script src="js/buttons.js"></script>
and here is the code from my button.js file
$(window).load(
function(){
...
$(document).on('click', '.popover a', function(){
alert("asd");
});
$('#button_nowtime').popover({
trigger: 'click',
html: 'true',
title: "<b>Čas</b>",
content:
function() {
var returnstring="",button;
for(var i=0; i<files.length; i++){
button = document.createElement("a");
button.innerText = "someText"
button.href="#";
returnstring+=button.outerHTML;
}
return returnstring;
}
});
}
);
html
<a href="#" id="button_nowtime" class="btn btn-lg btn-danger" data-placement="bottom" data-toggle="popover" title="" >N/A</a>
the problem is, the alert("asd") wont pop up when I click on any button in the tooltip
You should use $.ready instead of window.load, probabily your code doesn't work because window.load occurs before your objects exist. http://www.dotnetbull.com/2013/08/document-ready-vs-window-onload.html
This sample works http://jsfiddle.net/nWKqt/
[ignore this - just including a code block so stackoverflow will let me post the above JSFiddle link. Yeah, seriously.]
Also, you wrote a code that depends on a class that is defined not by you but from a jquery plugin, which you fire after you declared the events.
Try to put the click event after you declared the popover plugin, but better would be to define your cssClass and depend on it.
Why dont use this:
$(".popover a").click( function(){
alert("asd");
});
the old method works fine ..
This is insane... I've been trying to figure out why my popover code won't when hosted locally, but working fine on jsbin. Let me know what you guys think, I going crazy over this. Thanks to you all!!
So here it is:
jsbin: http://jsbin.com/ocepaw/1/edit
/*///// Libraries jquery & bootstrap libraries ///////*/
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
/*///// relevant HTML: Targets (pop1,2,3) & Triggers (Previous & Next buttons) ///////*/
<a href="#" id="pop1" class="btn" data-content="GREAT CONTENT3" data-original-title="Gamification 1/3">
</a>
<a href="#" id="pop2" class="btn" data-content="GREAT CONTENT3" data-original-title="Gamification 3/3">
</a>
<a href="#" id="pop3" class="btn" data-content="GREAT CONTENT3" data-original-title="Gamification 3/3">
</a>
NEXT
PREVIOUS
/*///// CSS ///////*/
var currentPopover = -1;
var popovers = [];
// Initialize all the popovers to be "manually" displayed.
popovers.push($("#pop1").popover({ trigger: 'manual' }));
popovers.push($("#pop2").popover({ trigger: 'manual' }));
popovers.push($("#pop3").popover({ trigger: 'manual' }));
// On each button click, hide the //currently displayed popover
// and show the next one.
$("#NextBtn").click(function() {
if (currentPopover >= 0) {
popovers[currentPopover].popover('hide');
}
currentPopover = currentPopover + 1;
popovers[currentPopover].popover('show');
});
$("#PreviousBtn").click(function() {
popovers[currentPopover].popover('hide');
currentPopover = currentPopover -1;
popovers[currentPopover].popover('show');
});
I had a similar issue a long time ago. Here's how i solved it: i changed the order of my imported .css and .js files. Try to load first bootstrap's required files and then everything else. Hopefully it will work for you too! if not then there's something wrong with your code.
Try declaring the CSS and JS with no redundancies and in correct order:
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js" type="text/javascript"></script>
I am new to kendo ui mvvm and am facing the follow issue:
Scenario
I need to populate few fields in a div whose role is a listview, using the MVVM format.
The data comes from the dataSource and I am getting an unusual error. I am unable to bind the fields from the data source to the div.
Follow is my JSBin Sample: http://jsbin.com/ajoyug/6/edit
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="myListView" data-role="listView" data-bind="source:dataSource">
<span data-bind="text:prodName"></span>
<span data-bind="text:qty"></span>
<span data-bind="text:total"></span>
<span data-bind="text:price"></span>
</div>
</body>
</html>
JavaScript:
$(document).ready(function(){
var data = [
{
"Id":1,
"img":"../public/images/product/shoes.png",
"code":"00021543",
"fullProdName":"Jimmy Choo - Simone Pump Shoes",
"prodName":"Simone Pump Shoes",
"description":"A perfect Red carpet companion. Jimmy Choo shoes spells success and glamour. Be the talk of the town...",
"price":"1500.0",
"total":"1500.0",
"qty":"1",
"discount":"0.00",
"brand":"Jimmy Choo",
"category":"Shoes",
"points":"100",
"tax":"0.00" }
];
var dataSource = new kendo.data.DataSource({
data: data,
pagesize: 10,
schema: {
model: {
id: "Id",
fields: {
prodName: { editable: false},
qty: { editable: true},
price: { editable: false},
total : {editable :false}
}
}
}
});
dataSource.read();
var listViewModel = kendo.observable({
dataSource:dataSource
});
kendo.bind($("#myListView"), listViewModel);
});
Kindly help me out. I saw many samples available online, but they used templates to bind multiple values or they were'nt suiting my requirement..Hence I thought of creating my own JSBin Sample and ask where am I getting stuck...
Questions
How shall I bind the fields from a dataSource?
My end motive is to bind the div with the values in the dataSource..Is there any other method to do that if not setting it as a listview?
Thanks!!
Hardik
Your JavaScript looked good. You had some problems with your HTML though. The data-role attribute needs to be "listview". Rather than putting 4 spans inside your listview div, you should really use a template, and reference it by ID.
It's also important to note that your template must have a root element, because kendo only performs binding on the first element in the template.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<script id="tmp" type="text/x-kendo-template">
<div>
<span data-bind="text:prodName"></span><br/>
<span data-bind="text:qty"></span><br/>
<span data-bind="text:total"></span><br/>
<span data-bind="text:price"></span>
</div>
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div
id="myListView"
data-role="listview"
data-bind="source: dataSource"
data-template="tmp">
</div>
</body>
</html>
JavaScript:
$(document).ready(function(){
var data = [
{
"Id":1,
"img":"../public/images/product/shoes.png",
"code":"00021543",
"fullProdName":"Jimmy Choo - Simone Pump Shoes",
"prodName":"Simone Pump Shoes",
"description":"A perfect Red carpet companion. Jimmy Choo shoes spells success and glamour. Be the talk of the town...",
"price":"1500.0",
"total":"1500.0",
"qty":"1",
"discount":"0.00",
"brand":"Jimmy Choo",
"category":"Shoes",
"points":"100",
"tax":"0.00" }
];
var dataSource = new kendo.data.DataSource({
data: data,
pagesize: 10,
schema: {
model: {
id: "Id",
fields: {
prodName: { editable: false},
qty: { editable: true},
price: { editable: false},
total : {editable :false}
}
}
}
});
var listViewModel = kendo.observable({
dataSource:dataSource
});
kendo.bind($("#myListView"), listViewModel);
});