HTML5 Drag&Drop - Event handling with jQuery - javascript

So I've stumbled upon this a several times and now I'm finally fed up with this topic. Searching and googleing about it confuses me every time and now I'll need to ask by myself here.
I'm up to implement native HTML5 drag&drop in a web app. It works fine in Chrome and in IE too (at least when I tried last time).
The problem now is, that event binding via jQuery wont work out properly in Firefox, whereas it does so in Chrome! This is my Code:
$(document).on('dragstart','.leistung', function(){
cedamed.handlers.dragElement(event);
});
And this is my handler:
this.dragElement = function(event){
var dataObj = {};
dataObj.category = event.target.getAttribute('class');
dataObj.description = event.target.getAttribute('description');
dataObj.code0 = event.target.getAttribute('code0');
dataObj.code1 = event.target.getAttribute('code1');
dataObj.code2 = event.target.getAttribute('code2');
event.dataTransfer.setData('Text',JSON.stringify(dataObj));
console.log("dragging");
};
Works in Chrome, Firefox gives me the following error:
ReferenceError: event is not defined
It points to the line with:
cedamed.handlers.dragElement(event);
I have come across 'solutions' that involved the originalEvent-property of the event api, which is often supposed to make everything work fine in FF, but it does not at all in my case. I made it work by setting the 'ondragstart'-attribute directly in the HTML, but shouldnt it work with 'jQuery.on'?
I'm sorry, there are several questions to this topic out there, but I just dont get whats going wrong in this field. Can you please give me an insight, whats wrong in here?

I found out I have to pass 'event' as an argument to the jQuery callback function in 'on' such as:
$(document).on('dragstart','.leistung', function(event){
cedamed.handlers.dragElement(event);
});
With usage of originalEvent in 'drageElement' I made it work finally. Sorry...

Related

ExternalInterface return to AS3 not working consistently in IE

So, I'm having some trouble returning a value from an ExternalInterface call. I have a piece of code that looks like this:
var a:String = String(ExternalInterface.call("function() { var returnTest = 'test'; alert(returnTest); return returnTest;}"));
ExternalInterface.call("alert", a);
The first alert (in the anonymous function on line 1) is correct (obviously). However, the alert on line 2 is returning null 90% of the time in IE10. It works everytime in Firefox though.
To further explain the bit about working 90% of the time, it seems I can roll the dice again on whether or not it will work by adding or removing seemingly meaningless alerts. For example: let's say it's not working, I could add an alert and it will start working. Or, say it is working, I could add an alert for debugging, and it stops working, remove the alert, still doesn't work, add the alert back, and it starts working again. I know this isn't what's happening, but it's behaving as if a coin is flipped every time an alert is added or removed.
And this all only happens in IE, works perfectly every time in Firefox.
Thanks.
Edit:
The code I provided isn't the actual code that needs to work, but rather the code that I wrote to verify where the problem was. The actual situation is that there's a JavaScript property in the environment our Flash is running in that we need to know, but we don't have access to the HTML or JavaScript the SWF will be running in. The actual code I need to run looks more like this:
var pageNameFromJS:String = String(ExternalInterface.call("function() { var pageName = ServerObject.currentPage.name; alert(pageName); return pageName;}"));
ExternalInterface.call("alert", pageNameFromJS);
The alert in the first line is just to make sure that ServerObject.currentPage.name works, which it does. The alert in the second line is debug code that was added when we noticed that functions that require pageNameFromJS weren't working.
Really I dont know why you complicate things like this ;)
You can do it easier :
AS3 code:
ExternalInterface.addCallback("flash_function", flash_function);
function flash_function(from_js_param){
trace('param received from js : '+from_js_param)
}
ExternalInterface.call("js_function", to_js_param)
JS code:
function js_function(from_flash_param){
var to_flash_param = 'I received your '+from_flash_param;
(get_your_swf).flash_function(to_flash_param);
}

NS_ERROR_UNEXPECTED error in Firefox using Dojo

