I've code like this, to create/edit Contact form. I need to get some values from model, if I'm editing form, and do nothing, if i'm creating new.
#(fieldForm: Form[MyModel])
#import helper._
#main("Create new") {
#form(routes.Actions.createFieldHolder()) {
<html>
<head>
<script>
function funcOnLoadSubForm(){
#*
if(#fieldForm.get==null) {
...
}
*#
OR
#*
if(#fieldForm.get.equals(null)) {
...
}
*#
OR
#*
if(#fieldForm.get.eq(null)) {
...
}
*#
}
</script>
</head>
<body onload="funcOnLoadSubForm()">
</body
}
I always get an error : IllegalStateException: No value.
The API Documentation states that get will return the concrete value, if the submission was a success.. Since you are creating a new model you haven't submitted anything which means the data is empty and get will throw an exception.
You can fix this by using foreach on fieldForm.value. Example:
<script>
function funcOnLoadSubForm(){
#fieldForm.value.foreach { data =>
// Do something here if fieldForm was submitted
}
}
</script>
Related
I have some JavaScript in which I set a global variable to hold the function document.getElementById. In a function in the same file, I then try to use that variable, along with the id of an HTML paragraph element, to write to the innerHTML property. However, in the IE11 console, I get the error "SCRIPT65535: Invalid Calling Object". Explicitly writing document.getElementByID("someid").innerHTML = "value" works. Here are the key parts of the code (all in the same file).
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="name1"></p>
<script>
var objDocGEBI = document.getElementById;
function writeData() {
if (true) {
objDocGEBI("name1").innerHTML = "value";
}
}
</script>
</body>
</html>
Your problem is to do with function binding.
The short version, is you need to bind the function to the document like so:
var objDocGEBI = document.getElementById.bind(document);
This will make sure that it is correctly bound to the document without actually running the function. Once you fix this line, you should find that the rest of your code above works as intended.
Because, you need to call your function for executing the innerHTML function.
And you cannot using your syntax. You need to write your document.getElementById; like that :
The first way :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="name1"></p>
<script>
var objDocGEBI = document.getElementById('name1');
function writeData(){
if (true){
objDocGEBI.innerHTML = "value";
}
}
writeData(); // it's calling your function and execute your innerHTML
</script>
</body>
</html>
The second way :
// Example with IIFE
(() => {
var objDocGEBI = document.getElementById('name1');
if (true){
objDocGEBI.innerHTML = "value";
}
})()
This may be useful for you:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="name1"></p>
<p id="name2"></p> <!-- added, just for a 2nd example -->
<script>
function writeData(id, value){
document.getElementById(id).innerHTML = value;
}
writeData('name1', 'John');
writeData('name2', 'Peter');
</script>
</body>
</html>
It's much cleaner this way, and you won't have to keep that weird variable. ;)
It's because your variable objDocGEBI is storing a method/function in the syntax of an event listener, but it's not an event listener. Correct syntax would be:
function writeData(name) {
if (true) {
document.getElementById(name).value = "value";
}
}
I have a simple problem which I couldn't solve until now, the problem is when the user asks for rest password, the email is sent correctly except one thing that the email, doesn't contain a Subject. And I want to add the subject but I wasn't able to do it.
here is the postRemind function in my controller:
public function postRemind()
{
$this->reminderForm->validate(Input::only('email'));
switch ($response = Password::remind(Input::only('email'))) {
case Password::INVALID_USER:
return Redirect::back()->with('error', Lang::get($response));
case Password::REMINDER_SENT:
return Redirect::back()->with('status', Lang::get($response));
}
}
and here is my blade :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<h3>Password Reset</h3>
<div>
You have requested password reset. Complete this form: {{ URL::to('password/reset', array($token)) }}
</div>
</body>
</html>
You can pass a closure to Password::remind where you can set the subject.
https://laravel.com/docs/4.2/security#password-reminders-and-reset
public function postRemind()
{
$this->reminderForm->validate(Input::only('email'));
$response = Password::remind(Input::only('email'), function($message)
{
$message->subject('Password Reminder');
});
switch ($response) {
case Password::INVALID_USER:
return Redirect::back()->with('error', Lang::get($response));
case Password::REMINDER_SENT:
return Redirect::back()->with('status', Lang::get($response));
}
}
I've a list of records and want to update one. When I click on one, it show a form with all input fields which are already populated using JsonRest. I've edited the fields and now I want to send it to server for updating.
How can I send an Object with dojo?
I tried like this, but at the controller side the value is null.
on(dom.byId("poolForm"), "submit", function(evt) {
var formObj = domForm.toObject("poolForm");
console.log(formObj);
request.post("/path/to/EditSubmit", {
data : formObj,
method : "POST"
}). then(function(data) {
console.log("data");
});
});
In spring I used:
public void editedForm(HttpServletResponse response, #RequestBody MyClass myClass) {
poolParam.getAdd();
}
Assuming you are creating a new record and not updating one, you can use method add(object, options) for your JsonRest.
Example:
require(["dojo/store/JsonRest"], function(JsonRest){
// your store
var store = new JsonRest({
target: "/some/resource"
});
// add an object passing an id
store.add({
foo: "foo"
}, {
id: 1
});
});
More informations can be found at JsonRest API and JsonRest guide.
EDIT:
As for your comment request, in case you would like to send an object using dojo/request/xhr instead of JsonRest, you can use the following example, basically:
Use dojo/dom-form utility, to get out values from your form. This utility function will return an object. More info here.
Use dojo/request/xhr to send via Ajax the object previously retrieved from dojo/dom-form, this is the data sent to the server. More info here.
Quick demo here:
https://jsbin.com/mocoxuhotu/edit?html,output
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.0/dijit/themes/claro/claro.css">
<script data-dojo-config="async: 1" src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<script>
require([
"dojo/query",
"dojo/dom-form",
"dojo/request/xhr",
"dijit/registry",
"dijit/form/Form",
"dojo/parser",
"dojo/domReady!"
], function (
query,
domForm,
xhr,
registry,
Form,
parser
) {
var form = new Form({}, 'myForm');
query("a.myLink").on("click", function () {
var data = domForm.toObject(form.domNode);
xhr.post("/echo/json", {
data: data // data to transfer
}).then(function () {
console.log("Success");
});
});
});
</script>
</head>
<body class="claro">
<form data-dojo-type="dijit/form/Form" id="myForm">
<fieldset>
<ul>
<li>
<label for="name">Name:</label>
<input type="text" name="name" />
</li>
<li>
<label for="firstname">First name:</label>
<input type="text" name="firstname" />
</li>
</ul>
</fieldset>
</form>
<a class="myLink">Submit the form</a>
</body>
</html>
Inspired by this html5rocks post, I thought I'd try link rel="import".
In the console, I get:
yay!
Loaded import: http://www.example.com/HelloWorld.htm
But I don't get "Hello World!" on the page.
Here's my code:
<!DOCTYPE html>
<html>
<body>
<script>
function supportsImports() {
return 'import' in document.createElement('link');
}
if (supportsImports()) {
console.log('yay!')
} else {
console.log('boo!')
}
function handleLoad(e) {
console.log('Loaded import: ' + e.target.href);
}
function handleError(e) {
console.log('Error loading import: ' + e.target.href);
}
</script>
<link rel="import" href="HelloWorld.htm" onload="handleLoad(event)" onerror="handleError(event)">
</body>
</html>
And HelloWorld.htm contains:
<h1>Hello World!</h1>
Edit:
In the console, I can see that <h1>Hello World!</h1> is inside the link tag as another #document, complete with <html><head></head></body>.
According to the same HTML5Rocks post, when you import an HTML resource, it is accessible as a JavaScript object. Specifically, a Document:
var myImport = document.querySelector('link[rel="import"]').import;
document.querySelector(/* get the element we want here */).appendChild(myImport.body);
That does contradict somewhat with the beginning of the article, which balks at using JavaScript to load HTML, but at least it uses much less JavaScript (the kind that can, perhaps, fit in a browser tag) and certainly is not subject to the CORS restrictions that AJAX has to deal with.
I am struggling creating my java coin toss for my webpage. I need to write a Java script to put on the webpage that will show pictures of coins being tossed and carry out the coin toss. here is what I have, why isn't it working? It just opens a new page and says "about:blank?"
<html>
<head>
<title> </title>
<script>
function toss() {
if (Math.random()>.5) {
window.document.coin.src = "heads.jpeg";
}
else {
window.document.coin.src = "tails.jpeg";
}
return false;
</script>
<body>
<img name="coin" src="questionmark.jpeg">
<form action="" onSubmit="return toss() ;">
<input type="submit" value="Toss">
</form>
</body>
</html>
You are missing the closing curly brace for your toss() function. Once fixed it appears to work fine. Also, yes, javascript...not java.
function toss() {
if (Math.random()>.5) {
window.document.coin.src = "heads.jpeg";
}
else {
window.document.coin.src = "tails.jpeg";
}
return false;
}