onSubmit event is not fired in React.js form - forms

My React based app contains a form and somewhere along the way it stopped working, the onSubmit even was no longer fired and the form was just simply submitted with a new http request. While trying to isolate the problem I stripped my whole app to the following snippet (which is actually this jsfiddle taken from another question):
import React from 'react'
var OnSubmitTest = React.createClass({
render: function () {
var doSomething = function () {
alert('it works!');
}
return <form onSubmit={doSomething}>
<button>Click me</button>
</form>;
}
});
React.render(<OnSubmitTest/>, document.body);
The script on jsfiddle works as it should: the message is alerted just before the form is actually submitted. I get no alert in my app, though.
If I add e.preventDefault() the jsfiddle form is not submitted at all, my form is.
The difference is that I build my app using webpack and babel from es6 but it's hard to believe that this could have any impact on this matter.
Any idea what might be the reason? What should I try next to debug that?
Update: JSFiddle showing the problem. The linked file is the webpack output (not uglified in any way to keep it readable, that's why it's so huge). You can find my code (compiled) starting on the line 53.

Mystery solved: I forgot to mark the node_modules directory as excluded (I use IntelliJ IDEA) so when I used refactoring to change some variable name form to something else, the IDE eagerly refactored the whole React and replaced all occurrences of form with the new value.
I fixed it by reinstalling all npm dependencies.

Related

Calling a Unity WebGl Function from JavaScript (Vue)

I have a VueJs Project right now, where I'm building a web page. In order to show 3D Content and let the User work with it, I wanted to embed a Unity Project as WebGL. I´m not a professional programmer, my knowledge is more selfe-taught from what I can find at the Internet.
First of all I created a plugin, as it is explained here. My .jslib file looks like that:
var UnityJavascipt = {
$JustAWebGLObject:
{
},
SendToJavscript: function ()
{
console.log("worked!")
}
}; autoAddDeps(UnityJavascipt , '$JustAWebGLObject'); mergeInto(LibraryManager.library, UnityJavascipt );
I embed my Unity WebGl like that in Vue:
<template>
<unity src="static/Build/game.json" width="1000" height="600" unityLoader="static/Build/UnityLoader.js" ref="myInstance"></unity>
</template>
I can also call "SendToJavaScript" from my C# Script. But now it starts to get unclear for me, since I want to be able to call my "SendToJavaScript" Function (or any other one that will be added later) from a outside JavaScript. In the manual they refer to the emscripten pagefor more detailed information. But for me that all is just very confusing. I already tried to call my function like that in VueJs:
_SendToJavaScript()
But I always get a ReferenceError: _SendToJavaScript is not defined I also read in the forum here, that it would be possible to call the function like that:
UnityInstance.Module.asmLibraryArg._SendToJavaScript()
UnityInstance is the Variable from my index.html file, where UnityLoader get's instantiated. But again I'm getting a Reference Error.
It would be very helpful if someone could explain what I'm doing wrong... Communication between WebGL and Vue are essential for my project but I´m stuck here for days. So thanks in advance!!
Use unityInstance.SendMessage() documented here.
You can pass a callback or call a .jslib defined function at the end of your C# method.

Wicket AjaxLink generates no JavaScript

