This is (part of) a web page. For some reason, I fail to get the slide-show operational. Can you help me fix it?
<!DOCTYPE html>
<html>
<head lang='fr'>
<meta http-equiv='content-type' content='text/html;charset=ISO-8859-1' />
<link href='../dojo-release-1.9.1/dijit/themes/claro/claro.css' rel='stylesheet' type='text/css' media='all' />
</head>
<body class='claro'>
<script>
dojoConfig = {async: true, parseOnLoad: true}
</script>
<script type='text/javascript' src='../dojo-release-1.9.1/dojo/dojo.js'>
</script>
<script type='text/javascript'>
require(["dojo", "dojo/parser", "dojo/store/Memory", "dojox/image/SlideShow"]);
var imageData= {
identifier: "imageUrl",
items: [
{ imageUrl: "http://mysyte.net/photos/f1.jpg"},
{ imageUrl: "http://mysyte.net/photos/f2.jpg"},
{ imageUrl: "http://mysyte.net/photos/f3.jpg"},
{ imageUrl: "http://mysyte.net/photos/f4.jpg"}
]
};
</script>
<div data-dojo-type='dojo/store/Memory' data-dojo-props='data:imageData' data-dojo-id='imageStore'></div>
<div data-dojo-type='dojox/image/SlideShow' id='slideshow1' data-dojo-id='imageShow'
data-dojo-props='store: imageStore, noLink: true, autoStart:true, imageWidth:770, imageHeight:345, slideshowInterval: 5'>
</div>
</body>
</html>
What am I missing?? Can you help me fixing it? Thanks!
Problem solved.
<!DOCTYPE html>
<html>
<head lang='fr'>
<meta http-equiv='content-type' content='text/html;charset=ISO-8859-1' />
<link href='../dojo-release-1.9.1/dijit/themes/claro/claro.css' rel='stylesheet' type='text/css' media='all' />
</head>
<body class='claro'>
<script>
dojoConfig = {async: true, parseOnLoad: true}
</script>
<script type='text/javascript' src='../dojo-release-1.9.1/dojo/dojo.js'></script>
<script type='text/javascript'>
var imageData= {
identifier: "imageUrl",
items: [
{ imageUrl: "http://mysyte.net/photos/f1.jpg"},
{ imageUrl: "http://mysyte.net/photos/f2.jpg"},
{ imageUrl: "http://mysyte.net/photos/f3.jpg"},
{ imageUrl: "http://mysyte.net/photos/f4.jpg"}
]
};
require(["dojo", "dojo/data/ItemFileReadStore", "dojox/image/SlideShow", "dijit/registry"], function(dojo, ItemFileReadStore, SlideShow, registry) {
dojo.ready(function() {
registry.byId('slideshow1').setDataStore(imageStore, {})
})
});
</script>
<div data-dojo-type='dojo/data/ItemFileReadStore' data-dojo-props='data:imageData' data-dojo-id='imageStore'></div>
<div data-dojo-type='dojox/image/SlideShow' id='slideshow1' data-dojo-id='imageShow'
data-dojo-props='autoStart:true, showTitle: false, noLink: true, hasNav: false, imageWidth:770, imageHeight:345, fixedHeight: true, slideshowInterval: 5'>
</div>
</body>
</html>
Apparently, the SlideShow object in dojo has some bugs/inconsistencies. I even had to modify the dojox/image/SlideShow.js file. The clues I found here: http://petergragert.info/dojo/demo/PKHG_won_22feb.html and in http://dojo-toolkit.33424.n3.nabble.com/Dojo-1-8-SlideShow-Problem-tp3991064.html
Related
I try to get Vue Formulate running, but it just does not work. Here is my code:
this version includes the import statements:
https://vueformulate.com/guide/installation/#direct-download
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#braid/vue-formulate#2.4.1/dist/formulate.umd.min.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es2015"></script>
<template>
<FormulateForm
v-model="values"
:schema="schema"
/>
</template>
<script>
import Vue from 'vue'
import VueFormulate from '#braid/vue-formulate'
Vue.use(VueFormulate)
export default {
data () {
return {
values: {},
schema: [
{
type: 'password',
name: 'password',
label: 'Enter a new password',
validation: 'required'
},
{
type: 'password',
name: 'password_confirm',
label: 'Confirm your password',
validation: '^required|confirm:password',
validationName: 'Password confirmation'
},
{
type: 'submit',
label: 'Change password'
}
]
}
}
}
</script>
Opening the site results in the following error appearing in the console:
formulate.umd.min.js:5 Uncaught TypeError: Cannot read property 'en' of undefined
at new Jt (formulate.umd.min.js:5)
at formulate.umd.min.js:5
at formulate.umd.min.js:5
at formulate.umd.min.js:5
Jt # formulate.umd.min.js:5
(anonymous) # formulate.umd.min.js:5
(anonymous) # formulate.umd.min.js:5
(anonymous) # formulate.umd.min.js:5
test.html:15 Uncaught SyntaxError: Unexpected token 'export'
Thanks!
The issue is due partially to DOM limitations, as explained in the small note in Vue Formulate's documentation on direct downloads. To be more specific, since we are not using a builder but downloading the libraries from a CDN and inserting them with script tags, all components names must be kebab-case. We also need to create a Vue instance.
Vue.use(VueFormulate)
new Vue({
el: '#app',
data: function () {
return {
values: {}
}
}
})
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Vue-Formulate example">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Vue Formulate</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#braid/vue-formulate#2.3.8/dist/formulate.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#braid/vue-formulate#2.3.8/dist/snow.css">
</head>
<body>
<div id="app">
<formulate-form v-model="values">
<formulate-input
type="password"
name="password"
label="Enter a new password">
</formulate-input>
<formulate-input
type="password"
name="password_confirm"
label="Confirm your password"
validation="required|confirm:password"
validation_name="Password confirmation">
<formulate-input
type="submit"
label="Change password">
</formulate-form>
</formulate-form>
<p><strong>This is your password: {{ values }}</strong></p>
</div>
</body>
</html>
The same but with Schemas (please note that Vue-Formulate needs to be version 2.4 or above):
Vue.use(VueFormulate)
var app = new Vue({
el: '#app',
data: function () {
return {
values: {},
schema: [
{
type: 'password',
name: 'password',
label: 'Enter a new password',
validation: 'required'
},
{
type: 'password',
name: 'password_confirm',
label: 'Confirm your password',
validation: '^required|confirm:password',
validationName: 'Password confirmation'
},
{
type: 'submit',
label: 'Change password'
}
]
}
}
})
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Vue-Formulate example">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Vue Formulate with Schema</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#braid/vue-formulate#2.4.1/dist/formulate.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#braid/vue-formulate#2.3.8/dist/snow.css">
</head>
<body>
<div id="app">
<formulate-form v-model="values" :schema="schema"/>
<p><strong>This is your password: {{ values }}</strong></p>
</div>
</body>
</html>
I am a fresher.I try to use scope slot and directive to create a list sample ,the code follow:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作用域插槽</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="app">
<app></app>
</div>
</body>
<script>
Vue.directive("selectall",{
bind:function(el,binding,vnode,oldVnode){
var arg = binding.arg,
value = binding.value;
console.log(arg,value);
$(el).on('change',function(){
});
}
});
Vue.component("list",{
template:"<div><ul>"
+"<slot name='item' v-for='item in litodos' :text= 'item.text' :time='item.time' :idx='item.idx'></slot>"
+"</ul>"
+"</div>",
props:['litodos'],
data:function(){
return {
message:"list-message"
}
}
});
Vue.component("app",{
template:"<div class='container'>"
+" <input type='checkbox' v-selectall:parent='group1'/>select all gruop1"
+"<list :litodos='todos1'>"
+"<template slot='item' scope='props'>"+
+"<li><input type='checkbox' value='{{props.idx}}' v-selectall:child='group1'/>{{props.text}} </li>"
+"</template>"
+"</list>"
+" <hr><input type='checkbox' v-selectall:parent='group2'/>select all gruop2"
+"<list :litodos='todos2'>"
+"<template slot='item' scope='props'>"+
+"<li><input type='checkbox' value='{{props.idx}}' v-selectall:child='group2'/>{{props.text}}</li>"
+"</template>"
+"</list>"
+"</div>",
data:function(){
return {
group1:"group1",
group2:"group2",
todos1:[
{
text:'study english',
time:'3hour',
idx:'1'
},{
text:'study vue',
time:'2hour',
idx:'2'
}
],
todos2:[
{
text:'学英语',
time:'3hour',
idx:'3'
},{
text:'学js',
time:'2hour',
idx:'4'
}
]
};
}
})
var app = new Vue({
el: '#app',
data:{}
});
</script>
</html>
and here are essential fragment:
+"<list :litodos='todos1'>"
+"<template slot='item' scope='props'>"+
+"<li><input type='checkbox' value='{{props.idx}}' v-selectall:child='group1'/>{{props.text}} </li>"
+"</template>"
+"</list>"
but the result is like this:
enter image description here
I find out that the slot return to NaN,so I am so confused.Can you help me find the keys point to resolve this bug?Thank you!
I am trying to set property for my custom tag. But it gives error instead. I am attaching screenshot of error and code snippet also.
<awts-est data-url$="{{dataUrl}}"></awts-est>
properties: {
dataUrl: {
type: String,
value: '',
reflectToAttribute: true,
},
}
in demo/index.html
<awtt-ch data-url="http://abc.asdfg.com"></awtt-ch>
Ok, I went back through and recreated your build. I believe this is what you have at base level. This was successfully printing off the data from dataUrl.
index.html
<html>
<head>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="elements/awtt-ch.html" rel="import">
</head>
<body>
<awtt-ch data-url="http://abc.asdfg.com"></awtt-ch>
</body>
</html>
elements/awtt-ch.html
<head>
<link href="../bower_components/polymer/polymer.html" rel="import">
<link href="/elements/awts-est.html" rel="import">
</head>
<dom-module id="awtt-ch">
<template>
<awts-est data-url$="{{dataUrl}}"></awts-est>
</template>
</dom-module>
<script>
Polymer({
is: "awtt-ch",
properties: {
dataUrl: {
type: String,
notify: true,
}
}
});
</script>
elements/awts-est.html
<html>
<head>
<link href="../bower_components/polymer/polymer.html" rel="import">
<link href="/elements/awts-est.html" rel="import">
</head>
<dom-module id="awts-est">
<template>
<h1>Here's your data: <span>{{dataUrl}}</span></h1>
</template>
</dom-module>
<script>
Polymer({
is: "awts-est",
properties: {
dataUrl: {
type: String,
notify: true,
}
}
});
</script>
I wnat to show to display grid in combo box using jquery easy ui plugin with asp.net mvc. But I took that error "Uncaught TypeError: $(...).combogrid is not a function". Where is the error?
My View Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ComboGrid - jQuery EasyUI Demo</title>
<link href="#Url.Content("~/Content/themes/easyui.css")" rel="stylesheet" />
<link href="#Url.Content("~/Content/themes/icon.css")" rel="stylesheet" />
<link href="#Url.Content("~/Content/themes/demo.css")" rel="stylesheet" />
<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.easyui.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.combogrid.js"></script>
<script type="text/javascript">
$(function () {
$('#cc').combogrid({
panelWidth: 450,
value: '006',
idField: 'code',
textField: 'name',
url: 'datagrid_data.json',
columns: [[
{ field: 'code', title: 'Code', width: 60 },
{ field: 'name', title: 'Name', width: 100 },
{ field: 'addr', title: 'Address', width: 120 },
{ field: 'col4', title: 'Col41', width: 100 }
]]
});
});
function reload() {
$('#cc').combogrid('grid').datagrid('reload');
}
function setValue() {
$('#cc').combogrid('setValue', '002');
}
function getValue() {
var val = $('#cc').combogrid('getValue');
alert(val);
}
function disable() {
$('#cc').combogrid('disable');
}
function enable() {
$('#cc').combogrid('enable');
}
</script>
</head>
<body>
<h2>ComboGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the right arrow button to show the datagrid.</div>
</div>
<div style="margin:10px 0;">
Reload
SetValue
GetValue
Disable
Enable
</div>
<select id="cc" name="dept" style="width:250px;"></select>
</body>
</html>
You can remove
<script type="text/javascript" src="~/Scripts/jquery.combogrid.js"></script>
because jquery.easyui.min.js includes combogrid function.
I lost all day and no matter what I do the dataview doesn't see the specific CSS,
I use extjs since a while and I am able to use every component but this is driving me crazy here is the view
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux.DataView', '../ux/DataView/');
Ext.require([
'Ext.data.*',
'Ext.util.*',
'Ext.view.View',
'Ext.ux.DataView.Animated',
'Ext.XTemplate',
'Ext.panel.Panel',
'Ext.toolbar.*',
'Ext.slider.Multi',
'Pandora.store.Product'
]);
Ext.define('Pandora.view.ProvaShowProdotti', {
extend: 'Ext.panel.Panel',
alias: 'widget.provaShowProdotti',
frame: true,
title: 'Liste des agents',
initComponent: function(){
this.items =[{
xtype: 'dataview',
store: 'Product',
cls: 'thumb',
style: 'border:1px solid #99BBE8; border-top-width: 0',
deferInitialRefresh: false,
itemSelector: 'div.thumb-wrap',
tpl : Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="thumb-wrap" id="{name}">',
'<div class="thumb"><img src="http://localhost:8080/WebProjectTemplate/js/images/prova.jpg" title="{name}"></div>',
'<span class="x-editable">{shortName}</span></div>',
'</tpl>'
), plugins : [
Ext.create('Ext.ux.DataView.Animated', {
duration : 550,
idProperty: 'productId'
})
]
}]
this.callParent();
}
});
And here is the HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title id="page-title">Pandora</title>
<link rel="stylesheet" type="text/css" href="ext-all-debug.css">
<link rel="stylesheet" type="text/css" href="../../example.css" />
<script type="text/javascript" src="../bootstrap.js"></script>
<script type="text/javascript" src="PropertyReader.js"></script>
<script type="text/javascript" src="Bundle.js"></script>
<script type="text/javascript" src="app/app.js"></script>
</head>
<body>
</body>
</html>
The styling for the DataView Component doesn't seem to be included in the ext-all-debug.css.
Try to include data-view.css, it contains the styling for the DataView elements that you have referenced.