Activa las notificaciones push PhoneGap Spain

Foro

Home Forums Programación Html5 capturar data atributes de items en un modal con jquery mobile

This topic contains 2 replies, has 2 voices, and was last updated by  shockdude 19 horas, 15 minutos .

Viendo 3 respuestas - de la 1 a 3 (de 3 en total)
  • capturar data atributes de items en un modal con jquery mobile

    Intervenciones
  • shockdude 
    Participant

    Hola a todos!

    Estoy desarrollando un menú de comidas en jquery mobile, y lo que busco es que al seleccionar un item del menú, se abra un modal para preguntar que cantidad quiero de ese menú y luego lo guardo.

    El problema que estoy teniendo es que no se como capturar los data atributes de ese menú para pasarselo al modal y así poder guardar la cantidad del producto seleccionado.

    Me explico mejor con éste código:

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.

    <div id="menu">

        <ul data-role="listview" data-inset="true">
          <li data-icon="plus"><a href="#modal"><h2>item x</h2><p>$100</p></a></li>
          <li data-icon="plus"><a href="#"><h2>item 2</h2><p>$100</p></a></li>
          <li data-icon="plus"><a href="#"><h2>item 3</h2><p>$100</p></a></li>
          <li data-icon="plus"><a href="#"><h2>item 4</h2><p>$100</p></a></li>
          <li data-icon="plus"><a href="#"><h2>item 5</h2><p>$100</p></a></li>

        </ul>
      </div>

    al hacer click en el primer item , se abre el modal preguntando la cantidad que quiero de ese item.

     Code: arbitrary (select
    1.
    2.
    3.
    4.
    5.
    6.
    7.
    8.
    9.
    10.
    11.
    12.

    <!-- modal -->
    <div id="modal">

        <div>
            <h1>CANTIDAD?</h1>
            

    <input type="number" name"cantidad" id="cantidad">

            <a href="#menu" id="dialog_cantidad"> OK </a>
        </div>
    </div>

    debería capturar el data-nombre=”itemx” data-id=”1″ (en este caso del ejemplo en el primer item). Alguna sugerencia? o quizás mi lógica está mal y debo hacerlo de otra forma?

    Agradezco cualquier ayuda.


    Jose Jesus Perez Rivas
    Jose Jesus Perez Rivas 
    Keymaster

    Hola

    Una forma rápida es que en cada opción del menú añadas un evento “onclick” que llame a una función JavaScript y que sea en esta donde guardes mediante LocalStorage de JavaScript a que item has pulsado.

    un ejemplo sería:

    1.  <li data-icon="plus"><a href="#modal" onclick="saveData(item, x)"><h2>item x</h2><p>$100</p></a></li>

     Code: arbitrary (select
    1.
    2.
    3.
    4.

    function saveData(item, x){
    localStorage.setItem('valor_de_item', item);
    localStorage.setItem('valor_de_x', x);
    }

    Aquí tienes más info: https://developer.mozilla.org/es/docs/Web/API/Window/localStorage

    Espero te sea de ayuda.


    CEO y Director de desarrollo en Cero y Uno Desarrollamos Aplicaciones – ¿tienes algún proyecto? ¡trabajemos juntos! contacto@ceroyuno.eshttp://www.ceroyuno.es Fundador de PhoneGap Spain http://www.phonegapspain.com Twitter: https://twitter.com/JoseJ_PR


    shockdude 
    Participant

    Jose, gracias por tu respuesta.

    Por ahora logré resolverlo enlazando el dialog/modal con el listview

     Code: arbitrary (select
    1.
    2.
    3.

    $('a[data-rel="dialog"]').bind('click', function(event){
       $('#id').html($(this).attr('data-id'));
    });

    en el dialog o modal que se abre puse un input type hidden hacia donde le transmito el ID del item del listbox que abrió dicho modal. Luego tomo los valores del modal con var itemId = $(‘#id’).val();

    Tomaré en cuenta lo de llamar la función en el onclick(), creo que voy ahorrar pasos.

    Saludos!


Viendo 3 respuestas - de la 1 a 3 (de 3 en total)

You must be logged in to reply to this topic.