Declare variable to use inside #helper.repeat - PlayFramework - scala

I want to use helper.repeat to create several input elements. But I want to declare the input tags as html instead of using #helper.input methods. But to do that I have to use a #index inside this loop. I am unable to instantiate and increase this variable. I tried something like the code below but I this output appear in html page:
BaseScalaTemplate(play.twirl.api.HtmlFormat$#5a8a0ced) = {0}
is output in html.
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
#index = {0}
#helper.repeat(questionForm("answer.alternatives"), min = 7) { (alternative) =>
<div class="checkbox">
<input type="checkbox" value="#alternative("correct") ">
<input type="text" id="answer_alternatives_(#index)_text" name="answer.alternatives[#index].text" value="">
</div>
}
</div>
</div>
Is there another maybe cleaner way to do what I want? Maybe with #for?
I use playframework 2.4.6 with Java8.

Playframework will let you do what you need, but you will have to do it in another way.
1) Your form definition will have a Seq[String] to save the results that come from the template.
2) Your form definition will need to include this change. In your case:
"answer_alternatives" -> seq(nonEmptyText)
3) Change the name and id from the template to #{alternative.name} so Playframework can link your input text to the sequence of String.
<input type="text" id="#{alternative.name}" name="#{alternative.name}" value="">

Related

How to pass a data like a database data or php constant data to display in a form in main.js

We build a custom bundle follow with this instructor https://blog.sulu.io/how-to-develop-a-bundle-in-the-sulu-admin-1
We need to know how to pass data from a database to render radio input choices or dropdown select.
We try to create an add/edit form and in the form, we have a radio and dropdown we made with hardcore in HTML file in Vendor/TransportationBundle/Resources/public/js/components/transportation/form/form.html
The code is
<div class="grid-row">
<label for="transportation-transportationType"><%= translations.transportationType %></label>
<div class="custom-radio">
<input name="transportationType" id="transportation-transportationType-1" type="radio"
class="form-element content-type" value="1" data-mapper-property="transportationType">
<span class="icon"></span>
</div>
<span class="clickable"><%= translations.private_shuttle %></span>
<div class="custom-radio">
<input name="transportationType" id="transportation-transportationType-2" type="radio"
class="form-element content-type" value="2" data-mapper-property="transportationType">
<span class="icon"></span>
</div>
<span class="clickable"><%= translations.shared_shuttle %></span>
<div class="custom-radio">
<input name="transportationType" id="transportation-transportationType-3" type="radio"
class="form-element content-type" value="3" data-mapper-property="transportationType">
<span class="icon"></span>
</div>
<span class="clickable"><%= translations.airplane %></span>
</div>
Is this have a way to change those radio to fetch the data from an array or a way to fetch the data from some controller action? or Have another way to use twig file with twig feature instead of html file?
Please provide a solution for us? Thank you
Sorry for my English.
You can e.g. check this Controller from the core. You can get data from wherever you want in the controller and pass it to the template:
<?php
class AcmeController {
public function testAction() {
$data = /* Get data somehow */;
return $this->render('template', ['data' => $data]);
}
}
Then you can access the data using the data twig variable in the rendered template.

Nested Angular Form Groups - Form must reflect HTML structure

Say I have the following formGroup structure:
userGroup = {
name,
surname,
address: {
firstLine,
secondLine
}
}
This forces me to write HTML similar to the following:
<form [formGroup]="userGroup">
<input formControlName="name">
<input formControlName="surname">
<div formGroupName="address">
<input formControlName="firstLine">
<input formControlName="secondLine">
</div>
</form>
Let's say, just for the sake of the example, that you are constrained to write HTML that looks like this:
<form [formGroup]="userGroup">
<input formControlName="name">
<input formControlName="surname">
<div formGroupName="address">
<input formControlName="firstLine">
</div>
<hr>
<div formGroupName="someOtherGroup">
<input id="problemSecondLine" formControlName="???.secondLine">
</div>
</form>
Is there a way, to force the field with id=problemSecondLine to be under userGroup -> address -> secondLine, even though, visually, I have no option but to place it under this particular DIV?
I guess I can manually update via ngModel - but I'm trying to find the cleanest way possible.
You can use formControl directive instead of formControlName
<input id="problemSecondLine" [formControl]="userGroup.get('address.secondLine')">
Plunker Example

serialize array returning an empty array

