Mensajes

Hola buenas! Tengo un pequeño problema para terminar un formulario animado con sliders y checkboxes.

Hay un slider principal que muestra y oculta checkboxes al moverse. Los checkboxes crean sliders y el problema es el siguiente:

Cuando muevo el slider principal para mostrar los checkboxes y checkeo un checkbox para que genere otro slider, al mover el slider principal y ocultarse el checkbox checkeado el slider creado sigue visible pero deberia ocultarse. Para ello necesito generar la id del slider, pero es algo complicado.

Así es como muestro los checkboxes y supongo que aquí es donde debería generar los ids de los sliders creados:

Código (jquery) [Seleccionar] Expandir

$("#slider").slider({
min: 1,
max: 30,
value: 1,

slide: function( event, ui ) {
$( "#result" ).html( ui.value );

var startx = 1;
var slider = $("#slider-10"); // ESTE ES EL NUMERO

$("input:checkbox").hide();
$('label').hide();
if ($("input:checkbox").is(":checked")) {
slider.hide();
}

$(new Array(ui.value)).each(function () {
// Get elements ID
var checkbox = $("#checkbox-" + startx);
var label = $("#label-" + startx);
var slider = $("#slider-" + startx);

checkbox.show();
label.show();
if ($(checkbox).is(":checked")) {
slider.show();
}

startx++;
});
}
});


Para que se pueda entender mejor dejo un link a jsfiddle: http://jsfiddle.net/t4dL6n7L/1/

Gracias!

Edito: Ya lo arreglé, creando una función y usando filtros.

Vale gracias, voy a dar el problema por solucionado (porque ya lo solucionaste hace varios mensajes). Abrire otro para otro problema.

Muchas gracias

Gracias esta funcionando, pero ¿sabes por qué los sliders creados se resetean (el valor) al mover el primer slider? Según la comprobación solo deberían ocultarse.

Ya tengo algo mas solido, el problema es que no consigo obtener el id del checkbox seleccionado:

Código (jquery) [Seleccionar] Expandir

$('body').on('click', '#showChck input', function() {
   var $id = event.target.id;  // ID DEL CHECKBOX
       $( "#test" ).val($id);
       if ($("#slider-" + $id).length) { // COMPROBAR SI EXISTE
           $("#slider-" + $id).fadeToggle();
   }
       else { // SI NO EXISTE SE CREA
           $("#showSldr").append(
                 $('<div></div>', {id: "slider-" + $id, class: "slider", }),
                 $('Lineas: <span>1</span>', {id: 'result-' + $id}).text($id)
            );
   }
});


Ya casi lo tengo! Jejeje

Edito: Me empané! El id del checkbox sera: checkbox-XX y solo necesito el numero...

Aunque realmente no me importa que el id del slider sea "slider-checkbox-XX". Mientras funcione me conformo

Edito2: Vale ya lo arreglé usando this.id

Ahora necesito saber como puedo inicializarlos, seguramente será justo despues de que se crean habra que añadirlo. Voy a probar.

Edito3: Si que funciona, pero encontre un problema:
Si hay un checkbox activado y mueves el primer slider el activado se desactiva pero el slider sigue visible, y al activarlo se oculta el slider (justo al reves de como debería funcionar).

Asi quedó el código:

Código (jquery) [Seleccionar] Expandir

$('body').on('click', '#showChck input', function() {
   var x = this.id;
   var $id = x.replace(/\D/g, '');

   if ($("#slider-" + $id).length) {
       $("#slider-" + $id).fadeToggle();
       $("#result-" + $id).fadeToggle();
   }
   else {
       $("#showSldr").append(
           $('<div/>', {id: "slider-" + $id, class: "slider"}),
           $('<span/>', {id: 'result-' + $id}).text('4')
       );
       $("#slider-" + $id).slider({
           min: 4,
           max: 100,
           value: 4,
           step: 2,
           slide: function( event, ui ) {
               $( "#result-" + $id ).html( ui.value );
           }
       });
   }
});

Estoy intentando hacer pruebas a ver si consigo que si el checkbox esta desactivado pero el slider esta visible pues que al activarlo no se oculte por el toggle...

