Llenar combobox con base de datos y crear una lista html con valor seleccionado

Fecha Publicación:       25 de Noviembre de 2020
Fecha Modificación:       03 de Noviembre de 2023

XAJAX es una librería de código abierto PHP que permite crear de manera sencilla aplicaciones Web basadas en AJAX haciendo también uso de  HTML, CSS, y Javascript.

Descargar e instalar xajax

Manos a la obra descargamos la liberia  desde este enlace  XAJAX   lo guardamos en una carpeta de nuestro proyecto y lo configuramosd e la siguiente manera:

   

<?php	
   //incluímos la clase ajax 
  require ($_SERVER['DOCUMENT_ROOT']. '/xajax/xajax.inc.php');
  // Creamos una instancia de un objeto de la clase xajax
  $xajax = new xajax();
 // Le indica la codificación que debe utilizar
 // usar  'utf-8'  o 'ISO-8859-1'
  $xajax->setCharEncoding('ISO-8859-1');
 //Decodifica los caracteres extraños
  $xajax->decodeUTF8InputOn();	 

  //Registramos la función para indicar que se utilizará con xajax.  
  // la funcion lo podemos cambiar
  $xajax->registerFunction("procesar_estilos");
  $xajax->processRequests();  
?>

Creamos las Funciones para conectarse a la Base de datos Mysql

Conexión a base de datos MySQL con Extensión MySQLi desde PHP

 

Creamos la función para mostrar el resultado segun lo seleccionado en combobox:

Mostramos el resultado de nuestra consulta a nuestra base de datos  segun lo seleccionado en nuestro combobox , en la function procesar_estilos recibimos el valor del combobox.
 

function procesar_estilos($form_entrada)
	{
		$mostrarsec = new xajaxResponse('ISO-8859-1');
		$opsec   = "<ul class='stylos'>";
		$sqlsec  = " SELECT * FROM _estiloseccionweb WHERE idcodmodulo='".$form_entrada['idcodmodulo']."' and cestadoestiloseccion='1' order by idcodestiloseccion";		
		$sqlmsec = db_query($sqlsec);
		$na = 1;
		while ($rows = db_fetch_array($sqlmsec)) 
		{	
			if ($na==1) { $check = " checked";} else { $check = "";}
			$opsec .= '<li><img src="/webadmin/estilos/images/'.$rows["cimgestiloseccion"].'"><div style="clear:both;"><input type="radio"  name="selectestilo" value="'.$rows["idcodestiloseccion"].'" '.$check.'>'.$rows["cnombreestiloseccion"].'</div></li>';
			$na++;
		}
		$opsec .= "</ul>";
		$mostrarsec->addAssign("estilos","innerHTML","$opsec");
		return $mostrarsec;
	}


3) Indicamos al objeto xajax se encargue de generar el javascript necesario.
El método recibe un parámetro, que es la ruta relativa para acceder al directorio donde están los archivos xajax descomprimidos.

// Lo hemos descargado en la carpeta xajax. 
<?php $xajax->printJavascript("/xajax/");?>

Cargamos los valores del combobox con los datos de nuestra base de datos :

Podemos hacer llamadas a las funciones PHP en cualquier lugar del código, como respuesta a las acciones del usuario con javascript. desde el select se le envia su  valor a la funcion procesar_chat

<li><label>Modulo</label>	                     
<select name="idcodmodulo" style="width:190px" onChange="xajax_procesar_estilos(xajax.getFormValues('form'))" class="box">
<?php	$querysec = db_query("select * from _modulosweb where cestadomoduloweb='1'");
    while($row_sec = db_fetch_array($querysec)) 
    {	if( $row_sec['idcodmodulo']==$row['idcodmodulo'])
            echo '<option value="' . $row_sec['idcodmodulo'].'" selected>' . $row_sec['cnombremoduloweb'] . '</option>';
        else
            echo '<option value="' . $row_sec['idcodmodulo'].'" >' . $row_sec['cnombremoduloweb'] . '</option>';
    }
?>
    </select>
</li>                 

Cargamos los Estilos del Modulo Seleccionado:

 <div id="estilos">
  <li><label id="jform_published-lbl" for="jform_published" class="hasTip" title="" aria-invalid="false">Estilo Sección</label>	
  <ul class='stylos'>
  <?php
      $sql_estilo = "SELECT * FROM _estiloseccionweb WHERE cestadoestiloseccion='1' AND idcodmodulo='".$row['idcodmodulo']."' order by idcodestiloseccion";
      $res_estilo = db_query($sql_estilo);
      while($rowestilo = db_fetch_array($res_estilo)) 
      {
          if ($rowestilo['idcodestiloseccion']==$row['idcodestiloseccion']) { $check = " checked";} else { $check = "";}
          echo "<li>\n";
          echo "<img border='0' src=\"/webadmin/estilos/images/" . $rowestilo['cimgestiloseccion'] . "\">	                                        <div style='clear:both;'>
          <input type='radio' name='idcodestiloseccion' value='".$rowestilo['idcodestiloseccion']."'".$check.">" . $rowestilo['cnombreestiloseccion'];
          echo "</div></li>";
          $na++;
      }
      ?>
  </ul>
  </li>                                  
</div>          

 

Problemas con la clase Xajax: 

Error: the XML responde that was returned from the server is invalid   

Articulo : 3158 - Veces Leidas
Compartir Articulo: