My button handler gets called twice - once for mousedown/touchstart and a second time for mouseup/touchend.
This happens both on my iPhone device and in my Chrome Browser.
Using ST 1.1
I haven't found any references to this problem which seems to suggest that something in my env is wrong, but I'm running out of things to check ...
Examining the event objects passed to the handler in Chrome DevTools I can see that they're both simulated "tap" events, the first originating from "mousedown" and the second from "mouseup".
Any ideas ?
EDIT:
I've found out that this happens when I add a call (even with an empty handler) to Ext.EventManager.onDocumentReady.
If I remove this call, I only get clicks on "mouseup" as expected.
If I replace it with Ext.onReady it works !!!
This is really bewildering since one is an alias for the other ...
code reproduction:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="resources/Sencha/sencha-touch-debug.js" type="text/javascript"></script>
<link href="resources/Sencha/sencha-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
MyPanel = Ext.extend(Ext.Panel, {
fullscreen: true,
initComponent: function() {
this.items = [{
xtype: 'button',
text: 'Login',
handler: this.myHandler,
scope: this
}];
MyPanel.superclass.initComponent.apply(this, arguments);
},
myHandler: function(b, e) {
console.log(e.event.type);
}
});
Ext.EventManager.onDocumentReady(function() {
});
Ext.onReady(function() {
new MyPanel();
});
</script>
</head>
<body></body>
</html>
I've had this problem with with undecorated link nodes. I managed to fix it by eating touchend events on A nodes:
document.addEventListener('touchend', function(e) {
e.preventDefault() if e.target.localName == 'a')
}, true);
This isn't exactly your problem, but chances are that your problem is simliar, caused by both touch and click events being sent to the widget. Here's a method I use to spam my console with as much of all events being sent (that's raw DOM events, not Ext events) as possible. It's useful for troubleshooting low-level problems like this.
Related
The OneDriver Picker does not load after the authentication process but instead shows a spinner.
Steps to Reproduce
OneDrive Scripts Tested:
https://js.live.net/v7.2/OneDrive.debug.js
https://js.live.net/v7.2/OneDrive.js
Code used to Initiate the OneDriver Picker:
function launchOneDriverPicker() {
debugger;
var odOptions = {
clientId: "${clientId}",
action: "share",
multiSelect: true,
openInNewWindow: true,
advanced: {
redirectUri: "${redirectUri}"
},
success: function(r) {
},
cancel: function() {
},
error: function(error) {
}
};
OneDrive.open(odOptions);
}
Environments Tested:
- Chrome (Normal/Incognito)
- Firefox (Normal/Incognito)
Steps
The page hosting the OneDrive Picker and redirect URLs are served from the same domain
The redirect occurs to a redirect page with the following content hosted under the same domain (domain/redirect):
<html>
<head>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script type="text/javascript" src="https://js.live.net/v7.2/OneDrive.debug.js"></script>
</head>
</html>
Additional Notes
The above setup works correctly with the OneDriver Picker 7.0 as noted in an earlier issue:
https://github.com/OneDrive/onedrive-api-docs/issues/824
While debugging the issue I noticed that the OneDriver Picker makes a cross document call to the parent window which opened the Picker. There are no errors up to this point but the parent page does not receive this message.
The domain specified in the cross document call is correct
Reference
[1] https://learn.microsoft.com/en-us/onedrive/developer/controls/file-pickers/js-v72/open-file?view=odsp-graph-online#using-a-custom-redirect-uri
I am trying to embed "HelloWorld" module into existing HTML page.
I found that module is rendered asynchronously (i don't get rendered element
immediately after calling "embed").
I want to use Elm in an existing project and rewrite some parts of JavaScript
in Elm. But asynchronous rendering makes things difficult.
Is there a way to render it synchronously?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="app.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
var appContainer = document.createElement('div');
Elm.HelloWorld.embed(appContainer);
console.log('Html: ' + appContainer.innerHTML); // Will print an empty string
setTimeout(function() {
console.log('Html: ' + appContainer.innerHTML); // Will print "Hello, World!"
}, 0);
</script>
</body>
</html>
HelloWorld.elm
module HelloWorld exposing (main)
import Html exposing (text)
main =
text "Hello, World!"
UPD: Removed redundant code.
Nowadays, Elm doesn't expose this kind of hook.
You have basically two different approaches, one based on events and the other based on timing (the setTimeout() method you are already using).
The event-driven approach involves the MutationObserver Api.
Creating a new MutationObserver, you can observe the HTML Node onto which you run the Elm module: this way, you have a hook on the DOM update.
A naive check would be checking against the children's list of the appContainer:
<body>
<div id="myDiv"></div>
<script type="text/javascript">
var appContainer = document.getElementById('myDiv');
var mo = new MutationObserver(function(mutationRecords, instance) {
for (var i = 0; i < mutationRecords.length; i += 1) {
if (mutationRecords[i].addedNodes.length > 0) {
// a trivial check
console.log('Html: ' + appContainer.innerHTML);
// stop observing, if not needed anymore
mo.disconnect();
}
}
});
mo.observe(appContainer, { childList: true });
Elm.HelloWorld.embed(appContainer);
</script>
</body>
Note that the above code is assuming that your HelloWorld module is adding children to the appContainer, so you should modify it conveniently:
module HelloWorld exposing (main)
import Html exposing (p, text)
main =
p [] [ text "Hello, World!" ]
I am trying to offer a playlist of videos and only play a video once its link was clicked. Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>WW Video Player</title>
<link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.0/video.js"></script>
</head>
<body>
<video id="video_player" class="video-js vjs-default/skin" width="800" height="600" data-setup='{ "controls": true }'></video>
<script type="text/javascript">
videojs("video_player", {}, function() {});
function SelectVideo(path)
{
var mplayer = videojs("video_player", { "controls": true, "autoplay": false });
mplayer.src({ type:"video/mp4", src: path});
mplayer.play();
mplayer.requestFullScreen();
}
</script>
Play Video
</body>
</html>
In the <video> tag, I have tried adding plain controls and removing data-setup, but I can't get the controls to show up.
Furthermore, mplayer.requestFullScreen(); isn't working, either - here's Firebug's error message:
TypeError: mplayer.requestFullScreen is not a function
I'm running Firefox 22.0 on Windows 7 64bit.
Any ideas? Thanks!
Video.js is good and bad at the same time. I appreciate the work that's gone into it, but I've spent days getting it to work correctly. I wish I'd found your answer earlier, codoplayer looks good.
Videojs goes wrong whenever a javascript error occurs, and subsequently fails to set the correct classes on the control bar etc.
The bad javascript could be in your own code, and there is one in video.js that affects Firefox.
First, make sure your own scripts aren't failing...
The function that must be changed in video.js is: vjs.Player.prototype.techGet()
When an exception occurs, it handles it, then re-throws at the end. Replace the line 'throw e;' with 'return null;'
Why? There are methods within video.js that do not seem to realise that techGet could throw.. here is an example:
vjs.Player.prototype.currentSrc = function(){
return this.techGet('currentSrc') || this.cache_.src || '';
};
It throws an exception on techGet whenever the tech is flash, which is common in Firefox, IE8 etc. It will never reach this.cache_.src || ''. It looks like that wasn't the intention, so it's probably a bug.
If interested in IE8, you will have to do something with all the calls to innerHTML, they may fail and will need replacing with a method that works on the DOM instead.
I am writing a JSP that displays a list of clubs in a grid. The grid shows the name of the club together with its latitude, longitude, website and description.
The actual data to be displayed is stored in a variable (a dojo.data.ItemFileWriteStore) called clubStore.
When the page is loaded, a call is made to a servlet to retrieve the data. The handling function then deletes all the items held in the store and adds new items returned by the servlet.
The JSP code is shown below:
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clubs</title>
<style type="text/css">
#import "./dojoroot/dojo/resources/dojo.css";
#import "./dojoroot/dijit/themes/tundra/tundra.css";
#import "./dojoroot/dojox/grid/resources/Grid.css";
#import "./dojoroot/dojox/grid/resources/nihiloGrid.css";
</style>
<script type="text/javascript" src="dojoroot/dojo/dojo.js"
djConfig="parseOnLoad: true, isDebug: false">
</script>
<script language="JavaScript" type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dojo.data.ItemFileWriteStore");
var clubData={
items:[{name:'No Clubs', lat:'---', lon:'---', webSite:'---', description:'---'}]
};
var layoutClub=[{field:"name", name:"Name", width:10},
{field:"lat", name:"Lat", width:5},
{field:"lon", name:"Long", width:5},
{field:"webSite", name:"Web Site", width:10},
{field:"description", name:"Description", width:'auto'}];
var clubStore=new dojo.data.ItemFileWriteStore(data:clubData});
</script>
<link rel="stylesheet" href="dojoroot/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="dojoroot/dojox/widget/Dialog/Dialog.css" />
</head>
<body class="tundra">
<%#include file="header.jsp"%>
<div id="clubGrid"
style="width: 800px;"
autoHeight="true"
data-dojo-type="dojox/grid/DataGrid"
data-dojo-props="store:clubStore,
structure:layoutClub,
query:{},
queryOptions:{'deep':true},
rowsPerPage:40">
</div>
<br>
<script>
var urlString="http://localhost:8080/BasicWeb/ClubsServlet";
dojo.xhrGet({
url: urlString,
handleAs: "text",
load: function(data) {
// remove items...
var allData=clubStore._arrayOfAllItems;
for (i=0; i<allData.length; i++) {
if (allData[i]!=null) {
clubStore.deleteItem(allData[i]);
}
}
var jsonClubArray=JSON.parse(data);
for (var i=0; i<jsonClubArray.clubs.length; i++) {
var club=jsonClubArray.clubs[i];
var newClub={name: club.clubname, lat:club.lat, lon:club.lon, webSite: club.website, description: club.description};
clubStore.newItem(newClub);
}
clubStore.save();
}
});
</script>
</body>
</html>
The script to process the servlet response sometimes fails because clubStore is undefined (debugging using Firebug). This does seem to be a spurious fault as some times everything works perfectly.
Any assistance in understanding how to define the clubStore variable would be appreciated.
Thanks.
James.
I think what might be happening is the body script is sometimes running before the head script, so it is kind of a race condition. You could try wrapping your body script into a dojo.ready. (I assume from your code that you are using dojo 1.6 or earlier since you are not using the AMD loader style.)
dojo.ready(function(){
// Put your xhr request code here.
});
You may also want to try testing with a firebug breakpoint in the head and body script. See if the head is sometimes running first.
So the problem turned out to be a syntax error in the declaration - missing '{' in the line
var clubStore=new dojo.data.ItemFileWriteStore(data:clubData});
The spurious aspect to the fault was a red herring - I had previously declared the variable as part of the DOM object and that caused a spurious fault. So I messed up my regression testing as well as introducing a syntax error!
Thanks.
James.
You could try switching the order of your require statements, so it's like this:
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojo.parser");
If that fails, you could set parseOnLoad to false, and then call dojo.parser.parse() after your store has been instantiated like so:
(assuming you are using dojo 1.6 or earlier based on your code)
dojo.addOnLoad(function() {
dojo.parser.parse();
});
Put your clubStore in the global space... just remove the var keyword in front of it...
I see many references to this error on the web, but they are not helping me. I guess i am new enough to this that i need a specific answer for my problem.
I am attaching the first portion of code on a page that i am running. the last line i show is the line that is creating the error stating in the title. Please let me know if you have any suggestions.
Thank you!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>CDI Web Portal</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script src="js\dojo\dojo.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA5a4NhilcmrdMQ5e3o22QWRQWrGbhbxAguaJ-a4SLWYiya7Z2NRTDfQBdxmHdf5ydkZYLZTiz1tDXfg"></script>
<script type="text/javascript" src="ge-poly-fit-hack.js"></script>
<script type="text/javascript" src="kmldomwalk.js"></script>
<style type="text/css">
#import "js/dijit/themes/tundra/tundra.css";
#import "js/dojo/resources/dojo.css";
</style>
<style type="text/css">#import "index.css";</style>
<script type="text/javascript"> dojo.ready(function() { dojo.byId("greeting").innerHTML += ", from " + dojo.version; }); </script>
<script type="text/javascript">
// <![CDATA[
djConfig = { parseOnLoad: true };
// google.load("dojo", "1.6.1");
google.load("maps", "2");
google.load("earth", "1");
var g_ge;
var g_earthDisabled = false;
var g_kmlObject;
google.setOnLoadCallback(function() {
dojo.require('dijit.layout.BorderContainer');
dojo.require('dijit.layout.SplitContainer');
dojo.require('dijit.layout.ContentPane');
dojo.require('dijit.Tree');
//dojo.require('CheckboxTree');
dojo.require('dijit.form.CheckBox');
dojo.require('dijit.form.Button');
dojo.require('dijit.form.TextBox');
dojo.require('dojo.data.ItemFileWriteStore');
dojo.require('dojo.parser');
dojo.require('dojo.cookie');
dojo.require('dojo.fx');
dojo.addOnLoad(function() {
// load checkboxtree
var scpt = document.createElement('script');
scpt.src = "dijit.CheckboxTree.js";
document.body.appendChild(scpt);
{ dijit.byId('load-button').setDisabled(true) };
// build earth
google.earth.createInstance(
'map3d',
function(ge) {
g_ge = ge;
g_ge.getWindow().setVisibility(true);
g_ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
g_ge.getLayerRoot().enableLayerById(g_ge.LAYER_BORDERS, true);
g_ge.getLayerRoot().enableLayerById(g_ge.LAYER_BUILDINGS, true);
dijit.byId('load-button').setDisabled(false);
checkAutoload();
},
function() {
g_earthDisabled = true;
dijit.byId('load-button').setDisabled(true);
From your comment, you used declarative syntax to create the dijit, i.e. <button id="load-button" dojoType="dijit.form.Button" onclick="loadKml();">. If the declarative syntax is used, the dijit is actually created after the page is loaded. So you should put the code to use the dijit in the Dojo's load callback, i.e. inside of dojo.addOnLoad callback.
But your code is bad formatted and mingled with Google Maps load callback, it's not easy to inspect the code. My suggestion would be to wrap the dijit.byId('load-button').setDisabled(true); with dojo.addOnLoad, like below:
dojo.addOnLoad(function() {
dijit.byId('load-button').setDisabled(true);
});
It means that you've got a dojo object rather than a dijit object -- or possibly no object named load-button at all, since it's not clear from this where load-button is being created. Make sure there is an object with id="load-button" that was created with dijit.