How to create/save more Model inputs and make them repeatable with jQuery

Tutorials



How can we add N photos input field in the form dinalmically?

This is how is made the html page to collect the inputs:
 
 
~~~
 
[html]First of all you have to create your IMG_DIR_PATH directory where to save the images and give it the rights to write inside.
 
 
Second, if you need to use the images, resize them, play with them you have to remember to add this to the config/main.php
 
 
 
```php 
<?php
 
'image'=>array(
 
          'class'=>'application.extensions.image.CImageComponent',
 
            // GD or ImageMagick
 
            'driver'=>'GD',
 
            // ImageMagick setup path
 
            'params'=>array('directory'=>'/opt/local/bin'),
 
        )
 
 
?>
 
```
 
 
 
 
This is how is made the html page to collect the inputs:
 
 
~~~
 
[html]
 
<h2>New Event</h2>
 
 
<div class="actionBar">
 
[<?php echo CHtml::link('Event List',array('list')); ?>]
 
[<?php echo CHtml::link('Manage Event',array('admin')); ?>]
 
</div>
 

<div class="yiiForm"><?php echo CHtml::button('add Periodhotos', array('name'=>'addPeriodhotos', 'id'=>'addPeriodhotos')); ?>

<?php foreach($photosEvent as $i => $photo): ?><div class="simple">
<?php echo CHtml::activeLabelEx($photo,'photoUrl'); ?>
<?php echo CHtml::activeFileField($photo, '"photoUrl'[$i]"); ?>
</div>
<br /><?php
public function actionCreate()
   {
 
       {
 

 
// Adding jQuery to the view page.        Yii::app()->getClientScript()->registerCoreScript('jquery');       
 
      
 
$event = new Event; // Adding an empty PhotoEvent to the form $photosEvent = array( new PhotoEvent, );       
 
      
 
      
 
      
 
// If everything is setted I will check and process the inputs if( isset( $_POST['submitDatas'] ) && isset( $_POST['PhotoEvent'], $_POST['Event'] ) ) { $event->attributes= = $_POST['Event']; // DB date layout $event->expireDate = date_format(date_create($event->expireDate), 'Y-m-d'); $valid = $event->validate();          
 
         
 
// This is the crappy part of the script that I need to improve and make it more elegance // I've to add to the photoEvent array a new PhotoEvent for every istance in $_POST['PhotoEvent'] foreach ( $_POST['PhotoEvent'] as $i => $photo ) { $photosEvent[$i] = new PhotoEvent; if ( isset( $_POST['PhotoEvent'][$i] ) )     $photosEvent[$i]->photoUrl = CUploadedFile::getInstance($photosEvent[$i], "photoUrl[$i]" );
 
               //$photosEvent[$i]->photoUrl = CUploadedFile::getIstance($photosEvent[$i], "photoUrl[$i]" ); $valid = $valid && $photosEvent[$i]->validate(); } if( $valid && $event->save(false) ) {    
 
          // You will need this if you want to resize and play around images :)
 
            //Yii::import('application.extensions.image.Image');             
 
// Saving each period ( i've to change the date format couse in Italy we use dd/mm/yyyy foreach ( $photosEvent as $i => $photo ) { $photo->eventId = $event->id; // Taking and saving the image in the filesystem in the IMG_DIR_PATH/ directory path.                // In this case IMG_DIR_PATH is in the root of the 
 
               // site and you need to give it rights to write the image :)
 
$photo->photoUrl->saveAs('IMG_DIR_PATH/'.$photo->photoUrl->getName()); /* If you need to resize the image use this path of code $image = new Image('IMG_DIR_PATH/'.$photo->photoUrl->getName()); $image->resize(200, 200); $image->save(); */ $photo->save(false); } $this->redirect(array('show','id'=>$lastminuteevent->id)); } } $this->render('create', array( 'event' => $event, 'photosEvent' => $photosEvent, 'photosNumber' => isset($_POST['PhotoEvent']) ? count($_POST['PhotoEvent'])-1 : 0, //How many PhotoEvent the user added 'update' => false, ));     }
?>
```

I wish you will enjoy my guide :) Please gimme some feedback to improve it :)