Adding new items to a form dynamically
So, here is my situation. I have a form that allows users (only
admins) to upload images for a specific product. What I have created
is a solution that when they load the add form initially it has one
file upload and one caption text box. However, they can click a button
lower down, that dynamically adds another file upload and another
caption box, so they can essentially upload however many images they
want to at a time.
Here is the code that I have:
images_controller.php
function add($productID = NULL)
{
if ($this->RequestHandler->isPost())
{
$slug = $this->Session->read('ProductSlug');
if ($this->Image->saveAll($this->data))
{
$this->Session->setFlash('Images have been added to the product.');
$this->redirect('/product/' . $slug);
$this->exit();
}
}
else
{
$this->Session->write('ProductID', $productID);
$this->Session->write('ImageCounter', 0);
}
}
function moreImages()
{
if ($this->RequestHandler->isAjax())
{
$images = $this->Session->read('ImageCounter');
$images++;
$this->Session->write('ImageCounter', $images);
$this->render('/elements/imageAdd');
}
}
and imageAdd.ctp
$image = $this->Session->read('ImageCounter');
echo $this->Form->input('Image.' . $image . '.product_id',
array('type' => 'hidden', 'default' => $this->Session-
>read('ProductID')));
echo $this->Form->label('Image.' . $image . '.filename', 'Image:');
echo $this->Form->input('Image.' . $image . '.filename',
array('label' => false, 'type' => 'file'));
echo $this->Form->label('Image.' . $image . '.caption', 'Caption:');
echo $this->Form->input('Image.' . $image . '.caption', array('label'
=> false));
and finally the js file that adds the stuff:
$(document).ready(function() {
$('#forms img').click(function() {
$.ajax({
url: someUrl',
dataType: 'html',
success: function(data) {
$('#forms div.formInputs').append(data);
}
});
});
});
Now, what this does. When the user goes to the add form, it renders
the element imageAdd. Which creates 3 form elements, 1 hidden. Each
form element is rendered with Image.0.columnName. Then if they click
the image at the bottom, it renders another element imageAdd, but this
time the elements are all named Image.1.columnName, and so on.
Now for my issue. All of this works fine if they just add one image.
However, that clearly defeats the purpose of this. When they go to add
2 or more images, it goes to a blank screen, where even the view
source is blank. So I have no idea what's going wrong. It goes there
before the timeout that's declared in php.ini, and I've made sure that
the combined filesize is also lower then what's allowed in my php.ini.
Also, if it makes a difference, I am using MeioUpload for the file
upload behaviour. Any help on this is greatly appreciated.
Check out the new CakePHP Questions site http://cakeqs.org and help others with their CakePHP related questions.
You received this message because you are subscribed to the Google Groups "CakePHP" group.
To post to this group, send email to cake-php@...
To unsubscribe from this group, send email to
cake-php+unsubscribe@... For more options, visit this group
at http://groups.google.com/group/cake-php?hl=en
RSS Feed