Foros del Web » Programando para Internet » Jquery »

[SOLUCIONADO] Editar registros según checkbox seleccionados con $.ajax

Estas en el tema de Editar registros según checkbox seleccionados con $.ajax en el foro de Jquery en Foros del Web. Buenas noches gente del Foro, hace tiempo que no me pasaba por aquí y lamentablemente vuelvo con una consulta El tema es así, tengo un ...
  #1 (permalink)  
Antiguo 31/03/2016, 01:34
 
Fecha de Ingreso: mayo-2011
Ubicación: Córdoba Capital
Mensajes: 15
Antigüedad: 8 años, 6 meses
Puntos: 1
Pregunta Editar registros según checkbox seleccionados con $.ajax

Buenas noches gente del Foro, hace tiempo que no me pasaba por aquí y lamentablemente vuelvo con una consulta

El tema es así, tengo un listado de usuarios en donde puedo activar o inactivar su acceso a un sitio web cambiado su estado. Individualmente y por medio de un $.ajax logro cambiar su estado sin actualizar el sitio entero (para que se entienda, el usuario que tiene estado activo aparece con un iconito verde de "check". Si le hago clic a ese icono, automáticamente se convierte en un iconito rojo con una X. Obviamente, previa consulta de si desea o no modificar el registro).
Esto es hermoso ya que cambias el estado sin actualizar todo el sitio y demás.

Ahora bien, he colocado unos checkbox para poder hacer esto mismo pero de más de 1 usuario. Por medio de la siguiente linea de código he logrado obtener todos los ID seleccionados por los checkbox:

