New question

Question:

 
  0  
 
Date: 26-06-2019 20:30:59 (In Spanish)

Ruleta Jquery[Resolved]

Tengo una ruleta hecha con jquery el codigo es de la pagina https://www.comerline.es/owl-roulette/ , genero los elementos de manera dinamica pero necesito capturar la descripcion aparte del id del objeto seleccionado el archivo js es este:
var stoping = false;
var itemSelected = 0;

jQuery(function ($) {
var $owl = $('.owl-carousel');

// Initialize Owl
$('.owl-carousel').owlCarousel({
center: true,
loop: true,
margin: 10,
nav: false,
mouseDrag: false,
touchDrag: false,
pullDrag: false,
dots: false,
responsive: {
0: {
items: 3
},
600: {
items: 3
},
1000: {
items: 7
}
}
});

// Click in button Jump
$('#js-btn-jump').click(function (e) {
e.preventDefault();
stoping = false;
var max = $("#maximo").val();

// Random between 1 and 10
itemSelected = Math.floor((Math.random() * max) + 1);
var $jump = $(this);
$jump.html('Jugando...');
$jump.attr('disabled', 'disabled');
// Trigger autoplay owl
$owl.trigger('play.owl.autoplay', [100]);
// Slow speed by step
setTimeout(slowSpeed, 2000, $owl, 200);
setTimeout(slowSpeed, 4000, $owl, 250);
setTimeout(slowSpeed, 5000, $owl, 300);
setTimeout(stopAutoplay, 6000);
return false;
});

// Event changed Owl
$owl.on('changed.owl.carousel', function (e) {
if (stoping) {
// Examine only if roulette stop

var index = e.item.index;

var element = $(e.target).find(".owl-item").eq(index).find('.element-roulette');
var item = element.data('item');


if (item == itemSelected) {

// If element equals to random, stop roulette
$owl.trigger('stop.owl.autoplay');
$('#js-btn-jump').html('Girar');

$("#mostrar").css("display","none");
alert("Elemento Ganador!!!!" + item);


$.ajax({
type: "POST",
url: "ejemplo.php",
data: {id: item}, // Adjuntar los campos del formulario enviado.
success: function(data)
{
$("#cochi").html(data);

}
});

//$('#js-btn-jump').removeAttr('disabled');



}

}
});

// Showcase
slowSpeed($owl, 1400);

});

/**
* Reduce speed roulette
* @param {type} $owl
* @param {type} speed
* @returns {undefined}
*/
function slowSpeed($owl, speed) {
$owl.trigger('play.owl.autoplay', [speed]);
}

/**
* Stop autoplay roulette
* @returns {undefined}
*/
function stopAutoplay() {
stoping = true;
}
y los elementos html:
<div class="owl-carousel owl-theme">

<?php


$stmt = $DB_con->prepare('SELECT * FROM premios');

$stmt->execute();


if($stmt->rowCount() > 0)
{
while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
extract($row);
?>
<div class="item element-roulette" data-item="<?php echo $row['id']; ?>"><img src="<?php echo $row['img']; ?>" alt="<?php echo $row['descripcion']; ?>">

</div>

<?php }
}
?>


</div>
La descripcion la agrego en la etiqueta alt de la imagen, cómo puedo hacer para capturarla?.Gracias.
Tags: JQuery - PHP Votes: 0 - Answers: 10 - Views: 14 Share on: Google Facebook Twitter LinkedIn Link
 

