I can't understand because when I include a bit of javascript code, only for testing something in Magento, the following error returns:
Uncaught TypeError: Cannot read property 'fill' of undefined
at klass.onComplete (ceramic-sinks.html?p=1&dir=asc&limit=21&mode=grid&order=position&cat=205:4525)
at klass.<anonymous> (ezzoom.js:2)
at prototype.js:1
at klass.<anonymous> (ezzoom.js:2)
at prototype.js:1
Anyone could give me an example of how a testing code should be?
This is the code I tested:
<script type="text/javascript">
document.observe("dom:loaded", function() {
new Ajax.JSONRequest('http://www.abcd.com/ezzoom/hole/fill', {
parameters: {isAjax: true,
id: '1090382',
key: 'eJw1ybESgjAQhOFcJ5IlcXgDLSyU1rFxzlxchBsIYS6HBU8vjtrt/y3SZGAy8nB+73ztGgxKS1nmToljFXL6QSG8SLHmTTg+aRkND7JeP/Afu1wi01AQolKS8K2qtzRi7aJhhgOLgkrAKEkM3iFljuhUGFk5KuZcXMQkTwi0/XWDW9ue76fL4Xh9A5CyPlI=',
holes: 'eJx1UsFKAzEQ/Zcc9lR3bUWUwlwiXCJFL1rQehBXQppMN6HZnWWStRTx351sra2gp8x7eZmZvJkPYdFDENMP8e5gA+Y4EtcP84eX+/nzk7w8F58j0WJ0eqf+CUXtcam83BMs09h0iiDJfkKhVVQe67wjNL2O+fdNHpyBpaL0roEQVL3Lf4j3BfbMqIZ4S9h3YO5i48Xh3YTF/6k4fYfep9S7U5CrbcwH8Mm3PSXSxthNq6IqNptNvibVhz6o1GtVLFW0hMfRSXDtOlSFBlKN0zuYWy531ZXjzDgqVdCZd42L5WScNWigrMmZDMlcMJUdBhcdthl7U05Oz/krWmkLcg1b6doViukrO0hQFYG/xcpBMfj4i7Kg19jHA/c2Ela1ZpjsqzCwUr2PrHxazB9n8oAXd7P7mVxcEbYRWiODa7ANFrsjyXc9yVwn1EhbmbbjL96rLRCvzUjcXFwvZrfzxxd5dpGEfYjYXDBJVtdgJDea+tNcXJNwGAgbxdazVawezGI0GafBsmFpAdgyRoNpDPe28di+XDDTxPh6'
},
onComplete: function(transport) {
var json = transport.responseJSON;
for(var i=0;i<json.fill.length;i++){
var obj = json.fill[i];
$('ezzoom-'+obj.block).update(obj.data);
}
if (json.conversionRate)
convertFromJson(json);
}
});
});
</script>
Related
I have been using svg-pan-zoom library successfully with my javascript app but I now need to refactor it to use requireJS.
My util.js is:
define([
'baja!',
'jquery',
'/file/WebWidgets/js/libraries/svg-pan-zoom.js'
], function (
baja,
$,
svgPanZoom) {
'use strict';
const updateInitializeDiv = () => {
const svgDocument = $('#svgObjectElementFromBinding')[0].contentDocument;
const svgDocumentElement = svgDocument.documentElement;
console.log(svgDocumentElement);
console.log(svgDocumentElement.tagName);//svg
let panZoomSVG = svgPanZoom(svgDocumentElement, {
zoomEnabled: true,
controlIconsEnabled: true
});
}
const util = {};
util.updateInitializeDiv = updateInitializeDiv;
return util;
});
I am getting "Uncaught TypeError: svgPanZoom is not a function".
Can anyone suggest what I am doing wrong?
I had to reference the svg-pan-zoom library in the RequireJS config to get this to work.
I am relatively new to VueJS, and now I am trying to replace the
<script src="https://cdn.jsdelivr.net/npm/vue#2.6/dist/vue.min.js"></script>
by
<script src="https://unpkg.com/vue#next"></script>
The problem is that previoulsy working code got broken after this change:
<script>
window.addEventListener('load', () => {
const defaultOptions = {
position: 'bottom-center'
}
Vue.use(Toasted, defaultOptions) # The error arises here
});
</script>
I am running into
Uncaught TypeError: Vue.use is not a function
What am I doing wrong here ?
UPDATE:
I am not using webpack for now. Is it possible to do that without webpack ?
#next refers to vue 3 which has different a different syntax, by assuming that Toasted plugin is compatible with vue 3 you should do :
<script>
window.addEventListener('load', () => {
const defaultOptions = {
position: 'bottom-center'
}
Vue.createApp({}).use(Toasted, defaultOptions)
});
</script>
I am making a basic chat component that loads messages from firebase into a div.
Goal is to auto-scroll to the bottom of the div WHEN relevantMessages changes, IF the current scroll location is already near
the bottom.
I tried to do this by adding a watcher to relevantMessages that calls a 'scrollToBottom' `method.
Problem is: Error in callback for watcher "relevantMessages":
"TypeError: Cannot read property 'scrollTop' of undefined"
HTML:
<template>
<div class="all">
<div class="chat-header">
...
</div>
<div class="messages-area" id="messages-area-id" ref="messagesAreaRef">
<div
v-for="(thing, index) in relevantMessages"
:key="index"
class="message-row"
>
<div class="message">
<span>{{thing.content}}</span>
<span>{{thing.timeStamp}}</span>
</div>
</div>
</div>
<div class="input-area">
...
</div>
</template>
The JS:
<script>
import firebase from "firebase";
export default {
data() {
return {
relevantMessages: Object,
partnerObj: null
};
},
computed: {
...
},
props: {
...
},
mounted: function() {
this.getMessages();
this.getPartner();
},
watch: {
relevantMessages: function() {
this.scrollToBottom();
}
},
methods: {
getMessages: function() {
var that = this;
firebase
.database()
.ref("/messages/" + that.conversationUID)
.on("value", function(messages) {
var result = messages.val();
that.relevantMessages = result;
});
console.log("getting posts");
},
sendMessage: function() {
...
},
scrollToBottom: function() {
var messagesArea = this.$refs.messagesAreaRef;
// var messagesArea = document.getElementById("messages-area-id");
var currentScrollPos = messagesArea.scrollTop;
// console.log(currentScrollPos);
var totalDivHeight = messagesArea.scrollHeight;
if (currentScrollPos <= totalDivHeight - 100) {
messagesArea.scrollTop(totalDivHeight);
}
}
}
};
The errors themselves:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in callback for watcher "relevantMessages": "TypeError: Cannot read property 'scrollTop' of undefined"
TypeError: Cannot read property 'scrollTop' of undefined
Perhaps the component itself is not yet mounted at this time. So all $refs are undefined. Try out the alternative syntax of watch (Documentation) in mounted(). Hope that helps!
There are a few issues with your implementation:
relevantMessages: Object,
Object does not seem to be a valid initial value for relevantMessages. You should set this to either an empty object ({}) or an empty array ([]).
messagesArea.scrollTop(totalDivHeight);
scrollTop is not a function, it should be used like messagesArea.scrollTop = totalDivHeight.
Your implementation for scrolling to the bottom is incorrect; currentScrollPos will always be less than the height of its container if it's near the top. To check if it's near the bottom, you should have currentScrollPos >= totalDivHeight - messagesArea.clientHeight - 100
Now, even with the above changes, it appears the watcher will run and execute before Vue has a chance to actually re-render and update the DOM (thus, the scrolling will always be one node behind), so you must call your scrollToBottom after the "next tick":
watch: {
relevantMessages() {
this.$nextTick(this.scrollToBottom);
}
},
I created a working example in CodeSandbox here: https://codesandbox.io/embed/vue-template-tqo4k.
I have a problem with animation; here is my code:
window.addEventListener('load', function(){
var Q =window.Q= Quintus().include("Sprites, Scenes,2D, Anim").setup({maximize:true});
Q.Sprite.extend('user',{
init:function(p){
this._super({sheet:"user",sprite:"user",
x:p.x,y:p.y,vx:p.vx,vy:p.vy});
this.add("animation");
},
step:function(dt){
this.play("walk");
}
});
Q.scene("scene1",function(stage){
var sprite1=stage.insert(new Q.user({x:200,y:20,vx:0,vy:0}));
});
Q.load("sprites.json,sprites.png",function()
{
Q.compileSheets("sprites.png","sprites.json");
Q.animations('user',{walk:{frames:[0,1],rate:1/15}});
Q.stageScene("scene1");
})
});
The error I get is the following:
Uncaught TypeError: Cannot call method 'draw' of undefined, quintus-all.js:4185
You'll need to make sure you have a spritesheet called "user" in your sprites.json, if you don't you'll get this error.
The contents of my dataHelper.js file:
define(["dojo/_base/declare", "dojo/dom", "dojo/_base/xhr", "dojo/json"],
function(declare, dom, xhr, json){
return {
getJSON: function(){
xhr.get({
url: "../../cpuusage.json",
handleAs: "json",
load: function(jsonData){
return jsonData;
},
error: function() {
}
});
}
};
});
I'm trying to run this from my index.html as follows:
var chartData = dataHelper.getJSON();
I think I have several issues. First of all, I'm not sure my module and the getJSON function is defined correctly. Secondly I get errors on my console:
TypeError: this.source is undefined
[Break On This Error]
= [],
dojo.js (line 362)
SyntaxError: missing : after property id
},
dojo.js (line 330)
SyntaxError: missing : after property id
},
dojo.js (line 330)
SyntaxError: missing : after property id
},
All I want to achieve first is load the json data into the chartData variable. Many thanks.
The first issue I'm seeing is you are treating an asynchronous process as if it was a synchronous one. The xhr.get returns immediately after the request to the server is sent, it does not block until a response is received.
First, I would add a console.log to your module definition to ensure that your dataHelper module is being loaded correctly.
define(["dojo/_base/xhr"],
function(xhr){
console.log('dataHelper.js loaded');
return {
//
};
});
Also note that above you aren't using any of the base dojo modules except dojo/_base/xhr, so it is unnecessary to include them (unless they are used outside this snippet).
You need to update your code to handle this call asynchronously. To do this, you could take advantage of the fact that the xhr.get method returns a Deferred object. This class makes dealing with asynchronous in a consistent manner quite easy.
To do this, update the dataHelper module to return the result of the xhr call:
define(["dojo/_base/xhr"], function(xhr){
return {
getJSON: function(){
//this returns a Deferred object, what to do on load and error is then handled by the invoker
return xhr.get({
url: "../../cpuusage.json",
handleAs: "json"
});
}
};
});
Then, when utilizing this module:
//replace dataHelper with whatever it's path is
require(['dataHelper'],function(dataHelper){
var deferred = dataHelper.getJSON();
deferred.then(function(data){
//this function is invoked once the data has been fully loaded
}, function(error){
//this function is invoked if an error occurs while loading the data (in case of a server error response or if the response isn't in the format you specified)
});
});
This is my proposal:
Your dataHelper.js file:
define("dataHelper", ["dojo/_base/declare", "dojo/dom", "dojo/_base/xhr"],
function(declare, dom, xhr){
return declare("dataHelper", [], {
getJSON: function(){
return xhr.get({
url: "../../cpuusage.json",
handleAs: "json"
});
});
};
});
your invocation:
require(["dataHelper"], function(dataHelper) {
var chartData;
dataHelper.getJSON().then(function(jsonData) {
chartData = jsonData;
//Continue doing stuff with chartData in here, not outside
});
});