I have built an cakephp site that lets users upload files, all works fine but I would like to show a image saying "file uploading" or something while it is uploading. Now I know that I should use the $ajax->form helpers but I can not seem to get this to work. Can some one point me in the right direction please
<?php echo $ajax->form(array('type' => 'post',
'options' => array(
'model'=>'Upload',
'update'=>'post2',
'action' => 'add',
'confirm' => 'Are you sure?',
'indicator' => 'loading',
'before' => '$("#post2").html("Wait a moment")'
)
));
?>
<fieldset>
<legend><?php __('Add Upload');?></legend>
<?php echo $form->input('title'); ?>
<div id="formUpdate">
</div>
<?php echo $form->input('Uploaded.uploaded_file', array('type' => 'file', 'label' => 'Upload file')); ?>
</fieldset>
<?php echo $form->end('Submit');?>
</div>
<div id="post2"></div>
Ok, if you don't want to use Ajax upload solution, then it could be achieved with simple javascript. I would explain how to do with jQuery, but you can achieve with any library or pure javascript too.
So, create a hidden div containing your please wait message i.e.:
<div id="wait">File is uploading please wait</div>
Then on the submit button of your form attach following function:
function pleaseWait(){
$('#your_form_id').hide();
$('#wait').show();
}
This basically would hide the form and will display the wait container. Once the file has been uploaded, the page will be redirected so, you don't need to worry how to show the form again.
I've did it on my project and it was working pretty well.
Related
Regarding to Cakephp 3 Form Helper, for Radio Buttons with Images, i got a question need to ask for help.
From the forumn there's a question, but it was 10 years version earlier, which is not suitable for my codes.
originally the Add.ctp for this item is meant for Type=>Select
<?php echo $this->Form->control('product_image_id', array('label'
=> false, 'div' => false,
'class' => 'form-control', 'type' => 'select', 'empty' =>
'Choose Image')); ?>
in the Type select, the name of the images only shows out. not the images.
When i want to put the Form Control into the code for the add.ctp
<?php foreach ($product['product_images'] as $productImg) : ?>
<div class="container parent">
<div class="row">
<div class='col text-center'>
<?php echo $this->Form->control('product_image_id', ['type' =>
'radio', 'escape' =>
false, 'class' => 'form-control', 'id' =>$productImg->id,
'name'=>'imgbackground' ]); ?
>
<label for="<?= $productImg->id ?>">
<?php
echo $this->Html->image($imgPath, ['width' => '100']);
?>
<div class="tick_container">
<div class="tick"><i class="fa fa-check"></i></div>
</div>
</label>
</div>
</div>
</div>
<?php endforeach; ?>
Information regarding settings for Form Control for radio buttons is limited....
can anyone help to advise where i went disaligned?
thanks
You basically have two options, that is either manipulate the radio options for FormHelper::control() to include your custom label contents, or to manually create each label and radio button.
For the former you build an options array that holds nested arrays with text and value keys, where text is the label contents, and value the radio button value, eg
[
['text' => '<img src="..."> ...', 'value' => '1'],
['text' => '<img src="..."> ...', 'value' => '2'],
// etc ...
]
A quick and dirty example could look like this (I'm just guessing here that there's something like a path property on your product images, you'll most likely have to adjust this a bit according to your needs to build the proper web path to the image):
echo $this->Form->control('product_image_id', [
'type' => 'radio',
'templates' => [
'radioWrapper' => '{{input}}{{label}}',
'nestingLabel' => '{{hidden}}<label{{attrs}}>{{text}}</label>',
],
'labelOptions' => [
'escape' => false,
],
'options' => collection($product['product_images'])
->map(function ($productImage) {
return [
'text' =>
$this->Html->image($productImage->path, ['width' => '100']) .
'<div class="tick_container">
<div class="tick"><i class="fa fa-check"></i></div>
</div>',
'value' => $productImage->id,
];
}),
]);
Note that you need to define custom/modified templates for the label and the wrapper if you actually need the input to be rendered outside of the label. If you don't actually need it to be rendered that way, then you can drop this example's templates option, by default the form helper would render the input inside of the label, eg:
<label><input/>text</label>
See also
Cookbook > Views > Helper > Form > Creating Radio Buttons
Cookbook > Views > Helper > Form > Using Collections to build options
Using Cakephp 2.2.4 and the Recaptcha plugin 1.1 from CakeDC on a form. The page is SSL/HTTPS. When I submit form with correct recaptcha text entered the form resets and no messages.
have checked $this->request->data in the appropriate method in controller and no post is received by it.
Anyone come across this problem or have a solution ?
Thanks.
Extract from Controller code:
if ($this->request->is('post')) {
if ($this->Recaptcha->verify()) {
Extract from View:
echo $this->BootstrapForm->input('message', array(
'type' => 'textarea',
'required' => 'required',
'helpInline' => '<span class="label label-important">' . __('Required') . '</span> ')
);
?>
<?php echo $this->Recaptcha->display(array('recaptchaOptions'=>array('theme' => 'clean'))); ?>
<?php echo $this->BootstrapForm->submit(__('Submit'),array('class' => 'btn btn-primary'));?>
</fieldset>
<?php echo $this->BootstrapForm->end();?>
Have made no changes to model for recaptcha.
CakeDC plugin I am using is this one:
https://github.com/CakeDC/recaptcha
See the SSL part here.
reCAPTCHA on an https site
In order to avoid getting browser warnings when you use reCAPTCHA on
an SSL site, you should replace http://www.google.com/recaptcha/api
with https://www.google.com/recaptcha/api when you request a
challenge. Your request to reCAPTCHA would look like this:
<script type="text/javascript"
src="https://www.google.com/recaptcha/api/challenge?k=your_public_key">
</script>
<noscript>
<iframe src="https://www.google.com/recaptcha/api/noscript?k=your_public_key"
height="300" width="500" frameborder="0"></iframe><br>
<textarea name="recaptcha_challenge_field" rows="3" cols="40">
</textarea>
<input type="hidden" name="recaptcha_response_field"
value="manual_challenge">
</noscript>
Id like to pass buttons from the cakePHP 2 (note: I'm using Twitter Bootstrap 2.2.1) into an Element in app/View/Elements/Toolbar.ctp
<div class="actions">
<?php echo $this->Html->link(__('New User'), array('action' => 'add'), array('class' => 'btn btn-small',)); ?>
</div>
Above is an example of the button.
Depending on the view, I'd like to pass in different Buttons with different actions.
How do I do that? With Elements, Blocks, requestaction() or what?
The cakephp way doing would look like this
In view
<?= $this->element('toolbar', array('button' => $button_type)) ?>
in element there will be variable called $button available. Note that $button_type variable is also available in element.
That should do it
I'd like to know if this code...
echo $this->Html->link(
"<h3>test</h3>".$this->Html->image("image.jpg")."<p>Some text</p>",
"/link",
array('escape' => false)
);
...is the best way to generate this HTML in CakePHP...
<a href="/path/to/link">
<h3>test</h3>
<img alt="" src="/path/to/image.jpg">
<p>Some text</p>
</a>
Or, is there a more "correct" way of doing this? I want the and all to be within the tag so that I can set the to display: block; in CSS and have the whole area clickable with a hover effect.
Something tells me that having HTML echoed like this isn't the right way to go about it, but I can't see an alternative if I'm going to use the HTML Helper. Is there one?
Just use the URL method of the HTML helper instead of the link one,do the rest as static HTML, may as well keep the amount of PHP down to a minimum as far as I see it.
<a href="<?php echo $this->Html->url($params); ?>">
<h3>test</h3>
<?php echo $this->Html->image($params); ?>
<p>Some text</p>
</a>
This would be the most efficient way of doing this task. But maybe you should think about your markup structure and what you want to achieve...
I use
$this->Html->tag('li',
$this->Html->link(
'<i class="entypo-book"></i>'.
$this->Html->tag('span', $nom
.$this->Html->tag('span', '32', array('class' => 'badge'))
),
array('controller' => 'Pages', 'action' => 'index'),
array('class' => 'active', 'title' => 'Pages', 'escape' => false)
)
);
How can I create submit button, and define custom title on it, together with custom class style?
You could use either submit() or button() methods of the Form helper instead of the end() method. For example:
echo $this->Form->submit(
'Send',
array('class' => 'custom-class', 'title' => 'Custom Title')
);
Don't forget to close the form. You can do it by calling the end() method without any arguments.
echo $this->Form->end();
Also remember, you can always do it old school
I prefer to use $this->Form->end( ); without arguments and build my own submit buttons and markup. It's easy
<div class="buttons clearfix">
<button type="submit" class="positive">
<span class="icon-wrapper"><img src="path/to/tickmark.png" alt="" title="" /></span>
Save Item
</button>
</div>
I would also tell you to experiment with the $this->Form->input('Model.field', 'options' => array( array('type' => 'button'))); - particularly the before, between, after, and class options. You can use the helper to create <input type="button" /> elements with a good amount of flexibility.
you can create costum submit by this code
echo $this->Form->submit(
'Submit',
array('div' => false,'class' => 'urclass', 'title' => 'Title')
);
This is enough:
echo $this->Form->submit("Custom message");
Also as #Mike suggest close the form with
echo $this->Form->end();
Or you can combine both with:
echo $this->Form->end("Custom Message");
I created a custom button using an image in my under app/webroot/img that uses inline style for specifying size and changing the position to center
$options=array('type'=>'Make secure payment', 'type'=>'image', 'style'=>'width:200px; height:80px; display:block; margin-left:auto; margin-right:auto;');
echo $this->Form->submit('/img/axiaepaysecurebuttongray_med.png', $options);
echo $this->Form->end();
For CakePHP 2.x, you can use
$options = array(
'label' => 'Update',
'div' => array(
'class' => 'glass-pill',
)
);
echo $this->Form->end($options);