Answers:

  • Date: 27-06-2019 12:56:39 Pon la descripción e ID en un data-nombre (Aun que el id por lo regular lo puedes leer directo) , así en donde "seleccionas" o "mandas a llamar" al id que esta visible, solo lees el data que requieres.

    de un vistazo rapido vi que en donde esta activo es en:

    var element = $(e.target).find(".owl-item").eq(index).find('.element-roulette');
    var item = element.data('item');

    Asi que solo deberias leer el data-descripción. Mas info aqui
    Saludos Terrícola...

    Stryfe™
      Votes: 1 - Link answer
     
  •  
      0  
     
    Date: 28-06-2019 06:38:27 Disculpa mi gran ignorancia en jquery, pero aun viendo el api, que ya lo había hecho, no me queda claro y esa es justamente la parte que no comprendo, qué tengo que adaptar de este fragmento: var element = $(e.target).find(".owl-item").eq(index).find('.element-roulette'); para capturar ese valor que necesito?.Gracias.   Votes: 0 - Link answer
     
  • Date: 28-06-2019 07:37:13 En si ya tienes el id por decir asi guardado en el html, en donde recorres la base de datos para presentar:

    <div class="item element-roulette" data-item="<?php echo $row['id']; ?>">
    <img src="<?php echo $row['img']; ?>" alt="<?php echo $row['descripcion']; ?>">
    </div>


    Ahora aqui el cambio seria algo asi:
    <div class="item element-roulette itemganador<?php echo $row['id']; ?>" data-item="<?php echo $row['id']; ?>"  data-descripcion="<?php echo $row['descripcion']; ?>">
       <img src="<?php echo $row['img']; ?>" alt="<?php echo $row['descripcion']; ?>">
    </div>




    y en donde mandas la alerta, me imagino que esta correcto:

    alert("Elemento Ganador!!!!" + item);

    item <-- tienes el id ahi ahora solo quedaria:

    cambialo por:
    alert("Descripcion del Elemento Ganador!!!!" + $(".itemganador"+item).data('descripcion') );


    Saludos terricola...

    Stryfe™
      Votes: 1 - Link answer
     
  •  
      0  
     
    Date: 28-06-2019 13:02:54 Buenísimo amigo, justo lo que necesitaba, te lo agradezco montones!!!!!!   Votes: 0 - Link answer
     
  •  
      0  
     
    Date: 10-07-2019 12:53:54 Saludos de nuevo @Ernesto Esteves, mira necesito ayuda de nuevo, como se hace para obtener un numero aleatorio pero solo de un grupo de valores desde un arreglo por ejemplo tengo esto: var arreglo = [1,3,20] , tengo esta funcion: itemSelected = Math.floor((Math.random() * maximo) + 1);
    cómo puedo modificarla para generar un numero aleatorio pero solo con esos tres numeros,Gracias.
      Votes: 0 - Link answer
     
  • Date: 10-07-2019 13:56:04 Saludos HQM

    eso es sencillo a partir del "tamaño" del arreglo...

    Te daria el pseudocodigo pero es casi igual que el codigo... Asi que estoy de buenas....

    var items = [1,3,20]
    var item = items[Math.floor(Math.random()*items.length)];
    


    Te recomiendo que todo ello es mejor lo hagas mediante php ya que puedes hacer mas comprobaciones, en caso que lo hagas por javascript es mejor que lo hagas en funcion, y recuerda el "items" no debe estar vacio (agregale validacion en la funcion)

    Saludos Terricola.

    Stryfe™
      Votes: 1 - Link answer
     
  •  
      0  
     
    Date: 24-07-2019 12:10:20 Hola @Ernesto Esteves, me podrías ayudar de nuevo? mira instalé composer en local el path quedó así: C:\Documents and Settings\Usuario\Datos de programa\Composer\vendor\bin pero desde el cmd no funciona cualquier ruta que intento me dice " el sistema no puede encontrar la ruta especificada", lo que quiero es descargar la librería culqi-php especificamente la carpeta vendor.Gracias.   Votes: 0 - Link answer
     
  • Date: 24-07-2019 13:17:35 Saludos... por lo regular es que no debes instalar con espacios en blanco... (en primer lugar)
    Segundo verifica que el "path" este correctamente (en las variables de entorno, utiliza un buscador para ayudarte a ver sobre variables de entorno, sirve que te "empapas" de esa informacion)

    Y es por lo regular que es el problema ese...

    Formas de probar rapidamente:
    Cambiate desde en la pantalla de comandos a la ruta donde lo instalaste, para ver que funcione ... si es asi deberas desinstalar e instalar en una carpeta sin espacios y de preferencia pequeña y en la raiz, ejemplos:

    c:/software/algo/
    c:/algo/
    c:/algo/algo/algo/

    Que me han dado error:
    c:/archivos de programa/programa/
    c:/prueba realizada/algo mas/algo/


    Saludos terricola.

    Stryfe™
      Votes: 1 - Link answer
     
  •  
      0  
     
    Date: 24-07-2019 16:44:48 Otra consulta, sabes de algun sitio del cual pueda descargar librerias y sus dependencias sin necesidad de composer?   Votes: 0 - Link answer
     
  •  
      0  
     
    Date: 25-07-2019 14:34:24 @Ernesto Esteves te molesto otra vez, podrías ver el siguiente código y decirme qué es lo que está mal, es la API de culqi:
    <script src="https://checkout.culqi.com/js/v3"></script>




    <script type="text/javascript">

    $(document).ready(function(){

    Culqi.publicKey = 'xxxxxxxxxxxx';


    });
    </script>

    <script type="text/javascript">
    $(document).ready(function(){
    var precio = $("#precio").val();
    Culqi.settings({
    title: 'Unbox',
    currency: 'PEN',
    description: 'Compra de Llaves',
    amount: precio
    });

    });


    </script>
    <script>
    $(document).ready(function(){

    $('.pagar').on('click', function(e) {
    // Abre el formulario con la configuración en Culqi.settings
    Culqi.open();
    e.preventDefault();


    });

    function culqi() {
    if (Culqi.token) { // ¡Objeto Token creado exitosamente!
    var token = Culqi.token.id;

    alert('Se ha creado un token:' + token);

    var url = "confirmar-culqi.php";
    var precio = $("#precio").val();
    $.ajax({
    type: "POST",
    url: url,
    data: {"token": token,"precio":precio}, // Adjuntar los campos del formulario enviado.
    success: function(data)
    {
    alert("El pago se ha ejecutado correctamente");


    },
    error: function(error_data) {
    alert("Huno un Problema, inténtelo nuevamente");
    }
    });

    //En esta linea de codigo debemos enviar el "Culqi.token.id"
    //hacia tu servidor con Ajax
    } else { // ¡Hubo algún problema!
    // Mostramos JSON de objeto error en consola
    console.log(Culqi.error);
    alert(Culqi.error.user_message);
    }
    };


    });


    </script>

    Luego el php que recibe los valores es este:
    <?php
    $token = "";
    if (isset($_POST["token"])) {
    $token = $_POST["token"];
    }

    $precio = "";
    if (isset($_POST["precio"])) {
    $precio = $_POST["precio"];
    }


    header('Content Type: application/json');

    require 'vendor/autoload.php';
    require"request/library/Requests.php";
    Requests::register_autoloader();
    require"culqi/lib/culqi.php";

    use Culqi/Culqi;


    $secretKey="xxxxxxxxxxxx";
    $culqi =newCulqi\Culqi(array('secret_key' => $secretKey));
    try {
    $charge = $culqi->Charges->create(
    array(
    "amount" => $_POST['precio'],
    "currency_code" => "PEN",
    "email" => "test@culqi.com",
    "description" => "Compra de llaves",
    "source_id" => $_POST['token'],
    "installments" => 0,
    "capture" => true
    )
    );


    //Respuesta
    echo json_encode($charge);
    }

    catch (Exception $e) {
    echo json_encode($e->getMessage());
    }

    ?>
    Gracias.
      Votes: 0 - Link answer
     
To actively participate in the community first must authenticate, enter the system.Sign In