I'm trying to grab some form data in my function but for some reason my fom returns an empty array when i try and run the function .serializeArray() on it. I've checked that to make sure it input element has a name I just can't figure out why this is happening
this is my form
<form id="uploadForm" name="form" action="{{nodeSocketUrl}}/upload?tenant=qa&envelope=true" method="POST" enctype="multipart/form-data" class="forms" style="left:15px">
<fieldset class="units-row">
<h3>Upload A Presentation</h3>
<label for="presentationFileUpload">Select a .ppt, .pptx, .pdf</label>
<input type="file" id="presentationFileUpload" name="presentationFile" onchange="angular.element(this).scope().onFileSelect(this)"/>
<hr>
<input type="submit" id="fileUploadBtn" class="btn btn-primary disabled" value="Upload" ng-click="uploadFile($event)" name="upload">
</fieldset>
</form>
This is my function which I'm hopping to get the form data from
$scope.uploadFile = function(e) {
e.preventDefault();
//$scope.form.preventDefault();
var dCheck = $('input[type="file"]').val();
console.log(e.currentTarget);
var form = $('#uploadForm').serializeArray();
console.log(form);
}
form returns an empty array any help with this would be appreacited
Why not think in pure angular way?
use can use
<input type="file" ng-model="filePath">
And next, get the file name in $scope.filePath

About the $dirty property and getting only modified fields in a form

I have a form with few fields and I'm trying to get modified fields only.
Here is what I got so far (simplified version) :
<form name="formTicket">
<div class="item title">
<label for="category-assignation"><?php echo T::_("Assignation :")?></label>
<textarea type="text" name="assignation" cols="50" rows="4" id="category-assignation" data-ng-model="ticket.assignation"></textarea>
</div>
<div class="item title">
<input id="save" type="submit" value="Save" data-ng-click="saveTicketInfo()" />
</div>
</form>
In my controller.js, I have :
$scope.saveTicketInfo = function() {
console.info($scope.ticket);
console.info($scope.formTicket);
//Query to my service to save the data
Category.saveInfo.query({data: $scope.ticket});
};
Prior to AngularJs, I would save my fields in an array at the loading of my form and compare their values with the new values posted. I could still do this but I'm looking for an AngularJs approach.
I've been trying to use the $dirty property of each field and only send to my services those with "true" value but this behavior is not suitable for me : if the defaut value for my field is "test" and the user modify the input to "test2" and modify it back to "test" and post it, $dirty will be true (even if the value has not really changed).
Is there any convenient and optimal way to achieve what I want ?
Thank you for your time.

Jquery selector seems not to work in google chrome

I want to update the value from a input/textfield with a calculated value from the cookie.It's like a mini local cookie cart.
Saving and retrieving the json from the cookie is a piece of cake.
In my behavior I fail to make the following work:
I added a class for every node in the input field, it's constructed like the example below.
Myid = 'webform_cart_nid_10';
formElement = $('.' + Myid);
console.log(formElement);
The html is quite nested and can be seen http://it2servu.be/broodjes/bestellen (if I may link?) .
the field whose value I want to update looks like this:
<input class="webform_cart_nid_10 webform_cart_nid form-text" type="text" id="edit-submitted-cart-item-cart-elements-10" name="submitted[cart_item][cart_elements][10]" value="0" size="3" maxlength="128">
Is contained in drupal output with severe div-itis.
<div class="page clearfix" id="page">
<div id="section-content" class="section section-content">
<div id="zone-content-wrapper" class="zone-wrapper zone-content-wrapper clearfix">
<div id="zone-content" class="zone zone-content clearfix container-12">
<div class="grid-12 region region-content" id="region-content">
<div class="region-inner region-content-inner">
<div class="block-inner clearfix">
<div class="content clearfix">
<div class="node node-webform node-promoted view-mode-full clearfix ">
<div class="field field-name-title field-type-ds field-label-hidden">
<form class="webform-client-form" enctype="multipart/form-data" action="/broodjes/bestellen" method="post" id="webform-client-form-5" accept-charset="UTF-8">
<div>
<fieldset class="collapsible form-wrapper collapse-processed" id="edit-submitted-cart-item-cart-elements">
<div class="fieldset-wrapper">
<div class="form-item form-type-textfield form-item-submitted-cart-item-cart-elements-10">
<input class="webform_cart_nid_10 webform_cart_nid form-text" type="text" id="edit-submitted-cart-item-cart-elements-10" name="submitted[cart_item][cart_elements][10]" value="0" size="3" maxlength="128">
...
probably it's something stupid, I just can't figure out what it is?
Your problem is with jQuery. If you pop open the console in Chrome and type jQuery, it returns the jQuery function. If you type $ it returns undefined. You have some sort of collision causing $ not to be set to jQuery.
use "jQuery" instead of "$"
Myid = 'webform_cart_nid_10';
formElement = jQuery('.' + Myid);
console.log(formElement);
the "$" never worked for me in Drupal 7.