I'm having a strange issue that's being thrown in Firefox when using my Dojo (v.1.10.0) application.
Here is the following error that I'm seeing in Firefox:
Exception
{ message: "",
result: 2147549183,
name: "NS_ERROR_UNEXPECTED",
filename: "http://localhost:8888/dojo/on.js",
lineNumber: 354,
columnNumber: 0,
inner: null,
data: null
}
""
Unfortunately, I'm not sure where to go with this in my application. Can anyone point me in the right direction?
On line 354 of dojo/on, this is happening:
if(has("dom-addeventlistener")){
// emitter that works with native event handling
on.emit = function(target, type, event){
if(target.dispatchEvent && document.createEvent){
// use the native event emitting mechanism if it is available on the target object
// create a generic event
// we could create branch into the different types of event constructors, but
// that would be a lot of extra code, with little benefit that I can see, seems
// best to use the generic constructor and copy properties over, making it
// easy to have events look like the ones created with specific initializers
var ownerDocument = target.ownerDocument || document;
var nativeEvent = ownerDocument.createEvent("HTMLEvents");
nativeEvent.initEvent(type, !!event.bubbles, !!event.cancelable);
// and copy all our properties over
for(var i in event){
if(!(i in nativeEvent)){
nativeEvent[i] = event[i];
}
}
return target.dispatchEvent(nativeEvent) && nativeEvent; // Line 354
}
return syntheticDispatch.apply(on, arguments); // emit for a non-node
};
}
This is a generic FF error message... it's usually triggered by a timing or race condition, which may explain why it's showing up via dojo/on. Maybe the target or event handler that you're trying to work with is acting on something that has been removed, etc. It's unclear without knowing what event is triggering it or without seeing your full code example.
For example, maybe you're trying to add event listeners before the DOM is available, but that's just a guess. Or maybe the target node doesn't exist.
You can use the debugger to see the values of the event parameters, or you can look at your various event registration mechanisms, etc.
We have a similar issue using intern 2.0 and unit tests creating native select boxes.
Some library code (verified that its not our own) triggers a dojo.emit() which causes the internal error.
We're trying to identify the problem in more detail. If you find something please let us know as well!
we were also getting same exception at exactly same point,
for us, we replaced our code elementReference.destroy() // destroy is a dojo function with elementReference.domNode.remove() and it solved our problem.

event.toElement is undefined with onbeforedeactivate under IE9

I'm trying to access the event.toElement property when the beforedeactivate event occurs, but it is returning undefined under IE9. It seems to work under IE8. The code below is an example of what I am trying to do:
$('#myButton').bind('beforedeactivate', myHandler);
function myHandler(event)
{
var target = event.originalEvent.toElement;
}
Can't seem to find much information on this issue so I was wondering if someone can explain why this is happening or suggest a workaround for the problem?

Cannot perform action on invalid element: UIAElementNil

Script threw an uncaught JavaScript error:
Cannot perform action on invalid element: UIAElementNil from target.frontMostApp().mainWindow().popover().actionSheet().buttons()["Save Note"]
Code:
var target = UIATarget.localTarget();
var app = target.frontMostApp();
var window = app.mainWindow();
target.logElementTree();
UIALogger.logPass("Stick Note Save Start");
app.navigationBar().toolbar().buttons()["Plus"].tap();
app.keyboard().typeString("Ki");
window.popover().actionSheet().buttons()["Save Note"].tap();
UIALogger.logPass("StickNoteSaveEnd");
First of all, check correct hierarchy.
Then, try to use
"app.popover().actionSheet().buttons()["Save Note"].tap();"
If it does not work for you, please give some details regarding elements structure/buttons.
I think there is a bug in action sheet access from javascript. You can see my answer to a similar question here.
Bascially I think actionSheet() always returns nil to buttons and elements. It's not supposed to, but everything I've seen suggests otherwise.
MikhailV worked out a function to tap the correct button here.

variable assignments using jQuery failing in Safari?

I'm using jQuery 1.3.2 and it's breaking under Safari 4 for mysterious reasons.
All of my javascript references are made right before the tag, yet with the following code:
var status = $('#status');
status.change( function(){ /* ... */ } );
The following error is displayed in the Web Inspector:
TypeError: Result of expression 'status.change' [undefined] is not a function.
However the error is not encountered if I eliminate the variable assignment attach the change method directly like so:
$('#status').change( function(){ /* ... */ } );
Why? I need to use variables for this and several other findById references because they're used many times in the script and crawling the DOM for each element every time is regarded as bad practice. It shouldn't be failing to find the element, as the javascript is loaded after everything except and .
Try changing the variable to something other than "status."
It's confusing your variable with window.status (the status bar text). When I typed var status = $('#status') into the debugging console, the statusbar changed to [Object object]. Must be a bug in Safari.
If you put the code inside a function, so that status becomes a function-local variable, it should work.
It's standard practice in jQuery to wrap things in a
$.onready(function() {
});
This makes sure the DOM is loaded before you try to manipulate it.

Categories

Resources