I started experimenting with Wicket AJAX functionality and wanted to implement an AjaxLink.
This is the associated markup/java-code:
<a wicket:id="testlink"></a>
---
AjaxLink<Component> link = new AjaxLink<Component>("testlink") {
#Override
public void onClick(AjaxRequestTarget target) {
System.out.println("called");
}
};
add(link);
But the onClick-method is never called, I guess because the generated HTML looks like this:
<a wicket:id="testlink" id="testlink7" href="javascript:;"></a>
Any ideas on what I am doing wrong?
This href="javascript:;" works because Wicket 6 uses JavaScript Event registration. Look at your webpage in some browser dev tool like in firefox. Point the inspector to the link and read it's id, then go the the head section and expand one of the <script type= text/javascript></script> tags. There you should find the id of the link and see that there is an line where a click event is attached to the id of the link. The URL there is executed when you click the link.
Thanks Robert for clarifying the ajax mechanisms of Wicket 6 - I'm rather new to this topic and the insights you gave me helped solve the problem.
Actually it was caused by some jQuery inconsistency I still haven't fully untangled, apparently coworkers used different jQuery-versions within different of our Wicket modules and somehow Wicket used not the one it was shipped with but a wrong one when trying to attach the event listener to the component.
When removing the unneccessary old jQuery libraries Wicket started to work fine - now I just have to get the components depending on the other jQuery libraries working again, but thats a different story :)
In my situation, I removed the following onload on body tag and the AjaxLink onclick function worked again.
<body onLoad="MM_preloadImages('template-image/searchbto.png');">

body.onload and GWT onModuleLoad launch order

