Ajax form an multi-select

I have a form which provides select2 when the select1 is changed. However I would like select2 to be a multi-select. I can’t seem to get this to work. It populates a single select input just fine, but not the multi-select. Any tips would be appreciated.

public function buildForm(array $  form, FormStateInterface $  form_state, $  options = NULL) {   $  form['expeditions'] = [     '#type' => 'select',     '#title' => $  this->t('Choose Project'),     '#empty_option' => $  this->t('Select a project'),     '#default_value' => '',     '#options' => $  options,     '#ajax' => [       'callback' => '::getDeployments',       'wrapper' => 'deployment-wrapper',     ],   ];    // Disable caching on this form.   $  form_state->setCached(FALSE);    $  form['deployment_wrapper'] = [     '#type' => 'container',     '#attributes' => ['id' => 'deployment-wrapper'],   ];    return parent::buildForm($  form, $  form_state); }  public function getDeployments(array &$  form, FormStateInterface $  form_state) {   $  expedition_id = $  form_state->getValue('expeditions');   if ($  expedition_id != "") {     $  arms_config = \Drupal::config('arms.settings');     $  rest_root = $  arms_config->get("arms_rest_uri");      $  client = \Drupal::service('http_client');     try {       $  result = $  client->get(         $  rest_root . 'arms/projects/' . $  expedition_id,         ['Accept' => 'application/json']       );       $  expedition = json_decode($  result->getBody());     }     catch (RequestException $  e) {       watchdog_exception('arms', $  e);       drupal_set_message('Error fetching project.', 'error');     }   }    $  options = [];    foreach ($  expedition->{'deployments'} as $  deployment_id) {     array_push($  options, $  deployment_id);   }    $  form['deployment_wrapper']['deployments'] = [     '#type' => 'select',     '#title' => $  this->t('Choose Deployment(s)'),     '#options' => $  options,     '#multiple' => TRUE,   ];    return $  form['deployment_wrapper']; } 

eliminar y crear un nuevo elemento en el DOM con JS y AJAX

Tengo un problema a la hora de crear un nuevo icono.

Lo primero que hago es listar los usuarios a mediante un bucle:

    <div class='plan'>                 <h2 class='plan-title'><?php echo $  nexo->getNombreModelo(). ' ' . $  nexo->getApellidosModelo(). ' ' .$  nexo->getId(). ' ' .$  nexo->getConfirmacion() ?></h2>                 <h2 class='plan-title' id="costeHora"><?php echo $  nexo->getCosteHora() . ' €/H' ?></h2>                 <img class='foto' src='../img/<?php echo $  nexo->getFoto() ?>'>                 <ul class='datos-empleado'>                     <li><strong>ID: </strong><?php echo $  nexo->getIdEmpleadoModelo() ?></li>                     <li><strong>DEPARTAMENTO: </strong><?php echo $  nexo->getDepartamento() ?></li>                     <li><strong>EMAIL: </strong> <?php echo $  nexo->getEmail() ?> </li>                     //con este método pinto los iconos                     <?php echo $  this->pintarAsistencia($  nexo->getConfirmacion(), $  nexo->getId() ); ?>                      <div class="btn-anula-invitacion" data-id-costeEmpleado="<?php echo $  nexo->getCosteHora() ?>"                     data-id-reunion="<?php echo $  nexo->getIdReunion_fk() ?>"                      data-id-nexo="<?php echo $  nexo->getId() ?>"><i class="fas fa-user-slash"></i></div>                 </ul>             </div> 

este es el método con el que pinto esos iconos (el que llamo desde el bucle):

public function pintarAsistencia($  valorConfirmacion, $  idNexo){      if($  valorConfirmacion == 0){          echo "<div class='btn-confirma-invitacion' data-id-nexo='".$  idNexo."'><i class='fas fa-question-circle'></i></div>";     }else{         echo "<div><i class='fas fa-check-circle'></i></div>";     } } 

Todo esto hace que se muestre una vista en la que aparece mi lista de empleados con los siguientes valores:

introducir la descripción de la imagen aquí

Cuando abro la página, el bucle llama a la BBDD y lee un campo en la tabla del empleado que tiene 1 o 0. Si tiene 1, pinta un check verde, pero si tiene un 0, pinta una interrogación amarilla.

A la hora de confirmar la asistencia, quiero hacer click en la interrogación amarilla, que esta se convierta en un check verde y no se pueda hacer click de nuevo en ese icono.

Para eso he hecho lo siguiente:

    function confirmarInvitacion(e) {  //Recojo el btn-confirma-invitacion que pinto con mi método pintarAsistencia().      if (e.target.parentElement.classList.contains('btn-confirma-invitacion')) {  //recojo este parámetro que voy a enviar al controlador         const idNexo = e.target.parentElement.getAttribute('data-id-nexo');          console.log(idNexo);         const xhr = new XMLHttpRequest(); //Mando toda la información al controlador y este inserta mi registro.         xhr.open('GET', `../controller/empleado_reunion_controlador.php?idNexo=$  {idNexo}&accion=confirmar`, true);          xhr.onload = function() {             if (this.status === 200) {                 console.log(xhr.responseText);                 Swal.fire({                     position: 'center',                     type: 'success',                     title: 'Asistencia confirmada',                     showConfirmButton: false,                     timer: 1500                 })                 setTimeout(() => {  //Aquí viene el  problema. Elimino el icono de interrogación (porque ya ha confirmado)                     e.target.remove();  //creo un icono de check verde nuevo.                     const iconoConfirmado = document.createElement('i');                     iconoConfirmado.classList.add('fas', 'fa-check-circle');  //lo meto dentro de mi btn-confirma-invitacion.                      const botonNuevo = document.querySelector('.btn-confirma-invitacion');                     botonNuevo.appendChild(iconoConfirmado);                 }, 2000);             }          }          xhr.send();     } } 

Ahora lo que ocurre, es que el icono de la interrogación se elimina y elcheck verde aparece en el primer registro que el DOM encuentra con un btn-confirmar-invitacion. Adjunto imagen de lo que ocurre.

introducir la descripción de la imagen aquí

Si refresco la página, todo se pinta correctamente.

¿Alguien sabe como puedo hacer para que al hacer click en la interrogación, me pinte el check verde en el mismo registro en el que estoy?

Espero haber sido claro!! gracias por la ayuda!!!

Ajax Laravel pasar parametros y recibir la respuesta

Hola buenas me gustaria pasarle a mi funcion del controlador 2 paramatetros para hacer una consulta y me devuelva el valor de la misma, pero no consigo como hacerlo esta es mi llamada ajax

$  .ajax({     type: "GET",     url: "precio",     data: {tabla, nombre},     dataType: 'json',     success : function (response)     {            resultado = response;        } }); 

y esta es la funcion que tiene que recoger los parametros y hacer la consulta

   public function precio(request $  request){      $  tabla = $  request->tabla;     $  nombre = $  request->nombre;     if ($  tabla == "bebidas"){         $  precio = Bebida::where('precio', $  nombre)->get();     } elseif ( $  tabla == "comidas"){         $  precio = Comida::where('precio', $  nombre)->get();     } else {         $  precio = Postres::where('postres')->where('precio',  $  nombre)->get();     }      return view('home', compact('precio')); } 

Y luego supongo que con el response ya obtengo el precio. Tampoco se si la consulta es la correcta para obtener el precio de nombre que le paso

Problema al poner el result de mi ajax como autocomplete de un input

sigo con el tema del buscador en tiempo real, esta vez abarco otras cuestiones que, aunque esten relacionadas, no tienen nada que ver.

Tengo el siguiente AJAX:

<script>         $  (document).ready(function() {             $  ('#key').on('keyup', function() {             var key = $  (this).val();                     console.log(key);             var dataString =key;         $  .ajax({                 type: "POST",                 url: "../clases/Search.php",                 data: {key: dataString},                 success: function(data) {                     if (data) {                          // //Escribimos las sugerencias que nos manda la consulta                          //    $  ('#suggestions').fadeIn(1000).html(data);                          //    //Al hacer click en alguna de las sugerencias                          //    $  ('.suggest-element').on('click', function(){                          //            //Obtenemos la id unica de la sugerencia pulsada                          //            var id = $  (this).attr('id');                          //            //Editamos el valor del input con data de la sugerencia pulsada                          //            $  ('#key').val($  ('#'+id).attr('data'));                          //            //Hacemos desaparecer el resto de sugerencias                          //            $  ('#suggestions').fadeOut(1000);                          //            alert('Has seleccionado el '+id+' '+$  ('#'+id).attr('data'));                          //            return false;                          //    });                              var source = "source:"+data;                             $  ( "#key" ).autocomplete({                                 lookup: Preguntas Recientes - Stack Overflow en español,                                 onSelect: function (suggestion) {                                     alert('You selected: ' + suggestion.value + ', ' + suggestion.data);                                 }                             });                      }                     else{                         //$  ("#key").val("");                     }                  }             });            });     });      </script> 

La variable data contiene un array del objeto usuario :

<?php     include_once 'UsuarioHandler.php';     $  key=$  _POST['key'];      $  uh = new UsuarioHandler();      $  html = '';     $  usuarios =  array();      $  usuarios =  $  uh->findLikeApellidos($  key);      if ($  usuarios!= null) {          //este array es para la primera form que si funciona          // foreach($  usuarios as $  usuario) {         //     $  html .= '<div>         //     <a class="suggest-element"          //     data="'.'"          //     id="'.$  usuario['id'].'"         //     >'.$  usuario['nombre']." ".$  usuario['apellidos'].'</a></div>';          //     //$  html .= "<p>".$  usuario['nombre']."</p>";         // }               echo $  usuarios;      }       else{        // $  html.="vacio!";         echo "vacio!";     }          //return de la primera forma que SI funciona     //echo $  html;    ?> 

Lo que tengo comentado si me lo hacia bien, pero l que pretendo ahoa es que el data (que es el array de usuarios) me lo añada al input a forma de sugerencia.

Por eso dentro del ajax he metido la funcion de Jquery autocomplete para que a medida que vaya cambiando el resultado vaya actualizando las sugerencias, pero cuando empieza a buscar me da el siguiente error:

jquery-ui.js:6015 Uncaught TypeError: this.source is not a function     at $  .<computed>.<computed>._search (jquery-ui.js:6015)     at $  .<computed>.<computed>._search (jquery-ui.js:144)     at $  .<computed>.<computed>.search (jquery-ui.js:6007)     at $  .<computed>.<computed>.search (jquery-ui.js:144)     at $  .<computed>.<computed>.<anonymous> (jquery-ui.js:5988)     at handlerProxy (jquery-ui.js:641) 

Dúvidas com post em ajax

tudo bom? Então… Estou precisando enviar post para sites que não pertencem a mim, porém estou sendo bloqueado com o seguinte error:

Access to XMLHttpRequest at ‘https://site.com/’ from origin ‘https://outrosite.com’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

Alguém sabe como resolver?

Error al enviar múltiples imágenes por ajax

Estoy trabajando en un sistema en el cual una de las funcionalidades principales es la carga de múltiples imágenes, este sistema lo estoy trabajando en codeigniter 3.

El problema: al momento de enviar el formulario todo excepto el input donde se carga las multiples imagenes me lo reconoce del lado del php, al enviar me genera el siguiente error del lado del codeigniter. Este error corresponde a esta linea:

$  count_file = count($  _FILES['file']['name']); 

file es el nombre del input por el cual se cargan las imagenes

<input type="file" name="file[]" multiple accept="image/*" maxImg="5" id="file"> 

Como sabrán para enviar varios archivos se tiene que enviar dentro de un array.

introducir la descripción de la imagen aquí

Este es mi codigo con el cual envio el formulario

$  ('#frm_register_post').submit(function (ev) {      alert('Registrando');      $  .ajax({          url: $  (this).attr("action"),          type: $  (this).attr("method"),          dataType: 'json',          ansyc: true,          data: $  (this).serialize(),          success: function (data) {              console.log(data);              if (!data.error) {                  alert(data.Mens);                  window.setTimeout('location.href = "user/perfil"', 1000);              } else {                  alert(data.Mens);                  $  ('#muestra_e').hide();                  $  ('#form_e').show();              }          },          error: function () {              alert('Disculpe exitio un error de servidor al enviar los datos, intente mas tarde.');              $  ('#muestra_e').hide();              $  ('#form_e').show();          }      });      ev.preventDefault();  }); 

Alguien podría decirme el por que me sale este error y como solucionarlo.

Cabe resaltar que, sin el ajax todo funciona bien, pero quiero que al momento de enviar el formulario se muestre algún tipo de mensaje.

Cómo pasar un arreglo de checkbox con una clase en especifico (los activos) por Ajax a un archivo PhP

Estoy trabajando con un catálogo de productos, lo que pasa es que necesito juntar tanto la paginación como el filtrado de los mismos para que sean dinámicos (con Ajax).

Hasta ahorita ya he logrado que la paginación sea dinámica, lo que pasa es que en mi archivo de paginación (el cual llamo con Ajax) es donde le estoy diciendo que la consulta sea en base a los productos de esa categoría, pero quiero agregarle obviamente los filtros.

Tengo un aside que es donde se están generando todos los input checkbox, los cuales ya tienen un value en especifico (para la consulta) y todos pertenecen al mismo arreglo (name=subcategorias).

Lo que pasa es que ya agregué una función en javascript la cual les agrega una clase de activos a todos los checkbox que fueron clickeados, entonces lo que quiero hacer es que dentro del data del script Ajax, pueda mandarle el arreglo de checkbox que tienen esa clase (para solamente filtrar por los que fueron clickeados).

Lo que ya intenté es mandarle por Json un array serializado de todos los que tengan class=”active-checkbox”, y dentro del archivo php de paginación hacer un json_decode del GET de ese atributo que envié, pero lamentablemente no me funcionó bien (no sé si lo hice correctament).

Script Ajax y funciones

function getresult(url,data) {     $  .ajax({         url: url,         type: "GET",         data: {             rowcount: $  ("#rowcount").val(),             "mobileSubCat": data,             "pagination_setting": $  ("#pagination-setting").val(),             "subcategorias": JSON.stringify($  ('[class="active-checkbox"]').serializeArray())         },         beforeSend: function() {             $  ("#overlay").show();         },         success: function(data) {             $  ("#pagination-result").html(data);             $  ("#overlay").hide();         },         error: function() {}     }); }  function changePagination(option) {     if (option != "") {         getresult("<?php echo $  httpProtocol.$  host.$  url;?>catalogo/getResult.php");     } }  $  ('.selectSubCat').change(function(){     var data = $  (this).val();     getresult("<?php echo $  httpProtocol.$  host.$  url;?>catalogo/getResult.php",data); });  function checkCheckBox(element){     var isChecked = element.checked;     if(isChecked){         element.classList.add('active-checkbox');     }else{         element.classList.remove('active-checkbox');     }     // Llamamos al Ajax para que haga el refresh con el nuevo select     var data = '';     getresult("<?php echo $  httpProtocol.$  host.$  url;?>catalogo/getResult.php",data); } 

Código PhP de paginación

<?php     session_start();     require_once("../php/class/pagination.php");     require_once("../php/dbcontroller.php");     require("../php/class/productos.php");     require("../php/class/producto_galeria.php");     require("../php/class/categorias.php");     require("../php/class/subcategorias.php");     $  db_handle = new DBController();     $  perPage = new PerPage();     $  galerias = new Producto_galeria();      $  paginationlink = "getResult.php?page=";         $  pagination_setting = $  _GET["pagination_setting"];      $  mobileSelectSubCat = 1;     if(isset($  _GET["mobileSubCat"])){         $  mobileSelectSubCat = $  _GET["mobileSubCat"];         if($  mobileSelectSubCat >= 1){             echo "Entre al if 1";            }     }      if(isset($  _GET["subcategorias"])) {         if (is_array(json_decode($  _POST["subcategorias"],TRUE)) {             $  selected = '';             $  num_subcategorias = count($  _POST["subcategorias"]);             $  current = 0;             foreach ($  _POST["subcategorias"] as $  key => $  value) {                 if ($  current != $  num_countries-1)                     $  selected .= $  value.', ';                 else                     $  selected .= $  value.'.';                 $  current++;             }         }         else {             $  selected = 'No has seleccionado una subcategoría';         }     }      $  id_categoria_pag = $  _SESSION["id_categoria"];     $  sql = "SELECT * from ws_producto where id_categoria = '.$  id_categoria_pag.' and status_producto = 1";      $  page = 1;     if(!empty($  _GET["page"])){         $  page = $  _GET["page"];     }      $  start = ($  page-1)*$  perPage->perpage;     if($  start < 0){         $  start = 0;        }      $  query =  $  sql . " limit " . $  start . "," . $  perPage->perpage;      $  faq = $  db_handle->runQuery($  query);      if(empty($  _GET["rowcount"])){         $  _GET["rowcount"] = $  db_handle->numRows($  sql);     }      if($  pagination_setting == "prev-next"){         $  perpageresult = $  perPage->getPrevNext($  _GET["rowcount"], $  paginationlink,$  pagination_setting);      } else {         $  perpageresult = $  perPage->getAllPageLinks($  _GET["rowcount"], $  paginationlink,$  pagination_setting);      }      $  output = '';      if (is_array($  faq) || is_object($  faq)){         foreach($  faq as $  k=>$  v){             $  consulta = $  galerias->imagen_tabla($  db_handle->connectDB(),$  faq[$  k]["id_producto"]);             $  var = mysqli_fetch_array($  consulta);              $  output .= '<div class="card grid__item">                             <div class="product">                                 <div class="product__bg"></div>                                 <img src="../images/productos/'.utf8_encode($  var["url_galeria"]).'" class="border product__img border-dark image-responsive" alt="Imagen Representativa de producto">                                 <h2 class="product__title">'.utf8_encode($  faq[$  k]["nombre_producto"]).'</h2>                                 <p class="product__subtitle"></p>                                 <p class="product__description">'.utf8_encode($  faq[$  k]["descripcion_producto"]).'</p>                                 <button class="product__price"></button>                             </div>                         </div>';         }     }     if(!empty($  perpageresult)){         $  output .= '<div class="container"><div id="pagination">' . $  perpageresult . '</div></div>';     }      print $  output; ?> 

El estado actual del sitio lo pueden ver en: https://demos.posicionart.com/silleri/catalogo/mesas-y-escritorios.php

Search result page with tabs and ajax pagination

I need to create a results search page with those characteristics:

  • The page will have different tabs (like the bootstrap ones so no page reload), each tab will only shows the relative content type. There needs to be a “all” tab with all the content as well

  • Each tab needs to have a “load more” button on the bottom for ajax pagination

I can alter the search-results template and having the tabs, but I don’t know how to integrate an ajax pagination on each singular tab by using drupal functions (or using Views Infinite Scroll if it will be a view)

Any hints?

How to apply js and css to ajax loaded content?

When content get loaded through ajax, neither theme.css or js get applied. Below is code snippet,

controller

    $  twig = \Drupal::service('twig');         $  twigFilePath = drupal_get_path('module', 'mythemename') . '/templates/test.html.twig';         $  template =  $  twig->loadTemplate($  twigFilePath);       $  markup = $  template->render(array('gainerList' => $  gainerList, 'loseList' => $  looserList));          $  build = array(             '#type' => 'markup',             '#markup' => $  markup,             '#attached' => array(                 'css' => array(                     drupal_get_path('themes', 'mythemename') . '/css/theme.css'                 )             )         );         return new Response(render($  build)); 

Is there any issue with above code?

Also below testing code does not hide the second

.

 $  build = array(             '#type' => 'markup',             '#markup' => '<p>Demo text content</p> <p style="display:none">Demo text content</p>',         );         return new Response(render($  build)); 

Js file code snippet:

(function ($  , Drupal) {   'use strict';    Drupal.behaviors.company = {     attach: function(context, settings) {         $  .ajax({                 url: "get-top-performing-fund",                 type: 'GET',                 success:function(data, error){                     console.log(data);                     $  ('#topPerforming').html();                     $  ('#topPerforming').html(data);                 }         });     } } })(jQuery, Drupal);