Monday, November 1, 2010

Re: Adding new items to a form dynamically

On Mon, Nov 1, 2010 at 12:33 AM, Arak Tai'Roth <nielsen.dustin@gmail.com> wrote:
> 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.

If you're not using SecurityComponent, as Odd points out, you could
save yourself some hassle and use the JQuery MultiFile plugin:

http://www.fyneworks.com/jquery/multiple-file-upload/

> 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.

A blank screen is usually indicative of a fatal error. You may have
some issues with your code. Check your server log.

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@googlegroups.com
To unsubscribe from this group, send email to
cake-php+unsubscribe@googlegroups.com For more options, visit this group at http://groups.google.com/group/cake-php?hl=en

No comments: