formHelper type time : avoiding the annoying dropdown select input? - html

When i use the cakePHP form helper for a type 'time' field, it automatically generates a dropdown select input and not an easy&easy html5 type time keyboard input like this
Anyone has a quick solution to this ? (preferably without any javascript)
thanks !

FYI, finally i used a jQuery timepicker, that's working fine ! find it here
And after importing the css and js through cakePHP, it's very easy to use.
For example:
With an form element like this (note the type => text)
echo $this->Form->input('time', array(
'type'=>'text',
'label'=>'RĂ©el',
'div'=> array(
'class'=>'two columns')
));
you just call it with
<script>
$('#TimeID').timepicker();
</script>

Just lock the type by manually adding it.
So if you want to use a text field for JS snippets:
echo $this->Form->input('time', array('type' => 'text'));
You can also make it anything else (manually).
For "time" you can try
echo $this->Form->input('time', array('type' => 'time'));
Don't forget to adjust your data form input if necessary.
But careful with HTML5 stuff. This is not suitable for all browsers and therefore can lead to problems in some.

Related

How to filter null values with Kartik grid and select2 filter?

I'm trying to add a custom option to my select2 filter (kartik grid). This option is meant to select all rows where something_id=null. It's a simple crud generated grid, modified to use kartik grid and select2 filter instead of yii2 default grid/filter.
I tried doing this in my table2_id column:
'filter' => [null => 'Nothing'] + Arrayhelper::map(Something::find()->orderBy('id)->asArray()->all(), 'id', 'thing')
But this new "null" option is not showing in the menu. I assume for select2 null just mean no filter and select2 just shows the placeholder for that. I can't find any option in select2 documentation to modify this behavior. The generated html for this option is:
<option value="" selected="" data-select2-id="5">Nothing</option>
But the css has the property visibility:hidden;. So I tried using:
'filter' => [0 => 'Nothing'] + Arrayhelper::map(Something::find()->orderBy('id)->asArray()->all(), 'id', 'thing')
But I can't manage to properly translate 'something_id'=>0 into a 'something_id'=>null condition neither in the controller or search model. Tried many things but everything failed at some point and I don't think my code deserves to be posted here, also I don't keep a copy of every failed piece of code so I'd like to ask what is the correct way of doing this from scratch. Thank you.
Well, my answer got deleted because I made a joke. Here is the very very serious version of my answer.
// WatheverSearch.php
if ( $this->something_id === '0' ) {
$query->andWhere(['something_id' => null]);
}else{
$query->andFilterWhere(['something' => $this->something]);
}

Submit 'links' with CakePHP formHelper

Is it possible to create a submit 'link' with CakePHP 2.4's FormHelper? I'm trying to put some less-used submit buttons from my POST form into a Bootstrap dropdown and am running into trouble since they only seem to be able to create a button, which won't work in a dropdown.
Since this is inside a form already, clearly this isn't what I want a postLink for- but is there any good Cake way around this? postLink just makes a plain link, but it won't play well inside another form.
echo $this->Form->button('Download Excel CSV', array(
'type' => 'submit',
'class' => '',
'formaction' => '/posts/csv',
));
Just use the HtmlHelper's url() method:
<button type="button" formaction="<?php echo $this->Html->url('/posts/csv'); ?>">
Click Here
</button>
(I realize you don't want it in a button element, but - showing the concept).
Side note: you should really be using an array instead of a hard-coded formaction:
$this->Html->url(array('controller'=>'posts', 'action'=>'csv'));

Custom Input Names on GravityForms

How can I add custom input names to gravity forms? I need to submit a form to a third party service that requires very specific form names.
My current idea is to write a bit of jQuery to dynamically rename everything when the page loads. Obviously this isn't ideal.
Gravity Forms: http://www.gravityforms.com/
After contacting the makers of Gravity Forms, it sounds like they don't support custom input names. As a workaround, I wrote a bit of jQuery to rename inputs with the correct form names. For example:
$("input#input_1_1").attr("name","first_name");
Just put some code in functions.php and fill out the form which will then email you with a list of the id names, they are the same names that you can fine using developer tools etc. This was just faster for me. Then change the code to have it post via curl with different input names.
This uses php so it's on the server to handle. That way you don't have to worry about people with JS disabled in their browser.
http://0to5.com/gravity-forms-submitting-forms-to-3rd-party-applications/
Add a new field (HTML field). In content settings of this field add this javascript with script tags
Non-jquery solution:
document.getElementById("input_14_4").setAttribute("name", "email");
Another solution i found here
https://docs.gravityforms.com/gform_field_content/
add_filter( 'gform_field_content', function ( $field_content, $field , $value, $lead_id, $form_id) {
if ( $form['id'] != 14 ) {
//not the form whose tag you want to change, return the unchanged tag
return $field_content;
}
if ( $field->id == 3 ) {
return preg_replace( "|name='(.*?)'|", "name='email'", $field_content );
}
return $field_content;
}, 10, 5 );

CakePHP hidden _method POST

When using the FormHelper->create(...), the HTML that gets rendered looks like this:
<form action="/blogs/add" method="post" accept-charset="utf-8">
<div style="display:none;">
<input type="hidden" name="_method" value="POST">
</div>
<!-- omitted: form inputs -->
</form>
Why is that div with the display:none; style there? How do I make it not show up?
UPDATE: Just to be clear, I'm wondering why both the div AND the hidden input inside the div show up. They don't seem to be necessary, and therefore I don't want them to be there.
For anyone coming to this recently, there is a simple solution to this now that doesn't involve a custom helper. Using the FormHelper templates, the block of code in question is generated by the 'hiddenBlock' template. (See the full list of default templates here: https://api.cakephp.org/3.2/class-Cake.View.Helper.FormHelper.html#%24_defaultConfig).
So, to amend the example given in CakePHP's documentation to match this case and remove the wrapping <div> around the hidden <input> for _method (assuming HTML5):
// In your View class
$this->loadHelper( 'Form' , [ 'templates' => 'app_form' ] );
// in config/app_form.php
return [
'hiddenBlock' => '{{ content }}'
];
I was confronted with this problem because I recently implemented a Content Security Policy that doesn't allow inline styling, and I thought I should share my working solution.
The div is there to be valid HTML.
Non-block-level elements (such as <input>) are not valid directly inside <form> tags until HTML5. Source
Edit: To answer your question, you can't easily get rid of it. It's hard-coded into FormHelper::create(), you'd have to override that method in a custom helper. Why is it bothering you anyways?
This link might help you.
Whenever you use FormHelper->create() method ,A hidden input field is generated to override the default HTTP method. You can also change it by passing type option. Kindly ask if it not worked for you.
Try:
echo $this->Form->create('User', array(
'inputDefaults' => array(
'div' => false
)
));
The divs won't be created on any input of the form.
use hiddenField => false property

How to unit test HTML output with PHPUnit?

I'm new to PHPUnit, and I'm having some trouble with unit testing HTML output.
My test follows:
/**
* #covers Scrap::removeTags
*
*/
public function testRemoveTags() {
// Variables
$simple_parameter = 'script';
$array_parameter = array('script', 'div');
$html = '<div class="pubanunciomrec" style="background:#FFFFFF;"><script type="text/javascript"><!-- google_ad_slot = "9853257829"; google_ad_width = 300; google_ad_height = 250; //--></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script></div><table></table>';
// Expected HTML
$expected_html_whitout_script = new DOMDocument;
$expected_html_whitout_script->loadHTML('<div class="pubanunciomrec" style="background:#FFFFFF;"></div><table></table>');
$expected_html_without_script_div = new DOMDocument;
$expected_html_without_script_div->loadHTML('<table></table>');
// Actual HTML
$actual_whitout_script = new DOMDocument;
$actual_whitout_script->loadHTML($this->scrap->removeTags($html, $simple_parameter));
$actual_without_script_div = new DOMDocument;
$actual_without_script_div->loadHTML($this->scrap->removeTags($html, $array_parameter));
// Test
$this->assertEquals($expected_html_whitout_script, $actual_whitout_script);
$this->assertEquals($expected_html_without_script_div, $actual_without_script_div);
}
My problem is that the DOMDocument object generates some HTML code and I can't compare it. How can I print the DOMDocument object to see the output? Any clues on how to compare the HTML?
Sorry for my bad english.
Best Regards,
Since 2013, there is another way to test HTML Output using PHPUnit.
It is using assertTag() method that can be found in PHPUnit 3.7 and 3.8.
For example :
// Matcher that asserts that there is an element with an id="my_id".
$matcher = array('id' => 'my_id');
// Matcher that asserts that there is a "span" tag.
$matcher = array('tag' => 'span');
// Matcher that asserts that there is a "div", with an "ul" ancestor and a "li"
// parent (with class="enum"), and containing a "span" descendant that contains
// an element with id="my_test" and the text "Hello World".
$matcher = array(
'tag' => 'div',
'ancestor' => array('tag' => 'ul'),
'parent' => array(
'tag' => 'li',
'attributes' => array('class' => 'enum')
),
'descendant' => array(
'tag' => 'span',
'child' => array(
'id' => 'my_test',
'content' => 'Hello World'
)
)
);
// Use assertTag() to apply a $matcher to a piece of $html.
$this->assertTag($matcher, $html);
Read more in official PHPUnit Website.
You may want to consider looking at Selenium. It is a browser-based testing tool for doing functional tests for a web site.
You write scripts which involve loading a web browser and simulating clicks and other actions, and then doing asserts to check that, for example, specific page elements are present, in the correct place or contain the expected values.
The tests can be written using an IDE that runs as a plug-in for Firefox, but they can be run against all the major browsers.
We have a suite of Selenium tests that run as part of our CI process, allowing us to see very quickly if something has gone wrong with our HTML output.
All in all, its a very powerful testing tool.
Also, it integrates with PHPUnit (and other language-specific tools), so it does answer your question, although probably not in the way you were thinking of.
You should be a bit careful in comparing outputted HTML to a correct template. Your HTML will change a lot, and you can end up spending too much time on maintaining your tests.
See this post for an alternative approach.
You can use saveHtml method of DOMDocument and compare the output.
You can compare two HTML strings with PHPUnit assertXmlStringEqualsXmlString method:
$this->assertXmlStringEqualsXmlString($emailMarkup, $html);
where
$emailMarkup - expected HTML string
$html - current HTML string
Important! HTML strings must be XML-valid. For example use
<br/>
instead
<br>
Also tag attributes must have values, e.g. use
<hr noshade="true">
instead
<hr noshade>
It is best not to validate against a template (unless you want to make sure nothing changes, but that is a different condition / test that you may want). You will probably want to test that your HTML includes what the user should actually see, and not that the actual HTML that formats the output is exactly what is in a template. I would recommend sending your HTML through a converter that changes it into pure text, then testing to see if you get the right results. This accommodates future functionality and data related changes that are inevitable in software development. You don't want your tests failing because someone added a class somewhere. This is probably a custom type test you will want to code yourself to meet your needs.
It is also best to insure your HTML (and CSS) is correctly formatted, what ever it may be. Sometimes invalid HTML is parsed and displayed somewhat reasonably by the browser, but best not to rely on browsers knowing what do to with invalid HTML and CSS. I have seen many issues fixed just by correcting the HTML.
I developed a library that outputs HTML PHPFUI, and I could not find any recent or even supported HTML unit tests for PHPUnit. So I created https://packagist.org/packages/phpfui/html-unit-tester which is a modern HTML and CSS unit tester. It validates against w3.org standards, so will always be up to date with the latest.
Basically you can pass in HTML fragments, or entire pages, and it will check validity of your HTML. You can test strings, files or even live URLs. Really handy to make sure all the HTML and CSS you are generating is valid. I found so many issues with my code with this library, was definitely worth the time invested. Hope everyone can benefit from it as well.