CakePHP Code
<?php echo $this->Form->create('KPI');?>
HTML Output
<form accept-charset="utf-8" method="post" id="..." action="...">
<div style="display:none;">
<input type="hidden" value="POST" name="_method">
</div>
I want to delete auto generated div which display in html output. How can delete that div which generated by cakephp form create?
As already mentioned in the comments, you should not remove that markup, besides that would only be possible by completely overwriting FormHelper::create(), see
https://github.com/.../cakephp/blob/2.5.6/lib/Cake/View/Helper/FormHelper.php#L426-L432
https://github.com/.../cakephp/blob/2.5.6/lib/Cake/View/Helper/FormHelper.php#L462-L464
Also note that there might be an additional hidden block at the end of the form, see FormHelper::secure().
The only simpler way to remove the wrapper, would be to remove the hidden wrappers altogether, that would for example be possible by using a custom config for HtmlHelper where the hiddenblock tag is modified so that it doesn't contain the wrapper, however that's not a good idea - don't do it!
The problem here is that you can't just remove this specific wrapping div element, the hidden input and the div go hand in hand. And the input ensures that CakePHP is able to figure the proper request method (POST, PUT, DELETE).
So instead simply make your jQuery selector more specific, do not just select div elements, instead make sure that your elements have a proper class set, and then select them by that class.
<?php echo $this->Form->create('Kpi', array(
'inputDefaults'=>array('div'=>'false', 'label'=>false)));
?>
Related
I'm using text-angular to save html-based content into database and i want to save checkboxes with the checked attribute on them. I've tried to use the input field like below but text-angular doesnt render checkboxes with checked attribute. Is there any way to do this without doing pure css checkboxes?
<input type="checkbox" checked>
EDIT: The code I am using:
<text-angular data-ng-model="example_content" placeholder="Content..."
rows="5">
And inside the textarea of the text-angular directive, I am trying to insert the input from above but it renders without checked attribute
I looked up in text-angular's sanitizer library textAngular-sanitize.js to find out that the checked attribute isn't part of their htmlAttrs attribute map.
Hence, the only option we're left with is to override the sanitizer JS file with the edit. Moreover, you can add other attributes/tags if you want (Do consider vulnerabilities though!)
Here's the working example plunker forked from official text-Angular plunker. Notice the ta-sanitize.js included in plunker which is modified version of their textAngular-sanitize.js
Hope this helps!
You can achieve by using ng-click
<input type='checkbox' ng-click='onsaveValue()' ng-model="saveValue">
I'm trying to implement a multilingual text input field with a little dropdown button to the left for selecting the language. For instance, when the dropdown menu shows 'de' the text field should be bound to model.multilingualData['de'].someField and so on.
My first approach was to set ngModel to model.multilingualData[selectedLanguage].someField. But when the user selects a different language without filling in the field correctly, no error is set on the form, because the model now points to a different object.
My next idea was to create an entire element directive without ngModel, but then I wouldn't be able to do other validations like ngMaxLength.
I couldn't find anything helpful on the web either. Any idea on how to implement this properly?
EDIT
Here's a little fiddle that illustrates the problem: http://jsfiddle.net/FZ2kg/
Not only that the form appears valid when you switch languages, the previous field value is also deleted, because the model is set to null when the field becomes invalid.
would be nice if you use this awesome external directive for multilanguage!
https://angular-translate.github.io/
I hope it helps
If you need to have form validation for all language variations and you're loading all languages at once in your model, can't you just create an input per language in the form and hide all but the currently selected language?
Here's a fiddle: http://jsfiddle.net/jvl70/w3rstmwd/5/
<form name="myForm">
<div ng-repeat="(lang, value) in model.multilingualData"
ng-show="lang==stuff.currentLanguage">
<ng-form name="innerForm">
<div ng-class="{ 'has-error': innerForm.anything.$invalid }">
<input type="text" name="anything" ng-model="value.someField" ng-maxlength="6"/>
</div>
</ng-form>
</div>
</form>
(At first I tried to use dynamic names for each input but found that the individual field $invalid wasn't available for dynamically named inputs. See this post to get around it: Dynamic validation and name in a form with AngularJS.
As an alternative to ng-form, you could use dynamic names for each input and try one of the custom directives on the link.)
I guess if there were many possible languages, this approach might get slower but it's ok for a few languages.
I'm trying to use AngularJS built-in directives to achieve some simple JS effect without writing actual js code. It actually works pretty well, except the initial flash.
I know to deal with text, people should use ng-bind instead of {{}}
But how do you deal with directives like ng-if?
Here is my code:
<li ng-if="!magazines.resolved"> <!-- add "&& isOwner" when done -->
<dl>
<dt ng-model="changeToActivation" ng-init="changeToActivation=false" ng-mouseover="changeToActivation=true" ng-mouseleave="changeToActivation=false"><img ng-if="!changeToActivation" ng-src="<?php echo base_url('public/images/system_icons/add_magazine.jpg');?>">
<img ng-click="addMagazine()" id="activated" ng-if="changeToActivation" ng-src="<?php echo base_url('public/images/system_icons/add_magazine_activated.jpg');?>"></dt>
<dd class="magazineName">Create <br> A new magazine</dd>
<dd class="publishDate">Now!</dd>
</dl>
</li>
I know it gets a bit hard to read, but it's very easy. There is a model defined on <dt></dt> tag. If mouse is over this tag, the model value becomes true; when leaves, it becomes false.
Based on this boolean model value, one or the other image will be shown.
It works like a charm, but I can see both images at the very beginning, flashing!
How to deal with something like this then?
ngCloak may help, but you should also use ng-src for the actual image source, this will prevent your site from loading the image before the model has received a value. Also when using ngCloak, you may need to load the AngularJS source at the top of your html file as it may try to load the image before it knows what to do with the ng-cloak directive.
Applying ngCloak to you dt should do the trick for you: http://docs.angularjs.org/api/ng.directive:ngCloak
Here's an example from the docs. Note that it's added in two places- the directive as well as a class. The class is only needed for IE7 support.
<div id="template2" ng-cloak class="ng-cloak">{{ 'hello IE7' }}</div>
I have no idea how to pre-populate an ng-model in this circumstance that I have to use ngBind. I tried ng-init, but it's not working.
<h6 ng-show="isOwner" ng-bind="currentMagazine.magazine_name"
contenteditable ng-model="currentMagazine.magazine_name"
ng-change="update()"></h6>
I have a seperate directive that binds contenteditable attributes to ngModelController.
The problem now is whenever I update the model, ng-bind will jump out and refresh the div element, resulting in the cursur going back to the beginning of the text, which makes it impossible for any user to type.
I tried ng-init in a fashion like this:
<div ng-init="magazineName = currentMagazine.magazine_name">
<h6 ng-show="isOwner"
contenteditable ng-model="magazineName"
ng-change="update()"></h6>
</div>
It's not working. If I don't use ng-bind, then no text will show up.
Also I notice it might be related to this problem, when I type with space or delete key, they are escaped into HTML entities...so you get result like this:
Hopefully both of my problems can be solved! Thank you (it's a very frustrating day)!
In your app.js do this:
$scope.magazineName = $scope.currentMagazine.magazine_name;
In your HTML do something like this:
<input
ng-show="isOwner"
contenteditable
ng-change="update()"/>
or
<h6 ng-show="isOwner"
contenteditable
ng-model="currentMagazine.magazine_name"
ng-change="update()">
{{currentMagazine.magazine_name}}
</h6>
... though perhaps not, it's a bit difficult to gauge without seeing it... please make a jsfiddle or plunkr if you'd like to get more eyes on it.
If you're just trying to make some large text that is still editable and bound to the model it may be easier to just style an input for your needs.
Decided to play with contenteditbale since it's chance for me to learn something too... I can't seem to recreate the issue though:
http://jsfiddle.net/VSJQX/
I saw after doing this it wasn't updating the model, found another SO post that resolves that and included the changes here:
http://jsfiddle.net/VSJQX/2/
I'm trying to use CakePHP's form helper to generate some input elements.
The HTML I am trying to generate is:
<div class="formRow">
<label>LabelText:</label>
<div class="formRight">
<input name="data[User][email_address]" type="text" value="">
</div>
<div class="clear"></div>
</div>
Ive had a look through the Cake documentation (Using 2.1) and I can't find enough information on how to do this.
It looks like I need to use the format option on the input method, but can't figure out how to get it right. Especially concerned about the div surrounding the input field with a class name on it..
E.g. Ive tried something like this:
echo $this->Form->input('email_address', array(
"input" => array('attributes' => array('wrap' => 'div','class' => 'formRight'))));
But this doesnt change any of the markup and just throws this error:
Notice (8): Array to string conversion [CORE\Cake\View\Helper.php, line 459]
So my question is how can I get this form helper to create that markup?
Any help much appreciated
You're over-thinking it. (No worries, we all do). Just remember, CakePHP is all about making things easier for you (among other things) - if you're struggling with trying to force Cake to do something for you, just remember, you can fall back to the basics - it's just PHP/HTML after-all.
<div class="formRow">
<label>LabelText:</label>
<div class="formRight">
<?php echo $this->Form->input('email_address', array(
'div'=>false, 'label'=>false)); ?>
</div>
<div class="clear"></div>
</div>
You should use the Form helper for your forms when possible, but you don't have to use all of it's presets like surrounding divs & labels. In the case above, just tell it you don't want the div, and wrap it with a div yourself.
If you don't want <div>s or <label>s around any inputs, you can also set the form's inputDefaults:
$this->Form->create('Whatever', array(
'inputDefaults' => array('label'=>false, 'div'=>false)
));
If you have a lot of fields, you can use Jquery.
php:
echo $this->Form->input('email_address', array('class' => 'formRow'));
Jquery:
$(".formRow").each(function() {
$(this).wrapInner( "<div class='formRight'></div>");
$(this).find("label").prependTo(this);
$(this).append('<div class="clear"></div>');
});