Código:
$('#btnAccessOnAll').click(function(){ 
		var changeStatusAllUser = confirm("Confirma DESBLOQUEO de acceso?");
		
		if(changeStatusAllUser){

			var selectedItems = new Array();
			
			$('#form_user_list input[type=checkbox]').each(function(){
				if (this.checked) {
					selectedItems.push($(this).val());
				}
			});
	
			$("#ActionLoading").modal('show'); //Modal c/ msj de "actualizando"
				$.ajax({
					type: "POST",
					data: selectedItems, //Recibo toooodos los ID's
					url: "../inc/querys.php?idusersaccess="+selectedItems,
					success:function (data)
						{
						if(data != '')
							{

//La pregunta es ¿Qué pongo acá, para que cada usuario que se selecciono por los checkbox, cambíe su icono como corresponde? Osea, lo mismo que explique arriba cuando lo hago de a un usuario, pero ahora que cambie todos los iconos juntos.
//Podría poner:
//$('#userstatus').hide(); //Oculto el div que tiene el estado viejo
//$('#userstatusnew').html(data).show(); // Muestro el div con el nuevo estado
//
//Pero esto solo cambia el icono del primer ID recibido, y los demás ID's cambian su estado (en la BD) pero no modifican el icono.
//Obviamente, si actualizo la página todos los cambios se hicieorn correctamente, pero justamente lo que quiero es evitar actualizar el sitio.

							$("#ActionLoading").modal('hide'); //Oculto modal
							}
							else
								{
								alert('No se ha podido realizar la operación');
								}
						}             
				});
		}
    });              
});
Espero que se entienda lo que consulto. Me pone de la "cucuza" porque he buscando en SanGoogle pero poco he encontrado =(

Si es posible una ayudita grandioso, sino con un "espero logres hacerlo funcionar" me conformo

Abrazo grande y espero sus comentarios.

PD:
Por si necesitan el código del querys.php se los dejo acá abajo:

Código PHP:
if(isset($_REQUEST['idusersaccess']))
    {
    
$selectedItems explode(",",$_REQUEST['idusersaccess']); 
    foreach(
$selectedItems as $items)
        {
                
//Actualizo el estado del usuario
        
mysql_query("UPDATE usuarios SET ustatus = '1' WHERE uid = '$items'");

                
//Busco el nuevo estado
        
$checkstatus mysql_query("SELECT * FROM usuarios WHERE uid = '$items'");
        
$checkinfostatus mysql_fetch_array($checkstatus);
        
$newstatus $checkinfostatus['ustatus'];

                
//El "data" que regresa es este nuevo link:
        
echo '
        <a data-id-a="'
.$checkinfostatus['uid'].'" data-id-b="'.$checkinfostatus['ustatus'].'" class="btnaccess">
            <i class="icon-full-access"></i>
        </a>'
;
        }
    } 
Salu2! ^^
  #2 (permalink)  
Antiguo 31/03/2016, 10:09
 
Fecha de Ingreso: diciembre-2015
Ubicación: rosario
Mensajes: 69
Antigüedad: 4 años
Puntos: 5
Respuesta: Editar registros según checkbox seleccionados con $.ajax

hola podrias poner el html donde esta el input chekbox, el iconito nombre de usuario y demas
  #3 (permalink)  
Antiguo 31/03/2016, 14:22
 
Fecha de Ingreso: diciembre-2015
Ubicación: rosario
Mensajes: 69
Antigüedad: 4 años
Puntos: 5
Respuesta: Editar registros según checkbox seleccionados con $.ajax

En fin... yo lo haria aca

Código Javascript:
Ver original
  1. $('#form_user_list input[type=checkbox]').each(function(){
  2.   if (this.checked) {
  3.       selectedItems.push($(this).val());
  4.       $(this).find('el icono del check').addClass('elotroicono');
  5.   }
  6. });

y si lo queres hacer aca
tenes q hacer un for in del array donde tenes los ID y con estos buscar el icono q le corresponde y modificarlo , como arriba
Código Javascript:
Ver original
  1. $.ajax({
  2.                     type: "POST",
  3.                     data: selectedItems, //Recibo toooodos los ID's
  4.                     url: "../inc/querys.php?idusersaccess="+selectedItems,
  5.                     success:function (data)
  6.                         {
  7.                         if(data != '')
  8.                             {
  9.  
  10. //La pregunta es ¿Qué pongo acá, para que cada usuario que se selecciono por los checkbox, cambíe su icono como corresponde? Osea, lo mismo que explique arriba cuando lo hago de a un usuario, pero ahora que cambie todos los iconos juntos.
  11. //Podría poner:
  12. //$('#userstatus').hide(); //Oculto el div que tiene el estado viejo
  13. //$('#userstatusnew').html(data).show(); // Muestro el div con el nuevo estado
  14. //
  15. //Pero esto solo cambia el icono del primer ID recibido, y los demás ID's cambian su estado (en la BD) pero no modifican el icono.
  16. //Obviamente, si actualizo la página todos los cambios se hicieorn correctamente, pero justamente lo que quiero es evitar actualizar el sitio.
  17.  
  18.                             $("#ActionLoading").modal('hide'); //Oculto modal
  19.                             }
  20.                             else
  21.                                 {
  22.                                 alert('No se ha podido realizar la operaci&oacute;n');
  23.                                 }
  24.                         }            
  25.                 });
  #4 (permalink)  
Antiguo 02/04/2016, 17:25
 
Fecha de Ingreso: mayo-2011
Ubicación: Córdoba Capital
Mensajes: 15
Antigüedad: 8 años, 6 meses
Puntos: 1
Respuesta: Editar registros según checkbox seleccionados con $.ajax

Hola infoturnosya, gracias por responder.
Mirá, este es el form entero y dentro está la tabla de usuarios:

Código HTML:
<form name="form_user_list" id="form_user_list" method="get" action="">
    <table id="UserTable" cellpadding="0" cellspacing="0" border="0" class="tablesorter">
        <thead>
            <tr>
                <th class="select tac">&nbsp;</th>
                <th class="tienda tal">Tienda</th>
                <th class="repre_tienda tal">Nombre Usuario</th>
                <th class="more_info_user tac">&nbsp;</th>
                <th class="registro tac">Registro</th>
                <th class="acceso tac">Acceso</th>
            </tr>
        </thead>
        <tbody>
            <?php
            while($infouserlist = mysql_fetch_array($queryuser))
                {
                $fecharegistro = convertir_fecha_calendario($infouserlist['udatereg']);
            ?>
            <tr>
                <td class="select tac">
                    <input type="checkbox" name="update[]" id="update[]" value="<?php echo $infouserlist['uid'];?>" />
                </td>
                <td class="tienda tal">
                    <?php
                    echo utf8_encode(ucwords(strtolower($infouserlist['utienda'])));
                    if(empty($infouserlist['utienda']))
                        {
                        echo utf8_encode(ucwords(strtolower($infouserlist['ufname']." ".$infouserlist['ulname'])));
                        }
                    ?>
                </td>
                <td class="repre_tienda tal">
                    <?php echo utf8_encode(ucwords(strtolower($infouserlist['ufname']." ".$infouserlist['ulname']))); ?>
                </td>
                <td class="more_info_user tac"><a data-toggle='modal' data-id="<?php echo $infouserlist['uid']; ?>" href="#infoDetalleUser" class="btn-more-info-user"><i class="icon-search-more"></i></a>
                </td>
                <td class="registro tac"><?php echo $fecharegistro; ?></td>
                <td class="acceso tac">

                <!-- Acá está el link con el icono de acceso. -->
                <!-- Según el estado, será el icono que se muestre. -->

                <div id="userstatus<?php echo $infouserlist['uid']; ?>">
                <?php
                if($infouserlist['ustatus'] != '0')
                    {
                    echo '
                    <a data-id-a="'.$infouserlist['uid'].'" data-id-b="'.$infouserlist['ustatus'].'" class="btnaccess">
                        <i class="icon-full-access"></i>
                    </a>';
                    }
                    else
                        {
                        echo '
                        <a data-id-a="'.$infouserlist['uid'].'" data-id-b="'.$infouserlist['ustatus'].'" class="btnaccess">
                            <i class="icon-cancel-access"></i>
                        </a>';
                        }
                ?>
                </div>
                <div id="statusnew<?php echo $infouserlist['uid']; ?>"></div>
                </td>
            </tr>
            <?php
                }
            ?>
        </tbody>
    </table>
    </form> 
Como podrás ver, son dos div's los que hacen referencia al status del usuario:
Una es "userstatusID" y la otra "statusnewID".
En "userstatusID" se carga el icono del estado cuando la pagina se carga por primera vez. Luego, si yo hago clic en el icono de status para cambiarlo, con la llamada $.ajax hago que el div "usertatusID" se oculte y el contenido de "data" se cargue en el div statusnewID.

En resumen, logro obtener los ID's de los usuarios a los que les quiero cambiar el estado, los mismos se guardan en el array, los envío a querys.php y en el mismo la consulta se ejecuta correctamente ya que todos los estados se cambian.
El tema está en el "success" de la llamada. Como no le he puesto nada.. se ejecuta la llamada y obviamente no me muestra nada, pero si actualizo la pagina observo que todos los estados se cambiaron correctamente.

Yo quiero poder mostrar los cambios sin tener que actualizar la página, exactamente como logro poder hacerlo si cambio los estados de a uno, haciendo clic en los iconos de cada usuario.
Por eso mi duda es como hacer para poder ocultar statususerID y mostrar statusnewID pero de todos los usuarios a los que se le modificó el estado.

Sigo leyendo sobre lo que me pusiste para hacer pero no prometo nada.
Recién empiezo con esto de jquery y ajax, así que si es mucho lío dejaré nomas que se actualice la página y seguiré leyendo para aprender.

Muchas gracias de antemano por tu ayuda.

Salu2! ^^
  #5 (permalink)  
Antiguo 03/04/2016, 14:35
 
Fecha de Ingreso: mayo-2011
Ubicación: Córdoba Capital
Mensajes: 15
Antigüedad: 8 años, 6 meses
Puntos: 1
Respuesta: Editar registros según checkbox seleccionados con $.ajax

Bueno, seguí investigando como me propuso el amigo "infoturnosya" y encontré más o menos una solución con la funcion each.

El código quedaría más o menos así:

Código:
if(data != '')
	{
	$.each(selectedItems, function (indice, elemento)
		{ 
		$('#userstatus'+elemento).hide();
		$('#statusnew'+elemento).html(data).show();
		});
	$("#ActionLoading").modal('hide');
	}
	else
		{
		alert('No se ha podido realizar la operaci&oacute;n'); //Muestro un alert
		}
}
Bueno, de esa forma, logro que los iconos de estado se cambien correctamente sin actualizar la página.

