Anexión de elementos dinámicamente a jQuery Mobile ListView

Quiero adjuntar dinámicamente los datos recibidos a través de una url en formato JSOn a mi vista de lista. Pero no puedo entender cómo funciona.Anexión de elementos dinámicamente a jQuery Mobile ListView

El sitio web móvil recuperar el objeto con el siguiente formato:

[ 
    {"id":1, "start":"2011-10-29T13:15:00.000+10:00", "end":"2011-10-29T14:15:00.000+10:00", "title":"Meeting"} 
]

En el .html tengo una vista de lista y una función, donde trato de añadir los datos recibidos. Solo muestro el cuerpo

<body> 
     <div> 
      <ul id="listview"> 
       <script>$.getJSON("url", 
       function(data){ 
        $.each(data, function(i,data){ 
         i.title.appendTo("#listview"); 
        });});</script> 
      </ul> 
     </div> 
</body>

Probablemente es muy fácil, pero yo soy nuevo en la programación web y no puedo encontrar la manera de que yo debería añadir los datos recuperados.

¿Alguien puede ayudarme?

Fuente

2011-10-31 João Nunes

//make AJAX call to url 
$.getJSON("url", function(data){ 

    //declare a variable with which to build our output (it's best to buffer output and only do one append at the end since DOM manipulation is CPU expensive) 
    var output = ''; 

    //iterate through the data (we could also get rid of the jQuery here by using `for (key in data) { 
    $.each(data, function(index, value){ 

     //add each value to the output buffer (we also have access to the other properties of this object: id, start, and end) 
     output += '<li>' + value.title + '</li>'; 
    }); 

    //now append the buffered output to the listview and either refresh the listview or create it (meaning have jQuery Mobile style the list) 
    $('#listview').append(output).listview('refresh');//or if the listview has yet to be initialized, use `.trigger('create');` instead of `.listview('refresh');` 
});

Aquí es una jsFiddle de la solución anterior (hay también un ejemplo del uso for(){} en lugar de $.each()): http://jsfiddle.net/VqULm/

Fuente

2011-11-01 00:55:00 Jasper

Gracias, funcionó para mí. –

The .listview ('refresh') es lo que necesitaba, gracias – mintedsky

Creo que el problema que puede encontrar es que el JSON que se devuelve es un objeto envuelto en una matriz. Para analizar que tendrá que recorrer la matriz primero:

for(var x = 0; x < data.length; x++) { 
var i = data[ x ]; 
i.title.appendTo("#listview"); 
}

Fuente

2011-10-31 23:57:55 buley

Creo que fue un problema, pero lamentablemente no resolvió todo. Debe tener otro problema. Gracias de todos modos;) –

favor actualice la vista de lista después de appetar o eliminar. A menos que actualice no se puede ver nada.

$('#listview').append(output).listview('refresh');

Fuente

2012-01-04 10:15:47 shyamshyre

estoy anexando como this..Its que trabajan para anexar .. puede ser útil para usted o para otros :)

  $.each(data.values, function(key, value) { 

      $('#activity_contacts').append('<li id="activity_contacts" data-id="' + value.contact_id + '">' + value.display_name + '</li>'); 
      $("#activity_contacts").listview("refresh"); 


      });

Toda mi autocompletar es así:

function contactSearchForActivities (q) { 
    $.mobile.showPageLoadingMsg('Searching'); 
    $().crmAPI ('Contact','get', 
     {'version' :'3', 'activity_sort_name': q, 'return' : 'display_name' }, 
     { 
     ajaxURL: crmajaxURL, 
     success:function (data){ 
      if (data.count == 0) { 
      cmd = null; 
      } 
      else { 
      cmd = "refresh"; 
      $('#activity_contacts').show(); 
      $('#activity_contacts').empty(); 
      } 
      //console.log(data); 

      //loop to go through the values in order to display them in a li as a list 


      $.each(data.values, function(key, value) { 

      $('#activity_contacts').append('<li id="' + value.contact_id + '" title = "' + value.display_name +'">' + value.display_name + '</li>'); 

    }); 

    $("#activity_contacts li").click(function() { 

    $('#activity_sort_name').val(this.title); 
    $('#activity_hidden_id').val(this.id); 
      $("#activity_contacts").empty(); 
    }); 

      $.mobile.hidePageLoadingMsg(); 
      $('#activity_contacts').listview(cmd); 
     } 
     }); 
    }

Fuente

2013-03-26 17:25:42 Developer

Si está intentando recrear una vista de lista, deberá activar .trigger (crear) y .listview (actualizar) la lista. El problema se explica en http://liljosh.com/jquery-mobile-dynamicly-appending-to-listview-via-ajax-issue/

Fuente

2014-03-09 16:07:46

¡Hola Josh! Tómese un momento para leer las políticas sobre [autopromoción] (http://stackoverflow.com/help/behavior). Además, hay muchos mensajes que hablan sobre el mismo problema en meta. Aquí está uno de ellos: http://meta.stackexchange.com/questions/57497/limits-for-self-promotion-in-answers – Lix

Por lo que puedo ver en tu perfil, te has auto promocionado ** bastante**. – Lix

Anexión de elementos dinámicamente a jQuery Mobile ListView

Respuesta

Cuestiones relacionadas