¿De esa manera funcionaria lo que quiero hacer? Por ejemplo, si tengo 10 checkbox y quiero selecionar el tercero se tendria que crear un slider con el id 3 y si seleciono otro, el 7, se crearia otro slider con el id 7.

¿Es posible hacerlo?

Gracias.

Cuando se le da click a un checkbox debería crearse un slider ligado al checkbox (al numero id) y si se le vuelve a dar (desmarcarlo) deberia ocultarlo y si se vuelve a marcar mostrarlo (ya esta creado). No se si es posible hacerlo asi, en realidad eso es lo que deberia ocurrir, se podría hacer de la manera mas simple.

Estaba pensando en hacer algo como:

Código (jquery) [Seleccionar] Expandir

var $start = $("#slider").slider('value');
$(new Array($start)).each(function () {
    $('body').on('click', '#showChck input', function() {
        console.log('presionado');
        $("#showSldr").append(
            $('<div></div>', {id: $start, class: "slider", }),
            $('Lineas: <span>1</span>', {id: 'result-' + $start}).text($start)
         );
    });
    $start++;
});


El slider no tiene para mover y el id siempre es 2...
Otro problema es que al darle otra vez al mismo checkbox crea otro en lugar de ocultar.

Es más complicado de lo que creia...

Muchas gracias! Es justo lo que necesitaba

¿Habrá alguna forma de que aparezcan al reves? ¿El número 1 al principio?

Por ultimo tengo que crear un click function para los checkboxes y creen un slider cada uno, ¿como puedo acceder al array de la funcion de arriba? ¿O hay que hacerla de nuevo? La cuestión es acceder al ui.value de #slider...

Código (jquery) [Seleccionar] Expandir

$("#checkbox-" + start).click(function(){
    $("#showSldr").prepend(
        $('<div></div>', {id: "slider-" + start, class: "slider", }),
        $('Lineas: <span>1</span>', {id: 'result-' + start}).text(start)
    );
});

Hola buenas!

Estoy creando un formulario un poco complejo y necesito que al cambiar el value de un slider aparezcan checkbox segun el numero del value.

Código (jquery) [Seleccionar] Expandir

$("#slider").slider({
min: 1,
max: 100,
value: 1,
slide: function( event, ui ) {
$( "#result" ).html( ui.value );
}
});


Código (html5) [Seleccionar] Expandir

<div id="slider" class="slider"></div><br>
Cantidad: <span id="result">1</span>

Código (html5) [Seleccionar] Expandir

<div data-role="fieldcontain" style="display:none;">
<fieldset data-role="controlgroup" data-type="horizontal">
  <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
  <label for="checkbox-1">1</label>
</fieldset>
</div>

¿Como puedo hacer esto? ¿Usando simplemente jquery append para crear los checkboxes?

Gracias!

Hola buenas, estoy intentando pasar unas fechas a formato entero de unix con la función strtotime() pero devuelve dos horas menos; al solo ser fecha sin hora pues al convertir unix a un formato leible deberia verse 00:00:00, pero en lugar de eso aparece 22:00:00 y un dia menos.

Es para almacenar fechas de nacimiento en la db y prefiero que se almacenen en formato entero, por ejemplo mi fecha de nacimiento la introduzco en el campo:
04/04/1993 o 04-04-1993 (en este caso da igual, pero tendré que decidir si uso formato americano o europeo)
y strtotime devuelve:

Código (php) [Seleccionar] Expandir

print strtotime($client_info[3]);
//733874400 -> Sat, 03 Apr 1993 22:00:00 GMT
Para saber si se ha convertido bien uso una herramienta de conversion, por ejemplo onlineconversion y me encuentro con el problema. Sin embargo si trato de convertir mi fecha usando esta web me devuelve:

733881600 -> Sun, 04 Apr 1993 00:00:00 GMT

Ese unix timestamp si que es correcto.

¿A alguien le ha pasado esto? ¿Como puedo solucionarlo?

Gracias!

Edito: no creo que sea por el filtrado...

Código (php) [Seleccionar] Expandir

$client_info = filter_input(INPUT_POST, 'client_info', FILTER_SANITIZE_STRING, FILTER_REQUIRE_ARRAY);