Ahora tengo que buscar como hacer que lo que devuleve el querys.php vuelva, como decirlo, en partes..
Para que me entiendan, lo explico con un ejemplo:

Yo selecciono 3 checkbox y le doy a "cambiar estado". Los 3 ID's van a querys.php, este último realiza el update y me regresa los 3 links que irían en la capa statusnewID de cada usuario.
El tema es que vienen los 3 links juntos, o sea.. "data" son los 3 links, por ende, se cargan los 3 juntos dentro de cada div statusnew =(

Estoy por probar cambiar el funcionamiento como puso infoturnosya en su ejemplo.
En vez de hacer que un div se oculte y otro se muestre, voy a hacer un .removeClass() y un .addClass(), a ver si así logro hacerlo andar correctamente.

Lo mismo la consulta que yo hice aquí se podría decir que está solucionada.
Ahora me queda este otro punto por atender je.

Muchas gracias al compañero infoturnosya por su ayuda y obviamente, a toda la comunidad de Foros del Web.
  #6 (permalink)  
Antiguo 05/04/2016, 19:17
 
Fecha de Ingreso: mayo-2011
Ubicación: Córdoba Capital
Mensajes: 15
Antigüedad: 8 años, 6 meses
Puntos: 1
Respuesta: Editar registros según checkbox seleccionados con $.ajax

Buenas compañeros, al final conseguí hacer lo que quería.
Les dejo como me quedó el código por si alguno lo quiere usar y/o modificar a su gusto.
Seguro se podrá mejorar, de eso no me cabe la menor duda, pero para lo que estoy armando me funciona de diez.

Código Javascript:
Ver original
  1. $(document).ready(function() {
  2.     $('#btnAccessOnAll').click(function(){ //Si se hace click en link
  3.         var changeStatusAllUser = confirm("Confirma DESBLOQUEO de acceso?");
  4.        
  5.         if(changeStatusAllUser){
  6.  
  7.             var selectedItems = new Array();
  8.            
  9.             $('#form_user_list input[type=checkbox]').each(function(){
  10.                 if (this.checked) {
  11.                     selectedItems.push($(this).val());
  12.                 }
  13.             });
  14.    
  15.             $("#ActionLoading").modal('show');
  16.                 $.ajax({
  17.                     type: "POST",
  18.                     data: selectedItems, //Recibo los ID's
  19.                     url: "../inc/querys.php?idusersaccess="+selectedItems, //Mando a pagina php
  20.                     success:function (data)
  21.                         {
  22.                         if(data != '')
  23.                             {
  24.                             $.each(selectedItems, function (indice, elemento)
  25.                                 {
  26.                                 $('.select input').prop("checked", false); //Destildo los checkbox
  27.                                 $('#userstatus'+elemento+' a').attr("data-id-b","1"); //Cambio Valor Atributo
  28.                                 $('#userstatus'+elemento+' i').removeClass('icon-cancel-access').addClass('icon-full-access'); //Cambio Icono
  29.                                 });
  30.                             $("#ActionLoading").modal('hide');
  31.                             }
  32.                             else
  33.                                 {
  34.                                 alert('No se ha podido realizar la operaci&oacute;n'); //Muestro un alert
  35.                                 }
  36.                         }
  37.                 });
  38.         }
  39.     });              
  40. });

Saludos y como siempre, muchas gracias!

Si algún moderador lo desea, puede dar como cerrado este tema.

Etiquetas: ajax, checkbox, registros, según, seleccionados
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:10.