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.
Related
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
I would like to create a validator for abide for a set of checkboxes.
Let's consider a set of 5 checkboxes. The user is asked to check 3 max, and at least 1.
So, here is my work-in-progress code:
<div data-abide-validator='checkboxes' data-abide-validator-values='1,3'>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>
</div>
<script>
$(document).foundation({
validators: {
checkboxes: function(el, required, parent) {
var countC = el.find(':checked').length;
alert(countC);
}
}
});
</script>
At this point, I just try to count the checked inputs. But it seems I can't even trigger the validator... I think I could manage to code my validation stuff if only I could figure out how to trigger it.
Indeed I didn't find many examples of the custom validator, and the official doc did not help me much.
Your HTML markup is not really "correct" for abide. You should be attaching the data-abide-validator attribute to the inputs, not the parent div. Additionally, you need some better markup so abide's default error display can work (and some better use of foundation's grid system to lay it out). I would point you toward the Abide Validation Page on Zurb's site for some examples of form markup.
I've taken the liberty of restructuring your markup to be something that is more becoming of a foundation layout:
<form action="/echo/html/" method="POST" data-abide>
<div class="row">
<div class="small-12 columns checkbox-group" data-abide-validator-limit="1,3">
<label>Check some boxes</label>
<small class="error">You have checked an invalid number of boxes.</small>
<ul class="small-block-grid-3">
<li>
<label>
<input type="checkbox" data-abide-validator="checkbox_limit" value="1" /> 1
</label>
</li>
<li>
<label>
<input type="checkbox" data-abide-validator="checkbox_limit" value="2" /> 2
</label>
</li>
<li>
<label>
<input type="checkbox" data-abide-validator="checkbox_limit" value="3" /> 3
</label>
</li>
<li>
<label>
<input type="checkbox" data-abide-validator="checkbox_limit" value="4" /> 4
</label>
</li>
<li>
<label>
<input type="checkbox" data-abide-validator="checkbox_limit" value="5" /> 5
</label>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<button type="submit">Submit</button>
</div>
</div>
</form>
As to your JS code. It's not correct either. You need to address the abide -> validators namespace of the options, not just validators. I've rewritten your JS code to not only do that, but give the desired effect you wanted:
$(document).foundation({
abide: {
validators: {
checkbox_limit: function(el, required, parent) {
var group = parent.closest( '.checkbox-group' );
var limit = group.attr('data-abide-validator-limit').split(',');
var countC = group.find(':checked').length;
if( countC >= limit[0] && countC <= limit[1] ) {
group.find('small.error').hide();
//return true so abide can clear any invalid flags on this element
return true;
} else {
group.find('small.error').css({display:'block'});
//return false and let abide do its thing to make sure the form doesn't submit
return false;
}
}
}
}
});
In order to check adjacent elements when doing custom validation, you need to have something to target. The el variable in the validation function will be the DOM element of the input/field that is being validated. The required variable will tell you if the field is flagged as being required or not (boolean). The parent variable will be set to the "parent" of the field. I say "parent" because although the label tag is technically the parent of the input element, abide is smart enough to realize that the label is part of the field's element structure and skip over it to the li element instead.
From there, you need a way to identify a common parent. So I added the checkbox-group class to whatever element I decided to make the "parent" of all the checkboxes in the group. This is not a Foundation or Abide "magic" class, but rather something of my own creation for use in the validation function.
From there, you can easily trace the few lines of the validation function to see the workflow: Find the group container object, parse the limits off the container's data-abide-validator-limits attribute, count the number of checked inputs in the container, check if the number checked is between the limits, display/hide the error message and return true/false so abide knows if the field validated or not.
I've got a working Fiddle of it if you care to check it out yourself ;) Hopefully this was informative for you, and I wish you the best of luck playing with the awesome that is Foundation!
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.
I'm a beginner in the AngularJs and MongoDb world (i started learning today!!)
Actually i'm trying to do something very basic : Display a list of record, with an add button and a edit link with each record.
I'm using this lib https://github.com/pkozlowski-opensource/angularjs-mongolab to connect to mongoweb.
Actually my data is displayed, when i try to add a record it works, but the problem is when i try to display the edit form!
Here is my index.html file, in which i display the data with a form to add a record and with the edit links :
<div ng-controller="AppCtrl">
<ul>
<li ng-repeat="team in teams">
{{team.name}}
{{team.description}}
edit
</li>
</ul>
<form ng-submit="addTeam()">
<input type="text" ng-model="team.name" size="30" placeholder="add new team here">
<input type="text" ng-model="team.description" size="30" placeholder="add new team here">
<input class="btn-primary" type="submit" value="add">
</form>
</div>
And here is my edit.html code, which displays an edit form :
<div ng-controller="EditCtrl">
<form ng-submit="editTeam()">
<input type="text" name="name" ng-model="team.name" size="30" placeholder="edit team here">
<input type="text" name="description" ng-model="team.description" size="30" placeholder="edit team here">
<input class="btn-primary" type="submit" value="validate edit">
</form>
</div>
And finally my js code:
var app = angular.module('app', ['mongolabResource']);
app.constant('API_KEY', '____________________________');
app.constant('DB_NAME', 'groups');
app.factory('Teams', function ($mongolabResource) {
return $mongolabResource('teams');
});
app.controller('AppCtrl', function ($scope, Teams) {
$scope.teams = Teams.query();
$scope.addTeam = function() {
varteam = {
name: $scope.team.name,
description: $scope.team.description
};
$scope.teams.push(varteam);
Teams.save($scope.team);
$scope.team.name = '';
$scope.team.description = '';
};
});
app.controller('EditCtrl', function ($scope, Teams) {
//????????
});
My AppCtrl works perfecty, it displays the data w add records perfectly.
Now i want to add the js code for the edit, but i don't even know form where to start ? how do i a get the id parameter in the url ? how do i tell the view to fill out the form fields from the values from the database ? And finally how do i update the databse.
I know that i asked a lot of question but i'm really lost! thank you
There are of course many possible solutions.
One solution is to use angularjs routing. See http://docs.angularjs.org/tutorial/step_07 for a tutorial.
Basically replace your ul list with something like:
<ul>
<li ng-repeat="team in teams">
{{team.name}}
{{team.description}}
edit
</li>
</ul>
Then you can create a route that responde to your url:
yourApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/teams', {
templateUrl: 'partials/team-list.html',
controller: 'TeamListCtrl'
}).
when('/teams/:teamId', {
templateUrl: 'partials/team-detail.html',
controller: 'TeamDetailCtrl'
}).
otherwise({
redirectTo: '/teams'
});
}]);
In this way from the detail controller (that will replace your EditCtrl) you can access the id parameter using: $routeParams.teamId
Anyway I suggest to study well all the tutorials for a better overview.
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.