#javascript: Selects dependientes con #AJAX – ejemplo práctico by @edanps

Fuente: http://www.formatoweb.com.ar/ajax/select_dependientes.php

Para obtener los códigos clickeá aquí y no olvides revisar a nuestros anunciantes 🙂

Importante

El script de esta página NO utiliza XML para comunicar servidor-cliente y cargar los valores (utiliza innerHTML). Si deseas descargarte un script que genere automáticamente el código necesario para hacer funcionar select dependientes multinivel, con comunicación XML, que utilice JavaScript no intrusivo y sea muy sencillo de usar, visita este script.

Instrucciones

Hacer click en la primera lista desplegable, seleccionar cualquier opción de las dispuestas. El segundo select será habilitado en el momento que se haya seleccionado una opción válida del primer select y mostrará las opciones disponibles que se correspondan con dicha elección, por supuesto sin realizar recarga de la página.
El código fuente esta compuesto por dos archivos “.php” con sus estilos y funciones JavaScript en archivos externos más los SQL necesarios para el armado de las tablas. El listado de países y estados se incluye también con el ejemplo.

Funcionamiento

El primer select es generado mediante una función escrita en lenguaje de servidor (en este caso PHP) la cuál se encarga de consultar nuestra base de datos e imprimir todos los registros de un campo de determinada tabla. Cuando el valor de este primer select es modificado, el evento onChange de JavaScript se dispara llamando a una función. Esta función se encargará de determinar cuál select ha sido el modificado y el valor que el usuario ha seleccionado en el mismo. Si el usuario ha seleccionado la opción “Elige”, los select posteriores en la cadena de actualización cambiarán su estado a “Selecciona opción…”. Por el contrario, si la opción elegida no es “Elige”, se abrirá una conexión asincrónica con el servidor enviandole como dato el ID del select modificado y el valor seleccionado. El servidor validará lo que recibe para luego buscar en su base de datos el listado de opciones que correspondan a lo elegido por el usuario (los cuales se relacionan en las tablas mediante un campo en común) y devolverá los datos en formato HTML. Solo resta que el cliente ubique esta información en el contenedor (parentNode) del select posterior al cambiado en la cadena de actualización, tarea que se hará mediante innerHTML.

Para obtener los códigos clickeá aquí.

Actualización

Los últimos cambios realizados son:

  • Re-estructuración del código fuente para hacerlo reutilizable para “X” cantidad de combos dependientes.
  • Añadido de comentarios nuevos para ayudar a la comprensión del sistema.
  • Código más claro y limpio, ideal para su estudio.

#php: #yii #framework 2 – #upload y registro en bd de fotos

buenas

en español no encuentro mucho material sobre yiiframework2 y el que encuentro esta incompleto porque solo hacen upload y no registran en base de datos o estan redactados para programadores avanzados que no necesitan leer tutoriales para hacer las cosas … vamos al turron

Esto está programado sobr eun ejemplo sencillo, una tabla que se llama ejemplos con un campo nombre y otro “imagen” que es donde guardaremos ruta y nombre de archivo

  • creamos la vista upload.php en la carpeta views y dentro en este caso en la carpeta ejemplos y le metemos este codigo:
<?php use yii\helpers\Html; use yii\widgets\ActiveForm; ?>

<?= $msg ?>


<h3>Subir archivos</h3>


<?php $form = ActiveForm::begin([ "method" => "post",
     "enableClientValidation" => true,
     "options" => ["enctype" => "multipart/form-data"],
     ]);
?>

<?= $form->field($model, "file[]")->fileInput(['multiple' => true]) ?>

<?= Html::submitButton("Subir", ["class" => "btn btn-primary"]) ?>

<?php $form->end() ?>
  • creamos el modelo de validación FormUpload.php en la carpeta models y le metemos este codigo:
<?php namespace app\models; use yii\base\Model; class FormUpload extends Model{ public $file; public function rules() { return [ ['file', 'file', 'skipOnEmpty' => false,
   'uploadRequired' => 'No has seleccionado ningún archivo', //Error
   'maxSize' => 1024*1024*1, //1 MB
   'tooBig' => 'El tamaño máximo permitido es 1MB', //Error
   'minSize' => 10, //10 Bytes
   'tooSmall' => 'El tamaño mínimo permitido son 10 BYTES', //Error
   'extensions' => 'jpg',
   'wrongExtension' => 'El archivo {file} no contiene una extensión permitida {extensions}', //Error
   'maxFiles' => 4,
   'tooMany' => 'El máximo de archivos permitidos son {limit}', //Error
   ],
        ]; 
    } 
 
 public function attributeLabels()
 {
  return [
   'file' => 'Seleccionar archivos:',
  ];
 }
}

  • agregamos las clases FormUpload y UploadedFile al controlador, en este caso el nuestro es controllers/EjemplosController.php:
use app\models\FormUpload;
use yii\web\UploadedFile;
  • y creamos la acción Upload en el controlador controllers/EjemplosController.php:
public function actionUpload($id)
	{
 
	 $model = new FormUpload;
	 $msg = null;
 
	 if ($model->load(Yii::$app->request->post()))
	 {
	  $model->file = UploadedFile::getInstances($model, 'file');

	  if ($model->file && $model->validate()) {
	   foreach ($model->file as $file) {
	    if ($file->saveAs('archivos/' . $file->baseName . '.' . $file->extension)){
		    $msg = "

<strong class='label label-info'>Enhorabuena, subida realizada con éxito</strong>

";
			$modele = $this->findModel($id);
			$modele->imagen=$file->baseName . '.' . $file->extension;
			$modele->save();
		}
	   }
	  }
	 }
	 return $this->render("upload", ["model" => $model, "msg" => $msg]);
	}

con esto ya tenemos la subida de archivos desde el panel de control, ahora solo tenemos que modificar la vista de cada registro para ver la foto de marras

  • en views/ejemplos/view.php añadimos esta linea al final para poder ver la foto relacionada con cada registro del a base de datos : <?= Html::img(Url::base().’/archivos/’.$model->imagen,[‘height’=>’200px’]);?> y añadimos esta otra donde tenemos los botones update y delete para poder llamar al formulario de subida de imagenes <?= Html::a(Yii::t(‘app’, ‘Upload’), [‘upload’, ‘id’ => $model->id], [‘class’ => ‘btn btn-primary’]) ?>

y si no he bebido mucho vino creo que no me olvido de nada

espero que esto le sirva de ayuda a alguien mas aparte de a mi mismo xDD