According to this FAQ, when GWT bootstraps, onModuleLoad is supossed to run before HTML body's onload event. The process detailed within that FAQ works like this:
1. The HTML document is fetched and parsing begins.
...
9. externalScriptOne.js completes. The document is ready, so onModuleLoad() fires.
...
12. body.onload() fires, in this case showing an alert() box.
But in my tests, i have checked that it doesnt work this way. Or at least not in every browser (oddly, Google Chrome in particular doesn't stick to this kind of behaviour). For example, I have this little test involving onModuleLoad and body.onLoad:
public void onModuleLoad() {
runTestFunction();
}
private native void runTestFunction() /*-{
console.log("GWT's onModuleLoad");
$wnd.loaded=true;
}-*/;
And:
<body onload="console.log('body.onLoad');if(loaded!=null) console.log('loaded var is set');">
If i launch firefox, and run this example, the console will show this:
GWT's onModuleLoad
body.onLoad
loaded var is set
But in Chrome:
body.onLoad
Uncaught ReferenceError: loaded is not defined
GWT's onModuleLoad
In the latter, onModuleLoad runs the last, thus "loaded" var is not yet available and body.onLoad code cant use it.
And what Im trying to achieve? I want some handwritten Javascript that runs within body.onload to interact with my GWT code. In this example i use this dummy "loaded" var, but in the future it should be able to call GWT functions written in Java. The problem is that i need to make sure that onModuleLoad runs first so it can export the variables and methods for javascript to access them.
So, what am i missing? Is this behaviour as unreliable as it looks like, or am i doing something wrong?
PS: i have a plan B to achieve this which is proved to work, but first i want to make sure that it isnt possible to do it this way since this should be the preferred method.
First, the latest version of the doc is at http://code.google.com/webtoolkit/doc/latest/DevGuideOrganizingProjects.html#DevGuideBootstrap
And it says (even the GWT 1.5 version you were looking at) that "onModuleLoad() can be called at any point after the outer document has been parsed", which includes before and after window.onload.
As the doc says, GWT loads your code in an iframe (used here as a sandbox), which is asynchronous; so your code loads when both the iframe and the "body" are loaded. Depending on the time needed to load the iframe, that can be before or after window.onload (in the example, they assume it loads right away, which could be the case when the *.cache.* file is effectively in the browser's cache).
But the rule of thumb is that GWT tries hard (at least the built-in linkers) to make things start asynchronously so that it doesn't break loading of other external resources (stylesheets and images, for instance). That implies that it cannot be guaranteed to run before the window.onload (they could have guaranteed to run after window.onload, but why wait?)

Does coffeescript have an onLoad like event for the browser

Is there a way to have some code run in the browser after coffeescript has compiled and run all the script files in the header?
Something like:
coffee.onCompiled () -> console.log "I've finished loading all the coffee files"
How else can I get this behaviour? (please don't suggest setTimeout)
At first I thought you were asking about how to attach a callback to window.onload from CoffeeScript (which is, of course, very straightforward, since "It's just JavaScript"), but now I realize that you're asking how you ensure that code runs after all
<script type="text/coffeescript" src="..."></script>
tags have been executed when using coffee-script.js.
One solution is to put a callback in the last CoffeeScript you load. Since 1.1.0, coffee-script.js has ensured that all CoffeeScript script tags are run in order (though note that they'll only run after all JavaScript script tags have run). So, for instance, if you put
<script type="text/coffeescript">
onReady()
</script>
after all your other script tags, and define window.onReady somewhere else, then that function will be called after all scripts have loaded. If you made it
$ -> onReady()
(with jQuery), then you'd ensure that the DOM is ready as well as all scripts.
Update: I posted that this is "one solution" because I wasn't 100% sure whether there's a callback that coffee-script.js invokes after all scripts have been run. But after checking the source, I can confidently say that it doesn't, so the only solution is to put code in the last <script type="text/coffeescript"> tag. (Whether it's inline or in a .coffee file doesn't matter.)

Dojo addOnLoad, but is Dojo loaded?

I've encountered what seems like a chicken & egg problem, and have what I think is a logical solution. However, it occurred to me that others must have encountered something similar, so I figured I'd float it out there for the masses.
The situation is that I want to use dojo's addOnLoad function to queue up a number of callbacks which should be executed after the DOM has completed rendering on the client side. So what I'm doing is as follows:
<html>
<head>
<script type="text/javascript" src="dojo.xd.js"></script>
...
</head>
<body>
...
<script type="text/javascript">
dojo.addOnLoad( ... );
dojo.addOnLoad( ... );
...
</script>
</body>
</html>
Now, the issue is that I seem to be calling dojo.addOnLoad before the entire Dojo library has been downloaded the browser. This makes sense in a way, because the inline SCRIPT contents should be executed before the entire DOM is loaded (and the normal body onload callback is triggered).
My question is this - is my approach sound, or would it make more sense to register a normal/standard body onload JavaScript callback to call a function, which does the same work that each of the dojo.addOnLoads is doing in the SCRIPT block. Of course, this begs the question, why would you ever then use dojo.addOnLoad if you're not guaranteed that the Dojo library will be loaded prior to using the library?
Hopefully this situation makes sense to someone other than me. Seems like someone else may have encountered this situation.
Thoughts?
Best Regards,
Adam Rice
You're doing it correctly. External Javascript files are loaded and executed synchronously in order, so by the time it reaches your dojo.addOnLoad( ... ); Dojo has loaded. Use dojo.addOnLoad instead of window.onload for two reasons:
it fires earlier, because it utilizes DOMContentLoaded
it handles asynchronous loading of dojo.require by postponing the execution until all required scripts have been read
Explained in DojoCampus as (dojo.addOnLoad):
dojo.addOnLoad is a fundamental aspect
of using Dojo. Passing addOnLoad a
function will register the function to
run when the Dom is ready. This
differs slightly from document.ready
and body.onload in that addOnLoad
waits until all dojo.require() (and
their recursive dependencies) have
loaded before firing.
This might have nothing to do with your problem, but ive just had a case where I had the same symptoms. For me everything worked fine for Firefox, Chrome etc, but not IE8.
I was getting what looked like dojo not being loaded, an error in IE8 saying that dojo was undefined (but not all the time) and i could strip everything down to just style sheets and importing dojo and still get the error.
I was running a local google app engine development server. This looks to be based on pythons SimpleHTTPServer which in turn uses SocketServer.BaseServer. This has BaseServer.request_queue_size which defaults to 5 - i couldn't find anything in app engine which overrode this value so i guess the development google app engine server has an upper limit of 5 connections.
Using regedit and going to HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Internet Settings
“MaxConnectionsPerServer”=dword:00000010
“MaxConnectionsPer1_0Server”=dword:0000010
This shows that IE was going to try and open up to 10 simultaneous connections. I edited these two keys and made them 2 and restarted the computer, the problem went away.